Align v10.38 (#698)

* chore(deps-dev): upgrade carbon-components to v10.38.0

* feat(text-input): support read-only variant

* docs: use consistent lingo for inline variant examples

* docs(popover): add Popover alignment example

* fix(file-uploader): adjust markup to avoid accessibility errors

Ref: 0dfde60e3

* fix(inline-loading): use error filled icon

* fix(inline-loading): render iconDescription as title in error/warning icons

Ref: 51c53c923

* fix(structured-list): update accessibility attributes

* fix(tooltip-definition): use span instead of div

Ref: cb6de3025

* fix(multi-select): close menu when blurring the last filterable option

* fix(multi-select): open/focus field for filterable multiselect #635

* fix(multi-select): unblock focus when blurring input #635

* fix(combo-box): select correct item with keys, allow input after clearing #195

* fix(combo-box): update input text if item is selected

* feat(combo-box): render checkmark icon for selected item

* fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699

* fix(context-menu): update context menu classes #684

* docs(context-menu): improve demo instructions #684

* fix(context-menu): close menu when clicking anywhere

COMPONENT_INDEX.md

@@ -4072,7 +4072,8 @@ None.
 | warn        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state    |
 | warnText    | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                |
 | required    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required   |
-| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use inline version           |
+| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the inline variant       |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the read-only variant    |
 
 ### Slots
 

docs/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.37.0",
+    "carbon-components": "10.38.0",
     "carbon-components-svelte": "../",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",

docs/src/COMPONENT_API.json

@@ -10416,7 +10416,17 @@
         {
           "name": "inline",
           "kind": "let",
-          "description": "Set to `true` to use inline version",
+          "description": "Set to `true` to use the inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
           "type": "boolean",
           "value": "false",
           "isFunction": false,

docs/src/layouts/ComponentLayout.svelte

@@ -217,4 +217,8 @@
   [data-outline] {
     position: relative;
   }
+
+  [data-outline] ~ [data-outline] {
+    margin-top: var(--cds-spacing-08);
+  }
 </style>

docs/src/pages/components/Dropdown.svx

@@ -47,7 +47,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Inline type
+### Inline variant
 
 <Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},

docs/src/pages/components/MultiSelect.svx

@@ -79,7 +79,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Inline type
+### Inline variant
 
 <MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},

docs/src/pages/components/Popover.svx

@@ -36,6 +36,79 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
     </Popover>
 </div>
 
+### Popover alignment
+
+Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
+
+The default `align` value is `"top"`.
+
+<div data-outline>
+    Parent
+    <Popover open align="top-left">
+        <div style="padding: var(--cds-spacing-05)">top-left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="top-right">
+        <div style="padding: var(--cds-spacing-05)">top-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom">
+        <div style="padding: var(--cds-spacing-05)">bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom-left">
+        <div style="padding: var(--cds-spacing-05)">bottom-left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom-right">
+        <div style="padding: var(--cds-spacing-05)">bottom-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left">
+        <div style="padding: var(--cds-spacing-05)">left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left-bottom">
+        <div style="padding: var(--cds-spacing-05)">left-bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left-right">
+        <div style="padding: var(--cds-spacing-05)">left-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right">
+        <div style="padding: var(--cds-spacing-05)">right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right-bottom">
+        <div style="padding: var(--cds-spacing-05)">right-bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right-top">
+        <div style="padding: var(--cds-spacing-05)">right-top</div>
+    </Popover>
+</div>
+
 ### With caret
 
 <div data-outline>

docs/src/pages/components/Select.svx

@@ -62,7 +62,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Inline type
+### Inline variant
 
 <Select inline labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />

docs/src/pages/components/TextInput.svx

@@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />
 
-### Inline
+### Inline variant
 
 <TextInput inline labelText="User name" placeholder="Enter user name..." />
 
+### Read-only variant
+
+<TextInput readonly labelText="User name" value="IBM" />
+
 ### Extra-large size
 
 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

docs/src/pages/framed/ContextMenu/ContextMenu.svelte

@@ -45,3 +45,19 @@
   <ContextMenuDivider />
   <ContextMenuOption indented kind="danger" labelText="Delete" />
 </ContextMenu>
+
+<div>
+  <p>Right click anywhere on this page</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+</style>

docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte

@@ -21,3 +21,19 @@
   <ContextMenuDivider />
   <ContextMenuOption selectable labelText="Lock layer" />
 </ContextMenu>
+
+<div>
+  <p>Right click anywhere on this page</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+</style>

docs/src/pages/framed/UIShell/HeaderNavRail.svelte

@@ -37,9 +37,8 @@
     </HeaderNavMenu>
     <HeaderNavItem href="/" text="Link 4" />
   </HeaderNav>
-</Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}" rail>
+  <SideNav bind:isOpen="{isSideNavOpen}" rail>
     <SideNavItems>
       <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
       <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
@@ -52,7 +51,8 @@
       <SideNavDivider />
       <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
     </SideNavItems>
-</SideNav>
+  </SideNav>
+</Header>
 
 <Content>
   <Grid>

docs/yarn.lock

@@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.36.0"
+  version "0.37.0"
   dependencies:
     carbon-icons-svelte "^10.27.0"
     clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
-carbon-components@10.37.0:
+carbon-components@10.38.0:
-  version "10.37.0"
+  version "10.38.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.37.0.tgz#bc53138151ea58e79f5b249b1ec5be8ae2c0a7e4"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f"
-  integrity sha512-LHReeqzzieP/q/xAHfKJNWLdWhOkr7+DIVZkrQGPf6kZYj5H8tb1KYKOIhasvCNRxJ2es8QJXuH7XW0JoLDfdQ==
+  integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -32,7 +32,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.37.0",
+    "carbon-components": "10.38.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

src/Checkbox/Checkbox.svelte

@@ -79,6 +79,7 @@
       on:change="{() => {
         checked = !checked;
       }}"
+      on:blur
     />
     <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
       <span

src/ComboBox/ComboBox.svelte

@@ -95,6 +95,7 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
+  import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
@@ -128,7 +129,6 @@
       filteredItems = items.filter((item) => shouldFilterItem(item, value));
     } else {
       highlightedIndex = -1;
-      inputValue = selectedItem ? selectedItem.text : "";
 
       if (!selectedItem) {
         selectedId = undefined;
@@ -149,7 +149,6 @@
     : undefined;
   $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
   $: selectedItem = items[selectedIndex];
-  $: inputValue = selectedItem ? selectedItem.text : undefined;
   $: value = inputValue;
 </script>
 
@@ -217,16 +216,31 @@
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--empty="{inputValue === ''}"
-        on:input="{({ target }) => {
+        on:input="{async ({ target }) => {
+          if (!open && target.value.length > 0) {
+            open = true;
+          }
+
           inputValue = target.value;
         }}"
         on:keydown
         on:keydown|stopPropagation="{({ key }) => {
           if (key === 'Enter') {
             open = !open;
+
             if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
               selectedIndex = highlightedIndex;
               open = false;
+
+              if (filteredItems[selectedIndex]) {
+                inputValue = filteredItems[selectedIndex].text;
+              }
+            }
+
+            if (highlightedIndex < 0 && selectedIndex > -1) {
+              if (filteredItems[selectedIndex]) {
+                inputValue = filteredItems[selectedIndex].text;
+              }
             }
           } else if (key === 'Tab') {
             open = false;
@@ -242,6 +256,12 @@
         on:focus
         on:blur
         on:blur="{({ relatedTarget }) => {
+          if (inputValue.length === 0 && selectedIndex > -1) {
+            if (filteredItems[selectedIndex]) {
+              inputValue = filteredItems[selectedIndex].text;
+            }
+          }
+
           if (!open || !relatedTarget) return;
           if (
             relatedTarget &&
@@ -266,7 +286,9 @@
           on:clear
           on:clear="{() => {
             selectedIndex = -1;
+            highlightedIndex = -1;
             open = false;
+            inputValue = '';
             ref.focus();
           }}"
           translateWithId="{translateWithId}"
@@ -300,12 +322,19 @@
                 .map(({ id }) => id)
                 .indexOf(filteredItems[i].id);
               open = false;
+
+              if (filteredItems[i]) {
+                inputValue = filteredItems[i].text;
+              }
             }}"
             on:mouseenter="{() => {
               highlightedIndex = i;
             }}"
           >
             {itemToString(item)}
+            {#if selectedItem && selectedItem.id === item.id}
+              <Checkmark16 class="bx--list-box__menu-item__selected-icon" />
+            {/if}
           </ListBoxMenuItem>
         {/each}
       </ListBoxMenu>

src/ContextMenu/ContextMenu.svelte

@@ -79,6 +79,7 @@
 <svelte:window
   on:contextmenu|preventDefault="{(e) => {
     if (level > 1) return;
+    if (!ref) return;
 
     const { height, width } = ref.getBoundingClientRect();
 
@@ -104,7 +105,7 @@
   }}"
   on:click="{(e) => {
     if (!open) return;
-    if (e.target.contains(ref)) close();
+    close();
   }}"
   on:keydown="{(e) => {
     if (open && e.key === 'Escape') close();
@@ -117,10 +118,10 @@
   tabindex="-1"
   data-direction="{direction}"
   data-level="{level}"
-  class:bx--context-menu="{true}"
+  class:bx--menu="{true}"
-  class:bx--context-menu--open="{open}"
+  class:bx--menu--open="{open}"
-  class:bx--context-menu--invisible="{open && x === 0 && y === 0}"
+  class:bx--menu--invisible="{open && x === 0 && y === 0}"
-  class:bx--context-menu--root="{level === 1}"
+  class:bx--menu--root="{level === 1}"
   {...$$restProps}
   style="left: {x}px; top: {y}px; {$$restProps.style}"
   on:click

src/ContextMenu/ContextMenuDivider.svelte

@@ -1 +1 @@
-<li role="separator" class:bx--context-menu-divider="{true}"></li>
+<li role="separator" class:bx--menu-divider="{true}"></li>

src/ContextMenu/ContextMenuOption.svelte

@@ -173,14 +173,14 @@
   aria-disabled="{!subOptions && disabled}"
   aria-haspopup="{subOptions ? true : undefined}"
   aria-expanded="{subOptions ? submenuOpen : undefined}"
-  class:bx--context-menu-option="{true}"
+  class:bx--menu-option="{true}"
-  class:bx--context-menu-option--disabled="{true}"
+  class:bx--menu-option--disabled="{true}"
-  class:bx--context-menu-option--active="{subOptions && submenuOpen}"
+  class:bx--menu-option--active="{subOptions && submenuOpen}"
-  class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
+  class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
   indented="{indented}"
   aria-checked="{isSelectable || isRadio ? selected : undefined}"
   data-nested="{ref &&
-    ref.closest('.bx--context-menu').getAttribute('data-level') === '2'}"
+    ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
   data-sub="{subOptions}"
   data-id="{id}"
   {...$$restProps}
@@ -240,18 +240,18 @@
 >
   {#if subOptions}
     <div
-      class:bx--context-menu-option__content="{true}"
+      class:bx--menu-option__content="{true}"
-      class:bx--context-menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--context-menu-option__icon="{true}">
+        <div class:bx--menu-option__icon="{true}">
           <svelte:component this="{icon}" />
         </div>
       {/if}
-      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
+      <div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
     </div>
 
     <ContextMenu
@@ -263,18 +263,18 @@
     </ContextMenu>
   {:else}
     <div
-      class:bx--context-menu-option__content="{true}"
+      class:bx--menu-option__content="{true}"
-      class:bx--context-menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--context-menu-option__icon="{true}">
+        <div class:bx--menu-option__icon="{true}">
           <svelte:component this="{icon}" />
         </div>
       {/if}
-      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--context-menu-option__info="{true}">
+      <div class:bx--menu-option__info="{true}">
         <slot name="shortcutText">{shortcutText}</slot>
       </div>
     </div>

src/FileUploader/FileUploaderDropContainer.svelte

@@ -92,6 +92,7 @@
       <slot name="labelText">
         {labelText}
       </slot>
+    </div>
     <input
       bind:this="{ref}"
       type="file"
@@ -111,6 +112,5 @@
         target.value = null;
       }}"
     />
-    </div>
   </label>
 </div>

src/InlineLoading/InlineLoading.svelte

@@ -22,7 +22,7 @@
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
-  import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
+  import ErrorFilled16 from "carbon-icons-svelte/lib/ErrorFilled16/ErrorFilled16.svelte";
   import Loading from "../Loading/Loading.svelte";
 
   const dispatch = createEventDispatcher();
@@ -55,9 +55,15 @@
 >
   <div class:bx--inline-loading__animation="{true}">
     {#if status === "error"}
-      <Error20 class="bx--inline-loading--error" />
+      <ErrorFilled16
+        class="bx--inline-loading--error"
+        title="{iconDescription}"
+      />
     {:else if status === "finished"}
-      <CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
+      <CheckmarkFilled16
+        class="bx--inline-loading__checkmark-container"
+        title="{iconDescription}"
+      />
     {:else if status === "inactive" || status === "active"}
       <Loading
         small

src/ListBox/ListBoxField.svelte

@@ -61,6 +61,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown|preventDefault|stopPropagation
+  on:focus
   on:blur
 >
   <slot />

src/MultiSelect/MultiSelect.svelte

@@ -319,6 +319,12 @@
           }
         }
       }}"
+      on:focus="{() => {
+        if (filterable) {
+          open = true;
+          if (inputRef) inputRef.focus();
+        }
+      }}"
       on:blur="{({ relatedTarget }) => {
         if (
           relatedTarget &&
@@ -342,7 +348,7 @@
               ...item,
               checked: false,
             }));
-            fieldRef.blur();
+            if (fieldRef) fieldRef.blur();
           }}"
           translateWithId="{translateWithId}"
           disabled="{disabled}"
@@ -388,7 +394,11 @@
           on:blur="{({ relatedTarget }) => {
             if (
               relatedTarget &&
-              relatedTarget.getAttribute('role') !== 'button'
+              !['INPUT', 'SELECT', 'TEXTAREA'].includes(
+                relatedTarget.tagName
+              ) &&
+              relatedTarget.getAttribute('role') !== 'button' &&
+              relatedTarget.getAttribute('role') !== 'searchbox'
             ) {
               inputRef.focus();
             }
@@ -453,6 +463,9 @@
               labelText="{itemToString(item)}"
               checked="{item.checked}"
               disabled="{disabled}"
+              on:blur="{() => {
+                if (i === filteredItems.length - 1) open = false;
+              }}"
             />
           </ListBoxMenuItem>
         {/each}

src/StructuredList/StructuredList.svelte

@@ -38,7 +38,7 @@
 </script>
 
 <div
-  aria-label="Structured list section"
+  role="table"
   class:bx--structured-list="{true}"
   class:bx--structured-list--border="{border}"
   class:bx--structured-list--selection="{selection}"

src/StructuredList/StructuredListBody.svelte

@@ -1,6 +1,6 @@
 <div
-  class:bx--structured-list-tbody="{true}"
   role="rowgroup"
+  class:bx--structured-list-tbody="{true}"
   {...$$restProps}
   on:click
   on:mouseover

src/StructuredList/StructuredListCell.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <div
+  role="{head ? 'columnheader' : 'cell'}"
   class:bx--structured-list-th="{head}"
   class:bx--structured-list-td="{!head}"
   class:bx--structured-list-content--nowrap="{noWrap}"

src/StructuredList/StructuredListHead.svelte

@@ -1,4 +1,5 @@
 <div
+  role="rowgroup"
   class:bx--structured-list-thead="{true}"
   {...$$restProps}
   on:click

src/StructuredList/StructuredListRow.svelte

@@ -12,7 +12,6 @@
 {#if label}
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
-    role="presentation"
     tabindex="{tabindex}"
     class:bx--structured-list-row="{true}"
     class:bx--structured-list-row--header-row="{head}"
@@ -27,6 +26,7 @@
   </label>
 {:else}
   <div
+    role="row"
     class:bx--structured-list-row="{true}"
     class:bx--structured-list-row--header-row="{head}"
     {...$$restProps}

src/TextInput/TextInput.svelte

@@ -59,12 +59,16 @@
   /** Set to `true` to mark the field as required */
   export let required = false;
 
-  /** Set to `true` to use inline version */
+  /** Set to `true` to use the inline variant */
   export let inline = false;
 
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
 
   const ctx = getContext("Form");
 
@@ -77,6 +81,8 @@
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
   class:bx--text-input-wrapper--inline="{inline}"
+  class:bx--text-input-wrapper--light="{light}"
+  class:bx--text-input-wrapper--readonly="{readonly}"
   on:click
   on:mouseover
   on:mouseenter
@@ -142,6 +148,9 @@
             bx--text-input__invalid-icon--warning"
         />
       {/if}
+      {#if readonly}
+        <EditOff16 class="bx--text-input__readonly-icon" />
+      {/if}
       <input
         bind:this="{ref}"
         data-invalid="{invalid || undefined}"
@@ -155,6 +164,7 @@
         type="{type}"
         value="{value}"
         required="{required}"
+        readonly="{readonly}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"

src/TooltipDefinition/TooltipDefinition.svelte

@@ -36,7 +36,7 @@
     if (key === 'Escape') hide();
   }}" />
 
-<div
+<span
   class:bx--tooltip--definition="{true}"
   class:bx--tooltip--a11y="{true}"
   {...$$restProps}
@@ -69,4 +69,4 @@
   <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
     <slot name="tooltip">{tooltipText}</slot>
   </div>
-</div>
+</span>

src/UIShell/SideNav/SideNav.svelte

@@ -25,6 +25,8 @@
 
   const dispatch = createEventDispatcher();
 
+  let winWidth = undefined;
+
   $: dispatch(isOpen ? "open" : "close");
 
   onMount(() => {
@@ -33,6 +35,8 @@
   });
 </script>
 
+<svelte:window bind:innerWidth="{winWidth}" />
+
 {#if !fixed}
   <div
     on:click="{() => {
@@ -49,7 +53,7 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{isOpen && !rail}"
+  class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
   class:bx--side-nav--collapsed="{!isOpen && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}

types/TextInput/TextInput.d.ts

@@ -104,10 +104,16 @@ export interface TextInputProps
   required?: boolean;
 
   /**
-   * Set to `true` to use inline version
+   * Set to `true` to use the inline variant
    * @default false
    */
   inline?: boolean;
+
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
 }
 
 export default class TextInput extends SvelteComponentTyped<

yarn.lock

@@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
   integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
 
-carbon-components@10.37.0:
+carbon-components@10.38.0:
-  version "10.37.0"
+  version "10.38.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.37.0.tgz#bc53138151ea58e79f5b249b1ec5be8ae2c0a7e4"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f"
-  integrity sha512-LHReeqzzieP/q/xAHfKJNWLdWhOkr7+DIVZkrQGPf6kZYj5H8tb1KYKOIhasvCNRxJ2es8QJXuH7XW0JoLDfdQ==
+  integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"