@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/textinput/Textinput.stories.js

@@ -1,154 +1,95 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
- *
- * The `MTextInput` component is the **Svelte / WebComponent** implementation of the **Text Input** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
- */
-export default {
+const meta = {
     title: 'Form Elements/TextInput',
-    tags: ['autodocs', 'beta'],
+    component: 'm-textinput',
     argTypes: {
-        name: {
-            description: 'Specify the text input name',
-            control: 'text',
-        },
-        value: {
-            description: 'Specify the text input value',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Specify the text input placeholder',
-            control: 'text',
-        },
         inputtype: {
-            description: 'Specify the text input type',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text'],
         },
-        isinvalid: {
-            description: 'Specify whether the text input is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Specify whether the text input is required',
-            control: 'boolean',
-        },
-        readonly: {
-            description: 'Specify whether the text input is readonly',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Specify whether the text input is disabled',
-            control: 'boolean',
-        },
-        isclearable: {
-            description: 'Specify whether the text input is clearable',
-            control: 'boolean',
-        },
-        rightalign: {
-            description: 'Specify whether the text input has the text is align on the right',
-            control: 'boolean',
-        },
-        min: {
-            description: 'Specify the min value for the imput',
-            control: 'boolean',
-        },
-        max: {
-            description: 'Specify the max value for the imput',
-            control: 'boolean',
-        },
-        minLength: {
-            description: 'Minimum number of characters required for the input (used with text type).',
-            control: 'boolean',
-        },
-        maxLength: {
-            description: 'Maximum number of characters allowed in the input (used with text type).',
-            control: 'boolean',
-        },
-        clearlabel: {
-            description: 'The label text for the clear button',
-            control: 'text',
-        },
         size: {
-            description: 'Specify the text input size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
     },
+    args: {
+        id: 'textInputId',
+        placeholder: 'Placeholder',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-textinput
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        inputtype=${ifDefined(args.inputtype)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        readonly=${ifDefined(args.readonly)}
+        isclearable=${ifDefined(args.isclearable)}
+        clearlabel=${ifDefined(args.clearlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-textinput>
+    `;
+    },
 };
-// Function to emulate pausing between interactions
-function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-const Template = (args) => {
-    const MTextInput = document.createElement('m-textinput');
-    MTextInput.setAttribute('inputtype', args.inputtype || 'text');
-    if (args.name)
-        MTextInput.setAttribute('name', args.name);
-    if (args.value)
-        MTextInput.setAttribute('value', args.value);
-    if (args.placeholder)
-        MTextInput.setAttribute('placeholder', args.placeholder);
-    if (args.isinvalid)
-        MTextInput.setAttribute('isinvalid', 'true');
-    if (args.require)
-        MTextInput.setAttribute('require', 'true');
-    if (args.disabled)
-        MTextInput.setAttribute('disabled', 'true');
-    if (args.readonly)
-        MTextInput.setAttribute('readonly', 'true');
-    if (args.isclearable)
-        MTextInput.setAttribute('isclearable', 'true');
-    if (args.size)
-        MTextInput.setAttribute('size', args.size);
-    MTextInput.addEventListener('input', action('input'));
-    MTextInput.onkeyup = action('onkeyup');
-    return MTextInput;
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Value of the input component',
+        isclearable: true,
+    },
 };
-export const Default = Template.bind({});
-Default.args = { placeholder: 'This is a default text input' };
-Default.play = async ({ canvasElement, step }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    const input = textinput?.shadowRoot.querySelector('input');
-    await sleep(1500);
-    await step('Focus input', async () => {
-        await userEvent.click(input);
-        await sleep(1500);
-        expect(input).not.toBeNull();
-        await sleep(1500);
-        await expect(input).toBeVisible();
-        await sleep(1500);
-    });
-    await step('Fill out input', async () => {
-        await userEvent.type(input, 'Testing input');
-        await sleep(1500);
-        expect(input).toHaveValue('Testing input');
-        await sleep(1500);
-    });
-    await step('Clear input', async () => {
-        await userEvent.keyboard('{Backspace>15}');
-        await sleep(1500);
-        expect(input).toHaveValue('');
-        await sleep(1500);
-    });
+export const Default = {};
+export const Small = {
+    args: {
+        id: 'smallId',
+        size: 's',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
-    placeholder: 'This is an invalid text input',
+export const MinValue = {
+    args: {
+        id: 'minValueId',
+        inputtype: 'number',
+        value: '4',
+        min: '3',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    expect(textinput).toHaveAttribute('isinvalid', 'true');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'This is a disabled text input',
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    expect(textinput).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };

package/dist/components/textinput/Textinput.svelte

@@ -1,146 +1,96 @@
-<svelte:options customElement="m-textinput" />
+<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />
 
 <script lang="ts">
-  import type { TextInputSize, TextInputType } from './textinput.types';
-  import type { Snippet } from 'svelte';
-
+  import { customElementForwardEvents } from '../../utils';
+  /**
+   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
+   *
+   * @slot icon - Use this slot to insert an icon in the input.
+   */
   interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    inputtype?: TextInputType;
-    isvalid: boolean;
-    isinvalid: boolean;
+    /**
+     * A unique identifier for the input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the input field.
+     */
+    value?: string | number;
+    /**
+     * A placeholder text to show in the input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines the type of input.
+     */
+    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
+    /**
+     * If `true`, applies an invalid state to the input.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * Determines the size of the input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    size?: TextInputSize;
-    hasicon?: boolean;
-    icon?: Snippet;
-    rightalign: boolean;
-    min: string;
-    max: string;
-    minlength: number;
-    maxlength: number;
-    required?: boolean;
-    clearlabel?: string;
+    /**
+     * If `true`, a clear button will appear when the input has a value.
+     */
     isclearable?: boolean;
-    onclear?: (arg: string) => void;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * The label text for the clear button.
+     */
+    clearlabel?: string;
   }
 
   let {
+    id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     inputtype = 'text',
-    isvalid,
     isinvalid,
-    disabled = false,
-    readonly = false,
+    disabled,
+    readonly,
     size = 'm',
-    hasicon = false,
-    icon,
-    rightalign,
-    min,
-    max,
-    minlength,
-    maxlength,
-    required = false,
     clearlabel = 'Clear content',
-    isclearable = false,
-    onclear,
-    oninput,
-    onchange,
-    onblur,
+    isclearable,
   }: Props = $props();
 
-  let inputType = $derived(inputtype);
-  let displayClear = $derived(isclearable && value ? true : false);
-  let hasIcon = $derived(!!hasicon || !!icon)
-
-  function getClasses(
-    isValid: boolean,
-    isInvalid: boolean,
-    size: TextInputSize,
-    hasIcon: boolean,
-  ): string {
-    const classes = ['mc-text-input', 'mc-field__input'];
-
-    if (isValid) {
-      classes.push('is-valid');
-    }
-
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
-
-    if (size === 's') {
-      classes.push('mc-text-input--s');
-    }
-
-    if (hasIcon) {
-      classes.push('mc-left-icon-input__input');
-    }
-
-    if (rightalign) {
-      classes.push('right-align');
-    }
-
-    return classes.join(' ');
-  }
-
-  const setType = (node: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    node.type = inputType;
-  };
-
-  function resetValue() {
-    value = '';
-    onclear?.('onclear');
-  }
+  const resetValue = () => (value = '');
 </script>
 
-<div class="{getClasses(isvalid, isinvalid, size, hasIcon)} ">
-  {#if hasIcon}
-    <span class="mc-text-input__icon">
-      {#if icon}
-       {@render icon()}
-      {:else}
-        <slot name="icon" />
-      {/if}
-    </span>
-  {/if}
+<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>
+  <span class="mc-text-input__icon">
+    <slot name="icon" />
+  </span>
+
   <input
     bind:value
-    use:setType
     class="mc-text-input__control"
     aria-invalid={isinvalid}
     {name}
-    id={name}
+    {id}
+    type={inputtype}
     {placeholder}
     {disabled}
-    {min}
-    {max}
-    {minlength}
-    {maxlength}
-    spellcheck="false"
-    {required}
-    {...readonly ? { readonly: true } : {}}
-    {oninput}
-    {onchange}
-    {onblur}
+    {readonly}
   />
-  <!-- Control options -->
-  {#if displayClear}
-    <div class="mc-controls-options js-control-options">
-      <!-- Clear Button -->
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
+
+  {#if isclearable && value}
+    <div class="mc-controls-options">
+      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"
@@ -317,6 +267,6 @@
 }
 
 /* stylelint-enable string-no-newline */
-.right-align {
-  text-align: right;
+.mc-text-input__icon:empty {
+  display: none;
 }</style>

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

@@ -1,29 +1,53 @@
-import type { TextInputSize, TextInputType } from './textinput.types';
-import type { Snippet } from 'svelte';
+/**
+ * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
+ *
+ * @slot icon - Use this slot to insert an icon in the input.
+ */
 interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    inputtype?: TextInputType;
-    isvalid: boolean;
-    isinvalid: boolean;
+    /**
+     * A unique identifier for the input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the input field.
+     */
+    value?: string | number;
+    /**
+     * A placeholder text to show in the input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines the type of input.
+     */
+    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
+    /**
+     * If `true`, applies an invalid state to the input.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * Determines the size of the input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    size?: TextInputSize;
-    hasicon?: boolean;
-    icon?: Snippet;
-    rightalign: boolean;
-    min: string;
-    max: string;
-    minlength: number;
-    maxlength: number;
-    required?: boolean;
-    clearlabel?: string;
+    /**
+     * If `true`, a clear button will appear when the input has a value.
+     */
     isclearable?: boolean;
-    onclear?: (arg: string) => void;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * The label text for the clear button.
+     */
+    clearlabel?: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -42,7 +66,7 @@ declare const Textinput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     icon: {};
-}, {}, "">;
+}, {}, "value">;
 type Textinput = InstanceType<typeof Textinput>;
 export default Textinput;
 //# sourceMappingURL=Textinput.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AA6GH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;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,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;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,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA+CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/toaster/README.md

@@ -0,0 +1,29 @@
+# `m-toaster`
+
+A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `open` | If `true`, display the Toaster. | `boolean` |   |
+| `position` | Position of the toaster. | `'top'` `'bottom'` `'top-center'` `'bottom-center'` | `top` |
+| `description*` | Description of the toaster. | `string` |   |
+| `status` | Allows to define the toaster style. | `'info'` `'success'` `'warning'` `'error'` | `info` |
+| `closable` | If `true`, display the close button. | `boolean` | `true` |
+| `progress` | If `true`, display the progress bar of the duration. | `boolean` |   |
+| `timeout` | Duration of the toaster | `number` |   |
+| `onUpdateOpen` | Callback fired when the toaster open state changes. | `(open: boolean) => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `action` | Use this slot to insert a button or a link in the toaster |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Fired when the open state changes. | `CustomEvent<boolean>` |
+