@mozaic-ds/web-components 1.6.0 → 1.8.0

package/dist/components/combobox/Combobox.stories.js

@@ -0,0 +1,126 @@
+import { html } from 'lit';
+import './Combobox.svelte';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const defaultOptions = Array.from({ length: 12 }).map((_el, index) => {
+    return {
+        id: (index + 1).toString(),
+        label: `Option ${index + 1}`,
+        value: `option${index + 1}`,
+    };
+});
+let optionCount = 0;
+const optionsWithSections = Array.from({ length: 12 }).map((_el, index) => {
+    const isSection = index % 3 === 0;
+    if (!isSection) {
+        optionCount++;
+    }
+    return {
+        label: `${isSection ? 'Section' : 'Option'} ${isSection ? index / 3 + 1 : optionCount}`,
+        value: !isSection ? `option${optionCount}` : undefined,
+        type: isSection ? 'section' : 'option',
+    };
+});
+const meta = {
+    title: 'Form elements/Combobox',
+    component: 'm-combobox',
+    tags: ['v2'],
+    parameters: {
+        docs: {
+            story: {
+                height: '300px',
+            },
+        },
+    },
+    args: {
+        search: false,
+        actions: true,
+        value: null,
+        checkablesections: true,
+        options: defaultOptions,
+    },
+    render: (args) => html `
+    <m-combobox
+      .value="${args.value}"
+      ?multiple="${args.multiple}"
+      ?compact="${args.compact}"
+      size="${ifDefined(args.size)}"
+      ?disabled="${args.disabled}"
+      ?readonly="${args.readonly}"
+      ?invalid="${args.invalid}"
+      ?clearable="${args.clearable}"
+      ?search="${args.search}"
+      ?actions="${args.actions}"
+      ?checkablesections="${args.checkablesections}"
+      placeholder="${ifDefined(args.placeholder)}"
+      counterlabel="${ifDefined(args.counterlabel)}"
+      searchplaceholder="${ifDefined(args.searchplaceholder)}"
+      selectlabel="${ifDefined(args.selectlabel)}"
+      clearlabel="${ifDefined(args.clearlabel)}"
+      showlabel="${ifDefined(args.showlabel)}"
+      .options="${args.options}"
+    ></m-combobox>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Multiple = {
+    args: {
+        multiple: true,
+        value: [],
+    },
+};
+export const SearchInput = {
+    args: {
+        search: true,
+        value: [],
+        multiple: true,
+    },
+};
+export const ActionButtons = {
+    args: {
+        value: [],
+        multiple: true,
+        actions: true,
+    },
+};
+export const WithSections = {
+    args: {
+        options: optionsWithSections,
+    },
+};
+export const SelectableSections = {
+    args: {
+        value: [],
+        multiple: true,
+        options: optionsWithSections,
+        checkablesections: true,
+    },
+};
+export const Clearable = {
+    args: {
+        clearable: true,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+export const Readonly = {
+    args: {
+        readonly: true,
+    },
+};
+export const Invalid = {
+    args: {
+        invalid: true,
+    },
+};
+export const AdditionalInformation = {
+    args: {
+        options: defaultOptions.map((option) => ({
+            ...option,
+            content: 'Additional information',
+        })),
+    },
+};

package/dist/components/combobox/Combobox.svelte

@@ -0,0 +1,421 @@
+<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 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<{
+      label: string;
+      content?: string;
+      value?: string | number;
+      disabled?: boolean;
+      type?: 'option' | 'section';
+    }>;
+    /**
+     * 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,104 @@
+/**
+ * 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<{
+        label: string;
+        content?: string;
+        value?: string | number;
+        disabled?: boolean;
+        type?: 'option' | 'section';
+    }>;
+    /**
+     * 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":"AAQE;;;;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;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;KAC7B,CAAC,CAAC;IACH;;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<{ label: string; content?: string; value?: string` `number; disabled?: boolean; type?: 'option'` `'section'; }>` |   |
+| `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>` |
+