Align v10.39 (#738)

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

* fix(data-table): deprecate Table shouldShowBorder prop

Ref: 0f7324156

* fix(form-group): add legendId

Ref: 4fc56c30b

* feat(number-input): support readonly variant

Ref: d0bd8eddb

* feat(multi-select): export multiSelectRef, fieldRef, selectionRef

* feat(local-storage): add clearItem, clearAll instance methods

* docs(local-storage): simplify clear example

* docs(local-storage): add instructions [ci skip]

* chore(local-storage): reset value on clear [ci skip]

* chore(local-storage): revert value clear [ci skip]

src/DataTable/Table.svelte

@@ -11,7 +11,10 @@
   /** Set to `true` to use static width */
   export let useStaticWidth = false;
 
-  /**  Set to `true` for the bordered variant */
+  /**
+   * Set to `true` for the bordered variant
+   * @deprecated this prop will be removed in the next major release
+   */
   export let shouldShowBorder = false;
 
   /** Set to `true` for the sortable variant */

src/FormGroup/FormGroup.svelte

@@ -1,31 +1,38 @@
 <script>
+  /** Set to `true` for to remove the bottom margin */
+  export let noMargin = false;
+
   /** Set to `true` to indicate an invalid state */
   export let invalid = false;
 
   /** Set to `true` to render a form requirement */
   export let message = false;
 
-  /** Set to `true` for to remove the bottom margin */
-  export let noMargin = false;
-
   /** Specify the message text */
   export let messageText = "";
 
   /** Specify the legend text */
   export let legendText = "";
+
+  /** Specify an id for the legend element */
+  export let legendId = "";
 </script>
 
 <fieldset
   data-invalid="{invalid || undefined}"
   class:bx--fieldset="{true}"
   class:bx--fieldset--no-margin="{noMargin}"
+  aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <legend class:bx--label="{true}">{legendText}</legend>
+  <legend
+    class:bx--label="{true}"
+    id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
+  >
   <slot />
   {#if message}
     <div class:bx--form__requirement="{true}">{messageText}</div>

src/LocalStorage/LocalStorage.svelte

@@ -15,6 +15,22 @@
    */
   export let value = "";
 
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    localStorage.clear();
+  }
+
   import { onMount, afterUpdate, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();

src/MultiSelect/MultiSelect.svelte

@@ -128,6 +128,21 @@
   /** Obtain a reference to the input HTML element */
   export let inputRef = null;
 
+  /** Obtain a reference to the outer div element */
+  export let multiSelectRef = null;
+
+  /**
+   * Obtain a reference to the field box element
+   * @type {null | HTMLDivElement}
+   */
+  export let fieldRef = null;
+
+  /**
+   * Obtain a reference to the selection element
+   * @type {null | HTMLDivElement}
+   */
+  export let selectionRef = null;
+
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -143,10 +158,6 @@
 
   const dispatch = createEventDispatcher();
 
-  let multiSelectRef = null;
-  let fieldRef = null;
-  let selectionRef = null;
-
   let inputValue = "";
   let initialSorted = false;
   let highlightedIndex = -1;

src/NumberInput/NumberInput.svelte

@@ -108,6 +108,7 @@
   import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.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 defaultTranslations = {
     [translationIds.increment]: "Increment number",
@@ -273,6 +274,9 @@
             class="bx--number__invalid bx--number__invalid--warning"
           />
         {/if}
+        {#if readonly}
+          <EditOff16 class="bx--text-input__readonly-icon" />
+        {/if}
         {#if !hideSteppers}
           <div class:bx--number__controls="{true}">
             <button