@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/tile/README.md

@@ -0,0 +1,19 @@
+# `m-tile`
+
+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` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Default slot for the main content of the tile. |
+| `action` | Named slot for action element, such as a button or link. |
+| `details` | Named slot for additional content shown below the main content. |
+

package/dist/components/tile/Tile.js

@@ -0,0 +1,111 @@
+import{c as C,e as j,a as M,p as f,k as u,t as V,b as s,d as Z,f as v,j as l,i as h,r as c,s as B,h as H}from"../../custom-element.js";import{i as z}from"../../if.js";import{a as L,s as p}from"../../slot.js";import"../../branches.js";var D=v('<div class="mc-tile__action svelte-1x4mzpd"><!></div>'),S=v('<div class="mc-tile__content svelte-1x4mzpd"><!></div>'),T=v('<div><div class="mc-tile__header svelte-1x4mzpd"><div class="mc-tile__body svelte-1x4mzpd"><!></div> <!></div> <!></div>');const q={hash:"svelte-1x4mzpd",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tile.svelte-1x4mzpd {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-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile.svelte-1x4mzpd {transition:none;}
+}.mc-tile.svelte-1x4mzpd {box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden;}.mc-tile--secondary.svelte-1x4mzpd {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--secondary.svelte-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--secondary.svelte-1x4mzpd {transition:none;}
+}.mc-tile--inverse.svelte-1x4mzpd {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-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--inverse.svelte-1x4mzpd {transition:none;}
+}
+.mc-tile--inverse.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::after {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--inverse.mc-tile--navigate.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd {flex:1;}.mc-tile--bordered.svelte-1x4mzpd {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--action-right.svelte-1x4mzpd {flex-direction:row;align-items:stretch;}.mc-tile--action-right.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {border-radius:var(--border-radius-m, 0.5rem) 0 0 var(--border-radius-m, 0.5rem);}.mc-tile--action-right.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {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-1x4mzpd {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-1x4mzpd {margin:0.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;}.mc-tile--navigate.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::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-1x4mzpd {display:flex;flex-direction:column;}.mc-tile.svelte-1x4mzpd: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-1x4mzpd: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-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {transition:none;}
+}.mc-tile.svelte-1x4mzpd: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-1x4mzpd {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-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-1x4mzpd {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-1x4mzpd {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-1x4mzpd {transition:none;}
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::after {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-1x4mzpd {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-1x4mzpd)) {display:flex;flex-direction:column;}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__content:where(.svelte-1x4mzpd) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-1x4mzpd)) {pointer-events:auto;display:flex;flex-direction:column;}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-1x4mzpd)) .mc-tile__body:where(.svelte-1x4mzpd) {flex-grow:1;display:flex;flex-direction:column;justify-content:center;}.mc-tile.svelte-1x4mzpd:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-1x4mzpd)) .mc-tile__action:where(.svelte-1x4mzpd) {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-1x4mzpd {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-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--clickable.svelte-1x4mzpd {transition:none;}
+}.mc-tile--clickable.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-1x4mzpd:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-1x4mzpd:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--bordered.svelte-1x4mzpd:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.svelte-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--clickable.svelte-1x4mzpd {transition:box-shadow 200ms ease;cursor:pointer;position:relative;}.mc-tile--clickable.svelte-1x4mzpd::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-1x4mzpd {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--clickable.mc-tile--secondary.svelte-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--clickable.mc-tile--secondary.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.svelte-1x4mzpd:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-1x4mzpd:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered.svelte-1x4mzpd:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-1x4mzpd {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-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--clickable.mc-tile--inverse.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.svelte-1x4mzpd:active {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-1x4mzpd:hover {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered.svelte-1x4mzpd:active {box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc);}
+.mc-tile--clickable.mc-tile--inverse.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::after {color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff);}.mc-tile--clickable.mc-tile--bordered.svelte-1x4mzpd {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--clickable.svelte-1x4mzpd: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--expandable.svelte-1x4mzpd {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-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-1x4mzpd {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--expandable.svelte-1x4mzpd {display:block;position:relative;overflow:hidden;}
+@supports (interpolate-size: allow-keywords) {.mc-tile--expandable.svelte-1x4mzpd {interpolate-size:allow-keywords;}
+}.mc-tile--expandable.mc-tile--secondary.svelte-1x4mzpd {background-color:var(--tile-color-background-secondary, #eff1f6);}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.mc-tile--secondary.svelte-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--expandable.mc-tile--bordered.svelte-1x4mzpd {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--expandable.mc-tile--borderless.svelte-1x4mzpd {border:none;}.mc-tile--expandable.svelte-1x4mzpd:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) {cursor:default;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {display:flex;align-items:stretch;position:relative;z-index:2;}.mc-tile--expandable.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd)::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-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd)::after {transition:none;}
+}.mc-tile--expandable.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {flex-grow:1;position:relative;z-index:1;}.mc-tile--expandable.svelte-1x4mzpd:has(.mc-tile__action:where(.svelte-1x4mzpd)) .mc-tile__body:where(.svelte-1x4mzpd) {border-radius:var(--border-radius-m, 0.5rem) 0 0 0;}.mc-tile--expandable.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {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-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {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-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {transition:max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--expandable.svelte-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {transition:none;}
+}
+@supports (interpolate-size: allow-keywords) {.mc-tile--expandable.svelte-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {height:0;max-height:none;}
+  @media (prefers-reduced-motion: no-preference) {.mc-tile--expandable.svelte-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {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-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {transition:none;}
+  }
+}
+@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-1x4mzpd {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {cursor:default;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {justify-content:center;}.mc-tile--expandable.mc-tile--trigger-icon.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::after {content:none;display:none;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--expandable.mc-tile--trigger-button.svelte-1x4mzpd {cursor:default;display:flex;flex-direction:column;}.mc-tile--expandable.mc-tile--trigger-button.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {cursor:default;order:1;}.mc-tile--expandable.mc-tile--trigger-button.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {display:contents;}.mc-tile--expandable.mc-tile--trigger-button.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd)::after {display:none;}.mc-tile--expandable.mc-tile--trigger-button.svelte-1x4mzpd .mc-tile__content:where(.svelte-1x4mzpd) {order:2;border-radius: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--selectable.svelte-1x4mzpd {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-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-1x4mzpd {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-1x4mzpd {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-1x4mzpd {transition:none;}
+}.mc-tile--selectable.svelte-1x4mzpd {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-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {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-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) .mc-tile__body:where(.svelte-1x4mzpd) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__content:where(.svelte-1x4mzpd) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-1x4mzpd {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-1x4mzpd {align-items:center;}.mc-tile--selectable.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-1x4mzpd {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-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {visibility:hidden;position:absolute;}`};function A(x,t){const b=L(t);j(t,!0),M(x,q);let i=f(t,"appearance",7,"primary"),n=f(t,"bordered",7,!0);var g={get appearance(){return i()},set appearance(e="primary"){i(e),h()},get bordered(){return n()},set bordered(e=!0){n(e),h()}},o=T(),d=l(o),a=l(d),w=l(a);p(w,t,"default",{},null),c(a);var _=u(a,2);{var k=e=>{var r=D(),m=l(r);p(m,t,"action",{},null),c(r),s(e,r)};z(_,e=>{b.action&&e(k)})}c(d);var y=u(d,2);{var E=e=>{var r=S(),m=l(r);p(m,t,"details",{},null),c(r),s(e,r)};z(y,e=>{b.details&&e(E)})}return c(o),V(()=>B(o,1,H({"mc-tile":!0,[`mc-tile--${i()}`]:i()!=="primary","mc-tile--bordered":n()}),"svelte-1x4mzpd")),s(x,o),Z(g)}customElements.define("m-tile",C(A,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{}},["default","action","details"],[],{mode:"open"}));
+//# sourceMappingURL=Tile.js.map

package/dist/components/tile/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile',\n    props: {\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\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 details - Named slot for additional content shown below the main content.\n   * @slot action - Named slot for action element, such as a button or link.\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\n  let { appearance = 'primary', bordered = true }: Props = $props();\n</script>\n\n<div\n  class={{\n    'mc-tile': true,\n    [`mc-tile--${appearance}`]: appearance !== 'primary',\n    'mc-tile--bordered': bordered,\n  }}\n>\n  <div class=\"mc-tile__header\">\n    <div class=\"mc-tile__body\">\n      <slot />\n    </div>\n\n    {#if $$slots.action}\n      <div class=\"mc-tile__action\">\n        <slot name=\"action\" />\n      </div>\n    {/if}\n  </div>\n\n  {#if $$slots.details}\n    <div class=\"mc-tile__content\">\n      <slot name=\"details\" />\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tile';\n</style>\n"],"names":["appearance","bordered","div","root","div_1","$.child","div_2","div_3","root_1","$$slots","$$render","consequent","div_4","root_2","consequent_1","$.reset","$.append","$$anchor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;s7EASA,6BAkBQ,IAAAA,qBAAa,SAAS,EAAEC,mBAAW,EAAI,uDAA1B,UAAS,qDAAa,GAAI,YAG9CC,EAAAC,EAAA,EAOEC,EAAGC,EAPLH,CAAA,EAQII,IADFF,CAAG,MACDE,CAAG,6BAAHA,CAAG,UAAHA,EAAG,CAAA,iBAKDC,EAAGC,EAAA,MAAHD,CAAG,4BAAHA,CAAG,MAAHA,CAAG,WADDE,EAAQ,QAAMC,EAAAC,CAAA,MALpBP,CAAG,UAAHA,EAAG,CAAA,iBAaDQ,EAAGC,EAAA,MAAHD,CAAG,6BAAHA,CAAG,MAAHA,CAAG,WADDH,EAAQ,SAAOC,EAAAI,CAAA,IAnBrBC,OAAAA,EAAAb,CAAA,UAAAA,OAEG,UAAW,gBACEF,EAAU,CAAA,EAAA,EAAKA,EAAU,IAAK,UAC3C,oBAAqBC,EAAQ,uBAJhCe,EAAAC,EAAAf,CAAA,MAFO"}

package/dist/components/tile/Tile.spec.js

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import Tile from './Tile.svelte';
+describe('m-tile', () => {
+    it('applies the default class', () => {
+        const { container } = render(Tile);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile).toBeTruthy();
+        expect(tile?.classList.contains('mc-tile--primary')).toBe(false);
+    });
+    it('applies the class for secondary appearance', () => {
+        const { container } = render(Tile, { 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(Tile, { bordered: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
+    });
+});

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Tile.svelte';
+import '../iconbutton/IconButton.svelte';
+import '@mozaic-ds/icons-svelte/components/OptionsVertical24/OptionsVertical24.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithAction: Story;
+//# sourceMappingURL=Tile.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tile/Tile.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,iCAAiC,CAAC;AACzC,OAAO,+EAA+E,CAAC;AAEvF,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC"}

package/dist/components/tile/Tile.stories.js

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Tile.svelte';
+import '../iconbutton/IconButton.svelte';
+import '@mozaic-ds/icons-svelte/components/OptionsVertical24/OptionsVertical24.svelte';
+const meta = {
+    title: 'Content/Tile/Base',
+    component: 'm-tile',
+    argTypes: {
+        appearance: {
+            control: { type: 'radio' },
+            options: ['primary', 'secondary', 'inverse'],
+        },
+    },
+    args: {
+        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
+    },
+    render: (args) => html `
+    <m-tile appearance="${ifDefined(args.appearance)}" ?bordered="${args.bordered}">
+      ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.action))}
+    </m-tile>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithAction = {
+    args: {
+        action: `
+      <span slot="action" class="mc-tile__action-button">
+        <m-icon-button ghost>
+            <options-vertical-24 slot="icon"></options-vertical-24>
+        </m-icon-button>
+      </span>
+    `,
+    },
+};