Align v10.36 (#696)

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

* feat(structured-list): add condensed, flush props

* fix(structured-list): deprecate the border prop

* fix(code-snippet): set min/max height for multi-line code snippet #656

Fixes #656

* fix(image-loader): make SSR compatible using a window type check guard

* docs(tag): add separate disabled example for filterable/interactive tags

* docs: update number of supported chart types

* feat(side-nav): support rail variant

* feat(ui-shell): add isSelected prop to HeaderNavItem

* fix(ui-shell): default isSelected to false in SideNavMenuItem

* fix(text-area): forward missing keydown event #665

Fixes #665

* feat: forward keyup event to components with inputs

* feat(checkbox): make labelText slottable #563

Closes #563

* feat: make labelText slottable

Related #563

* docs(component-api): account for undefined type

* docs(ui-shell): link to correct rail source

* fix(ui-shell): default isSelected in HeaderNavItem to false

src/Checkbox/Checkbox.svelte

@@ -85,7 +85,9 @@
         class:bx--checkbox-label-text="{true}"
         class:bx--visually-hidden="{hideLabel}"
       >
-        {labelText}
+        <slot name="labelText">
+          {labelText}
+        </slot>
       </span>
     </label>
   </div>

src/CodeSnippet/CodeSnippet.svelte

@@ -97,6 +97,8 @@
   }
 
   $: expandText = expanded ? showLessText : showMoreText;
+  $: minHeight = expanded ? 16 * 15 : 48;
+  $: maxHeight = expanded ? "none" : 16 * 15 + "px";
   $: if (type === "multi" && ref) {
     if (code === undefined) setShowMoreLess();
     if (code) tick().then(setShowMoreLess);
@@ -178,6 +180,7 @@
       tabindex="{type === 'single' && !disabled ? '0' : undefined}"
       aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
       class:bx--snippet-container="{true}"
+      style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
     >
       <pre
         bind:this="{ref}">

src/ComboBox/ComboBox.svelte

@@ -238,6 +238,7 @@
             open = false;
           }
         }}"
+        on:keyup
         on:focus
         on:blur
         on:blur="{({ relatedTarget }) => {

src/DatePicker/DatePickerInput.svelte

@@ -85,7 +85,9 @@
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
   {/if}
   <div
@@ -120,6 +122,7 @@
           focusCalendar();
         }
       }}"
+      on:keyup
       on:blur
       on:blur="{({ relatedTarget }) => {
         blurInput(relatedTarget);

src/FileUploader/FileUploaderButton.svelte

@@ -54,7 +54,11 @@
     }
   }}"
 >
-  <span role="{role}">{labelText}</span>
+  <span role="{role}">
+    <slot name="labelText">
+      {labelText}
+    </slot>
+  </span>
 </label>
 <input
   bind:this="{ref}"

src/FileUploader/FileUploaderDropContainer.svelte

@@ -89,7 +89,9 @@
       class:bx--file__drop-container="{true}"
       class:bx--file__drop-container--drag-over="{over}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
       <input
         bind:this="{ref}"
         type="file"

src/ImageLoader/ImageLoader.svelte

@@ -67,7 +67,7 @@
   let image = null;
 
   $: loading = !loaded && !error;
-  $: if (src) loadImage();
+  $: if (src && typeof window !== "undefined") loadImage();
   $: if (loaded) dispatch("load");
   $: if (error) dispatch("error");
 

src/MultiSelect/MultiSelect.svelte

@@ -382,6 +382,7 @@
               change(-1);
             }
           }}"
+          on:keyup
           on:focus
           on:blur
           on:blur="{({ relatedTarget }) => {

src/RadioButton/RadioButton.svelte

@@ -68,7 +68,11 @@
   <label class:bx--radio-button__label="{true}" for="{id}">
     <span class:bx--radio-button__appearance="{true}"></span>
     {#if labelText}
-      <span class:bx--visually-hidden="{hideLabel}">{labelText}</span>
+      <span class:bx--visually-hidden="{hideLabel}">
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </span>
     {/if}
   </label>
 </div>

src/Search/Search.svelte

@@ -117,9 +117,11 @@
     >
       <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
     </div>
-    <label id="{id}-search" for="{id}" class:bx--label="{true}"
-      >{labelText}</label
-    >
+    <label id="{id}-search" for="{id}" class:bx--label="{true}">
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
       bind:this="{ref}"
@@ -155,6 +157,7 @@
           dispatch('clear');
         }
       }}"
+      on:keyup
     />
     <button
       type="button"

src/Select/Select.svelte

@@ -96,7 +96,9 @@
         class:bx--visually-hidden="{hideLabel}"
         class:bx--label--disabled="{disabled}"
       >
-        {labelText}
+        <slot name="labelText">
+          {labelText}
+        </slot>
       </label>
     {/if}
     {#if inline}

src/Slider/Slider.svelte

@@ -137,7 +137,9 @@
     class:bx--label="{true}"
     class:bx--label--disabled="{disabled}"
   >
-    {labelText}
+    <slot name="labelText">
+      {labelText}
+    </slot>
   </label>
   <div class:bx--slider-container="{true}">
     <span class:bx--slider__range-label="{true}">{minLabel || min}</span>

src/StructuredList/StructuredList.svelte

@@ -5,9 +5,18 @@
    */
   export let selected = undefined;
 
-  /** Set to `true` to use the bordered variant */
+  /**
+   * Set to `true` to use the bordered variant
+   * @deprecated
+   */
   export let border = false;
 
+  /** Set to `true` to use the condensed variant */
+  export let condensed = false;
+
+  /** Set to `true` to flush the list */
+  export let flush = false;
+
   /** Set to `true` to use the selection variant */
   export let selection = false;
 
@@ -33,6 +42,8 @@
   class:bx--structured-list="{true}"
   class:bx--structured-list--border="{border}"
   class:bx--structured-list--selection="{selection}"
+  class:bx--structured-list--condensed="{condensed}"
+  class:bx--structured-list--flush="{flush}"
   {...$$restProps}
   on:click
   on:mouseover

src/TextArea/TextArea.svelte

@@ -63,7 +63,9 @@
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
   {/if}
   <div
@@ -93,6 +95,8 @@
       on:input="{({ target }) => {
         value = target.value;
       }}"
+      on:keydown
+      on:keyup
       on:focus
       on:blur></textarea>
   </div>

src/TextInput/PasswordInput.svelte

@@ -114,7 +114,9 @@
       class:bx--label--inline--sm="{inline && size === 'sm'}"
       class:bx--label--inline--xl="{inline && size === 'xl'}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
     {#if !isFluid && helperText}
       <div
@@ -135,7 +137,9 @@
       class:bx--label--inline--sm="{inline && size === 'sm'}"
       class:bx--label--inline--xl="{inline && size === 'xl'}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
   {/if}
   <div
@@ -180,6 +184,7 @@
           value = target.value;
         }}"
         on:keydown
+        on:keyup
         on:focus
         on:blur
       />

src/TextInput/TextInput.svelte

@@ -93,7 +93,9 @@
           class:bx--label--inline="{inline}"
           class="{inline && !!size && `bx--label--inline--${size}`}"
         >
-          {labelText}
+          <slot name="labelText">
+            {labelText}
+          </slot>
         </label>
       {/if}
       {#if !isFluid && helperText}
@@ -116,7 +118,9 @@
       class:bx--label--inline="{inline}"
       class="{inline && !!size && `bx--label--inline--${size}`}"
     >
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
   {/if}
   <div
@@ -163,6 +167,7 @@
           value = target.value;
         }}"
         on:keydown
+        on:keyup
         on:focus
         on:blur
       />

src/TimePicker/TimePicker.svelte

@@ -80,7 +80,9 @@
           class:bx--visually-hidden="{hideLabel}"
           class:bx--label--disabled="{disabled}"
         >
-          {labelText}
+          <slot name="labelText">
+            {labelText}
+          </slot>
         </label>
       {/if}
       <input
@@ -104,6 +106,8 @@
         on:input="{({ target }) => {
           value = target.value;
         }}"
+        on:keydown
+        on:keyup
         on:focus
         on:blur
       />

src/TimePicker/TimePickerSelect.svelte

@@ -60,7 +60,9 @@
       class:bx--visually-hidden="{hideLabel}"
     >
       <!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
-      {labelText}
+      <slot name="labelText">
+        {labelText}
+      </slot>
     </label>
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->

src/Toggle/Toggle.svelte

@@ -75,7 +75,9 @@
     for="{id}"
     class:bx--toggle-input__label="{true}"
   >
-    {labelText}
+    <slot name="labelText">
+      {labelText}
+    </slot>
     <span class:bx--toggle__switch="{true}">
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         {labelA}

src/Toggle/ToggleSkeleton.svelte

@@ -36,7 +36,11 @@
     class:bx--skeleton="{true}"
   >
     {#if labelText}
-      <span class:bx--toggle__label-text="{true}">{labelText}</span>
+      <span class:bx--toggle__label-text="{true}">
+        <slot name="labelText">
+          {labelText}
+        </slot>
+      </span>
     {/if}
     <span class:bx--toggle__text--left="{true}"></span>
     <span class:bx--toggle__appearance="{true}"></span>

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -11,6 +11,9 @@
    */
   export let text = undefined;
 
+  /** Set to `true` to select the item */
+  export let isSelected = false;
+
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 </script>
@@ -23,6 +26,7 @@
     href="{href}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
     class:bx--header__menu-item="{true}"
+    aria-current="{isSelected ? 'page' : undefined}"
     {...$$restProps}
     on:click
     on:mouseover

src/UIShell/SideNav/SideNav.svelte

@@ -8,6 +8,9 @@
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
+  /** Set to `true` to use the rail variant */
+  export let rail = false;
+
   /**
    * Specify the ARIA label for the nav
    * @type {string}
@@ -46,8 +49,9 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen}"
+  class:bx--side-nav--expanded="{isOpen && !rail}"
+  class:bx--side-nav--collapsed="{!isOpen && !rail}"
+  class:bx--side-nav--rail="{rail}"
   {...$$restProps}
 >
   <slot />

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -1,9 +1,6 @@
 <script>
-  /**
-   * Set to `true` to select the item
-   * @type {boolean}
-   */
-  export let isSelected = undefined;
+  /** Set to `true` to select the item */
+  export let isSelected = false;
 
   /**
    * Specify the `href` attribute