@mozaic-ds/web-components 1.5.1 → 1.6.0

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

@@ -0,0 +1,53 @@
+/**
+ * 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 expandable content shown when the tile is opened.
+ */
+interface Props {
+    /**
+     * Defines the visual style of the tile.
+     */
+    appearance?: 'primary' | 'secondary';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * Determines how the tile expansion is triggered.
+     */
+    trigger?: 'container' | 'icon' | 'button';
+    /**
+     * Label for the action button (only used when trigger is 'button').
+     */
+    label?: string;
+}
+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 TileExpandable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+    details: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    details: {};
+}, {}, "">;
+type TileExpandable = InstanceType<typeof TileExpandable>;
+export default TileExpandable;
+//# sourceMappingURL=TileExpandable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TileExpandable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tileexpandable/TileExpandable.svelte.ts"],"names":[],"mappings":"AAQE;;;;GAIG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgFH,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,cAAc;;;;;;;;UAAqF,CAAC;AACxF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/components/tileselectable/README.md

@@ -0,0 +1,21 @@
+# `m-tile-selectable`
+
+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 |
+|------|-------------|------|---------|
+| `checked*` | The current value of the tile (selected or not). | `boolean` | `$bindable(false)` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `inputtype` | Type of input used for selection. | `'checkbox'` `'radio'` | `checkbox` |
+| `inputposition` | Position of the input relative to the tile content. | `'left'` `'right'` | `right` |
+| `centered` | Vertical alignment of the input. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Default slot for the main content of the tile. |
+| `details` | Named slot for additional content shown below the main content. |
+

package/dist/components/tileselectable/TileSelectable.js

@@ -0,0 +1,108 @@
+import{c as J,e as K,a as L,p as m,k as C,t as M,b as v,d as N,f as z,j as d,i as b,r as s,x as O,s as P,h as Q,l as g,w as _}from"../../custom-element.js";import{i as h}from"../../if.js";import{a as V,s as D}from"../../slot.js";import{C as F}from"../checkbox/Checkbox.js";import{R as I}from"../radio/Radio.js";import{c as W}from"../../custom-element-forward-events.js";import"../../branches.js";import"../../attributes.js";import"../../input.js";var X=z('<div class="mc-tile__header svelte-z2cgb1"><div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div></div>'),Y=z('<div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div>',1),Z=z('<div class="mc-tile__content svelte-z2cgb1"><!></div>'),$=z("<div><!> <!></div>");const ee={hash:"svelte-z2cgb1",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tile.svelte-z2cgb1 {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-z2cgb1 {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile.svelte-z2cgb1 {transition:none;}
+}.mc-tile.svelte-z2cgb1 {box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden;}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile__body.svelte-z2cgb1 {flex:1;}.mc-tile--bordered.svelte-z2cgb1 {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile__action.svelte-z2cgb1 {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.svelte-z2cgb1: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-z2cgb1: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-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {transition:none;}
+}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {cursor:default;pointer-events: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:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--bordered.svelte-z2cgb1 {box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-z2cgb1)) {display:flex;flex-direction:column;}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__content:where(.svelte-z2cgb1) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-z2cgb1)) {pointer-events:auto;display:flex;flex-direction:column;}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-z2cgb1)) .mc-tile__body:where(.svelte-z2cgb1) {flex-grow:1;display:flex;flex-direction:column;justify-content:center;}.mc-tile.svelte-z2cgb1:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action:where(.svelte-z2cgb1)) .mc-tile__action:where(.svelte-z2cgb1) {flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0.75rem 0.75rem;pointer-events:auto;background-color:transparent;}
+@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) {
+}
+@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) {
+}
+@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) {
+}
+@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) {
+}
+@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) {
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-tile--selectable.svelte-z2cgb1 {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-z2cgb1 {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-z2cgb1 {transition:none;}
+}
+@media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-z2cgb1 {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-z2cgb1 {transition:none;}
+}.mc-tile--selectable.svelte-z2cgb1 {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-z2cgb1 .mc-tile__body:where(.svelte-z2cgb1) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1 .mc-tile__action:where(.svelte-z2cgb1) {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-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) .mc-tile__body:where(.svelte-z2cgb1) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__content:where(.svelte-z2cgb1) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-z2cgb1 {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-z2cgb1 {align-items:center;}.mc-tile--selectable.svelte-z2cgb1:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-z2cgb1 {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}`};function te(R,r){const S=V(r);K(r,!0),L(R,ee);let c=m(r,"checked",15,!1),x=m(r,"bordered",7,!0),u=m(r,"inputtype",7,"checkbox"),k=m(r,"inputposition",7,"right"),w=m(r,"centered",7);const f=crypto.randomUUID();var T={get checked(){return c()},set checked(e=!1){c(e),b()},get bordered(){return x()},set bordered(e=!0){x(e),b()},get inputtype(){return u()},set inputtype(e="checkbox"){u(e),b()},get inputposition(){return k()},set inputposition(e="right"){k(e),b()},get centered(){return w()},set centered(e){w(e),b()}},p=$(),U=d(p);{var q=e=>{var i=X(),l=d(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,!1)})}s(a),s(i),v(e,i)},A=e=>{var i=Y(),l=O(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,!1)})}s(a),v(e,i)};h(U,e=>{S.details?e(q):e(A,!1)})}var G=C(U,2);{var H=e=>{var i=Z(),l=d(i);D(l,r,"details",{},null),s(i),v(e,i)};h(G,e=>{S.details&&e(H)})}return s(p),M(()=>P(p,1,Q({"mc-tile mc-tile--selectable":!0,"mc-tile--selected":c(),"mc-tile--bordered":x(),"mc-tile--input-left":k()==="left","mc-tile--input-center":w()}),"svelte-z2cgb1")),v(R,p),N(T)}customElements.define("m-tile-selectable",J(te,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},inputtype:{},inputposition:{}},["default","details"],[],{mode:"open"},W));
+//# sourceMappingURL=TileSelectable.js.map

package/dist/components/tileselectable/TileSelectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileSelectable.js","sources":["../../../src/components/tileselectable/TileSelectable.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile-selectable',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\n      centered: { reflect: true, type: 'Boolean', attribute: 'centered' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import Checkbox from '../checkbox/Checkbox.svelte';\n  import Radio from '../radio/Radio.svelte';\n  import { customElementForwardEvents } from '../../utils';\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 additional content shown below the main content.\n   */\n\n  interface Props {\n    /**\n     * The current value of the tile (selected or not).\n     */\n    checked: boolean;\n    /**\n     * Adds a border around the tile.\n     */\n    bordered?: boolean;\n    /**\n     * Type of input used for selection.\n     */\n    inputtype?: 'checkbox' | 'radio';\n    /**\n     * Position of the input relative to the tile content.\n     */\n    inputposition?: 'left' | 'right';\n    /**\n     * Vertical alignment of the input.\n     */\n    centered?: boolean;\n  }\n\n  let {\n    checked = $bindable(false),\n    bordered = true,\n    inputtype = 'checkbox',\n    inputposition = 'right',\n    centered,\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n</script>\n\n<div\n  class={{\n    'mc-tile mc-tile--selectable': true,\n    'mc-tile--selected': checked,\n    'mc-tile--bordered': bordered,\n    'mc-tile--input-left': inputposition === 'left',\n    'mc-tile--input-center': centered,\n  }}\n>\n  {#if $$slots.details}\n    <div class=\"mc-tile__header\">\n      <div class=\"mc-tile__body\">\n        <slot />\n      </div>\n\n      <div class=\"mc-tile__action\">\n        {#if inputtype === 'checkbox'}\n          <Checkbox bind:checked id={`checkbox-${id}`} name=\"tile-select-group\" />\n        {:else}\n          <Radio bind:checked id={`radio-${id}`} name=\"tile-select-group\" />\n        {/if}\n      </div>\n    </div>\n  {:else}\n    <div class=\"mc-tile__body\">\n      <slot />\n    </div>\n\n    <div class=\"mc-tile__action\">\n      {#if inputtype === 'checkbox'}\n        <Checkbox bind:checked id={`checkbox-${id}`} name=\"tile-select-group\" />\n      {:else}\n        <Radio bind:checked id={`radio-${id}`} name=\"tile-select-group\" />\n      {/if}\n    </div>\n  {/if}\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":["checked","bordered","inputtype","inputposition","centered","$.prop","$$props","id","div","root","node","$.child","div_1","root_1","div_2","div_3","Checkbox","$$anchor","$$value","Radio","$$render","consequent","alternate","div_4","$.first_child","fragment_2","div_5","consequent_2","alternate_1","$$slots","consequent_1","alternate_2","div_6","root_7","consequent_3","$.reset","$.append","customElementForwardEvents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oxEAYA,8BAmCI,IAAAA,mBAAoB,EAAK,EACzBC,mBAAW,EAAI,EACfC,oBAAY,UAAU,EACtBC,wBAAgB,OAAO,EACvBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,QAGJC,EAAK,OAAO,WAAU,iDAPN,GAAK,qDACd,GAAI,uDACH,WAAU,+DACN,QAAO,iEAO1BC,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,iBAUII,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,6BAAHA,CAAG,EAIH,IAAAC,IAJAD,EAAG,CAAA,MAIHC,CAAG,sCAEuCR,CAAE,EAAA,EAAxCS,EAAQC,EAAA,oDAAC,SAAY,iBAAZ,QAAYC,EAAA,uCAEWX,CAAE,EAAA,EAAlCY,EAAKF,EAAA,oDAAC,SAAY,iBAAZ,QAAYC,EAAA,mBAHhBhB,EAAS,IAAK,WAAUkB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MAD9BP,CAAG,IALLH,CAAG,MAAHA,CAAG,mBAcHW,EAAGC,EAAAC,CAAA,MAAHF,CAAG,6BAAHA,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,MAIHG,CAAG,sCAEuCnB,CAAE,EAAA,EAAxCS,EAAQC,EAAA,oDAAC,SAAY,iBAAZ,QAAYC,EAAA,uCAEWX,CAAE,EAAA,EAAlCY,EAAKF,EAAA,oDAAC,SAAY,iBAAZ,QAAYC,EAAA,mBAHhBhB,EAAS,IAAK,WAAUkB,EAAAO,CAAA,EAAAP,EAAAQ,EAAA,EAAA,MAD9BF,CAAG,kBAnBDG,EAAQ,QAAOT,EAAAU,CAAA,EAAAV,EAAAW,EAAA,EAAA,gCA6BjBC,EAAGC,EAAA,MAAHD,CAAG,6BAAHA,CAAG,MAAHA,CAAG,WADDH,EAAQ,SAAOT,EAAAc,CAAA,IArCrBC,OAAAA,EAAA3B,CAAA,UAAAA,OAEG,8BAA+B,GAC/B,oBAAqBR,EAAO,EAC5B,oBAAqBC,EAAQ,EAC7B,sBAAuBE,EAAa,IAAK,OACzC,wBAAyBC,EAAQ,sBANpCgC,EAAAnB,EAAAT,CAAA,MAFO,mSA/CI6B"}

package/dist/components/tileselectable/TileSelectable.spec.js

@@ -0,0 +1,57 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import TileSelectable from './TileSelectable.svelte';
+describe('m-tile-selectable', () => {
+    it('applies the default classes', () => {
+        const { container } = render(TileSelectable);
+        const tile = container.querySelector('.mc-tile');
+        expect(tile).toBeTruthy();
+        expect(tile?.classList.contains('mc-tile--selectable')).toBe(true);
+        expect(tile?.classList.contains('mc-tile--selected')).toBe(false);
+    });
+    it('applies the "mc-tile--selected" class when checked is true', () => {
+        const { container } = render(TileSelectable, { checked: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--selected')).toBe(true);
+    });
+    it('applies the "mc-tile--bordered" class when bordered is true', () => {
+        const { container } = render(TileSelectable, { bordered: true });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
+    });
+    it('applies input position classes', () => {
+        const { container } = render(TileSelectable, {
+            inputposition: 'left',
+            centered: true,
+        });
+        const tile = container.querySelector('.mc-tile');
+        expect(tile?.classList.contains('mc-tile--input-left')).toBe(true);
+        expect(tile?.classList.contains('mc-tile--input-center')).toBe(true);
+    });
+    it('renders a checkbox by default', () => {
+        const { container } = render(TileSelectable);
+        const input = container.querySelector('input[type="checkbox"]');
+        expect(input).toBeTruthy();
+    });
+    it('renders a radio input when inputtype is "radio"', () => {
+        const { container } = render(TileSelectable, { inputtype: 'radio' });
+        const input = container.querySelector('input[type="radio"]');
+        expect(input).toBeTruthy();
+    });
+    it('toggles checked state for checkbox', async () => {
+        const { container } = render(TileSelectable, { checked: false });
+        const input = container.querySelector('input[type="checkbox"]');
+        expect(input.checked).toBe(false);
+        await fireEvent.click(input);
+        expect(input.checked).toBe(true);
+        await fireEvent.click(input);
+        expect(input.checked).toBe(false);
+    });
+    it('toggles checked state for radio', async () => {
+        const { container } = render(TileSelectable, { inputtype: 'radio', checked: false });
+        const input = container.querySelector('input[type="radio"]');
+        expect(input.checked).toBe(false);
+        await fireEvent.click(input);
+        expect(input.checked).toBe(true);
+    });
+});

package/dist/components/tileselectable/TileSelectable.stories.d.ts

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

package/dist/components/tileselectable/TileSelectable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tileselectable/TileSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA2BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC"}

package/dist/components/tileselectable/TileSelectable.stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './TileSelectable.svelte';
+const meta = {
+    title: 'Content/Tile/Selectable',
+    component: 'm-tile-selectable',
+    argTypes: {
+        inputtype: {
+            control: { type: 'radio' },
+            options: ['checkbox', 'radio'],
+        },
+        inputposition: {
+            control: { type: 'radio' },
+            options: ['right', 'left'],
+        },
+    },
+    args: {
+        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
+    },
+    render: (args) => html `
+    <m-tile-selectable
+      ?checked="${args.checked}"
+      ?bordered="${args.bordered}"
+      inputtype="${ifDefined(args.inputtype)}"
+      inputposition="${ifDefined(args.inputposition)}"
+      ?centered="${ifDefined(args.centered)}"
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-tile-selectable>
+  `,
+};
+export default meta;
+export const Default = {};
+export const RadioButton = {
+    args: {
+        inputtype: 'radio',
+    },
+};
+export const LeftPositionInput = {
+    args: {
+        inputposition: 'left',
+    },
+};