Align v10.33 (#619)

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

* fix(clickable-tile): support disabled state for ClickableTile

* fix(aspect-ratio): add missing 3x2 ratio

* docs: update number of supported chart types

* feat(link): support link with icon

* refactor(outbound-link): use icon prop

* fix(search): wrap search icon with div

src/AspectRatio/AspectRatio.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the aspect ratio
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
    */
   export let ratio = "2x1";
 </script>
@@ -13,6 +13,7 @@
   class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
   class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
   class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
+  class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
   class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
   class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
   {...$$restProps}

src/ImageLoader/ImageLoader.svelte

@@ -16,7 +16,7 @@
 
   /**
    * Specify the aspect ratio for the image wrapper
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
    */
   export let ratio = undefined;
 

src/Link/Link.svelte

@@ -14,6 +14,13 @@
   /** Set to `true` to use the inline variant */
   export let inline = false;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * `inline` must be `false`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /** Set to `true` to disable the checkbox */
   export let disabled = false;
 
@@ -37,7 +44,9 @@
     on:mouseenter
     on:mouseleave
   >
-    <slot />
+    <slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
+        <svelte:component this="{icon}" />
+      </div>{/if}
   </p>
 {:else}
   <a
@@ -54,6 +63,9 @@
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave><slot /></a
+    on:mouseleave
+    ><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
+        <svelte:component this="{icon}" />
+      </div>{/if}</a
   >
 {/if}

src/Link/OutboundLink.svelte

@@ -12,7 +12,7 @@
   on:mouseenter
   on:mouseleave
   target="_blank"
+  icon="{Launch16}"
 >
   <slot />
-  <Launch16 />
 </Link>

src/Search/Search.svelte

@@ -103,7 +103,9 @@
     class:bx--search--xl="{size === 'xl'}"
     class="{searchClass}"
   >
-    <Search16 class="bx--search-magnifier" />
+    <div class:bx--search-magnifier="{true}">
+      <Search16 class="bx--search-magnifier-icon" />
+    </div>
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
       >{labelText}</label
     >

src/Tile/ClickableTile.svelte

@@ -5,21 +5,23 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
   /**
    * Set the `href`
    * @type {string}
    */
   export let href = undefined;
+
+  import Link from "../Link/Link.svelte";
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
-<a
-  class:bx--tile="{true}"
-  class:bx--tile--clickable="{true}"
-  class:bx--tile--is-clicked="{clicked}"
-  class:bx--tile--light="{light}"
-  rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+<Link
   {...$$restProps}
+  disabled="{disabled}"
+  class="bx--tile bx--tile--clickable {clicked &&
+    'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
   href="{href}"
   on:click
   on:click="{() => {
@@ -36,4 +38,4 @@
   on:mouseleave
 >
   <slot />
-</a>
+</Link>