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

COMPONENT_INDEX.md

@@ -479,6 +479,7 @@ None.
 | :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
 | clicked   | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile           |
 | light     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
+| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile         |
 | href      | <code>let</code> | No       | <code>string</code>  | --                 | Set the `href`                            |
 
 ### Slots

docs/src/COMPONENT_API.json

@@ -767,6 +767,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "href",
           "kind": "let",
@@ -779,14 +789,14 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "a" },
-        { "type": "forwarded", "name": "keydown", "element": "a" },
-        { "type": "forwarded", "name": "mouseover", "element": "a" },
-        { "type": "forwarded", "name": "mouseenter", "element": "a" },
-        { "type": "forwarded", "name": "mouseleave", "element": "a" }
+        { "type": "forwarded", "name": "click", "element": "Link" },
+        { "type": "forwarded", "name": "keydown", "element": "Link" },
+        { "type": "forwarded", "name": "mouseover", "element": "Link" },
+        { "type": "forwarded", "name": "mouseenter", "element": "Link" },
+        { "type": "forwarded", "name": "mouseleave", "element": "Link" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "a" }
+      "rest_props": { "type": "InlineComponent", "name": "Link" }
     },
     {
       "moduleName": "CodeSnippet",

docs/src/pages/components/ClickableTile.svx

@@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte
 ### Light variant
 
 <ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
+
+### Disabled state
+
+<ClickableTile disabled href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

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>

types/Tile/ClickableTile.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
 
-export interface ClickableTileProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface ClickableTileProps {
   /**
    * Set to `true` to click the tile
    * @default false
@@ -15,6 +14,12 @@ export interface ClickableTileProps
    */
   light?: boolean;
 
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Set the `href`
    */