Alignment with Carbon version 10.27 (#495)

* chore(deps-dev): bump devDependencies

* docs: update number of available carbon icons

* feat(notification): distinguish dispatched close event between click/timeout

* fix(notification): prevent class from being overriden by $$restProps

* docs(notification): improve example body copy

* fix(notification): remove notificationType prop

* refactor(notification): resolve svelte file in imports

* fix(notification): prevent class from being overridden by $$restProps

* feat(notification): update TS signature for dispatched close event

* docs: update contributing

* fix(loading): adjust spinner styles

* feat(tag): support custom icon variant

* feat(tile): add optional expand/collapse icon labels to ExpandableTile

* feat(code-snippet): support disabled state for single and multi-line types

* fix(code-snippet): remove impossible class directive

* fix(code-snippet): showMoreLess button size should be "field", not "small"

* fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

* fix(text-input): add missing warning field wrapper class

* feat(button): infer hasIconOnly using $$slots API

- requires Svelte version >=3.25

* docs(button): add danger tertiary, icon-only example

* feat(button): set default values for tooltip alignment, position

* docs: document dynamic theming

* fix(modal): correctly set class props #482

* fix(form): forward submit event in FluidForm #487

* feat(dropdown): support warning state

* feat(multi-select): support warning state

* fix(multi-select): prevent dropdown from opening if disabled

* feat(number-input): support warning state

* chore(deps-dev): upgrade devDependencies

* docs:  bump @carbon/themes, carbon-components

* refactor(data-table): co-locate DataTableSkeleton with DataTable

* docs: update number of pictograms

* fix(password-input): add missing "bx--btn" class to visibility toggle

* docs: increase z-index for component preview

src/Button/Button.svelte

@@ -17,7 +17,10 @@
    */
   export let size = "default";
 
-  /** Set to `true` for the icon-only variant */
+  /**
+   * Set to `true` for the icon-only variant
+   * @deprecated inferred using the $$slots API
+   */
   export let hasIconOnly = false;
 
   /**
@@ -37,13 +40,13 @@
    * `hasIconOnly` must be set to `true`
    * @type {"start" | "center" | "end"}
    */
-  export let tooltipAlignment = undefined;
+  export let tooltipAlignment = "center";
 
   /**
    * Set the position of the tooltip relative to the icon
    * @type {"top" | "right" | "bottom" | "left"}
    */
-  export let tooltipPosition = undefined;
+  export let tooltipPosition = "bottom";
 
   /**
    * Set to `true` to render a custom HTML element
@@ -80,6 +83,7 @@
   $: if (ctx && ref) {
     ctx.declareRef(ref);
   }
+  $: hasIconOnly = icon && !$$slots.default;
   $: buttonProps = {
     role: "button",
     type: href && !disabled ? undefined : type,

src/CodeSnippet/CodeSnippet.svelte

@@ -18,6 +18,12 @@
   /** Set to `true` to hide the copy button */
   export let hideCopyButton = false;
 
+  /**
+   * Set to `true` for the disabled variant
+   * Only applies to the "single", "multi" types
+   */
+  export let disabled = false;
+
   /**
    * Set to `true` to wrap the text
    * Note that `type` must be "multi"
@@ -141,7 +147,6 @@
   {:else}
     <div
       class:bx--snippet="{true}"
-      class:bx--btn--copy="{type === 'inline'}"
       class:bx--snippet--expand="{expanded}"
       class:bx--snippet--light="{light}"
       class:bx--snippet--no-copy="{hideCopyButton}"
@@ -149,6 +154,7 @@
       class:bx--snippet--single="{type === 'single'}"
       class:bx--snippet--inline="{type === 'inline'}"
       class:bx--snippet--multi="{type === 'multi'}"
+      class:bx--snippet--disabled="{type !== 'inline' && disabled}"
       {...$$restProps}
       on:mouseover
       on:mouseenter
@@ -156,7 +162,7 @@
     >
       <div
         role="{type === 'single' ? 'textbox' : undefined}"
-        tabindex="{type === 'single' ? '0' : undefined}"
+        tabindex="{type === 'single' && !disabled ? '0' : undefined}"
         aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
         class:bx--snippet-container="{true}"
       >
@@ -168,6 +174,7 @@
       </div>
       {#if !hideCopyButton}
         <CopyButton
+          disabled="{disabled}"
           feedback="{feedback}"
           feedbackTimeout="{feedbackTimeout}"
           iconDescription="{copyButtonDescription}"
@@ -178,8 +185,9 @@
       {#if showMoreLess}
         <Button
           kind="ghost"
-          size="small"
+          size="field"
           class="bx--snippet-btn--expand"
+          disabled="{disabled}"
           on:click="{() => {
             expanded = !expanded;
           }}"

src/ComposedModal/ModalHeader.svelte

@@ -31,7 +31,7 @@
     <p
       class:bx--modal-header__label="{true}"
       class:bx--type-delta="{true}"
-      class:labelClass
+      class="{labelClass}"
     >
       {label}
     </p>
@@ -40,7 +40,7 @@
     <p
       class:bx--modal-header__heading="{true}"
       class:bx--type-beta="{true}"
-      class:titleClass
+      class="{titleClass}"
     >
       {title}
     </p>
@@ -51,7 +51,7 @@
     title="{iconDescription}"
     aria-label="{iconDescription}"
     class:bx--modal-close="{true}"
-    class:closeClass
+    class="{closeClass}"
     on:click
     on:click="{closeModal}"
   >

src/DataTable/index.js

@@ -1,4 +1,5 @@
 export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";
 export { default as Table } from "./Table.svelte";
 export { default as TableBody } from "./TableBody.svelte";
 export { default as TableCell } from "./TableCell.svelte";

src/DataTableSkeleton/index.js

@@ -1 +0,0 @@
-export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";

src/Dropdown/Dropdown.svelte

@@ -54,6 +54,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /** Specify the helper text */
   export let helperText = "";
 
@@ -82,7 +88,8 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import {
     ListBox,
     ListBoxMenu,
@@ -148,8 +155,7 @@
     id="{id}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
-      {open && 'bx--dropdown--open'}
+    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
       {size === 'sm' && 'bx--dropdown--sm'}
       {size === 'xl' && 'bx--dropdown--xl'}
       {inline && 'bx--dropdown--inline'}
@@ -163,10 +169,17 @@
     invalid="{invalid}"
     invalidText="{invalidText}"
     light="{light}"
+    warn="{warn}"
+    warnText="{warnText}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled16
+        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+      />
+    {/if}
     <button
       bind:this="{ref}"
       class:bx--list-box__field="{true}"
@@ -220,7 +233,7 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
-  {#if !inline && !invalid && helperText}
+  {#if !inline && !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}"

src/FluidForm/FluidForm.svelte

@@ -5,6 +5,6 @@
   setContext("Form", { isFluid: true });
 </script>
 
-<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}">
+<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}" on:submit>
   <slot />
 </Form>

src/ListBox/ListBox.svelte

@@ -25,6 +25,12 @@
 
   /** Specify the invalid state text */
   export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
 </script>
 
 <div
@@ -38,6 +44,7 @@
   class:bx--list-box--disabled="{disabled}"
   class:bx--list-box--expanded="{open}"
   class:bx--list-box--light="{light}"
+  class:bx--list-box--warning="{!invalid && warn}"
   {...$$restProps}
   on:keydown
   on:keydown="{(e) => {
@@ -52,3 +59,6 @@
 {#if invalid}
   <div class:bx--form-requirement="{true}">{invalidText}</div>
 {/if}
+{#if !invalid && warn}
+  <div class:bx--form-requirement="{true}">{warnText}</div>
+{/if}

src/Loading/Loading.svelte

@@ -14,7 +14,7 @@
   /** Set an id for the label element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  $: spinnerRadius = small ? "26.8125" : "37.5";
+  $: spinnerRadius = small ? "42" : "44";
 </script>
 
 {#if withOverlay}
@@ -33,20 +33,20 @@
     >
       <!-- svelte-ignore a11y-label-has-associated-control -->
       <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-      <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
+      <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
           <circle
             class:bx--loading__background="{true}"
-            cx="0"
-            cy="0"
+            cx="50%"
+            cy="50%"
             r="{spinnerRadius}"
           ></circle>
         {/if}
         <circle
           class:bx--loading__stroke="{true}"
-          cx="0"
-          cy="0"
+          cx="50%"
+          cy="50%"
           r="{spinnerRadius}"
         ></circle>
       </svg>
@@ -64,20 +64,20 @@
   >
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-    <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
+    <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}
         <circle
           class:bx--loading__background="{true}"
-          cx="0"
-          cy="0"
+          cx="50%"
+          cy="50%"
           r="{spinnerRadius}"
         ></circle>
       {/if}
       <circle
         class:bx--loading__stroke="{true}"
-        cx="0"
-        cy="0"
+        cx="50%"
+        cy="50%"
         r="{spinnerRadius}"
       ></circle>
     </svg>

src/MultiSelect/MultiSelect.svelte

@@ -90,6 +90,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /** Specify the helper text */
   export let helperText = "";
 
@@ -112,8 +118,9 @@
    */
 
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import { Checkbox } from "../Checkbox";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import Checkbox from "../Checkbox/Checkbox.svelte";
   import {
     ListBox,
     ListBoxField,
@@ -243,6 +250,8 @@
     open="{open}"
     light="{light}"
     size="{size}"
+    warn="{warn}"
+    warnText="{warnText}"
     class="bx--multi-select {filterable && 'bx--combo-box'}
       {filterable && 'bx--multi-select--filterable'}
       {invalid && 'bx--multi-select--invalid'}
@@ -252,11 +261,17 @@
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled16
+        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+      />
+    {/if}
     <ListBoxField
       role="button"
       tabindex="0"
       aria-expanded="{open}"
       on:click="{() => {
+        if (disabled) return;
         if (filterable) {
           open = true;
           inputRef.focus();
@@ -415,7 +430,7 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
-  {#if !inline && !invalid && helperText}
+  {#if !inline && !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}"

src/Notification/InlineNotification.svelte

@@ -1,9 +1,7 @@
 <script>
   /**
-   * Set the type of notification
-   * @type {"toast" | "inline"}
+   * @event {{ timeout: boolean }} close
    */
-  export let notificationType = "inline";
 
   /**
    * Specify the kind of notification
@@ -42,14 +40,14 @@
   let open = true;
   let timeoutId = undefined;
 
-  function close() {
+  function close(closeFromTimeout) {
     open = false;
-    dispatch("close");
+    dispatch("close", { timeout: closeFromTimeout === true });
   }
 
   onMount(() => {
     if (timeout) {
-      timeoutId = setTimeout(() => close(), timeout);
+      timeoutId = setTimeout(() => close(true), timeout);
     }
 
     return () => {
@@ -65,7 +63,12 @@
     class:bx--inline-notification="{true}"
     class:bx--inline-notification--low-contrast="{lowContrast}"
     class:bx--inline-notification--hide-close-button="{hideCloseButton}"
-    class="{kind && `bx--inline-notification--${kind}`}"
+    class:bx--inline-notification--error="{kind === 'error'}"
+    class:bx--inline-notification--info="{kind === 'info'}"
+    class:bx--inline-notification--info-square="{kind === 'info-square'}"
+    class:bx--inline-notification--success="{kind === 'success'}"
+    class:bx--inline-notification--warning="{kind === 'warning'}"
+    class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -74,14 +77,14 @@
   >
     <div class:bx--inline-notification__details="{true}">
       <NotificationIcon
-        notificationType="{notificationType}"
+        notificationType="inline"
         kind="{kind}"
         iconDescription="{iconDescription}"
       />
       <NotificationTextDetails
         title="{title}"
         subtitle="{subtitle}"
-        notificationType="{notificationType}"
+        notificationType="inline"
       >
         <slot />
       </NotificationTextDetails>
@@ -90,7 +93,7 @@
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"
-        notificationType="{notificationType}"
+        notificationType="inline"
         on:click="{close}"
       />
     {/if}

src/Notification/NotificationActionButton.svelte

@@ -1,12 +1,12 @@
 <script>
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 </script>
 
 <Button
   kind="ghost"
   size="small"
-  class="bx--inline-notification__action-button"
   {...$$restProps}
+  class="bx--inline-notification__action-button {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/Notification/NotificationButton.svelte

@@ -20,7 +20,7 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Close icon";
 
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 </script>
 
 <button
@@ -38,7 +38,6 @@
   <svelte:component
     this="{renderIcon}"
     title="{title}"
-    class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
-      {notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
+    class="bx--{notificationType}-notification__close-icon"
   />
 </button>

src/Notification/NotificationIcon.svelte

@@ -14,12 +14,12 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Closes notification";
 
-  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
-  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
-  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20";
-  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20";
-  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20";
-  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20";
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20/CheckmarkFilled20.svelte";
+  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20/ErrorFilled20.svelte";
+  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20/InformationFilled20.svelte";
+  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20/InformationSquareFilled20.svelte";
+  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20/WarningFilled20.svelte";
+  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20/WarningAltFilled20.svelte";
 
   const icons = {
     error: ErrorFilled20,

src/Notification/ToastNotification.svelte

@@ -1,9 +1,7 @@
 <script>
   /**
-   * Set the type of notification
-   * @type {"toast" | "inline"}
+   * @event {{ timeout: boolean }} close
    */
-  export let notificationType = "toast";
 
   /**
    * Specify the kind of notification
@@ -45,14 +43,14 @@
   let open = true;
   let timeoutId = undefined;
 
-  function close() {
+  function close(closeFromTimeout) {
     open = false;
-    dispatch("close");
+    dispatch("close", { timeout: closeFromTimeout === true });
   }
 
   onMount(() => {
     if (timeout) {
-      timeoutId = setTimeout(() => close(), timeout);
+      timeoutId = setTimeout(() => close(true), timeout);
     }
 
     return () => {
@@ -67,30 +65,29 @@
     kind="{kind}"
     class:bx--toast-notification="{true}"
     class:bx--toast-notification--low-contrast="{lowContrast}"
-    class="{kind && `bx--toast-notification--${kind}`}"
+    class:bx--toast-notification--error="{kind === 'error'}"
+    class:bx--toast-notification--info="{kind === 'info'}"
+    class:bx--toast-notification--info-square="{kind === 'info-square'}"
+    class:bx--toast-notification--success="{kind === 'success'}"
+    class:bx--toast-notification--warning="{kind === 'warning'}"
+    class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <NotificationIcon
-      notificationType="{notificationType}"
-      kind="{kind}"
-      iconDescription="{iconDescription}"
-    />
+    <NotificationIcon kind="{kind}" iconDescription="{iconDescription}" />
     <NotificationTextDetails
       title="{title}"
       subtitle="{subtitle}"
       caption="{caption}"
-      notificationType="{notificationType}"
     >
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"
-        notificationType="{notificationType}"
         on:click="{close}"
       />
     {/if}

src/NumberInput/NumberInput.svelte

@@ -55,6 +55,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /** Specify the helper text */
   export let helperText = "";
 
@@ -95,6 +101,7 @@
   import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
   import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
@@ -161,7 +168,10 @@
           <slot name="label">{label}</slot>
         </label>
       {/if}
-      <div class:bx--number__input-wrapper="{true}">
+      <div
+        class:bx--number__input-wrapper="{true}"
+        class:bx--number__input-wrapper--warning="{!invalid && warn}"
+      >
         <button
           type="button"
           aria-live="polite"
@@ -222,7 +232,10 @@
           <slot name="label">{label}</slot>
         </label>
       {/if}
-      <div class:bx--number__input-wrapper="{true}">
+      <div
+        class:bx--number__input-wrapper="{true}"
+        class:bx--number__input-wrapper--warning="{!invalid && warn}"
+      >
         <input
           bind:this="{ref}"
           type="number"
@@ -246,6 +259,11 @@
         {#if invalid}
           <WarningFilled16 class="bx--number__invalid" />
         {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled16
+            class="bx--number__invalid bx--number__invalid--warning"
+          />
+        {/if}
         <div class:bx--number__controls="{true}">
           <button
             type="button"
@@ -280,7 +298,7 @@
         </div>
       </div>
     {/if}
-    {#if !error && helperText}
+    {#if !error && !warn && helperText}
       <div
         class:bx--form__helper-text="{true}"
         class:bx--form__helper-text--disabled="{disabled}"
@@ -293,5 +311,8 @@
         {invalidText}
       </div>
     {/if}
+    {#if !error && warn}
+      <div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
+    {/if}
   </div>
 </div>

src/Tag/Tag.svelte

@@ -19,6 +19,12 @@
   /** Set the title for the close button in a filterable tag */
   export let title = "Clear filter";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -53,6 +59,7 @@
       class:bx--tag--cool-gray="{type === 'cool-gray'}"
       class:bx--tag--warm-gray="{type === 'warm-gray'}"
       class:bx--tag--high-contrast="{type === 'high-contrast'}"
+      {...$$restProps}
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -71,7 +78,8 @@
       </button>
     </div>
   {:else}
-    <span
+    <div
+      id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--red="{type === 'red'}"
@@ -85,12 +93,20 @@
       class:bx--tag--cool-gray="{type === 'cool-gray'}"
       class:bx--tag--warm-gray="{type === 'warm-gray'}"
       class:bx--tag--high-contrast="{type === 'high-contrast'}"
+      {...$$restProps}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-      <slot />
-    </span>
+      {#if icon}
+        <div class:bx--tag__custom-icon="{true}">
+          <svelte:component this="{icon}" />
+        </div>
+      {/if}
+      <span>
+        <slot />
+      </span>
+    </div>
   {/if}
 {/if}

src/TextInput/PasswordInput.svelte

@@ -30,13 +30,13 @@
    * Set the alignment of the tooltip relative to the icon
    * @type {"start" | "center" | "end"}
    */
-  export let tooltipAlignment = undefined;
+  export let tooltipAlignment = "center";
 
   /**
    * Set the position of the tooltip relative to the icon
    * @type {"top" | "right" | "bottom" | "left"}
    */
-  export let tooltipPosition = undefined;
+  export let tooltipPosition = "bottom";
 
   /** Set to `true` to enable the light variant */
   export let light = false;
@@ -72,9 +72,9 @@
   export let ref = null;
 
   import { getContext } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import View16 from "carbon-icons-svelte/lib/View16";
-  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
+  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
 
   const ctx = getContext("Form");
 
@@ -136,8 +136,11 @@
     />
     <button
       type="button"
+      disabled="{disabled}"
       class:bx--text-input--password__visibility__toggle="{true}"
+      class:bx--btn="{true}"
       class:bx--btn--icon-only="{true}"
+      class:bx--btn--disabled="{disabled}"
       class:bx--tooltip__trigger="{true}"
       class:bx--tooltip--a11y="{true}"
       class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
@@ -146,9 +149,13 @@
         type = type === 'password' ? 'text' : 'password';
       }}"
     >
-      <span class:bx--assistive-text="{true}">
-        {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
-      </span>
+      {#if !disabled}
+        <span class:bx--assistive-text="{true}">
+          {#if type === 'text'}
+            {hidePasswordLabel}
+          {:else}{showPasswordLabel}{/if}
+        </span>
+      {/if}
       {#if type === 'text'}
         <ViewOff16 class="bx--icon-visibility-off" />
       {:else}

src/TextInput/TextInput.svelte

@@ -63,8 +63,8 @@
   export let inline = false;
 
   import { getContext } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const ctx = getContext("Form");
 
@@ -127,6 +127,7 @@
       data-invalid="{invalid || undefined}"
       data-warn="{warn || undefined}"
       class:bx--text-input__field-wrapper="{true}"
+      class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
     >
       {#if invalid}
         <WarningFilled16 class="bx--text-input__invalid-icon" />

src/Tile/ExpandableTile.svelte

@@ -17,6 +17,12 @@
   /** Specify the icon text of the expanded tile */
   export let tileExpandedIconText = "Interact to collapse Tile";
 
+  /** Specify the icon label of the expanded tile */
+  export let tileExpandedLabel = "";
+
+  /** Specify the icon label of the collapsed tile */
+  export let tileCollapsedLabel = "";
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -27,7 +33,7 @@
   export let ref = null;
 
   import { afterUpdate } from "svelte";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
 
   let refContent = null;
   let refAbove = null;
@@ -45,10 +51,13 @@
   });
 </script>
 
-<div
+<button
   bind:this="{ref}"
+  type="button"
   id="{id}"
+  aria-expanded="{expanded}"
   tabindex="{tabindex}"
+  title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
   class:bx--tile="{true}"
   class:bx--tile--expandable="{true}"
   class:bx--tile--is-expanded="{expanded}"
@@ -60,45 +69,24 @@
     expanded = !expanded;
   }}"
   on:keypress
-  on:keypress="{(e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      expanded = !expanded;
-    }
-  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div bind:this="{refContent}">
     <div bind:this="{refAbove}" class:bx--tile-content="{true}">
-      <span
-        class:bx--tile-content__above-the-fold="{true}"
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-      >
+      <span class:bx--tile-content__above-the-fold="{true}">
         <slot name="above" />
       </span>
     </div>
-    <button
-      aria-expanded="{expanded}"
-      aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
-      class:bx--tile__chevron="{true}"
-    >
+    <div class:bx--tile__chevron="{true}">
+      <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
       <ChevronDown16 />
-    </button>
+    </div>
     <div class:bx--tile-content="{true}">
-      <span
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        class:bx--tile-content__below-the-fold="{true}"
-      >
+      <span class:bx--tile-content__below-the-fold="{true}">
         <slot name="below" />
       </span>
     </div>
   </div>
-</div>
+</button>

src/index.js

@@ -16,6 +16,7 @@ export {
 export { CodeSnippet, CodeSnippetSkeleton } from "./CodeSnippet";
 export {
   DataTable,
+  DataTableSkeleton,
   Table,
   TableBody,
   TableCell,
@@ -30,7 +31,6 @@ export {
   ToolbarMenu,
   ToolbarMenuItem,
 } from "./DataTable";
-export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
 export { Dropdown, DropdownSkeleton } from "./Dropdown";
 export {