@mozaic-ds/web-components 1.5.1 → 1.6.0

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

@@ -0,0 +1,65 @@
+/**
+ * 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 icon - Named slot for the action icon.
+ * @event action {CustomEvent<void>} - Emits when the action button is triggered.
+ */
+interface Props {
+    /**
+     * Defines the visual style of the tile.
+     */
+    appearance?: 'primary' | 'secondary' | 'inverse';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * If set, the tile becomes an external link (`<a>`).
+     * Used to navigate to a full URL.
+     * Set `internal` prop to `true` for internal navigation.
+     */
+    href?: string;
+    /**
+     * If set, the tile becomes an internal link.
+     * Used for navigation within the app.
+     */
+    internal?: boolean;
+    /**
+     * Position of the icon relative to the content.
+     */
+    iconposition?: 'bottom' | 'right';
+    /**
+     * Callback to trigger when button action is clicked.
+     */
+    onAction?: () => void;
+}
+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 TileClickable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+    icon: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    icon: {};
+}, {}, "">;
+type TileClickable = InstanceType<typeof TileClickable>;
+export default TileClickable;
+//# sourceMappingURL=TileClickable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TileClickable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tileclickable/TileClickable.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA6EH,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,aAAa;;;;;;;;UAAqF,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/components/tileexpandable/README.md

@@ -0,0 +1,20 @@
+# `m-tile-expandable`
+
+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'` | `primary` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `trigger` | Determines how the tile expansion is triggered. | `'container'` `'icon'` `'button'` | `icon` |
+| `label` | Label for the action button (only used when trigger is 'button'). | `string` | `See more` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Default slot for the main content of the tile. |
+| `details` | Named slot for expandable content shown when the tile is opened. |
+

package/dist/components/tileexpandable/TileExpandable.js

@@ -0,0 +1,114 @@
+import{c as G,e as J,a as K,p as f,k as L,t as H,b as d,d as N,f as m,j as a,i as p,l as t,x as O,r as c,m as Q,s as R,h as W,w as E,q as Y,v as ee}from"../../custom-element.js";import{i as te}from"../../if.js";import{s as $}from"../../slot.js";import{e as le}from"../../svelte-element.js";import{a as re,s as D}from"../../attributes.js";import{B as ie}from"../button/Button.js";import{I as ae}from"../iconbutton/IconButton.js";import{c as I}from"../../Condition20.js";import"../../branches.js";import"../../this.js";import"../loader/Loader.js";var ce=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),oe=m('<span class="mc-tile__action-label svelte-9ba9gl"> </span>'),ne=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),se=m('<div class="mc-tile__body svelte-9ba9gl"><!></div> <div class="mc-tile__action svelte-9ba9gl"><!></div>',1),de=m('<div><!> <div class="mc-tile__content svelte-9ba9gl"><!></div></div>');const me={hash:"svelte-9ba9gl",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tile.svelte-9ba9gl {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-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile.svelte-9ba9gl {transition:none;}
+}.mc-tile.svelte-9ba9gl {box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden;}.mc-tile--secondary.svelte-9ba9gl {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--secondary.svelte-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--secondary.svelte-9ba9gl {transition:none;}
+}.mc-tile--inverse.svelte-9ba9gl {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-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--inverse.svelte-9ba9gl {transition:none;}
+}.mc-tile--inverse.svelte-9ba9gl svg:where(.svelte-9ba9gl),
+.mc-tile--inverse.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::after,
+.mc-tile--inverse.svelte-9ba9gl .mc-tile__action-icon:where(.svelte-9ba9gl) {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--inverse.mc-tile--navigate.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl {flex:1;}.mc-tile--bordered.svelte-9ba9gl {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--action-right.svelte-9ba9gl {flex-direction:row;align-items:stretch;}.mc-tile--action-right.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {border-radius:var(--border-radius-m, 0.5rem) 0 0 var(--border-radius-m, 0.5rem);}.mc-tile--action-right.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {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-9ba9gl {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-9ba9gl {margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;}.mc-tile--navigate.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::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-9ba9gl {display:flex;flex-direction:column;}.mc-tile.svelte-9ba9gl: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-9ba9gl: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-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {transition:none;}
+}.mc-tile.svelte-9ba9gl: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-9ba9gl {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-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-9ba9gl {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-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-9ba9gl svg:where(.svelte-9ba9gl),
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::after,
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-9ba9gl .mc-tile__action-icon:where(.svelte-9ba9gl) {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-9ba9gl {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-9ba9gl)) {display:flex;flex-direction:column;}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__content:where(.svelte-9ba9gl) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-9ba9gl)) {pointer-events:auto;display:flex;flex-direction:column;}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-9ba9gl)) .mc-tile__body:where(.svelte-9ba9gl) {flex-grow:1;display:flex;flex-direction:column;justify-content:center;}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-9ba9gl)) .mc-tile__action:where(.svelte-9ba9gl) {flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0.75rem 0.75rem;pointer-events:auto;background-color:transparent;}.mc-tile.svelte-9ba9gl:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-9ba9gl)) .mc-tile__action:where(.svelte-9ba9gl) .mc-tile__action-button:where(.svelte-9ba9gl) {pointer-events:auto;}.mc-tile--clickable.svelte-9ba9gl {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-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.svelte-9ba9gl {transition:none;}
+}.mc-tile--clickable.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-9ba9gl:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-9ba9gl:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-9ba9gl:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.svelte-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--clickable.svelte-9ba9gl {transition:box-shadow 200ms ease;cursor:pointer;position:relative;}.mc-tile--clickable.svelte-9ba9gl::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-9ba9gl {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.mc-tile--secondary.svelte-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--clickable.mc-tile--secondary.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.svelte-9ba9gl:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-9ba9gl:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-9ba9gl:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl {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-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-9ba9gl:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-9ba9gl:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl svg:where(.svelte-9ba9gl),
+.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::after,
+.mc-tile--clickable.mc-tile--inverse.svelte-9ba9gl .mc-tile__action-icon:where(.svelte-9ba9gl) {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--clickable.mc-tile--bordered.svelte-9ba9gl {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-9ba9gl: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-9ba9gl:is(button:where(.svelte-9ba9gl)) {width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none;}.mc-tile--clickable.svelte-9ba9gl:is(a:where(.svelte-9ba9gl)) {display:flex;text-decoration:none;color:inherit;}.mc-tile--clickable.svelte-9ba9gl:is(a:where(.svelte-9ba9gl)):visited {color:inherit;}.mc-tile--clickable.svelte-9ba9gl:is(a:where(.svelte-9ba9gl)):not(.mc-tile--action-right) {flex-direction:column;}.mc-tile--clickable.svelte-9ba9gl:is(div[role=button]:where(.svelte-9ba9gl)) {width:100%;cursor:pointer;}.mc-tile--expandable.svelte-9ba9gl {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-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-9ba9gl {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--expandable.svelte-9ba9gl {display:block;position:relative;overflow:hidden;}
+@supports (interpolate-size: allow-keywords) {.mc-tile--expandable.svelte-9ba9gl {interpolate-size:allow-keywords;}
+}.mc-tile--expandable.mc-tile--secondary.svelte-9ba9gl {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.mc-tile--secondary.svelte-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--expandable.mc-tile--bordered.svelte-9ba9gl {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--expandable.mc-tile--borderless.svelte-9ba9gl {border:none;}.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) {cursor:default;}.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl) {cursor:pointer;}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transition:transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transition:none;}
+}.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transform:rotateX(0deg);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='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%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='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {display:flex;align-items:stretch;position:relative;z-index:2;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl)::after {border-radius:var(--border-radius-m, 0.5rem);content:"";position:absolute;inset:0.25rem;background-color:transparent;pointer-events:none;z-index:-1;}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl)::after {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-9ba9gl .mc-tile__header:where(.svelte-9ba9gl)::after {transition:none;}
+}.mc-tile--expandable.svelte-9ba9gl .mc-tile__header[type=button]:where(.svelte-9ba9gl) {width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__header[type=button]:where(.svelte-9ba9gl):focus-visible {outline:none;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__header[type=button]:where(.svelte-9ba9gl):focus-visible::after {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--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl):hover::after {background-color:var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:where(.svelte-9ba9gl):active::after {background-color:var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tile--expandable.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {flex-grow:1;position:relative;z-index:1;}.mc-tile--expandable.svelte-9ba9gl:has(.mc-tile__action:where(.svelte-9ba9gl)) .mc-tile__body:where(.svelte-9ba9gl) {border-radius:var(--border-radius-m, 0.5rem) 0 0 0;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {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;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1;}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {transition:max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {transition:none;}
+}.mc-tile--expandable.svelte-9ba9gl .mc-tile__content[aria-hidden=false]:where(.svelte-9ba9gl) {max-height:50rem;}
+@supports (interpolate-size: allow-keywords) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {height:0;max-height:none;}
+  @media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {transition:height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);transition-behavior:allow-discrete;}
+  }
+  @media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {transition:none;}
+  }.mc-tile--expandable.svelte-9ba9gl .mc-tile__content[aria-hidden=false]:where(.svelte-9ba9gl) {height:auto;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transition:transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transition:none;}
+}.mc-tile--expandable.svelte-9ba9gl:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true]:where(.svelte-9ba9gl) .mc-tile__action:where(.svelte-9ba9gl)::after {transform:rotateX(180deg);}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.svelte-9ba9gl .mc-tile__action-button:where(.svelte-9ba9gl) {position:relative;z-index:2;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__action-button:where(.svelte-9ba9gl):not(.mc-button) {display:flex;align-items:center;gap:0.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none;}.mc-tile--expandable.svelte-9ba9gl .mc-tile__action-button:where(.svelte-9ba9gl):not(.mc-button):focus-visible {outline:0.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:0.125rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-tile--expandable.svelte-9ba9gl .mc-tile__action-label:where(.svelte-9ba9gl) {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5);}.mc-tile--expandable.mc-tile--trigger-icon.svelte-9ba9gl {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {justify-content:center;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::after {content:none;display:none;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl {cursor:default;display:flex;flex-direction:column;}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {cursor:default;order:1;}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {display:contents;}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl)::after {display:none;}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl .mc-tile__content:where(.svelte-9ba9gl) {order:2;border-radius:0;}.mc-tile--expandable.mc-tile--trigger-button.svelte-9ba9gl .mc-tile__action-button:where(.svelte-9ba9gl) {font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0;}
+@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-button.svelte-9ba9gl .mc-tile__action-label:where(.svelte-9ba9gl) {flex:initial;}.mc-tile--selectable.svelte-9ba9gl {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-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-9ba9gl {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-9ba9gl {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-9ba9gl {transition:none;}
+}.mc-tile--selectable.svelte-9ba9gl {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-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {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.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) .mc-tile__body:where(.svelte-9ba9gl) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__content:where(.svelte-9ba9gl) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-9ba9gl {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-9ba9gl {align-items:center;}.mc-tile--selectable.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-9ba9gl {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-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {visibility:hidden;position:absolute;}`};function be(z,l){J(l,!0),K(z,me);let b=f(l,"appearance",7,"primary"),h=f(l,"bordered",7,!0),r=f(l,"trigger",7,"icon"),x=f(l,"label",7,"See more");const g=crypto.randomUUID();let o=ee(!1);const B=E(()=>r()==="container");function w(){Y(o,!t(o))}var P={get appearance(){return b()},set appearance(e="primary"){b(e),p()},get bordered(){return h()},set bordered(e=!0){h(e),p()},get trigger(){return r()},set trigger(e="icon"){r(e),p()},get label(){return x()},set label(e="See more"){x(e),p()}},v=de(),M=a(v);le(M,()=>t(B)?"button":"div",!1,(e,T)=>{re(e,()=>({class:"mc-tile__header",...t(B)?{type:"button","aria-controls":`content-${g}`,"aria-expanded":t(o),onclick:()=>w()}:{}}),void 0,void 0,void 0,"svelte-9ba9gl");var j=se(),_=O(j),U=a(_);$(U,l,"default",{},null),c(_);var V=L(_,2),X=a(V);{var q=n=>{var i=ce(),k=a(i);{let y=E(()=>`content-${g}`);ae(k,{ghost:!0,get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),$$slots:{icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)},A=n=>{var i=ne(),k=a(i);{let y=E(()=>`content-${g}`);ie(k,{ghost:!0,iconposition:"right",get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),children:(s,Z)=>{var C=oe(),F=a(C,!0);c(C),H(()=>Q(F,x())),d(s,C)},$$slots:{default:!0,icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)};te(X,n=>{r()==="icon"?n(q):r()==="button"&&n(A,1)})}c(V),d(T,j)});var u=L(M,2),S=a(u);return $(S,l,"details",{},null),c(u),c(v),H(()=>{R(v,1,W({"mc-tile mc-tile--expandable":!0,[`mc-tile--${b()}`]:b()!=="primary","mc-tile--bordered":h(),[`mc-tile--trigger-${r()}`]:r()!=="container"}),"svelte-9ba9gl"),D(u,"id",`content-${g}`),D(u,"aria-hidden",!t(o))}),d(z,v),N(P)}customElements.define("m-tile-expandable",G(be,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{},trigger:{},label:{}},["default","details"],[],{mode:"open"}));
+//# sourceMappingURL=TileExpandable.js.map

package/dist/components/tileexpandable/TileExpandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileExpandable.js","sources":["../../../src/components/tileexpandable/TileExpandable.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile-expandable',\n    props: {\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { ChevronDown24 } from '@mozaic-ds/icons-svelte';\n\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 details - Named slot for expandable content shown when the tile is opened.\n   */\n\n  interface Props {\n    /**\n     * Defines the visual style of the tile.\n     */\n    appearance?: 'primary' | 'secondary';\n    /**\n     * Adds a border around the tile.\n     */\n    bordered?: boolean;\n    /**\n     * Determines how the tile expansion is triggered.\n     */\n    trigger?: 'container' | 'icon' | 'button';\n    /**\n     * Label for the action button (only used when trigger is 'button').\n     */\n    label?: string;\n  }\n\n  let {\n    appearance = 'primary',\n    bordered = true,\n    trigger = 'icon',\n    label = 'See more',\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n\n  let open = $state(false);\n\n  const isContainerTriggered = $derived(trigger === 'container');\n\n  function toggle() {\n    open = !open;\n  }\n</script>\n\n<div\n  class={{\n    'mc-tile mc-tile--expandable': true,\n    [`mc-tile--${appearance}`]: appearance !== 'primary',\n    'mc-tile--bordered': bordered,\n    [`mc-tile--trigger-${trigger}`]: trigger !== 'container',\n  }}\n>\n  <svelte:element\n    this={isContainerTriggered ? 'button' : 'div'}\n    class=\"mc-tile__header\"\n    {...isContainerTriggered\n      ? {\n          type: 'button',\n          ['aria-controls']: `content-${id}`,\n          ['aria-expanded']: open,\n          onclick: () => toggle(),\n        }\n      : {}}\n  >\n    <div class=\"mc-tile__body\">\n      <slot />\n    </div>\n\n    <div class=\"mc-tile__action\">\n      {#if trigger === 'icon'}\n        <span class=\"mc-tile__action-button\">\n          <IconButton\n            ghost\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <ChevronDown24 slot=\"icon\" />\n          </IconButton>\n        </span>\n      {:else if trigger === 'button'}\n        <span class=\"mc-tile__action-button\">\n          <Button\n            ghost\n            iconposition=\"right\"\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <span class=\"mc-tile__action-label\">\n              {label}\n            </span>\n\n            <ChevronDown24 slot=\"icon\" />\n          </Button>\n        </span>\n      {/if}\n    </div>\n  </svelte:element>\n\n  <div class=\"mc-tile__content\" id={`content-${id}`} aria-hidden={!open}>\n    <slot name=\"details\" />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tile';\n</style>\n"],"names":["appearance","bordered","trigger","label","id","open","$.state","isContainerTriggered","$.derived","toggle","$.set","div","root","node","$.child","$$element","$$anchor","$.get","div_1","$.first_child","fragment","div_2","span","root_2","IconButton","node_3","ChevronDown24","span_1","root_4","Button","node_4","span_2","root_5","$$render","consequent","consequent_1","div_3","$.sibling","$.reset","$.set_attribute","$.append"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;s5EASA,iBA+BI,IAAAA,qBAAa,SAAS,EACtBC,mBAAW,EAAI,EACfC,kBAAU,MAAM,EAChBC,gBAAQ,UAAU,QAGdC,EAAK,OAAO,WAAU,MAExBC,EAAOC,GAAO,EAAK,QAEjBC,EAAoBC,EAAA,IAAYN,EAAO,IAAK,WAAW,EAEpD,SAAAO,GAAS,CAChBC,EAAAL,KAAQA,CAAI,CAAA,CACd,sDAde,UAAS,qDACX,GAAI,mDACL,OAAM,+CACR,WAAU,YAcrBM,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,aASSJ,CAAoB,EAAG,SAAW,MAAK,GAAA,CAAAQ,EAAAC,IAAA,oCAEzC,GAAAC,EAAAV,CAAA,GAEE,KAAM,SACL,2BAA6BH,CAAE,GAC/B,kBAAkBC,CAAI,EACvB,YAAeI,EAAM,yDAI1BS,EAAGC,EAAAC,CAAA,MAAHF,CAAG,6BAAHA,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,MAIHG,CAAG,iBAECC,EAAIC,GAAA,MAAJD,CAAI,0BAGyBlB,CAAE,EAAA,EAF7BoB,GAAAC,EAAA,0EAGgBpB,CAAI,eACJI,EAAM,wBAEpBiB,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAPjBM,CAAI,MAAJA,CAAI,aAWJK,EAAIC,GAAA,MAAJD,CAAI,0BAIyBvB,CAAE,EAAA,EAH7ByB,GAAAC,EAAA,+FAIgBzB,CAAI,eACJI,EAAM,uBAEpBsB,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF5B,EAAK,CAAA,CAAA,MADP4B,CAAI,oCAIJL,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAZjBW,CAAI,MAAJA,CAAI,YAZFzB,EAAO,IAAK,OAAM+B,EAAAC,CAAA,EAWbhC,EAAO,IAAK,UAAQ+B,EAAAE,EAAA,CAAA,MAZ/Bd,CAAG,eAgCLe,EAAGC,EAAAxB,EAAA,CAAA,MAAHuB,CAAG,oCAAHA,CAAG,EAxDLE,EAAA3B,CAAA,WAAAA,OAEG,8BAA+B,gBAClBX,EAAU,CAAA,EAAA,EAAKA,EAAU,IAAK,UAC3C,oBAAqBC,EAAQ,uBACRC,EAAO,CAAA,EAAA,EAAKA,EAAO,IAAK,+BAmD9CqC,EAAAH,kBAA4ChC,CAAE,EAAA,EAA9CmC,EAAAH,mBAAgE/B,CAAI,CAAA,IAxDtEmC,EAAAxB,EAAAL,CAAA,MAFO"}

package/dist/components/tileexpandable/TileExpandable.spec.js

@@ -0,0 +1,65 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import TileExpandable from './TileExpandable.svelte';
+describe('m-tile-expandable', () => {
+    it('applies the default class', () => {
+        const { container } = render(TileExpandable);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile).toBeTruthy();
+        expect(tile?.classList.contains('mc-tile--primary')).toBe(false);
+        expect(tile?.classList.contains('mc-tile--expandable')).toBe(true);
+    });
+    it('applies the class for secondary appearance', () => {
+        const { container } = render(TileExpandable, { 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(TileExpandable, { bordered: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
+    });
+    it('applies the correct trigger class for icon trigger (default)', () => {
+        const { container } = render(TileExpandable);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--trigger-icon')).toBe(true);
+    });
+    it('applies the correct trigger class for button trigger', () => {
+        const { container } = render(TileExpandable, { trigger: 'button' });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--trigger-button')).toBe(true);
+    });
+    it('opens and closes the content when container trigger is clicked', async () => {
+        const { container } = render(TileExpandable, { trigger: 'container' });
+        const header = container.querySelector('.mc-tile__header');
+        const content = container.querySelector('.mc-tile__content');
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+        await fireEvent.click(header);
+        expect(content?.getAttribute('aria-hidden')).toBe('false');
+        await fireEvent.click(header);
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+    });
+    it('opens and closes the content when icon trigger is clicked', async () => {
+        const { container, getByRole } = render(TileExpandable, { trigger: 'icon' });
+        const button = getByRole('button');
+        const content = container.querySelector('.mc-tile__content');
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+        await fireEvent.click(button);
+        expect(content?.getAttribute('aria-hidden')).toBe('false');
+        await fireEvent.click(button);
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+    });
+    it('opens and closes the content when button trigger is clicked', async () => {
+        const { container, getByRole } = render(TileExpandable, {
+            trigger: 'button',
+            buttonlabel: 'See more',
+        });
+        const button = getByRole('button');
+        const content = container.querySelector('.mc-tile__content');
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+        await fireEvent.click(button);
+        expect(content?.getAttribute('aria-hidden')).toBe('false');
+        await fireEvent.click(button);
+        expect(content?.getAttribute('aria-hidden')).toBe('true');
+    });
+});

package/dist/components/tileexpandable/TileExpandable.stories.d.ts

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

package/dist/components/tileexpandable/TileExpandable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileExpandable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tileexpandable/TileExpandable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA+BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/tileexpandable/TileExpandable.stories.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './TileExpandable.svelte';
+const meta = {
+    title: 'Content/Tile/Expandable',
+    component: 'm-tile-expandable',
+    argTypes: {
+        appearance: {
+            control: { type: 'radio' },
+            options: ['primary', 'secondary'],
+        },
+        trigger: {
+            control: { type: 'radio' },
+            options: ['icon', 'button', 'container'],
+        },
+    },
+    args: {
+        default: `<div class="placeholder-slot">Click on expand button to see details.</div>`,
+        details: `
+      <div slot="details" class="placeholder-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+    },
+    render: (args) => html `
+    <m-tile-expandable
+      appearance="${ifDefined(args.appearance)}"
+      ?bordered="${args.bordered}"
+      trigger="${ifDefined(args.trigger)}"
+      label="${ifDefined(args.label)}"
+    >
+      ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.details))}
+    </m-tile-expandable>
+  `,
+};
+export default meta;
+export const Default = {};