@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/checkbox/Checkbox.stories.js

@@ -1,134 +1,77 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { expect, userEvent } from 'storybook/test';
-/**
- * Checkboxes are used to select one or multiple options in a list.
- * They usually find their place in forms and are also used to accept terms.
- *
- * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        label: {
-            description: 'Specify the label of the checkbox',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify the name of the checkbox',
-            control: 'text',
-        },
-        id: {
-            description: 'Specify the id of the checkbox',
-            control: 'text',
-        },
-        checked: {
-            description: 'Determine whether the checkbox is checked',
-            control: 'boolean',
-        },
-        indeterminate: {
-            description: 'Determine whether the checkbox is indeterminate',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Determine whether the checkbox is disabled',
-            control: 'boolean',
-        },
-        isinvalid: {
-            description: 'Determine whether the checkbox is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Determine whether the checkbox is required',
-            control: 'boolean',
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
-            },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox state is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-checkbox',
+    args: {
+        label: 'Label',
+        id: 'checkboxId',
+    },
+    render: (args) => {
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        label=${ifDefined(args.label)}
+        checked=${ifDefined(args.checked)}
+        indeterminate=${ifDefined(args.indeterminate)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        indented=${ifDefined(args.indented)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-checkbox>
+    `;
     },
 };
-const Template = (args) => {
-    const checkbox = document.createElement('m-checkbox');
-    checkbox.setAttribute('name', args.name || 'checkbox');
-    checkbox.setAttribute('label', args.label || 'Checkbox label');
-    if (args.id)
-        checkbox.setAttribute('id', args.id);
-    if (args.checked)
-        checkbox.setAttribute('checked', 'true');
-    if (args.indeterminate)
-        checkbox.setAttribute('indeterminate', 'true');
-    if (args.disabled)
-        checkbox.setAttribute('disabled', 'true');
-    if (args.isinvalid)
-        checkbox.setAttribute('isinvalid', 'true');
-    if (args.required)
-        checkbox.setAttribute('required', 'true');
-    checkbox.addEventListener('change', action('onChange'));
-    checkbox.addEventListener('blur', action('onBlur'));
-    return checkbox;
-};
-export const Default = Template.bind({});
-Default.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(checkbox).not.toBeNull();
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-};
-export const Checked = Template.bind({});
-Checked.args = {
-    checked: true,
-};
-Checked.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeChecked();
-};
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-    indeterminate: true,
-};
-Indeterminate.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input?.indeterminate).toBeTruthy();
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: {
+        checked: true,
+        id: 'checkedId',
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Indeterminate = {
+    args: {
+        indeterminate: true,
+        id: 'IndeterminateId',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const Disabled = {
+    args: {
+        disabled: true,
+        id: 'disabledId',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
+export const Invalid = {
+    args: {
+        isinvalid: true,
+        id: 'invalidId',
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
+export const IndeterminateDisabled = {
+    args: {
+        indeterminate: true,
+        disabled: true,
+        id: 'checkedIndeterminateId',
+    },
 };
-Required.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('required');
+export const CheckedDisabled = {
+    args: {
+        checked: true,
+        disabled: true,
+        id: 'checkedDisabledId',
+    },
 };

package/dist/components/checkbox/Checkbox.svelte

@@ -1,55 +1,75 @@
 <svelte:options
   customElement={{
     tag: 'm-checkbox',
+    props: {
+      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+   */
   interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
   }
 
-  const uid = $props.id();
   let {
-    name = 'checkbox',
-    id = uid,
+    id,
+    name,
     label,
-    indeterminate = false,
-    disabled = false,
-    isinvalid = false,
-    required = false,
     checked = $bindable(false),
-    onchange,
-    onblur,
+    indeterminate,
+    disabled,
+    isinvalid,
+    indented,
   }: Props = $props();
 </script>
 
-<div class="mc-checkbox">
+<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>
   <input
     {id}
     type="checkbox"
-    class="mc-checkbox__input"
-    class:is-invalid={isinvalid}
+    class={['mc-checkbox__input', isinvalid && 'is-invalid']}
     aria-invalid={isinvalid}
     {name}
     {disabled}
     {indeterminate}
-    {required}
     bind:checked
-    {onchange}
-    {onblur}
   />
   {#if label}
     <label for={id} class="mc-checkbox__label">{label}</label>
@@ -59,9 +79,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-checkbox {
   align-items: center;
@@ -73,9 +90,9 @@
   margin-left: 1.75rem;
 }
 .mc-checkbox__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: #000000;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--forms-color-text-default, #000000);
   cursor: pointer;
 }
 .mc-checkbox__input {
@@ -84,29 +101,29 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 0.125rem solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
   height: 1.25rem;
   width: 1.25rem;
 }
 .mc-checkbox__input:hover {
-  border-color: #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-checkbox__input:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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-checkbox__input:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
-  background-color: #117f03;
+  background-color: var(--forms-color-background-checked, #117f03);
   background-size: 1rem 1rem;
   background-position: center;
 }
@@ -114,46 +131,46 @@
   border-color: transparent;
 }
 .mc-checkbox__input:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-checkbox__input:disabled:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:disabled:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:disabled + .mc-checkbox__label {
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   cursor: not-allowed;
 }
 .mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
-  background-color: #006902;
+  background-color: var(--forms-color-background-checked-hover, #006902);
 }
 .mc-checkbox__input.is-invalid:not(:checked, :indeterminate) {
-  border-color: #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
 }
 .mc-checkbox__input.is-invalid:not(:checked, :indeterminate):hover {
-  border-color: #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
 }
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 .mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--field-color-label, #000000);
 }
 .mc-field__legend {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-regular, 400);
   vertical-align: top;
-  color: #666666;
+  color: var(--field-color-requirement, #666666);
 }
 .mc-field__help {
   display: block;
@@ -163,8 +180,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-m, 1.5);
   display: inline-flex;
   gap: 0.25rem;
   margin-top: 0.25rem;
@@ -175,19 +192,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: #117f03;
+  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='%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");
+  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: #c61112;
+  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='%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");
+  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__validation-message.is-loading {
-  color: #666666;
+  color: var(--field-color-validation-loading, #666666);
 }
 .mc-field--group {
   border-width: 0;

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,14 +1,39 @@
+/**
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+ */
 interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/README.md

@@ -0,0 +1,17 @@
+# `m-checkbox`
+
+A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the checkbox, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the checkbox element, typically used for form submission. | `string` |   |
+| `label` | The text label displayed next to the checkbox. | `string` |   |
+| `checked` | The checkbox's checked state. | `boolean` | `$bindable(false)` |
+| `indeterminate` | Sets the checkbox to an indeterminate state (partially selected). | `boolean` |   |
+| `isinvalid` | If `true`, applies an invalid state to the checkbox. | `boolean` |   |
+| `disabled` | If `true`, disables the checkbox, making it non-interactive. | `boolean` |   |
+| `indented` | If `true`, indent the checkbox. | `boolean` |   |
+

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,13 +1,10 @@
-import{$ as J,aa as K,c as N,k as P,p as Q,a as R,b as m,l as T,f as w,s as L,d as v,t as k,h as x,i as U,j as u,r as c,g as j,m as i,e as V}from"../../custom-element.js";import{i as A}from"../../if.js";import{e as W}from"../../each.js";import{s as q,r as X}from"../../attributes.js";import{b as Y}from"../../input.js";import{c as Z}from"../../custom-element-forward-events.js";function $(g,n,r,E,o){var l=()=>{E(r[g])};r.addEventListener(n,l),o?J(()=>{r[g]=o()}):l(),(r===document.body||r===window||r===document)&&K(()=>{r.removeEventListener(n,l)})}var ee=w('<legend class="mc-field__legend svelte-qeqqg6"> </legend>'),te=w('<label class="mc-checkbox__label svelte-qeqqg6"> </label>'),ie=w('<div class="mc-checkbox mc-field__item svelte-qeqqg6"><input type="checkbox"/> <!></div>'),ae=w('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-qeqqg6"><!> <div class="mc-field__container"></div></fieldset></div>');const re={hash:"svelte-qeqqg6",code:`/**
+import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r as p,e as E,g as y,d as C,s as q,m as t,h as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as L}from"../../each.js";import{r as N,s as m}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=k('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=k('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=k("<div></div>");const U={hash:"svelte-11asba7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */.mc-checkbox.svelte-qeqqg6 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-qeqqg6 {font-size:1rem;line-height:1.3;color:#000000;cursor:pointer;}.mc-checkbox__input.svelte-qeqqg6 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:#ffffff;border:0.125rem solid #666666;border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-qeqqg6:hover {border-color:#4d4d4d;}.mc-checkbox__input.svelte-qeqqg6:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-qeqqg6:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-qeqqg6:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-qeqqg6:checked, .mc-checkbox__input.svelte-qeqqg6:indeterminate {background-color:#117f03;background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-qeqqg6:checked, .mc-checkbox__input.svelte-qeqqg6:indeterminate, .mc-checkbox__input.svelte-qeqqg6:disabled {border-color:transparent;}.mc-checkbox__input.svelte-qeqqg6:disabled {background-color:#d9d9d9;cursor:not-allowed;}.mc-checkbox__input.svelte-qeqqg6:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-qeqqg6:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-qeqqg6:disabled + .mc-checkbox__label:where(.svelte-qeqqg6) {color:#737373;cursor:not-allowed;}.mc-checkbox__input.svelte-qeqqg6:not(:disabled):checked:hover, .mc-checkbox__input.svelte-qeqqg6:not(:disabled):indeterminate:hover {background-color:#006902;}.mc-checkbox__input.is-invalid.svelte-qeqqg6:not(:checked, :indeterminate) {border-color:#ea302d;}.mc-checkbox__input.is-invalid.svelte-qeqqg6:not(:checked, :indeterminate):hover {border-color:#c61112;}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-11asba7 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-11asba7 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-11asba7 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-11asba7:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-11asba7: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-checkbox__input.svelte-11asba7:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate, .mc-checkbox__input.svelte-11asba7:disabled {border-color:transparent;}.mc-checkbox__input.svelte-11asba7:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled + .mc-checkbox__label:where(.svelte-11asba7) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:not(:disabled):checked:hover, .mc-checkbox__input.svelte-11asba7:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-qeqqg6 {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__legend.svelte-qeqqg6 {padding-inline:0;}.mc-field--group.svelte-qeqqg6 {border-width:0;margin-inline:0;padding:0;}
+/* stylelint-disable string-no-newline */.mc-field__content.svelte-11asba7 {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */`};function ne(g,n){const r=P();Q(n,!0),R(g,re);const E=[];let o=m(n,"name",7),l=m(n,"id",7,r),h=m(n,"options",7),_=m(n,"legend",7),b=m(n,"values",31,()=>T([]));function y(e){var t;return((t=h()[e])==null?void 0:t.id)??`${l()}-${e}`}var f=ae(),z=v(f),B=v(z);{var F=e=>{var t=ee(),p=v(t,!0);c(t),k(()=>j(p,_())),x(e,t)};A(B,e=>{_()&&e(F)})}var M=L(B,2);return W(M,23,h,(e,t)=>y(t),(e,t,p)=>{var C=ie(),a=v(C);X(a);let D;var H,G=L(a,2);{var I=s=>{var d=te(),O=v(d,!0);c(d),k(S=>{q(d,"for",S),j(O,i(t).label)},[()=>y(i(p))]),x(s,d)};A(G,s=>{i(t).label&&s(I)})}c(C),k((s,d)=>{D=V(a,1,"mc-checkbox__input svelte-qeqqg6",null,D,s),q(a,"id",d),q(a,"name",o()),a.disabled=i(t).disabled,q(a,"aria-invalid",i(t).isinvalid),H!==(H=i(t).value)&&(a.value=(a.__value=i(t).value)??"")},[()=>({"is-invalid":i(t).isinvalid}),()=>y(i(p))]),$("indeterminate","change",a,s=>i(t).indeterminate=s,()=>i(t).indeterminate),Y(E,[],a,()=>(i(t).value,b()),b),x(e,C)}),c(M),c(z),c(f),k(()=>q(f,"id",l())),x(g,f),U({get name(){return o()},set name(e){o(e),u()},get id(){return l()},set id(e=r){l(e),u()},get options(){return h()},set options(e){h(e),u()},get legend(){return _()},set legend(e){_(e),u()},get values(){return b()},set values(e=[]){b(e),u()}})}customElements.define("m-checkbox-group",N(ne,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,Z));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-11asba7:where(.mc-field__content--inline:where(.svelte-11asba7)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function V(x,i){D(i,!0),F(x,U);const z=[];let v=o(i,"name",7),b=o(i,"options",7),l=o(i,"value",31,()=>G([])),u=o(i,"inline",7),n=o(i,"isinvalid",7);var B={get name(){return v()},set name(e){v(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return l()},set value(e=[]){l(e),s()},get inline(){return u()},set inline(e){u(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},c=T();return K(c,21,b,L,(e,r)=>{var h=R(),a=C(h);N(a);var w,M=q(a,2);{var H=f=>{var d=Q(),j=C(d,!0);p(d),_(()=>{m(d,"for",t(r).id),I(j,t(r).label)}),g(f,d)};J(M,f=>{t(r).label&&f(H)})}p(h),_(()=>{E(a,1,y(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),m(a,"id",t(r).id),m(a,"name",v()),a.disabled=t(r).disabled,a.indeterminate=t(r).indeterminate,m(a,"aria-invalid",n()),w!==(w=t(r).value)&&(a.value=(a.__value=t(r).value)??"")}),O(z,[],a,()=>(t(r).value,l()),l),g(e,h)}),p(c),_(()=>E(c,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-11asba7")),g(x,c),S(B)}customElements.define("m-checkbox-group",A(V,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{},isinvalid:{}},[],[],!0,P));
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/checkboxgroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/universal.js","../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["import { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen } from './shared.js';\n\n/**\n * @param {'innerHTML' | 'textContent' | 'innerText'} property\n * @param {HTMLElement} element\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_content_editable(property, element, get, set = get) {\n\telement.addEventListener('input', () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t});\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\tif (element[property] !== value) {\n\t\t\tif (value == null) {\n\t\t\t\t// @ts-ignore\n\t\t\t\tvar non_null_value = element[property];\n\t\t\t\tset(non_null_value);\n\t\t\t} else {\n\t\t\t\t// @ts-ignore\n\t\t\t\telement[property] = value + '';\n\t\t\t}\n\t\t}\n\t});\n}\n\n/**\n * @param {string} property\n * @param {string} event_name\n * @param {Element} element\n * @param {(value: unknown) => void} set\n * @param {() => unknown} [get]\n * @returns {void}\n */\nexport function bind_property(property, event_name, element, set, get) {\n\tvar handler = () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t};\n\n\telement.addEventListener(event_name, handler);\n\n\tif (get) {\n\t\trender_effect(() => {\n\t\t\t// @ts-ignore\n\t\t\telement[property] = get();\n\t\t});\n\t} else {\n\t\thandler();\n\t}\n\n\t// @ts-ignore\n\tif (element === document.body || element === window || element === document) {\n\t\tteardown(() => {\n\t\t\telement.removeEventListener(event_name, handler);\n\t\t});\n\t}\n}\n\n/**\n * @param {HTMLElement} element\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_focused(element, set) {\n\tlisten(element, ['focus', 'blur'], () => {\n\t\tset(element === document.activeElement);\n\t});\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    options: Array<CheckboxGroupOption>;\n    name: string;\n    id?: string;\n    legend?: string;\n    values?: Array<string | number>;\n  }\n\n  const uid = $props.id();\n  let {\n    name,\n    id = uid,\n    options,\n    legend,\n    values = $bindable([]),\n  }: Props = $props();\n\n  function getOptionId(index: number): string {\n    return options[index]?.id ?? `${id}-${index}`;\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt, index (getOptionId(index))}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input\"\n            class:is-invalid={opt.isinvalid}\n            id={getOptionId(index)}\n            {name}\n            disabled={opt.disabled}\n            bind:indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={values}\n            value={opt.value}\n          />\n          {#if opt.label}\n            <label for={getOptionId(index)} class=\"mc-checkbox__label\"\n              >{opt.label}</label\n            >\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["bind_property","property","event_name","element","set","get","handler","render_effect","teardown","uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div_1","opt","$.set_text","text_1","$.get","consequent_1","input","$.set_attribute","input_value","$.bind_property","$$value","customElementForwardEvents"],"mappings":"0XAwCO,SAASA,EAAcC,EAAUC,EAAYC,EAASC,EAAKC,EAAK,CACtE,IAAIC,EAAU,IAAM,CAEnBF,EAAID,EAAQF,CAAQ,CAAC,CACrB,EAEDE,EAAQ,iBAAiBD,EAAYI,CAAO,EAExCD,EACHE,EAAc,IAAM,CAEnBJ,EAAQF,CAAQ,EAAII,EAAK,CAC5B,CAAG,EAEDC,EAAS,GAINH,IAAY,SAAS,MAAQA,IAAY,QAAUA,IAAY,WAClEK,EAAS,IAAM,CACdL,EAAQ,oBAAoBD,EAAYI,CAAO,CAClD,CAAG,CAEH;;;;;;;;;;;2DC/DA,OAsBQG,EAAGC,EAAA,iCAEPC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,aAAKL,CAAG,EACRM,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,GAAA,IAAAK,EAAA,CAAA,CAAA,CAAA,WAGCC,EAAYC,EAAuB,OACnC,QAAAC,EAAAN,EAAO,EAACK,CAAK,IAAb,YAAAC,EAAgB,KAAS,GAAAP,OAAMM,CAAK,EAC7C,yEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,EAAGN,IAAA,qGAgBXO,EAAAC,EAAAC,EAAAH,CAAG,EAAC,KAAK,GADD,CAAA,IAAAP,IAAYC,CAAK,CAAA,CAAA,mBAD1BS,EAAAH,CAAG,EAAC,OAAKJ,EAAAQ,CAAA,oGANFC,EAAA,SAAAF,EAAAH,CAAG,EAAC,SAEAM,EAAAD,EAAA,eAAAF,EAAAH,CAAG,EAAC,SAAS,EAEpBO,KAAAA,EAAAJ,EAAAH,CAAG,EAAC,SAAJK,EAAA,OAAAA,EAAA,QAAAF,EAAAH,CAAG,EAAC,QAAK,MAPE,KAAA,CAAA,aAAAG,EAAAH,CAAG,EAAC,SAAS,GAC3B,IAAAP,IAAYC,CAAK,CAAA,IAGDc,EAAA,gBAAA,SAAAH,EAAAI,GAAAN,EAAAH,CAAG,EAAC,cAAJS,EAAA,IAAAN,EAAAH,CAAG,EAAC,aAAa,gBAG9BG,EAAAH,CAAG,EAAC,MADCT,EAAM,GAANA,qIA9BfR,EAAG,oKASZ,kJA5BY2B","x_google_ignoreList":[0]}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).\n   */\n  interface Props {\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the checkbox group.\n     */\n    value?: Array<string>;\n    /**\n     * list of properties of each checkbox button of the checkbox group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      indeterminate?: boolean;\n      indented?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the checkbox group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    name,\n    options,\n    value = $bindable([]),\n    inline,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\n    <div class=\"mc-checkbox mc-field__item\">\n      <input\n        type=\"checkbox\"\n        class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        disabled={option.disabled}\n        indeterminate={option.indeterminate}\n        aria-invalid={isinvalid}\n        bind:group={value}\n        value={option.value}\n      />\n      {#if option.label}\n        <label for={option.id} class=\"mc-checkbox__label\">{option.label}</label>\n      {/if}\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["name","$.prop","$$props","options","value","$.proxy","inline","isinvalid","$.each","div","option","$.set_attribute","label","$.get","$.set_text","text","$$render","consequent","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAAA,+BA8CIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EACPE,EAAKH,EAAAC,EAAA,QAAA,GAAA,IAAAG,EAAA,CAAA,CAAA,CAAA,EACLC,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,EAASN,EAAAC,EAAA,YAAA,CAAA,0QAKJM,OAAAA,EAAAC,EAAA,GAAAN,OAAWO,IAAM,iFAcNC,EAAAC,EAAA,MAAAC,EAAAH,CAAM,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,KAAK,oBAD5DG,EAAAH,CAAM,EAAC,OAAKM,EAAAC,CAAA,yBATP,qBAAsBV,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDI,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRH,GAAS,EAEhBY,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFN,EAAK,GAALA,gCAXP,oBAAqBE,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,uJA9CYc"}