@mozaic-ds/web-components 1.6.0 → 1.7.0

package/dist/components/combobox/Combobox.svelte

@@ -0,0 +1,415 @@
+<svelte:options
+  customElement={{
+    tag: 'm-combobox',
+    props: {
+      multiple: { reflect: true, type: 'Boolean', attribute: 'multiple' },
+      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+      invalid: { reflect: true, type: 'Boolean', attribute: 'invalid' },
+      clearable: { reflect: true, type: 'Boolean', attribute: 'clearable' },
+      search: { reflect: true, type: 'Boolean', attribute: 'search' },
+      actions: { reflect: true, type: 'Boolean', attribute: 'actions' },
+      checkablesections: { reflect: true, type: 'Boolean', attribute: 'checkablesections' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import OptionListbox, { type ListboxOption } from '../optionlistbox/OptionListbox.svelte';
+  import { ChevronDown24, CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';
+
+  /**
+   * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+   * @slot optionPrefix - Use this slot to add a prefix to options.
+   * @event update:open {CustomEvent<boolean>} - Emitted when the listbox is opened or closed.
+   */
+  interface Props {
+    /**
+     * The current selected value(s) of the combobox.
+     */
+    value: string | number | null | (string | number)[];
+    /**
+     * Enable multiple value mode.
+     */
+    multiple?: boolean;
+    /**
+     * Size of the combobox: small ('s') or medium ('m').
+     */
+    size?: 's' | 'm';
+    /**
+     * Disable the combobox input.
+     */
+    disabled?: boolean;
+    /**
+     * Make the combobox read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the combobox as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Show a clear value button.
+     */
+    clearable?: boolean;
+    /**
+     * Enable the search input inside the listbox.
+     */
+    search?: boolean;
+    /**
+     * Show select all / clear buttons when multiple.
+     */
+    actions?: boolean;
+    /**
+     * Enable checkable section headers in the listbox.
+     */
+    checkablesections?: boolean;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Label for the selected items counter.
+     */
+    counterlabel?: string;
+    /**
+     * Placeholder text for the search input.
+     */
+    searchplaceholder?: string;
+    /**
+     * Label for the "Select all" button.
+     */
+    selectlabel?: string;
+    /**
+     * Label for the "Clear value" button.
+     */
+    clearlabel?: string;
+    /**
+     * Array of options to display in the listbox.
+     */
+    options: Array<ListboxOption>;
+    /**
+     * Callback to trigger when the listbox is opened or closed.
+     */
+    onopen?: (value: boolean) => void;
+  }
+
+  let {
+    value = $bindable(),
+    multiple,
+    size = 'm',
+    disabled,
+    readonly,
+    invalid,
+    clearable,
+    search,
+    actions,
+    checkablesections,
+    placeholder = 'Select an option',
+    counterlabel = '99 selected',
+    searchplaceholder = 'Find an option...',
+    selectlabel = 'Select all',
+    clearlabel = 'Clear',
+    options,
+    onopen,
+  }: Props = $props();
+
+  const id = crypto.randomUUID();
+
+  let combobox: HTMLElement;
+  let listbox: InstanceType<typeof OptionListbox> | null = $state(null);
+  let listboxEl: HTMLElement | null | undefined = $state(null);
+  let comboboxControl: HTMLElement;
+
+  let isOpen = $state(false);
+
+  let activeIndex = $state(-1);
+
+  const activeDescendantId = $derived.by(() => {
+    return activeIndex >= 0 ? `option-${id}-${activeIndex}` : undefined;
+  });
+
+  const selectionLabel = $derived.by(() => {
+    if (Array.isArray(value)) {
+      if (!value.length) return placeholder;
+      return (value as (string | number)[]).join(', ');
+    }
+
+    return options.find((option) => option.value === value)?.label || placeholder;
+  });
+
+  const hasValue = $derived.by(() =>
+    multiple ? !!(value as (string | number)[]).length : !!value,
+  );
+
+  function handleClickOutside(event: MouseEvent) {
+    const path = event.composedPath ? event.composedPath() : [];
+    if (!path.includes(combobox) && !path.includes(listboxEl!)) {
+      close();
+    }
+  }
+
+  function open() {
+    isOpen = true;
+    handleOpen();
+    document.addEventListener('click', handleClickOutside);
+  }
+
+  function close() {
+    isOpen = false;
+    handleOpen();
+    document.removeEventListener('click', handleClickOutside);
+  }
+
+  function toggleListbox() {
+    return isOpen ? close() : open();
+  }
+
+  function handleOpen() {
+    onopen?.(isOpen);
+
+    combobox.dispatchEvent(new CustomEvent('update:open', { bubbles: true, composed: true }));
+  }
+
+  onDestroy(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<div
+  bind:this={combobox}
+  class={{
+    'mc-combobox': true,
+    'mc-combobox--open': isOpen,
+    'mc-combobox--multiple': multiple,
+    'mc-combobox--invalid': invalid,
+    'mc-combobox--s': size === 's',
+    'mc-combobox--disabled': disabled,
+    'mc-combobox--readonly': readonly,
+  }}
+>
+  <div class="mc-combobox__input">
+    <button
+      bind:this={comboboxControl}
+      aria-expanded={isOpen}
+      aria-haspopup="listbox"
+      aria-controls={`listbox-${id}`}
+      {disabled}
+      class="mc-combobox__control"
+      aria-label="Combobox input"
+      onclick={toggleListbox}
+      {...search
+        ? {}
+        : {
+            role: 'combobox',
+            'aria-activedescendant': activeDescendantId,
+            onkeydown: listbox?.handleKeydown,
+          }}
+    >
+      {selectionLabel}
+    </button>
+    {#if multiple}
+      <span class="mc-combobox__counter">
+        {counterlabel}
+      </span>
+    {/if}
+
+    {#if clearable && hasValue}
+      <button
+        type="button"
+        class="mc-combobox__clear"
+        aria-label="Clear value"
+        onclick={() => listbox?.clearSelection()}
+      >
+        <CrossCircleFilled24 />
+      </button>
+    {/if}
+
+    <button
+      type="button"
+      tabindex={-1}
+      class="mc-combobox__icon"
+      aria-label="Expand options list"
+      onclick={toggleListbox}
+    >
+      <ChevronDown24 />
+    </button>
+  </div>
+
+  <div class="mc-combobox__listbox">
+    <OptionListbox
+      bind:this={listbox}
+      bind:element={listboxEl}
+      bind:value
+      {id}
+      open={isOpen}
+      {multiple}
+      {search}
+      {actions}
+      {checkablesections}
+      {searchplaceholder}
+      {selectlabel}
+      {clearlabel}
+      {options}
+      activeindex={activeIndex}
+      onopen={open}
+      onclose={() => {
+        close();
+        comboboxControl?.focus();
+      }}
+    >
+      <slot name="optionPrefix" slot="optionPrefix" />
+    </OptionListbox>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-combobox {
+  position: relative;
+  width: 18.75rem;
+}
+.mc-combobox__input {
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-border-radius, 0.25rem);
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+}
+.mc-combobox__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-combobox__input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-combobox__input:has(.mc-combobox__control: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-combobox__input .mc-combobox__control {
+  text-align: left;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--forms-color-text-default, #000000);
+  background-color: transparent;
+  border: none;
+  padding-left: 0.75rem;
+  padding-right: 0;
+  flex-grow: 1;
+  height: 3rem;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mc-combobox__input .mc-combobox__control:focus-within {
+  outline: none;
+}
+.mc-combobox__icon {
+  border: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-right: 0.75rem;
+  background: none;
+  color: var(--forms-color-icon-interactive, #000000);
+  fill: currentcolor;
+}
+.mc-combobox__clear {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--forms-color-icon-clear, #666666);
+  fill: currentcolor;
+}
+.mc-combobox__counter {
+  height: 1.5rem;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  border-radius: var(--border-radius-l, 1rem);
+  background-color: var(--forms-color-selection-counter-background, #464e63);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--forms-color-selection-counter-text, #ffffff);
+}
+.mc-combobox__listbox {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.25rem);
+  visibility: hidden;
+  opacity: 0;
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+  border: var(--border-width-s, 0.0625rem) solid var(--color-border-primary, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  width: 100%;
+  z-index: 10;
+  background-color: var(--color-background-primary, #ffffff);
+  pointer-events: all;
+}
+.mc-combobox--open .mc-combobox__listbox {
+  visibility: visible;
+  opacity: 1;
+}
+.mc-combobox--s .mc-combobox__control {
+  height: 2rem;
+  font-size: var(--font-size-100, 0.875rem);
+  padding-left: 0.5rem;
+}
+.mc-combobox--s .mc-combobox__icon {
+  padding-right: 0.5rem;
+}
+.mc-combobox--s .mc-combobox__clear {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-combobox--invalid .mc-combobox__input {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
+}
+.mc-combobox--disabled .mc-combobox__input {
+  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-combobox--disabled .mc-combobox__control {
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-combobox--disabled .mc-combobox__icon {
+  color: var(--forms-color-icon-disabled, #737373);
+}
+.mc-combobox--readonly .mc-combobox__input {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}</style>

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,99 @@
+import { type ListboxOption } from '../optionlistbox/OptionListbox.svelte';
+/**
+ * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+ * @slot optionPrefix - Use this slot to add a prefix to options.
+ * @event update:open {CustomEvent<boolean>} - Emitted when the listbox is opened or closed.
+ */
+interface Props {
+    /**
+     * The current selected value(s) of the combobox.
+     */
+    value: string | number | null | (string | number)[];
+    /**
+     * Enable multiple value mode.
+     */
+    multiple?: boolean;
+    /**
+     * Size of the combobox: small ('s') or medium ('m').
+     */
+    size?: 's' | 'm';
+    /**
+     * Disable the combobox input.
+     */
+    disabled?: boolean;
+    /**
+     * Make the combobox read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the combobox as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Show a clear value button.
+     */
+    clearable?: boolean;
+    /**
+     * Enable the search input inside the listbox.
+     */
+    search?: boolean;
+    /**
+     * Show select all / clear buttons when multiple.
+     */
+    actions?: boolean;
+    /**
+     * Enable checkable section headers in the listbox.
+     */
+    checkablesections?: boolean;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Label for the selected items counter.
+     */
+    counterlabel?: string;
+    /**
+     * Placeholder text for the search input.
+     */
+    searchplaceholder?: string;
+    /**
+     * Label for the "Select all" button.
+     */
+    selectlabel?: string;
+    /**
+     * Label for the "Clear value" button.
+     */
+    clearlabel?: string;
+    /**
+     * Array of options to display in the listbox.
+     */
+    options: Array<ListboxOption>;
+    /**
+     * Callback to trigger when the listbox is opened or closed.
+     */
+    onopen?: (value: boolean) => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Combobox: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    optionPrefix: {
+        slot: string;
+    };
+}, {}, "value">;
+type Combobox = InstanceType<typeof Combobox>;
+export default Combobox;
+//# sourceMappingURL=Combobox.svelte.d.ts.map

package/dist/components/combobox/Combobox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.svelte.ts"],"names":[],"mappings":"AAIA,OAAsB,EAAE,KAAK,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAIxF;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC;AA0JH,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,QAAQ;;;;;;eAAqF,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/components/combobox/README.md

@@ -0,0 +1,38 @@
+# `m-combobox`
+
+A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `value*` | The current selected value(s) of the combobox. | `string` `number` `null` `(string` `number)[]` | `$bindable()` |
+| `multiple` | Enable multiple value mode. | `boolean` |   |
+| `size` | Size of the combobox: small ('s') or medium ('m'). | `'s'` `'m'` | `m` |
+| `disabled` | Disable the combobox input. | `boolean` |   |
+| `readonly` | Make the combobox read-only. | `boolean` |   |
+| `invalid` | Mark the combobox as invalid. | `boolean` |   |
+| `clearable` | Show a clear value button. | `boolean` |   |
+| `search` | Enable the search input inside the listbox. | `boolean` |   |
+| `actions` | Show select all / clear buttons when multiple. | `boolean` |   |
+| `checkablesections` | Enable checkable section headers in the listbox. | `boolean` |   |
+| `placeholder` | Placeholder text when no value is selected. | `string` | `Select an option` |
+| `counterlabel` | Label for the selected items counter. | `string` | `99 selected` |
+| `searchplaceholder` | Placeholder text for the search input. | `string` | `Find an option...` |
+| `selectlabel` | Label for the "Select all" button. | `string` | `Select all` |
+| `clearlabel` | Label for the "Clear value" button. | `string` | `Clear` |
+| `options*` | Array of options to display in the listbox. | `Array<ListboxOption>` |   |
+| `onopen` | Callback to trigger when the listbox is opened or closed. | `(value: boolean) => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `optionPrefix` | Use this slot to add a prefix to options. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Emitted when the listbox is opened or closed. | `CustomEvent<boolean>` |
+

package/dist/components/container/Container.js

@@ -1,4 +1,4 @@
-import{c as o,e as s,a as r,p as m,t as c,b as p,d as u,f,j as h,i as v,r as x,s as b,h as y}from"../../custom-element.js";import{s as w}from"../../slot.js";var g=f("<div><!></div>");const _={hash:"svelte-1oy286b",code:`/**
+import{c as o,e as s,a as r,p as m,t as c,b as p,d as u,f,h,m as v,r as x,j as b,l as y}from"../../custom-element.js";import{s as w}from"../../slot.js";var g=f("<div><!></div>");const _={hash:"svelte-1oy286b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.ml-container.svelte-1oy286b {padding-inline:1rem;width:100%;box-sizing:border-box;margin-inline:auto;}
 @media (width >= 680px) {.ml-container.svelte-1oy286b {padding-inline:1.5rem;}
@@ -10,5 +10,5 @@ import{c as o,e as s,a as r,p as m,t as c,b as p,d as u,f,j as h,i as v,r as x,s
 @media (width >= 1920px) {.ml-container.svelte-1oy286b {max-width:1480px;}
 }.ml-container--fluid.svelte-1oy286b {max-width:none;}
 @media (width >= 1024px) {.ml-container--fluid.svelte-1oy286b {padding-inline:2.5rem;}
-}`};function j(n,t){s(t,!0),r(n,_);let i=m(t,"fluid",7);var a={get fluid(){return i()},set fluid(d){i(d),v()}},e=g(),l=h(e);return w(l,t,"default",{},null),x(e),c(()=>b(e,1,y(["ml-container",i()&&"ml-container--fluid"]),"svelte-1oy286b")),p(n,e),u(a)}customElements.define("m-container",o(j,{fluid:{attribute:"fluid",reflect:!0,type:"Boolean"}},["default"],[],{mode:"open"}));
+}`};function j(i,t){s(t,!0),r(i,_);let n=m(t,"fluid",7);var a={get fluid(){return n()},set fluid(d){n(d),v()}},e=g(),l=h(e);return w(l,t,"default",{},null),x(e),c(()=>b(e,1,y(["ml-container",n()&&"ml-container--fluid"]),"svelte-1oy286b")),p(i,e),u(a)}customElements.define("m-container",o(j,{fluid:{attribute:"fluid",reflect:!0,type:"Boolean"}},["default"],[],{mode:"open"}));
 //# sourceMappingURL=Container.js.map

package/dist/components/datepicker/Datepicker.js

@@ -1,7 +1,7 @@
-import{o as Z,c as D,e as F,a as L,p as r,k as j,t as V,b as k,d as N,f as H,n as S,j as n,i as o,r as c,m as Y,u as q,s as A,h as G}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as J}from"../../attributes.js";import{c as K}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";import{e as P}from"../../Condition20.js";import"../../branches.js";var Q=H('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=H("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
+import{o as Z,c as D,e as F,a as L,p as r,s as j,t as V,b as k,d as N,f as H,n as S,h as n,m as o,r as c,k as Y,u as q,j as A,l as G}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as J}from"../../attributes.js";import{c as K}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";import{e as P}from"../../Condition20.js";import"../../branches.js";var Q=H('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=H("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__addon.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh: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.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):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.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-start:0;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-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;box-sizing:border-box;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__addon.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh: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.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):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.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-start:0;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh), .mc-text-input.svelte-xj4ivh:has(.mc-text-input__addon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--border-radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::after {content:"";pointer-events:none;position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;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-datepicker__control.svelte-xj4ivh:disabled::after {background-color:var(--forms-color-icon-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {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-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):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:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {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-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%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' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%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' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh:hover .mc-controls-options__icon:where(.svelte-xj4ivh) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {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-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function U(g,t){F(t,!0),L(g,T);let v=r(t,"id",7),d=r(t,"name",7),i=r(t,"value",15),a=r(t,"isinvalid",7),h=r(t,"disabled",7),s=r(t,"size",7,"m"),m=r(t,"readonly",7),u=r(t,"isclearable",7),p=r(t,"clearlabel",7,"clear content"),y=S(t,["$$slots","$$events","$$legacy","$$host","id","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel"]);const z=()=>i("");var E={get id(){return v()},set id(e){v(e),o()},get name(){return d()},set name(e){d(e),o()},get value(){return i()},set value(e){i(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return h()},set disabled(e){h(e),o()},get size(){return s()},set size(e="m"){s(e),o()},get readonly(){return m()},set readonly(e){m(e),o()},get isclearable(){return u()},set isclearable(e){u(e),o()},get clearlabel(){return p()},set clearlabel(e="clear content"){p(e),o()}},l=R(),x=n(l);J(x,()=>({class:"mc-datepicker__control mc-text-input__control",type:"date",id:v(),name:d(),disabled:h(),readonly:m(),"aria-invalid":a(),...y}),void 0,void 0,void 0,"svelte-xj4ivh",!0);var C=j(x,2);{var M=e=>{var b=Q(),f=n(b),w=n(f);P(w,{className:"mc-controls-options__icon"});var _=j(w,2),B=n(_,!0);c(_),c(f),c(b),V(()=>Y(B,p())),q("click",f,z),k(e,b)};I(C,e=>{u()&&i()&&e(M)})}return c(l),V(()=>A(l,1,G(["mc-datepicker mc-text-input",`mc-text-input--${s()}`,`mc-datepicker--${s()}`,a()&&"is-invalid"]),"svelte-xj4ivh")),K(x,i),k(g,l),N(E)}Z(["click"]);customElements.define("m-datepicker",D(U,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},size:{},clearlabel:{}},[],[],{mode:"open"},O));
+/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--border-radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::after {content:"";pointer-events:none;position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%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='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;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-datepicker__control.svelte-xj4ivh:disabled::after {background-color:var(--forms-color-icon-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {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-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):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:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {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-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%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' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%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' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh:hover .mc-controls-options__icon:where(.svelte-xj4ivh) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {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-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function U(g,t){F(t,!0),L(g,T);let v=r(t,"id",7),d=r(t,"name",7),i=r(t,"value",15),a=r(t,"isinvalid",7),h=r(t,"disabled",7),l=r(t,"size",7,"m"),m=r(t,"readonly",7),u=r(t,"isclearable",7),p=r(t,"clearlabel",7,"clear content"),y=S(t,["$$slots","$$events","$$legacy","$$host","id","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel"]);const z=()=>i("");var E={get id(){return v()},set id(e){v(e),o()},get name(){return d()},set name(e){d(e),o()},get value(){return i()},set value(e){i(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return h()},set disabled(e){h(e),o()},get size(){return l()},set size(e="m"){l(e),o()},get readonly(){return m()},set readonly(e){m(e),o()},get isclearable(){return u()},set isclearable(e){u(e),o()},get clearlabel(){return p()},set clearlabel(e="clear content"){p(e),o()}},s=R(),x=n(s);J(x,()=>({class:"mc-datepicker__control mc-text-input__control",type:"date",id:v(),name:d(),disabled:h(),readonly:m(),"aria-invalid":a(),...y}),void 0,void 0,void 0,"svelte-xj4ivh",!0);var C=j(x,2);{var M=e=>{var b=Q(),f=n(b),w=n(f);P(w,{className:"mc-controls-options__icon"});var _=j(w,2),B=n(_,!0);c(_),c(f),c(b),V(()=>Y(B,p())),q("click",f,z),k(e,b)};I(C,e=>{u()&&i()&&e(M)})}return c(s),V(()=>A(s,1,G(["mc-datepicker mc-text-input",`mc-text-input--${l()}`,`mc-datepicker--${l()}`,a()&&"is-invalid"]),"svelte-xj4ivh")),K(x,i),k(g,s),N(E)}Z(["click"]);customElements.define("m-datepicker",D(U,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},size:{},clearlabel:{}},[],[],{mode:"open"},O));
 //# sourceMappingURL=Datepicker.js.map