@mozaic-ds/web-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/statusbadge/StatusDot.svelte

@@ -0,0 +1,49 @@
+<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />
+
+<script lang="ts">
+  import type { BadgeStyle, BadgeSize } from './badge.types';
+
+  interface Props {
+    style: BadgeStyle;
+    size: BadgeSize;
+  }
+
+  let { style, size }: Props = $props();
+</script>
+
+<div
+  class="mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style
+    ? `mc-status-dot--${style}`
+    : ''}"
+></div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-status-dot {
+  background-color: var(--status-dot-color-background-information, #0074aa);
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 100%;
+  display: inline-block;
+}
+.mc-status-dot--s {
+  height: 0.25rem;
+  width: 0.25rem;
+}
+.mc-status-dot--l {
+  height: 1rem;
+  width: 1rem;
+}
+.mc-status-dot--success {
+  background-color: var(--status-dot-color-background-success, #117f03);
+}
+.mc-status-dot--danger {
+  background-color: var(--status-dot-color-background-danger, #c61112);
+}
+.mc-status-dot--warning {
+  background-color: var(--status-dot-color-background-warning, #b64f00);
+}
+.mc-status-dot--neutral {
+  background-color: var(--status-dot-color-background-neutral, #666666);
+}</style>

package/dist/statusbadge/StatusDot.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BadgeStyle, BadgeSize } from './badge.types';
+interface Props {
+    style: BadgeStyle;
+    size: BadgeSize;
+}
+declare const StatusDot: import("svelte").Component<Props, {}, "">;
+type StatusDot = ReturnType<typeof StatusDot>;
+export default StatusDot;
+//# sourceMappingURL=StatusDot.svelte.d.ts.map

package/dist/statusbadge/StatusDot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../src/components/statusbadge/StatusDot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGzD,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;CACjB;AAkBH,QAAA,MAAM,SAAS,2CAAsC,CAAC;AACtD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/statusbadge/badge.types.d.ts

@@ -0,0 +1,3 @@
+export type BadgeStyle = 'danger' | 'success' | 'warning' | 'neutral' | 'info';
+export type BadgeSize = 's' | 'm' | 'l';
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/statusbadge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../src/components/statusbadge/badge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/statusbadge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/{components/textarea → textarea}/Textarea.js

@@ -1,4 +1,4 @@
-import{d as w,c as y,p as _,a as k,b as o,t as D,f as E,g as q,h as z,i as t,q as I,k as O}from"../../custom-element.js";import{s as l}from"../../attributes.js";import{b as S}from"../../input.js";import{c as T}from"../../index-client.js";var j=D('<textarea spellcheck="false"></textarea>');const A={hash:"svelte-15vrvs3",code:`/**
+import{d as w,c as y,p as _,a as k,b as o,t as D,f as E,g as q,h as z,i as t,q as I,k as O}from"../custom-element.js";import{s as l}from"../attributes.js";import{b as S}from"../input.js";import{c as T}from"../index-client.js";var j=D('<textarea spellcheck="false"></textarea>');const A={hash:"svelte-15vrvs3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */

package/dist/textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n\n  const dispatch = createEventDispatcher();\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    dispatch('on-input', value);\n  }\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  oninput={onInput}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","dispatch","createEventDispatcher","onInput"],"mappings":";;;;;snDAkBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EAGJ,MAAAS,EAAWC,EAAqB,WAE7BC,EAAQ,EAAU,CACrB,IAAAV,EAAS,EAAE,OAA4B,MAC3CQ,EAAS,WAAYR,CAAK,CAC5B,uCAiBSU,mEAXSP,EAAS,EAAA,qBACbA,GAAS,2BAEnBN,GAAI,6TAtBC,EAAC,4GAEG,GAAK"}

package/dist/textarea/Textarea.svelte

@@ -0,0 +1,178 @@
+<svelte:options customElement="m-textarea" />
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    rows?: number;
+    isinvalid: boolean;
+    disabled?: boolean;
+    minlength: number;
+    maxlength: number;
+    readonly: boolean;
+  }
+
+  let {
+    name,
+    value = $bindable(),
+    placeholder,
+    rows = 2,
+    isinvalid,
+    disabled = false,
+    minlength,
+    maxlength,
+    readonly,
+  }: Props = $props();
+
+  const dispatch = createEventDispatcher();
+
+  function onInput(e: Event) {
+    let value = (e.target as HTMLInputElement).value;
+    dispatch('on-input', value);
+  }
+</script>
+
+<textarea
+  bind:value
+  class="mc-textarea"
+  class:is-invalid={isinvalid}
+  aria-invalid={isinvalid}
+  {name}
+  id={name}
+  {placeholder}
+  {rows}
+  {disabled}
+  {minlength}
+  {maxlength}
+  {readonly}
+  spellcheck="false"
+  oninput={onInput}
+></textarea>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-left: 0;
+  padding-right: 0;
+}
+.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
+  margin-top: 0.5rem;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__container--inline, .mc-field__element--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+  margin-right: 1rem;
+}
+.mc-field__item {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.mc-field__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field--group {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-textarea {
+  font-family: inherit;
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 1px solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  font-size: 1rem;
+  line-height: 1.5;
+  min-height: 4rem;
+  padding: 0.5rem 0.75rem;
+}
+.mc-textarea::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-textarea:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-textarea:focus {
+  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-textarea:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-textarea[readonly] {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-textarea.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
+}
+.mc-textarea.is-invalid:hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
+}</style>

package/dist/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    rows?: number;
+    isinvalid: boolean;
+    disabled?: boolean;
+    minlength: number;
+    maxlength: number;
+    readonly: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<Props, {
+    'on-input': CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/textarea/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiCH,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;AAKD,QAAA,MAAM,QAAQ;;;;mBAA6E,CAAC;AAC1E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/{components/textinput → textinput}/Textinput.js

@@ -1,4 +1,4 @@
-import{l as A,u as R,d as U,c as X,a as Y,b as n,t as D,f as K,g as Z,h as $,p as ee,e as m,s as B,m as T,n as V,r as u,k as te,o as ne,i as o,j as oe}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as ie,a as re}from"../../slot.js";import{r as le,b as se}from"../../attributes.js";import{b as ae}from"../../input.js";function ce(a,t,c){A(()=>{var i=R(()=>t(a,c==null?void 0:c())||{});if(i!=null&&i.destroy)return()=>i.destroy()})}function ve(a,t){console.log(t()),t("")}var de=D('<span class="mc-text-input__icon svelte-1ovon7j"><!></span>'),me=D('<div class="mc-controls-options js-control-options svelte-1ovon7j"><button type="button" class="mc-controls-options__button svelte-1ovon7j"><svg class="mc-controls-options__icon svelte-1ovon7j" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-1ovon7j"></path></svg> <span class="mc-controls-options__label svelte-1ovon7j"> </span></button></div>'),ue=D("<div><!> <input> <!></div>");const pe={hash:"svelte-1ovon7j",code:`/**
+import{l as A,u as R,d as U,c as X,a as Y,b as n,t as D,f as K,g as Z,h as $,p as ee,e as m,s as B,m as T,n as V,r as u,k as te,o as ne,i as o,j as oe}from"../custom-element.js";import{i as W}from"../if.js";import{s as ie,a as re}from"../slot.js";import{r as le,b as se}from"../attributes.js";import{b as ae}from"../input.js";function ce(a,t,c){A(()=>{var i=R(()=>t(a,c==null?void 0:c())||{});if(i!=null&&i.destroy)return()=>i.destroy()})}function ve(a,t){console.log(t()),t("")}var de=D('<span class="mc-text-input__icon svelte-1ovon7j"><!></span>'),me=D('<div class="mc-controls-options js-control-options svelte-1ovon7j"><button type="button" class="mc-controls-options__button svelte-1ovon7j"><svg class="mc-controls-options__icon svelte-1ovon7j" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-1ovon7j"></path></svg> <span class="mc-controls-options__label svelte-1ovon7j"> </span></button></div>'),ue=D("<div><!> <input> <!></div>");const pe={hash:"svelte-1ovon7j",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-1ovon7j {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1ovon7j {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;}.mc-controls-options__icon.svelte-1ovon7j {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1ovon7j, .mc-controls-options__icon.svelte-1ovon7j {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1ovon7j {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-1ovon7j {font-size:1rem;line-height:1.3;font-weight:600;color:var(--forms-color-text-default, #000000);}
 

package/dist/textinput/Textinput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.js","sources":["../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    size?: TextInputSize;\n    iconname: string;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    size = 'm',\n    iconname,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    ...events\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    console.log(value);\n    value = '';\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} \">\n  {#if $$slots.icon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...events}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","events","$.rest_props","inputType","displayClear","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$slots","$$render","consequent","consequent_1"],"mappings":"sUAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,EAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CC2CW,SAAAE,GAAaC,EAAAC,EAAA,CACpB,QAAQ,IAAIA,GAAK,EACjBA,EAAQ,EAAE,CACZ;;;;;;;;;8IA9DEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAUT,EAAAC,EAAA,aAAA,CAAA,EACVS,EAAGV,EAAAC,EAAA,MAAA,CAAA,EACHU,EAAGX,EAAAC,EAAA,MAAA,CAAA,EACHW,EAASZ,EAAAC,EAAA,YAAA,CAAA,EACTY,EAASb,EAAAC,EAAA,YAAA,CAAA,EACTa,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EAChBC,EAAAC,GAAAjB,EAAA,+NAGDkB,IAAqBhB,CAAS,EAC9BiB,QAAwB,GAAAJ,EAAW,GAAIlB,EAAQ,EAAY,WAEtDuB,EACPC,EACAC,EACAhB,EACAC,EACQ,OACFgB,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBjB,IAAS,KACXiB,EAAQ,KAAK,kBAAkB,EAG7BhB,GACFgB,EAAQ,KAAK,2BAA2B,EAGtCf,EAAU,GACZe,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGR,CAAS,CACtB,wFASIS,EAAQ,MAAIC,EAAAC,CAAA,8HA6BFlC,GAAUE,CAAA,sDAQuBiB,EAAU,CAAA,CAAA,oBAdrDK,CAAY,GAAAS,EAAAE,CAAA,mHAdD1B,EAAS,cAEnBN,EAAI,8GASJkB,uBArBK,IAAAI,EAAWjB,EAAO,EAAEC,EAAS,EAAEE,IAAMC,EAAQ,CAAA,iNA9D1C,OAAM,+JAGP,GAAK,6CACT,IAAG,uWAOC,GAAK,yDACH,gBAAe,2DACd,GAAK","x_google_ignoreList":[0]}

package/dist/textinput/Textinput.svelte

@@ -0,0 +1,288 @@
+<svelte:options customElement="m-textinput" />
+
+<script lang="ts">
+  import type { TextInputSize, TextInputType } from './textinput.types';
+
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    inputtype?: TextInputType;
+    isvalid: boolean;
+    isinvalid: boolean;
+    disabled?: boolean;
+    size?: TextInputSize;
+    iconname: string;
+    rightalign: boolean;
+    min: string;
+    max: string;
+    minlength: number;
+    maxlength: number;
+    required?: boolean;
+    clearlabel?: string;
+    isclearable?: boolean;
+  }
+
+  let {
+    name,
+    value,
+    placeholder,
+    inputtype = 'text',
+    isvalid,
+    isinvalid,
+    disabled = false,
+    size = 'm',
+    iconname,
+    rightalign,
+    min,
+    max,
+    minlength,
+    maxlength,
+    required = false,
+    clearlabel = 'Clear content',
+    isclearable = false,
+    ...events
+  }: Props = $props();
+
+  let inputType = $derived(inputtype);
+  let displayClear = $derived(isclearable && value ? true : false);
+
+  function getClasses(
+    isValid: boolean,
+    isInvalid: boolean,
+    size: TextInputSize,
+    iconname: string,
+  ): string {
+    const classes = ['mc-text-input', 'mc-field__input'];
+
+    if (isValid) {
+      classes.push('is-valid');
+    }
+
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+
+    if (size === 's') {
+      classes.push('mc-text-input--s');
+    }
+
+    if (iconname) {
+      classes.push('mc-left-icon-input__input');
+    }
+
+    if (rightalign) {
+      classes.push('right-align');
+    }
+
+    return classes.join(' ');
+  }
+
+  const setType = (node: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    node.type = inputType;
+  };
+
+  function resetValue() {
+    console.log(value);
+    value = '';
+  }
+</script>
+
+<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
+  {#if $$slots.icon}
+    <span class="mc-text-input__icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+  <input
+    bind:value
+    use:setType
+    class="mc-text-input__control"
+    aria-invalid={isinvalid}
+    {name}
+    id={name}
+    {placeholder}
+    {disabled}
+    {min}
+    {max}
+    {minlength}
+    {maxlength}
+    spellcheck="false"
+    {required}
+    {...events}
+  />
+  <!-- Control options -->
+  {#if displayClear}
+    <div class="mc-controls-options js-control-options">
+      <!-- Clear Button -->
+      <button
+        type="button"
+        class="mc-controls-options__button"
+        onclick={resetValue}
+      >
+        <svg class="mc-controls-options__icon" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
+          />
+        </svg>
+        <span class="mc-controls-options__label">{clearlabel}</span>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-controls-options {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-controls-options__button {
+  background-color: transparent;
+  border-width: 0;
+  color: initial;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 0;
+}
+.mc-controls-options__icon {
+  fill: var(--forms-color-icon-clear, #666666);
+}
+.mc-controls-options__button, .mc-controls-options__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-controls-options__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-controls-options__unit {
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--forms-color-text-default, #000000);
+}
+
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 1px solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input,
+.mc-text-input * {
+  box-sizing: border-box;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  padding: 0.75rem 0.6875rem;
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 400;
+  flex-grow: 1;
+}
+.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mc-text-input__control[type=number] {
+  appearance: textfield;
+}
+.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-text-input__icon {
+  fill: var(--forms-color-icon-default, #666666);
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-text-input:focus-within {
+  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-text-input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-text-input:has(input:disabled) {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  font-size: 0.875rem;
+  line-height: 1.3;
+}
+.mc-text-input--s:has(.mc-text-input__icon) {
+  padding-inline-start: 0.4375rem;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
+}
+.mc-text-input.is-invalid:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
+}
+
+/* stylelint-enable string-no-newline */
+.right-align {
+  text-align: right;
+}</style>

package/dist/textinput/Textinput.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { TextInputSize, TextInputType } from './textinput.types';
+interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    inputtype?: TextInputType;
+    isvalid: boolean;
+    isinvalid: boolean;
+    disabled?: boolean;
+    size?: TextInputSize;
+    iconname: string;
+    rightalign: boolean;
+    min: string;
+    max: string;
+    minlength: number;
+    maxlength: number;
+    required?: boolean;
+    clearlabel?: string;
+    isclearable?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Textinput: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type Textinput = InstanceType<typeof Textinput>;
+export default Textinput;
+//# sourceMappingURL=Textinput.svelte.d.ts.map

package/dist/textinput/Textinput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGpE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkGH,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;AAUD,QAAA,MAAM,SAAS;;;;UAAmF,CAAC;AACjF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/textinput/textinput.types.d.ts

@@ -0,0 +1,3 @@
+export type TextInputType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
+export type TextInputSize = 's' | 'm';
+//# sourceMappingURL=textinput.types.d.ts.map