@ds-mo/ui 12.9.0 → 13.0.0

package/dist/mcp-data/registry/select-multi.json

@@ -1,758 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-multi",
-  "title": "SelectMulti",
-  "description": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/select-multi",
-    "source": "src/wc/components/SelectMulti/SelectMulti.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "general",
-      "status": "stable",
-      "summary": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
-      "useWhen": [
-        "The user may choose several independent values from one finite set.",
-        "A compact trigger should summarize selection with the field label and a count.",
-        "The option set benefits from local search, subtext, grouping, or disabled choices.",
-        "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain where search materially improves retrieval."
-      ],
-      "avoidWhen": [
-        "Exactly one value may be selected.",
-        "Selected values must remain individually removable as persistent tags outside the popup.",
-        "The choices form a hierarchy with cascading parent selection.",
-        "The customer task benefits more from keeping every choice and checkbox directly visible; choose between SelectMulti and a visible checkbox list from the use-case context rather than a fixed option-count threshold."
-      ],
-      "alternatives": [
-        {
-          "when": "Exactly one value may be selected.",
-          "component": "component:ds-select",
-          "reason": "Select owns scalar form value and single-select listbox behavior."
-        },
-        {
-          "when": "The popup contains actions rather than values.",
-          "component": "component:ds-menu",
-          "reason": "Menu uses command semantics and closes according to action-menu expectations."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-text",
-        "component:ds-checkbox",
-        "component:ds-empty-state",
-        "component:ds-loader"
-      ],
-      "accessibility": [
-        "In forms, provide a persistent visible external field label. In a compact filter bar, the trigger's visible persistent label and count may supply the accessible name.",
-        "The popup is a listbox with aria-multiselectable and every option exposes its independent aria-selected state.",
-        "Disabled options expose aria-disabled and are skipped by keyboard navigation and typeahead.",
-        "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
-        "Each row uses a presentation-only ds-checkbox indicator at the same density as the row; multi-select option rows never add a prefix icon alongside it, and the option remains the sole selection semantic and interaction target.",
-        "The trigger keeps its field label visible and appends the current selected count; an explicit aria-label or aria-labelledby remains the authoritative accessible name when supplied.",
-        "Use errorMessage with error so the trigger is described by the rendered alert."
-      ],
-      "states": [
-        "Select and SelectMulti share popup positioning, dismissal, focus, typeahead, and listbox traversal while retaining their distinct scalar and array selection contracts.",
-        "Every size applies one complete control-density recipe across trigger height, inline padding, icon zones, text-container inset, gap, and radius; error content follows the shared 4px field flow.",
-        "Values is a controlled JavaScript array; dsChange emits a new array after each user toggle.",
-        "Required SelectMulti controls begin without an automatic selection and require the user to make an explicit choice.",
-        "Selecting an option keeps the popup open so additional values can be toggled.",
-        "The trigger label stays left-aligned at every width; every option row uses the same leading Checkbox indicator at its density. The default control size is md in both forms and filter bars.",
-        "The selected count always follows the persistent label as plain text separated by a centered dot, including for one selection, and counts every selected value even when search or grouping hides it. Never replace the count with selected option names.",
-        "Create sections only for categories that are meaningful to customers, not merely to break a long list into arbitrary chunks.",
-        "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
-        "Option labels stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
-        "The optional prefix icon and chevron always use the parent surface's secondary foreground color, including when selection promotes the label and count to primary.",
-        "The shared popup search control follows the SelectMulti density, using the same text, icon, and internal spacing as a borderless trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
-        "When search contains text, the shared control shows a rounded sm icon-only ButtonUnfilled with the Cross icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
-        "The shared summary-and-clear footer mirrors the owning density: menu-item padding surrounds a borderless density row, and both texts use the same row and label insets as option text. The outer footer owns a 1px top divider.",
-        "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
-        "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
-        "When allowClear is enabled, clear-all appears only after at least one value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
-        "Clear-all emits an empty dsChange and dsClear while preserving useful popup or search focus.",
-        "Loading keeps the trigger visible, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
-        "SelectMulti has no maximum-selection behavior; every available non-inactive option may be selected.",
-        "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the component exposes validity and error presentation without imposing that policy.",
-        "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry.",
-        "An initially empty option set is not an expected SelectMulti use case. The no-results state describes a search with no matches, not a source with no choices.",
-        "Native form submission emits one entry per selected value under the component name.",
-        "Use options for a flat list or sections for grouped choices. Multi-select option contracts intentionally exclude icons because the leading checkbox owns that row zone; hierarchical parent selection is deferred."
-      ],
-      "responsiveBehavior": [
-        "Use width fill for form fields and width hug for compact filter bars; the persistent trigger label avoids variable-width selected labels.",
-        "The popup matches the trigger minimum width, may grow for content, and clamps to the viewport.",
-        "Long option collections scroll inside the popup; virtualization and remote search are not part of this version."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign values, options, and sections through JavaScript properties; array values cannot be represented safely as attributes."
-        ],
-        "react": [
-          "Pass values, options, and sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
-        ],
-        "angular": [
-          "Import DsSelectMulti and SelectMultiValueAccessor when integrating with Angular Forms."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/SelectMulti/SelectMulti.stories.ts"
-        },
-        {
-          "label": "Selection patterns",
-          "path": "src/docs/SelectionPatterns.mdx"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "activeFill": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "active-fill",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show the selected interaction fill when at least one value exists."
-        },
-        "allowClear": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "allow-clear",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show the clear-all footer action when values exist."
-        },
-        "ariaDescribedby": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "aria-describedby",
-          "required": false,
-          "mutable": false,
-          "description": "Additional IDs that describe the combobox."
-        },
-        "ariaLabel": {
-          "type": "string | null",
-          "resolvedType": "null | string",
-          "attribute": "aria-label",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "Direct accessible name when no external label is available."
-        },
-        "ariaLabelledby": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "aria-labelledby",
-          "required": false,
-          "mutable": false,
-          "description": "IDs of elements that label the combobox."
-        },
-        "background": {
-          "type": "SelectMultiBackground | undefined",
-          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
-          "attribute": "background",
-          "required": false,
-          "mutable": false,
-          "description": "Actual parent surface context; omit on primary and secondary surfaces."
-        },
-        "clearLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "clear-label",
-          "default": "'Clear'",
-          "required": false,
-          "mutable": false,
-          "description": "Localized clear-all action label."
-        },
-        "disabled": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "disabled",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Native disabled state."
-        },
-        "error": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "error",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Show invalid visual state."
-        },
-        "errorMessage": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "error-message",
-          "required": false,
-          "mutable": false,
-          "description": "Error text rendered below the trigger when error is true."
-        },
-        "hasBorder": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "has-border",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show the surface-aware inset border."
-        },
-        "icon": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "icon",
-          "required": false,
-          "mutable": false,
-          "description": "Optional trigger prefix icon name."
-        },
-        "inputId": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "input-id",
-          "required": false,
-          "mutable": false,
-          "description": "ID applied to the internal combobox trigger for external labels."
-        },
-        "isInactive": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "is-inactive",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Shared inactive treatment; removes interaction and form submission."
-        },
-        "isLoading": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "is-loading",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Replace the prefix with a loader and disable option interaction."
-        },
-        "loadingLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "loading-label",
-          "default": "'Loading'",
-          "required": false,
-          "mutable": false,
-          "description": "Accessible loading status label."
-        },
-        "name": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "name",
-          "required": false,
-          "mutable": false,
-          "description": "Native form field name used for each repeated selected-value entry."
-        },
-        "noResultsText": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "no-results-text",
-          "default": "'No results found'",
-          "required": false,
-          "mutable": false,
-          "description": "Localized empty-filter result text."
-        },
-        "open": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "open",
-          "default": "false",
-          "required": false,
-          "mutable": true,
-          "description": "Controlled popup visibility."
-        },
-        "options": {
-          "type": "SelectMultiOption[]",
-          "resolvedType": "SelectMultiOption[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Flat choices. Assign arrays through the JavaScript property."
-        },
-        "placeholder": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "placeholder",
-          "default": "'Select'",
-          "required": false,
-          "mutable": false,
-          "description": "Persistent trigger label; selected option labels never replace it."
-        },
-        "required": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "required",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Require at least one valid selected value."
-        },
-        "requiredMessage": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "required-message",
-          "default": "'This field is required.'",
-          "required": false,
-          "mutable": false,
-          "description": "Validation message used when required is missing."
-        },
-        "searchPlaceholder": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "search-placeholder",
-          "default": "'Search'",
-          "required": false,
-          "mutable": false,
-          "description": "Localized search-field placeholder and accessible name."
-        },
-        "searchable": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "searchable",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Show immediate local filtering over option labels, subtext, and section headings."
-        },
-        "sections": {
-          "type": "SelectMultiSection[]",
-          "resolvedType": "SelectMultiSection[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Grouped choices; takes precedence over options. Assign through JavaScript."
-        },
-        "selectedLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "selected-label",
-          "default": "'selected'",
-          "required": false,
-          "mutable": false,
-          "description": "Localized noun displayed after the selected count."
-        },
-        "size": {
-          "type": "SelectMultiSize",
-          "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "attribute": "size",
-          "default": "'md'",
-          "required": false,
-          "mutable": false,
-          "description": "Control density."
-        },
-        "values": {
-          "type": "string[]",
-          "resolvedType": "string[]",
-          "default": "[]",
-          "required": false,
-          "mutable": true,
-          "description": "Selected values. Assign arrays through the JavaScript property."
-        },
-        "width": {
-          "type": "SelectMultiWidth",
-          "resolvedType": "\"fill\" | \"hug\"",
-          "attribute": "width",
-          "default": "'hug'",
-          "required": false,
-          "mutable": false,
-          "description": "Width fit — hug content (default) or fill the parent."
-        }
-      },
-      "events": [
-        {
-          "name": "dsChange",
-          "detail": "string[]",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Emitted after user toggles or clearing with a new values array."
-        },
-        {
-          "name": "dsClear",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Emitted after the footer clear-all action."
-        },
-        {
-          "name": "dsOpenChange",
-          "detail": "boolean",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Emitted whenever popup visibility changes."
-        }
-      ],
-      "methods": [
-        {
-          "name": "setFocus",
-          "signature": "setFocus() => Promise<void>"
-        }
-      ],
-      "slots": []
-    },
-    "props": {
-      "activeFill": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "active-fill",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show the selected interaction fill when at least one value exists."
-      },
-      "allowClear": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "allow-clear",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show the clear-all footer action when values exist."
-      },
-      "ariaDescribedby": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "aria-describedby",
-        "required": false,
-        "mutable": false,
-        "description": "Additional IDs that describe the combobox."
-      },
-      "ariaLabel": {
-        "type": "string | null",
-        "resolvedType": "null | string",
-        "attribute": "aria-label",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "Direct accessible name when no external label is available."
-      },
-      "ariaLabelledby": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "aria-labelledby",
-        "required": false,
-        "mutable": false,
-        "description": "IDs of elements that label the combobox."
-      },
-      "background": {
-        "type": "SelectMultiBackground | undefined",
-        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
-        "attribute": "background",
-        "required": false,
-        "mutable": false,
-        "description": "Actual parent surface context; omit on primary and secondary surfaces."
-      },
-      "clearLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "clear-label",
-        "default": "'Clear'",
-        "required": false,
-        "mutable": false,
-        "description": "Localized clear-all action label."
-      },
-      "disabled": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "disabled",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Native disabled state."
-      },
-      "error": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "error",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Show invalid visual state."
-      },
-      "errorMessage": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "error-message",
-        "required": false,
-        "mutable": false,
-        "description": "Error text rendered below the trigger when error is true."
-      },
-      "hasBorder": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "has-border",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show the surface-aware inset border."
-      },
-      "icon": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "icon",
-        "required": false,
-        "mutable": false,
-        "description": "Optional trigger prefix icon name."
-      },
-      "inputId": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "input-id",
-        "required": false,
-        "mutable": false,
-        "description": "ID applied to the internal combobox trigger for external labels."
-      },
-      "isInactive": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "is-inactive",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Shared inactive treatment; removes interaction and form submission."
-      },
-      "isLoading": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "is-loading",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Replace the prefix with a loader and disable option interaction."
-      },
-      "loadingLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "loading-label",
-        "default": "'Loading'",
-        "required": false,
-        "mutable": false,
-        "description": "Accessible loading status label."
-      },
-      "name": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "name",
-        "required": false,
-        "mutable": false,
-        "description": "Native form field name used for each repeated selected-value entry."
-      },
-      "noResultsText": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "no-results-text",
-        "default": "'No results found'",
-        "required": false,
-        "mutable": false,
-        "description": "Localized empty-filter result text."
-      },
-      "open": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "open",
-        "default": "false",
-        "required": false,
-        "mutable": true,
-        "description": "Controlled popup visibility."
-      },
-      "options": {
-        "type": "SelectMultiOption[]",
-        "resolvedType": "SelectMultiOption[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Flat choices. Assign arrays through the JavaScript property."
-      },
-      "placeholder": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "placeholder",
-        "default": "'Select'",
-        "required": false,
-        "mutable": false,
-        "description": "Persistent trigger label; selected option labels never replace it."
-      },
-      "required": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "required",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Require at least one valid selected value."
-      },
-      "requiredMessage": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "required-message",
-        "default": "'This field is required.'",
-        "required": false,
-        "mutable": false,
-        "description": "Validation message used when required is missing."
-      },
-      "searchPlaceholder": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "search-placeholder",
-        "default": "'Search'",
-        "required": false,
-        "mutable": false,
-        "description": "Localized search-field placeholder and accessible name."
-      },
-      "searchable": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "searchable",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Show immediate local filtering over option labels, subtext, and section headings."
-      },
-      "sections": {
-        "type": "SelectMultiSection[]",
-        "resolvedType": "SelectMultiSection[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Grouped choices; takes precedence over options. Assign through JavaScript."
-      },
-      "selectedLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "selected-label",
-        "default": "'selected'",
-        "required": false,
-        "mutable": false,
-        "description": "Localized noun displayed after the selected count."
-      },
-      "size": {
-        "type": "SelectMultiSize",
-        "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-        "attribute": "size",
-        "default": "'md'",
-        "required": false,
-        "mutable": false,
-        "description": "Control density."
-      },
-      "values": {
-        "type": "string[]",
-        "resolvedType": "string[]",
-        "default": "[]",
-        "required": false,
-        "mutable": true,
-        "description": "Selected values. Assign arrays through the JavaScript property."
-      },
-      "width": {
-        "type": "SelectMultiWidth",
-        "resolvedType": "\"fill\" | \"hug\"",
-        "attribute": "width",
-        "default": "'hug'",
-        "required": false,
-        "mutable": false,
-        "description": "Width fit — hug content (default) or fill the parent."
-      }
-    },
-    "events": [
-      {
-        "name": "dsChange",
-        "detail": "string[]",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Emitted after user toggles or clearing with a new values array."
-      },
-      {
-        "name": "dsClear",
-        "detail": "void",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Emitted after the footer clear-all action."
-      },
-      {
-        "name": "dsOpenChange",
-        "detail": "boolean",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Emitted whenever popup visibility changes."
-      }
-    ],
-    "methods": [
-      {
-        "name": "setFocus",
-        "signature": "setFocus() => Promise<void>"
-      }
-    ],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-select-multi",
-      "react": "DsSelectMulti",
-      "angular": "DsSelectMulti"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-select-multi.js';",
-        "example": "<ds-select-multi></ds-select-multi>"
-      },
-      "react": {
-        "import": "import { DsSelectMulti } from '@ds-mo/ui/react';",
-        "example": "<DsSelectMulti />"
-      },
-      "angular": {
-        "import": "import { DsSelectMulti } from '@ds-mo/ui/angular/ds-select-multi';",
-        "example": "<ds-select-multi></ds-select-multi>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections, values.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.0.0",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens",
-    "@ds-mo/icons"
-  ],
-  "registryDependencies": [
-    "button-unfilled",
-    "checkbox",
-    "empty-state",
-    "icon",
-    "loader",
-    "text",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/SelectMulti/SelectMulti.css",
-      "content": "@import '../Select/Select.css';\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/SelectMulti/SelectMulti.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\nimport { ChoiceFooter, ChoiceOptionRow, ChoiceSearch } from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesSubtext,\n  filterChoiceSections,\n  flattenChoiceSections,\n  resolveChoiceSections,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\nimport type { SelectBackground, SelectOption, SelectSection, SelectSize } from '../Select/Select';\n\nexport type SelectMultiOption = Omit<SelectOption, 'icon'>;\nexport type SelectMultiSection = Omit<SelectSection, 'options'> & {\n  options: SelectMultiOption[];\n};\nexport type SelectMultiBackground = SelectBackground;\nexport type SelectMultiSize = SelectSize;\nexport type SelectMultiWidth = ControlWidth;\n\nconst ICON_SIZE: Record<SelectMultiSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nlet selectMultiId = 0;\n\n@Component({\n  tag: 'ds-select-multi',\n  styleUrl: 'SelectMulti.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class SelectMulti {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Flat choices. Assign arrays through the JavaScript property. */\n  @Prop() options: SelectMultiOption[] = [];\n  /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n  @Prop() sections: SelectMultiSection[] = [];\n  /** Selected values. Assign arrays through the JavaScript property. */\n  @Prop({ mutable: true }) values: string[] = [];\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Native form field name used for each repeated selected-value entry. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require at least one valid selected value. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when required is missing. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Persistent trigger label; selected option labels never replace it. */\n  @Prop() placeholder: string = 'Select';\n  /** Control density. */\n  @Prop() size: SelectMultiSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectMultiWidth = 'hug';\n  /** Shared inactive treatment; removes interaction and form submission. */\n  @Prop() isInactive: boolean = false;\n  /** Replace the prefix with a loader and disable option interaction. */\n  @Prop() isLoading: boolean = false;\n  /** Show the selected interaction fill when at least one value exists. */\n  @Prop() activeFill: boolean = true;\n  /** Show the surface-aware inset border. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Show the clear-all footer action when values exist. */\n  @Prop() allowClear: boolean = true;\n  /** Localized clear-all action label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Localized noun displayed after the selected count. */\n  @Prop() selectedLabel: string = 'selected';\n  /** Show immediate local filtering over option labels, subtext, and section headings. */\n  @Prop() searchable: boolean = false;\n  /** Localized search-field placeholder and accessible name. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Localized empty-filter result text. */\n  @Prop() noResultsText: string = 'No results found';\n  /** Accessible loading status label. */\n  @Prop() loadingLabel: string = 'Loading';\n  /** Actual parent surface context; omit on primary and secondary surfaces. */\n  @Prop() background: SelectMultiBackground | undefined;\n  /** Show invalid visual state. */\n  @Prop() error: boolean = false;\n  /** Error text rendered below the trigger when error is true. */\n  @Prop() errorMessage: string | undefined;\n  /** ID applied to the internal combobox trigger for external labels. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name when no external label is available. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** IDs of elements that label the combobox. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Additional IDs that describe the combobox. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  /** Emitted after user toggles or clearing with a new values array. */\n  @Event() dsChange!: EventEmitter<string[]>;\n  /** Emitted after the footer clear-all action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private activeIndex = -1;\n  @State() private searchTerm = '';\n  @State() private formDisabled = false;\n  @State() private position = { x: 0, y: 0 };\n  @State() private positionReady = false;\n  @State() private focusRingVisible = false;\n\n  private readonly generatedId = `ds-select-multi-${++selectMultiId}`;\n  private readonly listboxId = `${this.generatedId}-listbox`;\n  private readonly errorId = `${this.generatedId}-error`;\n  private initialValues: string[] = [];\n  private readonly controller = this.createController();\n\n  private createController() {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- adapter getters preserve reactive component ownership without inheritance.\n    const owner = this;\n    return new SelectController<SelectMultiOption>({\n      get host() {\n        return owner.el;\n      },\n      generatedId: owner.generatedId,\n      get options() {\n        return owner.visibleOptions;\n      },\n      get searchable() {\n        return owner.searchable;\n      },\n      get isLoading() {\n        return owner.isLoading;\n      },\n      get isDisabled() {\n        return owner.isDisabled;\n      },\n      get preferredIndex() {\n        return -1;\n      },\n      get open() {\n        return owner.open;\n      },\n      set open(value) {\n        owner.open = value;\n      },\n      get activeIndex() {\n        return owner.activeIndex;\n      },\n      set activeIndex(value) {\n        owner.activeIndex = value;\n      },\n      get searchTerm() {\n        return owner.searchTerm;\n      },\n      set searchTerm(value) {\n        owner.searchTerm = value;\n      },\n      get focusRingVisible() {\n        return owner.focusRingVisible;\n      },\n      set focusRingVisible(value) {\n        owner.focusRingVisible = value;\n      },\n      get position() {\n        return owner.position;\n      },\n      set position(value) {\n        owner.position = value;\n      },\n      get positionReady() {\n        return owner.positionReady;\n      },\n      set positionReady(value) {\n        owner.positionReady = value;\n      },\n      selectOption: option => owner.toggleOption(option),\n    });\n  }\n\n  componentWillLoad() {\n    this.initialValues = [...this.values];\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.controller.connect();\n  }\n\n  disconnectedCallback() {\n    this.controller.disconnect();\n  }\n\n  @Watch('values')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('name')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    const resolvedValues = this.resolvedValues;\n    if (this.isDisabled || !this.name || resolvedValues.length === 0) {\n      this.internals.setFormValue(null);\n    } else {\n      const data = new FormData();\n      resolvedValues.forEach(value => data.append(this.name as string, value));\n      this.internals.setFormValue(data, JSON.stringify(resolvedValues));\n    }\n    const missing = this.required && !this.isDisabled && resolvedValues.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n    this.controller.optionsChanged();\n  }\n\n  @Watch('isLoading')\n  onLoadingChange() {\n    this.controller.loadingChanged();\n  }\n\n  @Watch('open')\n  onOpenChange(open: boolean) {\n    this.dsOpenChange.emit(open);\n    this.controller.openChanged(open);\n  }\n\n  @Watch('searchTerm')\n  onSearchTermChange() {\n    this.controller.searchChanged();\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    this.controller.activeIndexChanged();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.values = [...this.initialValues];\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') {\n      this.values = [];\n      return;\n    }\n    try {\n      const restored = JSON.parse(state);\n      this.values = Array.isArray(restored)\n        ? restored.filter((value): value is string => typeof value === 'string')\n        : [];\n    } catch {\n      this.values = [];\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.controller.setFocus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get allSections(): SelectMultiSection[] {\n    return resolveChoiceSections(this.options, this.sections);\n  }\n\n  private get allOptions(): SelectMultiOption[] {\n    return flattenChoiceSections(this.allSections);\n  }\n\n  private get visibleSections(): SelectMultiSection[] {\n    return this.searchable\n      ? filterChoiceSections(this.allSections, this.searchTerm)\n      : this.allSections;\n  }\n\n  private get visibleOptions(): SelectMultiOption[] {\n    return flattenChoiceSections(this.visibleSections);\n  }\n\n  private get resolvedValues(): string[] {\n    const valid = new Set(this.allOptions.map(option => option.value));\n    return [...new Set(this.values.filter(value => valid.has(value)))];\n  }\n\n  private get hasSelection(): boolean {\n    return this.resolvedValues.length > 0;\n  }\n\n  private get activeOptionId(): string | undefined {\n    return this.controller.activeOptionId;\n  }\n\n  private closePopup(restoreFocus = false) {\n    this.controller.closePopup(restoreFocus);\n  }\n\n  private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n    this.controller.openPopup(focusVisible, edge);\n  }\n\n  private toggleOption(option: SelectMultiOption) {\n    if (option.isInactive || this.isLoading) return;\n    const current = this.resolvedValues;\n    const next = current.includes(option.value)\n      ? current.filter(value => value !== option.value)\n      : [...current, option.value];\n    this.values = next;\n    this.dsChange.emit([...next]);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.values = [];\n    this.dsChange.emit([]);\n    this.dsClear.emit();\n    this.controller.focusSearchOrTrigger();\n  };\n\n  private readonly handleListKeyDown = this.controller.handleListKeyDown;\n  private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n  private renderOption(option: SelectMultiOption, index: number, usesSubtext: boolean) {\n    const selected = this.values.includes(option.value);\n    const active = this.activeIndex === index;\n    return (\n      <ChoiceOptionRow\n        size={this.size}\n        id={`${this.generatedId}-option-${index}`}\n        option={option}\n        selected={selected}\n        active={active}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={usesSubtext}\n        leading={\n          <span\n            class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n            aria-hidden=\"true\"\n          >\n            <ds-checkbox\n              class=\"select-option__checkbox\"\n              label=\"\"\n              size={this.size}\n              checked={selected}\n              presentation\n            />\n          </span>\n        }\n        onHover={() => {\n          this.focusRingVisible = false;\n          this.activeIndex = index;\n        }}\n        onSelect={() => this.toggleOption(option)}\n      />\n    );\n  }\n\n  render() {\n    const inactive = this.isDisabled;\n    const count = this.resolvedValues.length;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n    const showError = this.error && Boolean(this.errorMessage);\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n    let flatIndex = 0;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n          [`select-host--background-${this.background}`]: !!this.background,\n        }}\n      >\n        <button\n          ref={element => {\n            this.controller.setTriggerElement((element as HTMLButtonElement) ?? null);\n          }}\n          id={this.inputId ?? this.generatedId}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-control-frame': true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': !inactive && this.activeFill && this.hasSelection,\n            'trigger--bordered': this.hasBorder || this.error,\n            'trigger--has-value': this.hasSelection,\n            'wrapper--error': this.error,\n            [`ds-control--${this.size}`]: true,\n            ...choiceBackgroundClassMap(this.background),\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={String(this.open)}\n          aria-controls={this.open ? this.listboxId : undefined}\n          aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-describedby={describedBy}\n          aria-invalid={this.error ? 'true' : undefined}\n          aria-required={this.required || undefined}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n          onKeyDown={this.handleTriggerKeyDown}\n        >\n          {(this.icon || this.isLoading) && (\n            <span\n              class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              {this.isLoading ? (\n                <ds-loader size={iconSize} color=\"inherit\" />\n              ) : (\n                <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              )}\n            </span>\n          )}\n          <ds-text\n            class=\"trigger__label ds-control-label-box ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {`${this.placeholder}${count > 0 ? ` · ${count}` : ''}`}\n          </ds-text>\n          <span\n            class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n            aria-hidden=\"true\"\n          >\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n\n        {this.open && (\n          <div\n            popover=\"manual\"\n            ref={element => {\n              this.controller.setPopupElement((element as HTMLDivElement) ?? null);\n            }}\n            class=\"select-popup ds-choice-popup\"\n            style={popupStyle}\n          >\n            {this.searchable && (\n              <ChoiceSearch\n                size={this.size}\n                value={this.searchTerm}\n                placeholder={this.searchPlaceholder}\n                controls={this.listboxId}\n                activeDescendant={this.activeOptionId}\n                inputRef={this.controller.setSearchElement}\n                clearLabel={this.clearLabel}\n                onValueChange={value => {\n                  this.searchTerm = value;\n                }}\n                onKeyDown={event => this.handleListKeyDown(event)}\n              />\n            )}\n            <div\n              id={this.listboxId}\n              class=\"ds-choice-list\"\n              role=\"listbox\"\n              aria-multiselectable=\"true\"\n              aria-label={this.ariaLabel ?? this.placeholder}\n              aria-busy={this.isLoading ? 'true' : undefined}\n            >\n              {this.isLoading ? (\n                <div\n                  class=\"ds-choice-loading\"\n                  role=\"option\"\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.loadingLabel}\n                  aria-live=\"polite\"\n                >\n                  <ds-loader size={this.size} color=\"inherit\" />\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty ds-empty-region\"\n                  role=\"option\"\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.noResultsText}\n                  aria-live=\"polite\"\n                >\n                  <ds-empty-state body={this.noResultsText} />\n                </div>\n              ) : (\n                this.visibleSections.map(section => (\n                  <div\n                    class={{\n                      'ds-choice-section': true,\n                      'ds-chrome-column': true,\n                      'ds-chrome-space--sm': true,\n                      'ds-choice-section--divided': !!section.divider,\n                    }}\n                    role={section.header ? 'group' : undefined}\n                    aria-label={section.header}\n                  >\n                    {section.header && (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        aria-hidden=\"true\"\n                      >\n                        {section.header}\n                      </ds-text>\n                    )}\n                    {section.options.map(option =>\n                      this.renderOption(option, flatIndex++, usesOptionSubtext)\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.allowClear && this.hasSelection && !this.isLoading && (\n              <ChoiceFooter\n                size={this.size}\n                summary={`${count} ${this.selectedLabel}`}\n                clearLabel={this.clearLabel}\n                onClear={this.clearSelection}\n              />\n            )}\n          </div>\n        )}\n\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}