@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,740 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "title": "Select",
+  "description": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/select",
+    "source": "src/wc/components/Select/Select.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
+      "useWhen": [
+        "The user must choose one value from a finite set.",
+        "The option set benefits from local search, subtext, prefix icons, grouping, or disabled choices.",
+        "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain such as addresses where search materially improves retrieval.",
+        "The selected value must participate in native, Angular, or React form state."
+      ],
+      "avoidWhen": [
+        "Several values may be selected at once.",
+        "The rows perform commands rather than choosing a form value.",
+        "The choices form a hierarchy with expandable parents."
+      ],
+      "alternatives": [
+        {
+          "when": "Several independent values may be selected.",
+          "component": "component:ds-select-multi",
+          "reason": "SelectMulti owns array values, multi-selection semantics, and count presentation."
+        },
+        {
+          "when": "The popup contains commands or state-changing actions.",
+          "component": "component:ds-menu",
+          "reason": "Menu uses action-menu roles and command-focused keyboard behavior."
+        },
+        {
+          "when": "A small set of choices should remain visible.",
+          "component": "component:ds-radio",
+          "reason": "Prefer Radio for roughly two to five mutually exclusive choices when the available space allows all choices to remain visible."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-text",
+        "component:ds-icon",
+        "component:ds-empty-state",
+        "component:ds-loader"
+      ],
+      "accessibility": [
+        "In forms, provide a persistent visible external field label; placeholder text is guidance and must not be the field's only label. In a compact filter bar, the trigger's visible text may supply the accessible name.",
+        "The trigger uses combobox semantics and the popup uses listbox and option semantics; do not replace them with menu roles.",
+        "Disabled options remain visible, expose aria-disabled, and are skipped by keyboard navigation and typeahead.",
+        "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
+        "Selected options rely on active fill and foreground treatment without a redundant trailing check icon.",
+        "Local search moves focus into the search field while preserving the active option through aria-activedescendant.",
+        "Use errorMessage with error so the trigger is described by the rendered alert."
+      ],
+      "states": [
+        "Value is controlled through the mutable value property; dsChange reports user selection and clearing.",
+        "Required Selects begin without an automatic selection and require the user to make an explicit choice; do not preselect the first option merely to satisfy validity.",
+        "When allowClear is enabled, the clear affordance appears only after a value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
+        "Clearing emits dsChange with an empty string and dsClear, keeps the popup open, and restores useful focus.",
+        "Loading keeps the trigger visible, replaces its prefix icon, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
+        "The trigger label stays left-aligned at every width. The default size is md in both forms and filter bars; smaller sizes require an explicit density need.",
+        "Use option icons only when they help users differentiate choices. Icons render only when every option in the complete list provides one; mixed icon data falls back to the text-only row layout.",
+        "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 and the selected trigger label 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 a selected value promotes the label to primary.",
+        "The shared popup search control stays md at every trigger size, using body-medium text, a 20px icon, and the same internal spacing as a borderless Select 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 CrossCircle icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
+        "The shared clear footer mirrors the search region's sizing: menu-item padding surrounds an md-height borderless row, and the Clear label uses 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.",
+        "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the Select 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 Select use case. The no-results state describes a search with no matches, not a source with no choices.",
+        "Use options for a flat list or sections for grouped choices; when sections are present they take precedence.",
+        "The background prop describes the actual parent surface and uses the same surface set as ButtonUnfilled."
+      ],
+      "responsiveBehavior": [
+        "Use width fill for form fields and width hug for compact filter bars. Override those defaults only when the owning layout has a clear constraint.",
+        "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 component."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign options and sections through JavaScript properties because arrays and objects cannot be represented safely as attributes."
+        ],
+        "react": [
+          "Pass options or sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
+        ],
+        "angular": [
+          "Import DsSelect and SelectValueAccessor when integrating with Angular Forms; bind options and sections as properties."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Select/Select.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 a valid value exists."
+        },
+        "allowClear": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "allow-clear",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show the clear footer action when a value exists."
+        },
+        "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": "SelectBackground | 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 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."
+        },
+        "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": "SelectOption[]",
+          "resolvedType": "ChoiceOption[]",
+          "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": "Trigger text shown when no valid value is selected."
+        },
+        "required": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "required",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Require 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": "SelectSection[]",
+          "resolvedType": "ChoiceSection[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Grouped choices; takes precedence over options. Assign through JavaScript."
+        },
+        "size": {
+          "type": "SelectSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Control density."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": true,
+          "description": "Selected string value. Unknown values render the placeholder and are not submitted."
+        },
+        "width": {
+          "type": "SelectWidth",
+          "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 selection or clearing with the next scalar value."
+        },
+        {
+          "name": "dsClear",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after the footer clear 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 a valid value exists."
+      },
+      "allowClear": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "allow-clear",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show the clear footer action when a value exists."
+      },
+      "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": "SelectBackground | 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 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."
+      },
+      "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": "SelectOption[]",
+        "resolvedType": "ChoiceOption[]",
+        "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": "Trigger text shown when no valid value is selected."
+      },
+      "required": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "required",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Require 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": "SelectSection[]",
+        "resolvedType": "ChoiceSection[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Grouped choices; takes precedence over options. Assign through JavaScript."
+      },
+      "size": {
+        "type": "SelectSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Control density."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": true,
+        "description": "Selected string value. Unknown values render the placeholder and are not submitted."
+      },
+      "width": {
+        "type": "SelectWidth",
+        "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 selection or clearing with the next scalar value."
+      },
+      {
+        "name": "dsClear",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after the footer clear 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",
+      "react": "DsSelect",
+      "angular": "DsSelect"
+    },
+    "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.js';",
+        "example": "<ds-select></ds-select>"
+      },
+      "react": {
+        "import": "import { DsSelect } from '@ds-mo/ui/react';",
+        "example": "<DsSelect />"
+      },
+      "angular": {
+        "import": "import { DsSelect } from '@ds-mo/ui/angular/ds-select';",
+        "example": "<ds-select></ds-select>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.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",
+    "empty-state",
+    "icon",
+    "loader",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Select/Select.css",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-width.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  position: relative;\n  outline: none;\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-prefix-fg: var(--ds-select-fg);\n  --ds-select-chevron-fg: var(--ds-select-fg);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.wrapper--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.trigger__prefix,\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trigger__prefix {\n  color: var(--ds-select-prefix-fg);\n}\n\n.trigger__chevron {\n  color: var(--ds-select-chevron-fg);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.select-popup {\n  color: var(--color-foreground-secondary);\n}\n\n.select-option[aria-selected='true'] .ds-choice-item__icon {\n  color: var(--color-foreground-primary);\n}\n\n.error-text {\n  width: 100%;\n}\n\n:host(.select-host--background-medium) {\n  --ds-select-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-select-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.select-host--background-bold) {\n  --ds-select-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-select-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.select-host--background-strong) {\n  --ds-select-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-select-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.select-host--background-translucent) {\n  --ds-select-fg: var(--color-translucent-foreground-secondary);\n  --ds-select-fg-active: var(--color-translucent-foreground-primary);\n  --ds-select-border: var(--color-translucent-border-secondary);\n}\n\n:host(.select-host--background-inverted) {\n  --ds-select-fg: var(--color-inverted-foreground-secondary);\n  --ds-select-fg-active: var(--color-inverted-foreground-primary);\n  --ds-select-border: var(--color-inverted-border-secondary);\n}\n\n:host(.select-host--background-media) {\n  --ds-select-fg: var(--color-media-foreground-secondary);\n  --ds-select-fg-active: var(--color-media-foreground-primary);\n  --ds-select-border: var(--color-media-border-secondary);\n}\n\n:host(.select-host--background-always-dark) {\n  --ds-select-fg: var(--color-always-dark-foreground-secondary);\n  --ds-select-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-select-border: var(--color-always-dark-border-secondary);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Select/Select.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_TEXT_VARIANT,\n  choicePopupMinWidth,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  resolveChoicePopupAlignOffset,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport { computeAnchoredPopupPosition } from '../../utils/anchored-popup';\nimport { ChoiceFooter, ChoiceOptionRow, ChoiceSearch } from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  findChoiceTypeaheadMatch,\n  flattenChoiceSections,\n  moveChoiceIndex,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\n\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nlet selectId = 0;\n/** rAF retries while the conditionally rendered popup mounts. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Flat choices. Assign arrays through the JavaScript property. */\n  @Prop() options: SelectOption[] = [];\n  /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n  @Prop() sections: SelectSection[] = [];\n  /** Selected string value. Unknown values render the placeholder and are not submitted. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one valid selected value. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when required is missing. */\n  @Prop() requiredMessage: string = 'This field is required.';\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = '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 a valid 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 footer action when a value exists. */\n  @Prop() allowClear: boolean = true;\n  /** Localized clear action label. */\n  @Prop() clearLabel: string = 'Clear';\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: SelectBackground | 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 selection or clearing with the next scalar value. */\n  @Event() dsChange!: EventEmitter<string>;\n  /** Emitted after the footer clear 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-${++selectId}`;\n  private readonly listboxId = `${this.generatedId}-listbox`;\n  private readonly errorId = `${this.generatedId}-error`;\n  private triggerEl: HTMLButtonElement | null = null;\n  private popupEl: HTMLDivElement | null = null;\n  private searchEl: HTMLInputElement | null = null;\n  private initialValue = '';\n  private typeahead = '';\n  private typeaheadTimer: ReturnType<typeof setTimeout> | null = null;\n  private outsideHandler: ((event: MouseEvent) => void) | null = null;\n  private repositionHandler: (() => void) | null = null;\n  private positionRetryRaf: number | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.unbindPopupListeners();\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    const inactive = this.isDisabled;\n    const resolvedValue = this.hasSelection ? this.value : '';\n    this.internals.setFormValue(inactive ? null : resolvedValue);\n    const missing = this.required && !inactive && !resolvedValue;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n    if (this.open) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      if (!enabled.includes(this.activeIndex)) this.activeIndex = enabled[0] ?? -1;\n      requestAnimationFrame(() => this.updatePosition());\n    }\n  }\n\n  @Watch('isLoading')\n  onLoadingChange() {\n    if (this.open) requestAnimationFrame(() => this.updatePosition());\n  }\n\n  @Watch('open')\n  onOpenChange(open: boolean) {\n    this.dsOpenChange.emit(open);\n    if (open) {\n      this.bindPopupListeners();\n      this.schedulePositionUpdate(() => {\n        this.scrollActiveOptionIntoView();\n        if (this.searchable) this.searchEl?.focus();\n      });\n    } else {\n      this.cancelPositionRetry();\n      this.unbindPopupListeners();\n      this.searchTerm = '';\n      this.positionReady = false;\n    }\n  }\n\n  @Watch('searchTerm')\n  onSearchTermChange() {\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex = enabled[0] ?? -1;\n    requestAnimationFrame(() => {\n      this.updatePosition();\n      this.scrollActiveOptionIntoView();\n    });\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    requestAnimationFrame(() => this.scrollActiveOptionIntoView());\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  @Method()\n  async setFocus() {\n    this.triggerEl?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get allSections(): SelectSection[] {\n    return resolveChoiceSections(this.options, this.sections);\n  }\n\n  private get allOptions(): SelectOption[] {\n    return flattenChoiceSections(this.allSections);\n  }\n\n  private get visibleSections(): SelectSection[] {\n    return this.searchable\n      ? filterChoiceSections(this.allSections, this.searchTerm)\n      : this.allSections;\n  }\n\n  private get visibleOptions(): SelectOption[] {\n    return flattenChoiceSections(this.visibleSections);\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    return this.allOptions.find(option => option.value === this.value);\n  }\n\n  private get hasSelection(): boolean {\n    return Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return !this.isLoading && this.activeIndex >= 0\n      ? `${this.generatedId}-option-${this.activeIndex}`\n      : undefined;\n  }\n\n  private scrollActiveOptionIntoView() {\n    if (!this.open || !this.activeOptionId) return;\n    this.el\n      .querySelector<HTMLElement>(`#${this.activeOptionId}`)\n      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }\n\n  private bindPopupListeners() {\n    this.unbindPopupListeners();\n    this.outsideHandler = event => {\n      const target = event.target as Node;\n      if (this.el.contains(target)) return;\n      this.closePopup();\n    };\n    this.repositionHandler = () => this.updatePosition();\n    document.addEventListener('mousedown', this.outsideHandler, true);\n    window.addEventListener('scroll', this.repositionHandler, true);\n    window.addEventListener('resize', this.repositionHandler);\n  }\n\n  private unbindPopupListeners() {\n    if (this.outsideHandler) {\n      document.removeEventListener('mousedown', this.outsideHandler, true);\n      this.outsideHandler = null;\n    }\n    if (this.repositionHandler) {\n      window.removeEventListener('scroll', this.repositionHandler, true);\n      window.removeEventListener('resize', this.repositionHandler);\n      this.repositionHandler = null;\n    }\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until the conditionally rendered popup is mounted and measurable. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.updatePosition()) {\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when the current popup was found and positioned. */\n  private updatePosition(): boolean {\n    if (\n      !this.open ||\n      !this.triggerEl ||\n      !this.popupEl ||\n      !this.popupEl.isConnected ||\n      !this.el.contains(this.popupEl)\n    ) return false;\n    const sectionPadding = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    this.popupEl.style.minWidth = `${choicePopupMinWidth(this.triggerEl.offsetWidth, sectionPadding)}px`;\n    this.position = computeAnchoredPopupPosition({\n      anchorRect: this.triggerEl.getBoundingClientRect(),\n      popupWidth: this.popupEl.offsetWidth,\n      popupHeight: this.popupEl.offsetHeight,\n      side: 'bottom',\n      align: 'start',\n      sideOffsetPx: sectionPadding,\n      alignOffsetPx: resolveChoicePopupAlignOffset({\n        align: 'start',\n        alignOffsetPx: 0,\n        sectionInsetPx: sectionPadding,\n      }),\n      viewportPadPx: sectionPadding,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    this.positionReady = true;\n    return true;\n  }\n\n  private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n    if (this.isDisabled || (!this.allOptions.length && !this.isLoading)) return;\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    const selectedIndex = this.visibleOptions.findIndex(\n      option => option.value === this.value && !option.isInactive,\n    );\n    this.activeIndex =\n      edge === 'last'\n        ? (enabled[enabled.length - 1] ?? -1)\n        : selectedIndex >= 0\n          ? selectedIndex\n          : (enabled[0] ?? -1);\n    this.focusRingVisible = focusVisible;\n    this.open = true;\n  }\n\n  private closePopup(restoreFocus = false) {\n    if (!this.open) return;\n    this.open = false;\n    if (restoreFocus) requestAnimationFrame(() => this.triggerEl?.focus());\n  }\n\n  private selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    this.value = option.value;\n    this.dsChange.emit(this.value);\n    this.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex = enabled[0] ?? -1;\n    requestAnimationFrame(() => (this.searchable ? this.searchEl?.focus() : this.triggerEl?.focus()));\n  };\n\n  private moveActive(direction: 1 | -1) {\n    this.activeIndex = moveChoiceIndex(this.visibleOptions, this.activeIndex, direction);\n  }\n\n  private setActiveEdge(edge: 'first' | 'last') {\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex =\n      edge === 'first' ? (enabled[0] ?? -1) : (enabled[enabled.length - 1] ?? -1);\n  }\n\n  private handleTypeahead(key: string) {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.focusRingVisible = true;\n    const normalized = key.toLocaleLowerCase();\n    const repeatedCharacter =\n      this.typeahead.length > 0 &&\n      [...this.typeahead].every(character => character === normalized);\n    this.typeahead = repeatedCharacter ? normalized : `${this.typeahead}${normalized}`;\n    const match = findChoiceTypeaheadMatch(this.visibleOptions, this.typeahead, this.activeIndex);\n    if (match >= 0) this.activeIndex = match;\n    const resetMs = resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n    this.typeaheadTimer = setTimeout(() => {\n      this.typeahead = '';\n      this.typeaheadTimer = null;\n    }, resetMs);\n  }\n\n  private handleListKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.moveActive(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.moveActive(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.setActiveEdge('first');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.setActiveEdge('last');\n        break;\n      case 'Enter':\n      case ' ': {\n        if (event.key === ' ' && this.searchable && event.target === this.searchEl) break;\n        event.preventDefault();\n        const option = this.visibleOptions[this.activeIndex];\n        if (option) this.selectOption(option);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.closePopup(true);\n        break;\n      case 'Tab':\n        this.closePopup();\n        break;\n      default:\n        if (!this.searchable && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n          this.handleTypeahead(event.key);\n        }\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {\n        event.preventDefault();\n        this.openPopup(true, event.key === 'ArrowUp' ? 'last' : 'first');\n      } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n        event.preventDefault();\n        this.openPopup(true);\n        if (this.searchable) {\n          this.searchTerm = event.key;\n        } else {\n          this.handleTypeahead(event.key);\n        }\n      }\n      return;\n    }\n    this.handleListKeyDown(event);\n  };\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean,\n  ) {\n    const selected = option.value === this.value;\n    const active = index === this.activeIndex;\n    return (\n      <ChoiceOptionRow\n        id={`${this.generatedId}-option-${index}`}\n        option={option}\n        selected={selected}\n        active={active}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={usesSubtext}\n        leading={usesIcons && option.icon ? (\n          <span class=\"ds-choice-item__icon ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name={option.icon} size=\"md\" color=\"inherit\" />\n          </span>\n        ) : undefined}\n        onHover={() => {\n            this.focusRingVisible = false;\n            this.activeIndex = index;\n        }}\n        onSelect={() => this.selectOption(option)}\n      />\n    );\n  }\n\n  render() {\n    const inactive = this.isDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const label = showPlaceholder ? this.placeholder : this.selectedOption?.label;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = choiceListUsesIcons(this.allOptions);\n    const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n    const showError = this.error && Boolean(this.errorMessage);\n    const describedBy = [this.ariaDescribedby, showError ? this.errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || 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-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n          [`select-host--background-${this.background}`]: !!this.background,\n        }}\n      >\n        <button\n          ref={element => {\n            this.triggerEl = (element as HTMLButtonElement) ?? null;\n          }}\n          id={this.inputId ?? this.generatedId}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected':\n              !inactive && this.activeFill && this.hasSelection,\n            'trigger--bordered': this.hasBorder || this.error,\n            'trigger--placeholder': showPlaceholder,\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 class=\"trigger__prefix ds-interaction-fill__content\" aria-hidden=\"true\">\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-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n\n        {this.open && (\n          <div\n            ref={element => {\n              this.popupEl = (element as HTMLDivElement) ?? null;\n            }}\n            class=\"select-popup ds-choice-popup\"\n            style={popupStyle}\n          >\n            {this.searchable && (\n              <ChoiceSearch\n                value={this.searchTerm}\n                placeholder={this.searchPlaceholder}\n                controls={this.listboxId}\n                activeDescendant={this.activeOptionId}\n                inputRef={element => {\n                  this.searchEl = element;\n                }}\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-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=\"md\" color=\"inherit\" />\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty\"\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-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--md\"\n                        as=\"span\"\n                        variant=\"text-body-small\"\n                        emphasis\n                        color=\"primary\"\n                        aria-hidden=\"true\"\n                      >\n                        {section.header}\n                      </ds-text>\n                    )}\n                    {section.options.map(option => this.renderOption(\n                      option,\n                      flatIndex++,\n                      usesOptionIcons,\n                      usesOptionSubtext,\n                    ))}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.allowClear && this.hasSelection && !this.isLoading && (\n              <ChoiceFooter clearLabel={this.clearLabel} onClear={this.clearSelection} />\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"
+    }
+  ]
+}