Align v10.35 (#694)

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

* feat(tooltip-icon): add icon prop

This allows consumers to pass a Carbon icon as a prop instead of using the default slot.

* fix(tooltip): make screenreader description less verbose

Ref: b5f40d8fc

* feat(search): allow custom search icon

Allows consumers to render a different Carbon icon instead of the default Search16 icon.

* feat(number-input): add hideSteppers prop

Allows consumers to hide the input stepper buttons.

* feat: support expressive styles for Button, UnorderedList, OrderedList

* feat(button): support large size button

Set size to "lg" to use the large size.

* feat(button-skeleton): support xl, lg sizes

* docs(button): add "lg" size to expressive styles example

* feat(file-uploader-item): support field, small sizes

* feat(tooltip-icon): support disabled state

src/Button/Button.svelte

@@ -13,10 +13,13 @@
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small" | "xl"}
+   * @type {"default" | "field" | "small" | "lg" | "xl"}
    */
   export let size = "default";
 
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
+
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button
    */
@@ -98,8 +101,16 @@
     ...$$restProps,
     class: [
       "bx--btn",
+      expressive && "bx--btn--expressive",
+      ((size === "small" && !expressive) ||
+        (size === "sm" && !expressive) ||
+        (size === "small" && !expressive)) &&
+        "bx--btn--sm",
+      (size === "field" && !expressive) ||
+        (size === "md" && !expressive && "bx--btn--md"),
       size === "field" && "bx--btn--field",
       size === "small" && "bx--btn--sm",
+      size === "lg" && "bx--btn--lg",
       size === "xl" && "bx--btn--xl",
       kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",

src/Button/ButtonSkeleton.svelte

@@ -7,7 +7,7 @@
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small"}
+   * @type {"default" | "field" | "small" | "lg" | "xl"}
    */
   export let size = "default";
 
@@ -27,6 +27,8 @@
     class:bx--btn="{true}"
     class:bx--btn--field="{size === 'field'}"
     class:bx--btn--sm="{size === 'small' || small}"
+    class:bx--btn--lg="{size === 'lg'}"
+    class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -41,6 +43,8 @@
     class:bx--btn="{true}"
     class:bx--btn--field="{size === 'field'}"
     class:bx--btn--sm="{size === 'small' || small}"
+    class:bx--btn--lg="{size === 'lg'}"
+    class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover

src/FileUploader/FileUploaderItem.svelte

@@ -9,6 +9,12 @@
    */
   export let status = "uploading";
 
+  /**
+   * Specify the size of button skeleton
+   * @type {"default" | "field" | "small"}
+   */
+  export let size = "default";
+
   /** Specify the ARIA label used for the status icons */
   export let iconDescription = "";
 
@@ -37,6 +43,8 @@
   id="{id}"
   class:bx--file__selected-file="{true}"
   class:bx--file__selected-file--invalid="{invalid}"
+  class:bx--file__selected-file--md="{size === 'field'}"
+  class:bx--file__selected-file--sm="{size === 'small'}"
   {...$$restProps}
   on:mouseover
   on:mouseenter

src/NumberInput/NumberInput.svelte

@@ -49,6 +49,9 @@
   /** Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Set to `true` to hide the input stepper buttons */
+  export let hideSteppers = false;
+
   /** Specify the ARIA label for the increment icons */
   export let iconDescription = "";
 
@@ -156,6 +159,7 @@
     class:bx--number--readonly="{readonly}"
     class:bx--number--light="{light}"
     class:bx--number--nolabel="{hideLabel}"
+    class:bx--number--nosteppers="{hideSteppers}"
     class:bx--number--mobile="{mobile}"
     class="{size && `bx--number--${size}`}"
   >
@@ -269,38 +273,40 @@
             class="bx--number__invalid bx--number__invalid--warning"
           />
         {/if}
-        <div class:bx--number__controls="{true}">
-          <button
-            type="button"
-            tabindex="-1"
-            title="{decrementLabel || iconDescription}"
-            aria-label="{decrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:down-icon="{true}"
-            on:click="{() => {
-              updateValue(-1);
-            }}"
-            disabled="{disabled}"
-          >
-            <Subtract16 class="down-icon" />
-          </button>
-          <div class:bx--number__rule-divider="{true}"></div>
-          <button
-            type="button"
-            tabindex="-1"
-            title="{incrementLabel || iconDescription}"
-            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:up-icon="{true}"
-            on:click="{() => {
-              updateValue(1);
-            }}"
-            disabled="{disabled}"
-          >
-            <Add16 class="up-icon" />
-          </button>
-          <div class:bx--number__rule-divider="{true}"></div>
-        </div>
+        {#if !hideSteppers}
+          <div class:bx--number__controls="{true}">
+            <button
+              type="button"
+              tabindex="-1"
+              title="{decrementLabel || iconDescription}"
+              aria-label="{decrementLabel || iconDescription}"
+              class:bx--number__control-btn="{true}"
+              class:down-icon="{true}"
+              on:click="{() => {
+                updateValue(-1);
+              }}"
+              disabled="{disabled}"
+            >
+              <Subtract16 class="down-icon" />
+            </button>
+            <div class:bx--number__rule-divider="{true}"></div>
+            <button
+              type="button"
+              tabindex="-1"
+              title="{incrementLabel || iconDescription}"
+              aria-label="{incrementLabel || iconDescription}"
+              class:bx--number__control-btn="{true}"
+              class:up-icon="{true}"
+              on:click="{() => {
+                updateValue(1);
+              }}"
+              disabled="{disabled}"
+            >
+              <Add16 class="up-icon" />
+            </button>
+            <div class:bx--number__rule-divider="{true}"></div>
+          </div>
+        {/if}
       </div>
     {/if}
     {#if !error && !warn && helperText}

src/OrderedList/OrderedList.svelte

@@ -4,12 +4,16 @@
 
   /** Set to `true` to use native list styles */
   export let native = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
 </script>
 
 <ol
   class:bx--list--ordered="{!native}"
   class:bx--list--ordered--native="{native}"
   class:bx--list--nested="{nested}"
+  class:bx--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover

src/Search/Search.svelte

@@ -58,6 +58,12 @@
   /** Specify the label text */
   export let labelText = "";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = Search16;
+
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -109,7 +115,7 @@
         if (expandable) expanded = true;
       }}"
     >
-      <Search16 class="bx--search-magnifier-icon" />
+      <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
     </div>
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
       >{labelText}</label

src/Tooltip/Tooltip.svelte

@@ -186,6 +186,7 @@
       <div
         bind:this="{refIcon}"
         {...buttonProps}
+        aria-describedby="{tooltipId}"
         on:click|preventDefault|stopPropagation="{openMenu}"
         on:focus="{openMenu}"
         on:blur="{onBlur}"
@@ -200,6 +201,7 @@
     <div
       bind:this="{ref}"
       {...buttonProps}
+      aria-describedby="{tooltipId}"
       on:click|preventDefault|stopPropagation="{openMenu}"
       on:focus="{openMenu}"
       on:blur="{onBlur}"
@@ -211,7 +213,6 @@
   {#if open}
     <div
       bind:this="{refTooltip}"
-      role="tooltip"
       id="{tooltipId}"
       data-floating-menu-direction="{direction}"
       class:bx--tooltip="{true}"
@@ -231,8 +232,6 @@
         class:bx--tooltip__content="{true}"
         tabIndex="-1"
         role="dialog"
-        aria-describedby="{$$props['tooltipBodyId']}"
-        aria-labelledby="{triggerId}"
       >
         <slot />
       </div>

src/TooltipIcon/TooltipIcon.svelte

@@ -5,6 +5,15 @@
    */
   export let tooltipText = "";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
+  /** Set to `true` to disable the tooltip icon */
+  export let disabled = false;
+
   /**
    * Set the alignment of the tooltip relative to the icon
    * @type {"start" | "center" | "end"}
@@ -35,10 +44,11 @@
 
 <button
   bind:this="{ref}"
+  disabled="{disabled}"
   aria-describedby="{id}"
   class:bx--tooltip__trigger="{true}"
   class:bx--tooltip--a11y="{true}"
-  class:bx--tooltip--hidden="{hidden}"
+  class:bx--tooltip--hidden="{hidden || disabled}"
   class:bx--tooltip--top="{direction === 'top'}"
   class:bx--tooltip--right="{direction === 'right'}"
   class:bx--tooltip--bottom="{direction === 'bottom'}"
@@ -47,20 +57,25 @@
   class:bx--tooltip--align-center="{align === 'center'}"
   class:bx--tooltip--align-end="{align === 'end'}"
   {...$$restProps}
+  style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
   on:click
   on:mouseover
   on:mouseenter
   on:mouseenter="{() => {
+    if (disabled) return;
     hidden = false;
   }}"
   on:mouseleave
   on:focus
   on:focus="{() => {
+    if (disabled) return;
     hidden = false;
   }}"
 >
   <span id="{id}" class:bx--assistive-text="{true}">
     <slot name="tooltipText">{tooltipText}</slot>
   </span>
-  <slot />
+  <slot>
+    <svelte:component this="{icon}" />
+  </slot>
 </button>

src/UnorderedList/UnorderedList.svelte

@@ -1,11 +1,15 @@
 <script>
   /** Set to `true` to use the nested variant */
   export let nested = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
 </script>
 
 <ul
   class:bx--list--unordered="{true}"
   class:bx--list--nested="{nested}"
+  class:bx--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover