@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/tile/Tile.svelte.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
+ * @slot default - Default slot for the main content of the tile.
+ * @slot details - Named slot for additional content shown below the main content.
+ * @slot action - Named slot for action element, such as a button or link.
+ */
+interface Props {
+    /**
+     * Defines the visual style of the tile.
+     */
+    appearance?: 'primary' | 'secondary' | 'inverse';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Tile: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+    action: {};
+    details: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    action: {};
+    details: {};
+}, {}, "">;
+type Tile = InstanceType<typeof Tile>;
+export default Tile;
+//# sourceMappingURL=Tile.svelte.d.ts.map

package/dist/components/tile/Tile.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tile/Tile.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/components/tileclickable/README.md

@@ -0,0 +1,31 @@
+# `m-tile-clickable`
+
+A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance` | Defines the visual style of the tile. | `'primary'` `'secondary'` `'inverse'` | `primary` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `href` | If set, the tile becomes an external link (`<a>`).
+Used to navigate to a full URL.
+Set `internal` prop to `true` for internal navigation. | `string` |   |
+| `internal` | If set, the tile becomes an internal link.
+Used for navigation within the app. | `boolean` |   |
+| `iconposition` | Position of the icon relative to the content. | `'bottom'` `'right'` | `right` |
+| `onAction` | Callback to trigger when button action is clicked. | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Default slot for the main content of the tile. |
+| `icon` | Named slot for the action icon. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `action` | Emits when the action button is triggered. | `CustomEvent<void>` |
+

package/dist/components/tileclickable/TileClickable.js

@@ -0,0 +1,114 @@
+import{c as L,e as A,a as T,p as l,y as D,x as j,i as n,s as S,b as q,h as b,d as F,w as f,f as G,m as i,r as x}from"../../custom-element.js";import{s as _}from"../../slot.js";import{e as I}from"../../svelte-element.js";import{a as J}from"../../attributes.js";import{b as K}from"../../this.js";import"../../branches.js";var N=G('<div class="mc-tile__body svelte-wqkxlj"><!></div> <div class="mc-tile__action svelte-wqkxlj"><div class="mc-tile__action-icon svelte-wqkxlj"><!></div></div>',1);const O={hash:"svelte-wqkxlj",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tile.svelte-wqkxlj {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile.svelte-wqkxlj {transition:none;}
+}.mc-tile.svelte-wqkxlj {box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden;}.mc-tile--secondary.svelte-wqkxlj {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--secondary.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--secondary.svelte-wqkxlj {transition:none;}
+}.mc-tile--inverse.svelte-wqkxlj {background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--inverse.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--inverse.svelte-wqkxlj {transition:none;}
+}
+.mc-tile--inverse.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after,
+.mc-tile--inverse.svelte-wqkxlj .mc-tile__action-icon:where(.svelte-wqkxlj) {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--inverse.mc-tile--navigate.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {background-color:var(--color-text-primary-inverse, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile--inverse.mc-tile--open.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {background-color:var(--color-text-primary-inverse, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile--inverse.mc-tile--external-link.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {background-color:var(--color-text-primary-inverse, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile__body.svelte-wqkxlj {flex:1;}.mc-tile--bordered.svelte-wqkxlj {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--action-right.svelte-wqkxlj {flex-direction:row;align-items:stretch;}.mc-tile--action-right.svelte-wqkxlj .mc-tile__body:where(.svelte-wqkxlj) {border-radius:var(--border-radius-m, 0.5rem) 0 0 var(--border-radius-m, 0.5rem);}.mc-tile--action-right.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {border-radius:0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;min-width:4rem;justify-content:center;}.mc-tile__action.svelte-wqkxlj {border-radius:0 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:0.5rem 0.5rem;gap:0.5rem;}.mc-tile__action-icon.svelte-wqkxlj {margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;}.mc-tile--navigate.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {content:"";margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile--open.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {content:"";margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile--external-link.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {content:"";margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-tile__item.svelte-wqkxlj {display:flex;flex-direction:column;}.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {transition:none;}
+}.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {cursor:default;pointer-events:none;}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary.svelte-wqkxlj {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary.svelte-wqkxlj {transition:none;}
+}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-wqkxlj {background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-wqkxlj {transition:none;}
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after,
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-wqkxlj .mc-tile__action-icon:where(.svelte-wqkxlj) {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--bordered.svelte-wqkxlj {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-wqkxlj)) {pointer-events:auto;display:flex;flex-direction:column;}.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-wqkxlj)) .mc-tile__body:where(.svelte-wqkxlj) {flex-grow:1;display:flex;flex-direction:column;justify-content:center;}.mc-tile.svelte-wqkxlj:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-wqkxlj)) .mc-tile__action:where(.svelte-wqkxlj) {flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0.75rem 0.75rem;pointer-events:auto;background-color:transparent;}.mc-tile--clickable.svelte-wqkxlj {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.svelte-wqkxlj {transition:none;}
+}.mc-tile--clickable.svelte-wqkxlj:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-wqkxlj:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-wqkxlj:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-wqkxlj:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.svelte-wqkxlj {transition:none;}
+}.mc-tile--clickable.svelte-wqkxlj {transition:box-shadow 200ms ease;cursor:pointer;position:relative;}.mc-tile--clickable.svelte-wqkxlj::before {border-radius:var(--border-radius-s, 0.25rem);content:"";position:absolute;inset:0.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-0.125rem;}.mc-tile--clickable.mc-tile--secondary.svelte-wqkxlj {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.mc-tile--secondary.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.mc-tile--secondary.svelte-wqkxlj {transition:none;}
+}.mc-tile--clickable.mc-tile--secondary.svelte-wqkxlj:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.svelte-wqkxlj:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-wqkxlj:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-wqkxlj:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj {background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj {transition:none;}
+}.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-wqkxlj:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-wqkxlj:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}
+.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after,
+.mc-tile--clickable.mc-tile--inverse.svelte-wqkxlj .mc-tile__action-icon:where(.svelte-wqkxlj) {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--clickable.mc-tile--bordered.svelte-wqkxlj {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-wqkxlj:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tile--clickable.svelte-wqkxlj:is(button:where(.svelte-wqkxlj)) {width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none;}.mc-tile--clickable.svelte-wqkxlj:is(a:where(.svelte-wqkxlj)) {display:flex;text-decoration:none;color:inherit;}.mc-tile--clickable.svelte-wqkxlj:is(a:where(.svelte-wqkxlj)):visited {color:inherit;}.mc-tile--clickable.svelte-wqkxlj:is(a:where(.svelte-wqkxlj)):not(.mc-tile--action-right) {flex-direction:column;}.mc-tile--clickable.svelte-wqkxlj:is(div[role=button]:where(.svelte-wqkxlj)) {width:100%;cursor:pointer;}.mc-tile--expandable.svelte-wqkxlj {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-wqkxlj {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-wqkxlj {transition:none;}
+}.mc-tile--expandable.svelte-wqkxlj {display:block;position:relative;overflow:hidden;}
+@supports (interpolate-size: allow-keywords) {.mc-tile--expandable.svelte-wqkxlj {interpolate-size:allow-keywords;}
+}.mc-tile--expandable.mc-tile--secondary.svelte-wqkxlj {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.mc-tile--secondary.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.mc-tile--secondary.svelte-wqkxlj {transition:none;}
+}.mc-tile--expandable.mc-tile--bordered.svelte-wqkxlj {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--expandable.mc-tile--borderless.svelte-wqkxlj {border:none;}.mc-tile--expandable.svelte-wqkxlj:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) {cursor:default;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.svelte-wqkxlj .mc-tile__body:where(.svelte-wqkxlj) {flex-grow:1;position:relative;z-index:1;}.mc-tile--expandable.svelte-wqkxlj:has(.mc-tile__action:where(.svelte-wqkxlj)) .mc-tile__body:where(.svelte-wqkxlj) {border-radius:var(--border-radius-m, 0.5rem) 0 0 0;}.mc-tile--expandable.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {border-radius:0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@supports (interpolate-size: allow-keywords) {
+  @media (prefers-reduced-motion: no-preference) {
+  }
+  @media (prefers-reduced-motion: reduce) {
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.mc-tile--trigger-icon.svelte-wqkxlj {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-wqkxlj .mc-tile__body:where(.svelte-wqkxlj) {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {justify-content:center;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {content:none;display:none;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.mc-tile--trigger-button.svelte-wqkxlj {cursor:default;display:flex;flex-direction:column;}.mc-tile--expandable.mc-tile--trigger-button.svelte-wqkxlj .mc-tile__body:where(.svelte-wqkxlj) {cursor:default;order:1;}.mc-tile--expandable.mc-tile--trigger-button.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {cursor:pointer;min-width:auto;justify-content:flex-start;padding:0.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0;}.mc-tile--expandable.mc-tile--trigger-button.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj)::after {display:none;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--selectable.svelte-wqkxlj {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-wqkxlj {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-wqkxlj {transition:none;}
+}.mc-tile--selectable.svelte-wqkxlj {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-wqkxlj .mc-tile__body:where(.svelte-wqkxlj) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.mc-tile--input-left.svelte-wqkxlj {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-wqkxlj {align-items:center;}.mc-tile--selectable.svelte-wqkxlj:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-wqkxlj {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}.mc-tile--selectable.mc-tile--no-input.svelte-wqkxlj .mc-tile__action:where(.svelte-wqkxlj) {visibility:hidden;position:absolute;}`};function P(u,r){A(r,!0),T(u,O);let c=l(r,"appearance",7,"primary"),a=l(r,"bordered",7,!0),t=l(r,"href",7),o=l(r,"internal",7),s=l(r,"iconposition",7,"right"),d=l(r,"onAction",7),m;const w=f(()=>t()?"a":"button"),y=f(()=>t()?o()?"mc-tile--navigate":"mc-tile--external-link":"mc-tile--open"),C=f(()=>{if(t())return o()?"_self":"_blank"});function E(){d()?.(),m.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0}))}var z={get appearance(){return c()},set appearance(e="primary"){c(e),i()},get bordered(){return a()},set bordered(e=!0){a(e),i()},get href(){return t()},set href(e){t(e),i()},get internal(){return o()},set internal(e){o(e),i()},get iconposition(){return s()},set iconposition(e="right"){s(e),i()},get onAction(){return d()},set onAction(e){d(e),i()}},k=D(),M=j(k);return I(M,()=>n(w),!1,(e,V)=>{K(e,H=>m=H,()=>m),J(e,()=>({class:{"mc-tile mc-tile--clickable":!0,[`mc-tile--${c()}`]:c()!=="primary",[n(y)]:!0,"mc-tile--bordered":a(),"mc-tile--action-right":s()==="right"},href:t(),target:n(C),...n(w)==="button"?{onclick:()=>E(),type:"button"}:{}}),void 0,void 0,void 0,"svelte-wqkxlj");var p=N(),v=j(p),Z=b(v);_(Z,r,"default",{},null),x(v);var h=S(v,2),g=b(h),B=b(g);_(B,r,"icon",{},null),x(g),x(h),q(V,p)}),q(u,k),F(z)}customElements.define("m-tile-clickable",L(P,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},internal:{attribute:"internal",reflect:!0,type:"Boolean"},appearance:{},href:{},iconposition:{},onAction:{}},["default","icon"],[],{mode:"open"}));
+//# sourceMappingURL=TileClickable.js.map

package/dist/components/tileclickable/TileClickable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileClickable.js","sources":["../../../src/components/tileclickable/TileClickable.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile-clickable',\n    props: {\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\n      internal: { reflect: true, type: 'Boolean', attribute: 'internal' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.\n   * @slot default - Default slot for the main content of the tile.\n   * @slot icon - Named slot for the action icon.\n   * @event action {CustomEvent<void>} - Emits when the action button is triggered.\n   */\n\n  interface Props {\n    /**\n     * Defines the visual style of the tile.\n     */\n    appearance?: 'primary' | 'secondary' | 'inverse';\n    /**\n     * Adds a border around the tile.\n     */\n    bordered?: boolean;\n    /**\n     * If set, the tile becomes an external link (`<a>`).\n     * Used to navigate to a full URL.\n     * Set `internal` prop to `true` for internal navigation.\n     */\n    href?: string;\n    /**\n     * If set, the tile becomes an internal link.\n     * Used for navigation within the app.\n     */\n    internal?: boolean;\n    /**\n     * Position of the icon relative to the content.\n     */\n    iconposition?: 'bottom' | 'right';\n    /**\n     * Callback to trigger when button action is clicked.\n     */\n    onAction?: () => void;\n  }\n\n  let {\n    appearance = 'primary',\n    bordered = true,\n    href,\n    internal,\n    iconposition = 'right',\n    onAction,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  const rootTag = $derived(href ? 'a' : 'button');\n\n  const behaviorClass = $derived.by(() => {\n    if (href) {\n      if (internal) {\n        return 'mc-tile--navigate';\n      }\n\n      return 'mc-tile--external-link';\n    }\n\n    return 'mc-tile--open';\n  });\n\n  const targetAttr = $derived.by(() => {\n    if (href) {\n      if (internal) {\n        return '_self';\n      }\n\n      return '_blank';\n    }\n\n    return undefined;\n  });\n\n  function handleAction() {\n    onAction?.();\n    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));\n  }\n</script>\n\n<svelte:element\n  this={rootTag}\n  bind:this={element}\n  class={{\n    'mc-tile mc-tile--clickable': true,\n    [`mc-tile--${appearance}`]: appearance !== 'primary',\n    [behaviorClass]: true,\n    'mc-tile--bordered': bordered,\n    'mc-tile--action-right': iconposition === 'right',\n  }}\n  {href}\n  target={targetAttr}\n  {...rootTag === 'button' ? { onclick: () => handleAction(), type: 'button' } : {}}\n>\n  <div class=\"mc-tile__body\">\n    <slot />\n  </div>\n\n  <div class=\"mc-tile__action\">\n    <div class=\"mc-tile__action-icon\">\n      <slot name=\"icon\" />\n    </div>\n  </div>\n</svelte:element>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tile';\n</style>\n"],"names":["appearance","bordered","href","$.prop","$$props","internal","iconposition","onAction","element","rootTag","$.derived","behaviorClass","targetAttr","handleAction","$$element","$$anchor","$.bind_this","$$value","$.get","div","$.first_child","fragment_1","div_1","div_2"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kpCAUA,gBAuCI,IAAAA,qBAAa,SAAS,EACtBC,mBAAW,EAAI,EACfC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,uBAAe,OAAO,EACtBC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAGNI,EAEE,MAAAC,EAAOC,EAAA,IAAYR,EAAI,EAAG,IAAM,QAAQ,EAExCS,EAAaD,EAAA,IACbR,EAAI,EACFG,EAAQ,EACH,oBAGF,yBAGF,eACR,EAEKO,EAAUF,EAAA,IAAqB,CAC/B,GAAAR,EAAI,EACF,OAAAG,EAAQ,EACH,QAGF,QAIX,CAAC,EAEQ,SAAAQ,GAAe,CACtBN,MAAQ,EACRC,EAAQ,cAAa,IAAK,YAAY,SAAQ,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CACjF,sDAvCe,UAAS,qDACX,GAAI,+JAGA,QAAO,+FAuClBC,CAAO,EAAA,GAAA,CAAAK,EAAAC,IAAA,CACFC,EAAAF,EAAAG,GAAAT,QAAAA,CAAO,mBAEhB,6BAA8B,gBACjBR,EAAU,CAAA,EAAA,EAAKA,EAAU,IAAK,UAC1C,CAAAkB,EAAAP,CAAa,GAAG,GACjB,oBAAqBV,EAAQ,EAC7B,wBAAyBK,EAAY,IAAK,cAE3CJ,EAAI,WACGU,CAAU,EACd,GAAAM,EAAAT,CAAO,IAAK,SAAa,CAAA,QAAO,IAAQI,EAAY,EAAI,KAAM,QAAQ,uDAEzEM,EAAGC,EAAAC,CAAA,MAAHF,CAAG,6BAAHA,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,EAKDI,IADFD,CAAG,MACDC,CAAG,0BAAHA,CAAG,IADLD,CAAG,sBApBE"}

package/dist/components/tileclickable/TileClickable.spec.js

@@ -0,0 +1,62 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import TileClickable from './TileClickable.svelte';
+describe('m-tile-clickable', () => {
+    it('applies the default class', () => {
+        const { container } = render(TileClickable);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile).toBeTruthy();
+        expect(tile?.classList.contains('mc-tile--primary')).toBe(false);
+        expect(tile?.classList.contains('mc-tile--open')).toBe(true);
+    });
+    it('applies the class for secondary appearance', () => {
+        const { container } = render(TileClickable, { appearance: 'secondary' });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--secondary')).toBe(true);
+    });
+    it('applies the "mc-tile--bordered" class when bordered is true', () => {
+        const { container } = render(TileClickable, { bordered: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
+    });
+    it('applies the correct behavior class for internal navigation', () => {
+        const { container } = render(TileClickable, { href: '/internal', internal: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--navigate')).toBe(true);
+        expect(tile?.getAttribute('target')).toBe('_self');
+    });
+    it('applies the correct behavior class for external link', () => {
+        const { container } = render(TileClickable, { href: 'https://example.com' });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--external-link')).toBe(true);
+        expect(tile?.getAttribute('target')).toBe('_blank');
+    });
+    it('applies the correct behavior class for a button (default)', () => {
+        const { container } = render(TileClickable);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--open')).toBe(true);
+        expect(tile?.tagName.toLowerCase()).toBe('button');
+        expect(tile?.getAttribute('type')).toBe('button');
+    });
+    it('applies the correct class for iconposition "right"', () => {
+        const { container } = render(TileClickable, { iconposition: 'right' });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--action-right')).toBe(true);
+    });
+    it('emits the "action" event when clicked (button)', async () => {
+        const { container } = render(TileClickable);
+        const tile = container.querySelector('.mc-tile');
+        const eventSpy = vi.fn();
+        tile?.addEventListener('action', eventSpy);
+        await fireEvent.click(tile);
+        expect(eventSpy).toHaveBeenCalledTimes(1);
+    });
+    it('does not emit "action" event when clicking a link', async () => {
+        const { container } = render(TileClickable, { href: 'https://example.com' });
+        const tile = container.querySelector('.mc-tile');
+        const eventSpy = vi.fn();
+        tile?.addEventListener('action', eventSpy);
+        await fireEvent.click(tile);
+        expect(eventSpy).toHaveBeenCalledTimes(0);
+    });
+});

package/dist/components/tileclickable/TileClickable.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './TileClickable.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithBottomAction: Story;
+export declare const ExternalLink: Story;
+export declare const InternalNavigation: Story;
+//# sourceMappingURL=TileClickable.stories.d.ts.map

package/dist/components/tileclickable/TileClickable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileClickable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tileclickable/TileClickable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC"}

package/dist/components/tileclickable/TileClickable.stories.js

@@ -0,0 +1,52 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { action } from 'storybook/actions';
+import './TileClickable.svelte';
+const meta = {
+    title: 'Content/Tile/Clickable',
+    component: 'm-tile-clickable',
+    argTypes: {
+        appearance: {
+            control: { type: 'radio' },
+            options: ['primary', 'secondary', 'inverse'],
+        },
+        iconposition: {
+            control: { type: 'radio' },
+            options: ['right', 'bottom'],
+        },
+    },
+    args: {
+        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
+    },
+    render: (args) => html `
+    <m-tile-clickable
+      appearance="${ifDefined(args.appearance)}"
+      ?bordered="${args.bordered}"
+      href="${ifDefined(args.href)}"
+      ?internal="${args.internal}"
+      iconposition="${ifDefined(args.iconposition)}"
+      @action="${action('action')}"
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-tile-clickable>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithBottomAction = {
+    args: {
+        iconposition: 'bottom',
+    },
+};
+export const ExternalLink = {
+    args: {
+        href: '#',
+    },
+};
+export const InternalNavigation = {
+    args: {
+        href: '#',
+        internal: true,
+    },
+};