@ds-mo/ui 14.11.0 → 14.12.0

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

@@ -38,7 +38,7 @@
         "Page-size changes request the first page. Out-of-range page indexes and invalid numeric inputs normalize only for presentation; the owner remains authoritative.",
         "Zero results display 0–0 of 0 and Page 1 of 1. A partial final page caps the visible range at totalItems.",
         "loading preserves the full pagination surface, applies aria-busy to the navigation region, and prevents page or page-size requests.",
-        "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. Pagination does not measure layouts itself."
+        "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. fitToPageInactive keeps that choice visible but unavailable when fitting is not meaningful for the current data shape. Pagination does not measure layouts itself."
       ],
       "responsiveBehavior": [
         "The compact controls remain on one line with noun, selected size, total, a vertical divider, and page position. When inline space is still insufficient, the pagination surface scrolls horizontally rather than wrapping labels away from their controls."
@@ -98,6 +98,15 @@
           "mutable": false,
           "description": "Include the Fit to page choice."
         },
+        "fitToPageInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "fit-to-page-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Keep the Fit to page choice visible but unavailable."
+        },
         "itemLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -236,6 +245,15 @@
         "mutable": false,
         "description": "Include the Fit to page choice."
       },
+      "fitToPageInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "fit-to-page-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Keep the Fit to page choice visible but unavailable."
+      },
       "itemLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -385,7 +403,7 @@
     },
     {
       "path": "src/wc/components/Pagination/Pagination.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolvePaginationState } from './pagination-model';\nimport type {\n  PaginationChangeDetail,\n  PaginationPageSizeMode,\n} from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  /** Controlled zero-based page index. */\n  @Prop() pageIndex: number = 0;\n  /** Controlled number of top-level items on a full page. */\n  @Prop() pageSize: number = 25;\n  /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n  @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n  /** Controlled total number of top-level items across every page. */\n  @Prop() totalItems: number = 0;\n  /** Available page sizes. Assign arrays through JavaScript. */\n  @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n  /** Include the Fit to page choice. */\n  @Prop() fitToPage: boolean = false;\n  /** Effective whole-item capacity to request when Fit is selected. */\n  @Prop() fitPageSize: number | undefined;\n  /** Full choice-list label for Fit. */\n  @Prop() fitPageSizeLabel: string = 'Fit to page';\n  /** Compact closed-trigger label while Fit is selected. */\n  @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items';\n  /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n  @Prop() pageSizeAriaLabel: string | undefined;\n  /** Accessible name for the pagination navigation region. */\n  @Prop() label: string = 'Pagination';\n  /** Prevent interaction while the owner replaces the current data page. */\n  @Prop() loading: boolean = false;\n\n  /** Emits the complete next controlled state after a page or page-size request. */\n  @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n  private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n\n  private requestPage(pageIndex: number): void {\n    const state = this.resolvedState;\n    if (this.loading || pageIndex === state.pageIndex || pageIndex < 0 || pageIndex >= state.totalPages) {\n      return;\n    }\n    this.dsChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (this.loading || typeof value !== 'string') return;\n    const state = this.resolvedState;\n    const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n    const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n    if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      pageSizeMode: nextMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page-size',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n      return;\n    }\n    const fromChoiceControl = event.composedPath().some(node =>\n      node instanceof HTMLElement &&\n      (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)),\n    );\n    if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n    const state = this.resolvedState;\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n    event.preventDefault();\n    this.requestPage(pageIndex);\n  }\n\n  private get resolvedFitPageSize(): number | undefined {\n    return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n      ? Math.trunc(Number(this.fitPageSize))\n      : undefined;\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\n      pageSizeMode: this.pageSizeMode,\n      totalItems: this.totalItems,\n      pageSizeOptions: this.pageSizeOptions,\n    });\n  }\n\n  render() {\n    const state = this.resolvedState;\n    const atStart = state.pageIndex === 0;\n    const atEnd = state.pageIndex === state.totalPages - 1;\n    const total = `of ${state.totalItems}`;\n    const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n    const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n    const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n    const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n    const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n      state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n    if (this.fitToPage) {\n      options.push({\n        label: this.fitPageSizeLabel,\n        value: 'fit',\n        isInactive: this.resolvedFitPageSize === undefined,\n      });\n    }\n\n    return (\n      <Host>\n        <nav\n          class=\"pagination\"\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : undefined}\n          onKeyDown={event => this.handleKeyDown(event)}\n        >\n          <div class=\"pagination__page-size\">\n            <ds-text\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              {this.pageSizeLabel}:\n            </ds-text>\n            <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n              {pageSizeAriaLabel}\n            </span>\n            <ds-select\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={options}\n              value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n              triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n              indicator=\"up-down\"\n              allowClear={false}\n              activeFill={false}\n              isInactive={this.loading}\n              onDsChange={event => {\n                event.stopPropagation();\n                this.requestPageSize(event.detail);\n              }}\n            />\n            <ds-text\n              class=\"pagination__total\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {total}\n            </ds-text>\n          </div>\n          <ds-divider class=\"pagination__divider\" orientation=\"vertical\" length=\"24px\" />\n          <div class=\"pagination__navigation\">\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeftDouble\"\n              ariaLabel=\"First page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(0)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeft\"\n              ariaLabel=\"Previous page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(state.pageIndex - 1)}\n            />\n            <ds-text\n              class=\"pagination__page\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {page}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRight\"\n              ariaLabel=\"Next page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.pageIndex + 1)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRightDouble\"\n              ariaLabel=\"Last page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.totalPages - 1)}\n            />\n          </div>\n          <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {announcedRange} {this.itemLabel}. {announcedPage}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolvePaginationState } from './pagination-model';\nimport type {\n  PaginationChangeDetail,\n  PaginationPageSizeMode,\n} from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  /** Controlled zero-based page index. */\n  @Prop() pageIndex: number = 0;\n  /** Controlled number of top-level items on a full page. */\n  @Prop() pageSize: number = 25;\n  /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n  @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n  /** Controlled total number of top-level items across every page. */\n  @Prop() totalItems: number = 0;\n  /** Available page sizes. Assign arrays through JavaScript. */\n  @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n  /** Include the Fit to page choice. */\n  @Prop() fitToPage: boolean = false;\n  /** Keep the Fit to page choice visible but unavailable. */\n  @Prop() fitToPageInactive: boolean = false;\n  /** Effective whole-item capacity to request when Fit is selected. */\n  @Prop() fitPageSize: number | undefined;\n  /** Full choice-list label for Fit. */\n  @Prop() fitPageSizeLabel: string = 'Fit to page';\n  /** Compact closed-trigger label while Fit is selected. */\n  @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items';\n  /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n  @Prop() pageSizeAriaLabel: string | undefined;\n  /** Accessible name for the pagination navigation region. */\n  @Prop() label: string = 'Pagination';\n  /** Prevent interaction while the owner replaces the current data page. */\n  @Prop() loading: boolean = false;\n\n  /** Emits the complete next controlled state after a page or page-size request. */\n  @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n  private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n\n  private requestPage(pageIndex: number): void {\n    const state = this.resolvedState;\n    if (this.loading || pageIndex === state.pageIndex || pageIndex < 0 || pageIndex >= state.totalPages) {\n      return;\n    }\n    this.dsChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (\n      this.loading ||\n      typeof value !== 'string' ||\n      (value === 'fit' && this.fitToPageInactive)\n    ) return;\n    const state = this.resolvedState;\n    const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n    const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n    if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      pageSizeMode: nextMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitToPageInactive: this.fitToPageInactive,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page-size',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n      return;\n    }\n    const fromChoiceControl = event.composedPath().some(node =>\n      node instanceof HTMLElement &&\n      (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)),\n    );\n    if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n    const state = this.resolvedState;\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n    event.preventDefault();\n    this.requestPage(pageIndex);\n  }\n\n  private get resolvedFitPageSize(): number | undefined {\n    return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n      ? Math.trunc(Number(this.fitPageSize))\n      : undefined;\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\n      pageSizeMode: this.pageSizeMode,\n      totalItems: this.totalItems,\n      pageSizeOptions: this.pageSizeOptions,\n    });\n  }\n\n  render() {\n    const state = this.resolvedState;\n    const atStart = state.pageIndex === 0;\n    const atEnd = state.pageIndex === state.totalPages - 1;\n    const total = `of ${state.totalItems}`;\n    const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n    const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n    const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n    const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n    const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n      state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n    if (this.fitToPage) {\n      options.push({\n        label: this.fitPageSizeLabel,\n        value: 'fit',\n        isInactive: this.fitToPageInactive || this.resolvedFitPageSize === undefined,\n      });\n    }\n\n    return (\n      <Host>\n        <nav\n          class=\"pagination\"\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : undefined}\n          onKeyDown={event => this.handleKeyDown(event)}\n        >\n          <div class=\"pagination__page-size\">\n            <ds-text\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              {this.pageSizeLabel}:\n            </ds-text>\n            <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n              {pageSizeAriaLabel}\n            </span>\n            <ds-select\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={options}\n              value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n              triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n              indicator=\"up-down\"\n              allowClear={false}\n              activeFill={false}\n              isInactive={this.loading}\n              onDsChange={event => {\n                event.stopPropagation();\n                this.requestPageSize(event.detail);\n              }}\n            />\n            <ds-text\n              class=\"pagination__total\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {total}\n            </ds-text>\n          </div>\n          <ds-divider class=\"pagination__divider\" orientation=\"vertical\" length=\"24px\" />\n          <div class=\"pagination__navigation\">\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeftDouble\"\n              ariaLabel=\"First page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(0)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeft\"\n              ariaLabel=\"Previous page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(state.pageIndex - 1)}\n            />\n            <ds-text\n              class=\"pagination__page\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {page}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRight\"\n              ariaLabel=\"Next page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.pageIndex + 1)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRightDouble\"\n              ariaLabel=\"Last page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.totalPages - 1)}\n            />\n          </div>\n          <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {announcedRange} {this.itemLabel}. {announcedPage}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
@@ -395,7 +413,7 @@
     },
     {
       "path": "src/wc/components/Pagination/pagination-types.ts",
-      "content": "export type PaginationChangeReason = 'page' | 'page-size' | 'fit';\nexport type PaginationPageSizeMode = 'fixed' | 'fit';\n\n/** Controlled pagination state shared by Pagination and pagination-aware consumers. */\nexport interface PaginationState {\n  /** Zero-based page index. */\n  pageIndex: number;\n  /** Number of top-level items on a full page. */\n  pageSize: number;\n  /** Whether pageSize is a chosen fixed value or a measured Fit snapshot. */\n  pageSizeMode?: PaginationPageSizeMode;\n  /** Total number of top-level items across every page. */\n  totalItems: number;\n  /** Available page sizes. Defaults to 25, 50, 100, and 200. */\n  pageSizeOptions?: number[];\n  /** Include a Fit to page option. The owner supplies the effective fitted size. */\n  fitToPage?: boolean;\n  /** Effective page size proposed when Fit to page is selected. */\n  fitPageSize?: number;\n  /** Full option label for Fit in the open choice list. */\n  fitPageSizeLabel?: string;\n  /** Compact trigger label while Fit is selected. */\n  fitPageSizeTriggerLabel?: string;\n  /** Localized plural noun used by assistive range announcements. */\n  itemLabel?: string;\n  /** Visible label for the page-size selector. */\n  pageSizeLabel?: string;\n  /** Accessible name for the pagination navigation region. */\n  ariaLabel?: string;\n}\n\n/** Complete next controlled state emitted for a page or page-size request. */\nexport interface PaginationChangeDetail extends PaginationState {\n  previousPageIndex: number;\n  previousPageSize: number;\n  previousPageSizeMode: PaginationPageSizeMode;\n  reason: PaginationChangeReason;\n}\n",
+      "content": "export type PaginationChangeReason = 'page' | 'page-size' | 'fit';\nexport type PaginationPageSizeMode = 'fixed' | 'fit';\n\n/** Controlled pagination state shared by Pagination and pagination-aware consumers. */\nexport interface PaginationState {\n  /** Zero-based page index. */\n  pageIndex: number;\n  /** Number of top-level items on a full page. */\n  pageSize: number;\n  /** Whether pageSize is a chosen fixed value or a measured Fit snapshot. */\n  pageSizeMode?: PaginationPageSizeMode;\n  /** Total number of top-level items across every page. */\n  totalItems: number;\n  /** Available page sizes. Defaults to 25, 50, 100, and 200. */\n  pageSizeOptions?: number[];\n  /** Include a Fit to page option. The owner supplies the effective fitted size. */\n  fitToPage?: boolean;\n  /** Keep the Fit to page option visible but unavailable for the current data shape. */\n  fitToPageInactive?: boolean;\n  /** Effective page size proposed when Fit to page is selected. */\n  fitPageSize?: number;\n  /** Full option label for Fit in the open choice list. */\n  fitPageSizeLabel?: string;\n  /** Compact trigger label while Fit is selected. */\n  fitPageSizeTriggerLabel?: string;\n  /** Localized plural noun used by assistive range announcements. */\n  itemLabel?: string;\n  /** Visible label for the page-size selector. */\n  pageSizeLabel?: string;\n  /** Accessible name for the pagination navigation region. */\n  ariaLabel?: string;\n}\n\n/** Complete next controlled state emitted for a page or page-size request. */\nexport interface PaginationChangeDetail extends PaginationState {\n  previousPageIndex: number;\n  previousPageSize: number;\n  previousPageSizeMode: PaginationPageSizeMode;\n  reason: PaginationChangeReason;\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/panel-tools.json

@@ -463,7 +463,7 @@
     },
     {
       "path": "src/wc/components/PanelTools/PanelTools.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  panelToolsDrawerAtTerminal,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  panelToolsRailPlacement,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Drawer presentation or viewport-covering presentation for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n  @State() private railBodyScrollable = false;\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n  private railBodyEl?: HTMLElement;\n  private railBodyObserver?: ResizeObserver;\n\n  private get railItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    return orderPanelToolsItems(this.railItems);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n    this.disconnectRailBodyObserver();\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    // Framework property bindings can update slotted master/detail content in\n    // the same render that requests fullscreen. Reflect the host selector\n    // immediately so that content cannot paint once in the drawer geometry\n    // while Stencil waits to commit its next render.\n    if (this.el.getAttribute('presentation') !== next) {\n      this.el.setAttribute('presentation', next);\n    }\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool: this.activeTool, id: detail.id });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.connectRailBodyObserver();\n    this.updateRailBodyScrollable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  componentDidRender() {\n    this.updateRailBodyScrollable();\n  }\n\n  private connectRailBodyObserver() {\n    this.disconnectRailBodyObserver();\n    if (!this.railBodyEl || typeof ResizeObserver === 'undefined') return;\n    this.railBodyObserver = new ResizeObserver(() => this.updateRailBodyScrollable());\n    this.railBodyObserver.observe(this.railBodyEl);\n  }\n\n  private disconnectRailBodyObserver() {\n    this.railBodyObserver?.disconnect();\n    this.railBodyObserver = undefined;\n  }\n\n  private updateRailBodyScrollable() {\n    const next = Boolean(\n      this.railBodyEl && this.railBodyEl.scrollHeight > this.railBodyEl.clientHeight + 1\n    );\n    if (next !== this.railBodyScrollable) this.railBodyScrollable = next;\n  }\n\n  @Watch('items')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids = this.orderedRailItems.map(item => item.id);\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    const item = this.railItems.find(candidate => candidate.id === this.activeTool);\n    return (\n      item?.label ??\n      PANEL_TOOLS_LABELS[this.activeTool as keyof typeof PANEL_TOOLS_LABELS] ??\n      this.activeTool\n    );\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon')\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label =\n      item.ariaLabel ??\n      item.label ??\n      PANEL_TOOLS_LABELS[item.id as keyof typeof PANEL_TOOLS_LABELS] ??\n      item.id;\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={\n          item.shortcutKey ??\n          PANEL_TOOLS_SHORTCUTS[item.id as keyof typeof PANEL_TOOLS_SHORTCUTS]\n        }\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          pressScale={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || headerLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const headerItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'header'\n    );\n    const bodyItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'body'\n    );\n    const footerItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'footer'\n    );\n    const headerCount = headerItems.length;\n    const footerStart = headerCount + bodyItems.length;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds = orderedRailItems.map(item => item.id);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItems.length ? (\n              <div class=\"panel-tools__rail-header ds-chrome-row ds-chrome-space--md\">\n                {headerItems.map((item, index) => this.renderRailAction(item, index))}\n              </div>\n            ) : null}\n            <div\n              class={{\n                'panel-tools__rail-body': true,\n                'ds-chrome-column': true,\n                'ds-chrome-space--md': true,\n                'ds-scrollbar-hidden': true,\n                'ds-focus-ring': this.railBodyScrollable,\n              }}\n              ref={element => {\n                const next = (element as HTMLElement) ?? undefined;\n                if (next === this.railBodyEl) return;\n                this.railBodyEl = next;\n                this.connectRailBodyObserver();\n              }}\n              role={this.railBodyScrollable ? 'region' : undefined}\n              aria-label={this.railBodyScrollable ? this.toolShortcutsLabel : undefined}\n              tabIndex={this.railBodyScrollable ? 0 : undefined}\n            >\n              <div class=\"panel-tools__rail-actions\">\n                {bodyItems.map((item, bodyIdx) =>\n                  this.renderRailAction(item, headerCount + bodyIdx)\n                )}\n              </div>\n            </div>\n            {footerItems.length ? (\n              <div class=\"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md\">\n                {footerItems.map((item, footerIdx) =>\n                  this.renderRailAction(item, footerStart + footerIdx)\n                )}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  panelToolsDrawerAtTerminal,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  panelToolsRailPlacement,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  shadow: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Drawer presentation or viewport-covering presentation for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n  @State() private railBodyScrollable = false;\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n  private railBodyEl?: HTMLElement;\n  private railBodyObserver?: ResizeObserver;\n\n  private get railItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    return orderPanelToolsItems(this.railItems);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n    this.disconnectRailBodyObserver();\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    // Framework property bindings can update slotted master/detail content in\n    // the same render that requests fullscreen. Reflect the host selector\n    // immediately so that content cannot paint once in the drawer geometry\n    // while Stencil waits to commit its next render.\n    if (this.el.getAttribute('presentation') !== next) {\n      this.el.setAttribute('presentation', next);\n    }\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool: this.activeTool, id: detail.id });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.connectRailBodyObserver();\n    this.updateRailBodyScrollable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  componentDidRender() {\n    this.updateRailBodyScrollable();\n  }\n\n  private connectRailBodyObserver() {\n    this.disconnectRailBodyObserver();\n    if (!this.railBodyEl || typeof ResizeObserver === 'undefined') return;\n    this.railBodyObserver = new ResizeObserver(() => this.updateRailBodyScrollable());\n    this.railBodyObserver.observe(this.railBodyEl);\n  }\n\n  private disconnectRailBodyObserver() {\n    this.railBodyObserver?.disconnect();\n    this.railBodyObserver = undefined;\n  }\n\n  private updateRailBodyScrollable() {\n    const next = Boolean(\n      this.railBodyEl && this.railBodyEl.scrollHeight > this.railBodyEl.clientHeight + 1\n    );\n    if (next !== this.railBodyScrollable) this.railBodyScrollable = next;\n  }\n\n  @Watch('items')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids = this.orderedRailItems.map(item => item.id);\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\n  }\n\n  private get renderRoot(): ParentNode {\n    return this.el.shadowRoot ?? this.el;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    const item = this.railItems.find(candidate => candidate.id === this.activeTool);\n    return (\n      item?.label ??\n      PANEL_TOOLS_LABELS[this.activeTool as keyof typeof PANEL_TOOLS_LABELS] ??\n      this.activeTool\n    );\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.renderRoot.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.renderRoot.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon')\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label =\n      item.ariaLabel ??\n      item.label ??\n      PANEL_TOOLS_LABELS[item.id as keyof typeof PANEL_TOOLS_LABELS] ??\n      item.id;\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={\n          item.shortcutKey ??\n          PANEL_TOOLS_SHORTCUTS[item.id as keyof typeof PANEL_TOOLS_SHORTCUTS]\n        }\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          pressScale={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || headerLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const headerItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'header'\n    );\n    const bodyItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'body'\n    );\n    const footerItems = orderedRailItems.filter(\n      item => panelToolsRailPlacement(item) === 'footer'\n    );\n    const headerCount = headerItems.length;\n    const footerStart = headerCount + bodyItems.length;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds = orderedRailItems.map(item => item.id);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItems.length ? (\n              <div class=\"panel-tools__rail-header ds-chrome-row ds-chrome-space--md\">\n                {headerItems.map((item, index) => this.renderRailAction(item, index))}\n              </div>\n            ) : null}\n            <div\n              class={{\n                'panel-tools__rail-body': true,\n                'ds-chrome-column': true,\n                'ds-chrome-space--md': true,\n                'ds-scrollbar-hidden': true,\n                'ds-focus-ring': this.railBodyScrollable,\n              }}\n              ref={element => {\n                const next = (element as HTMLElement) ?? undefined;\n                if (next === this.railBodyEl) return;\n                this.railBodyEl = next;\n                this.connectRailBodyObserver();\n              }}\n              role={this.railBodyScrollable ? 'region' : undefined}\n              aria-label={this.railBodyScrollable ? this.toolShortcutsLabel : undefined}\n              tabIndex={this.railBodyScrollable ? 0 : undefined}\n            >\n              <div class=\"panel-tools__rail-actions\">\n                {bodyItems.map((item, bodyIdx) =>\n                  this.renderRailAction(item, headerCount + bodyIdx)\n                )}\n              </div>\n            </div>\n            {footerItems.length ? (\n              <div class=\"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md\">\n                {footerItems.map((item, footerIdx) =>\n                  this.renderRailAction(item, footerStart + footerIdx)\n                )}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -5982,7 +5982,7 @@
             "Page-size changes request the first page. Out-of-range page indexes and invalid numeric inputs normalize only for presentation; the owner remains authoritative.",
             "Zero results display 0–0 of 0 and Page 1 of 1. A partial final page caps the visible range at totalItems.",
             "loading preserves the full pagination surface, applies aria-busy to the navigation region, and prevents page or page-size requests.",
-            "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. Pagination does not measure layouts itself."
+            "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. fitToPageInactive keeps that choice visible but unavailable when fitting is not meaningful for the current data shape. Pagination does not measure layouts itself."
           ],
           "responsiveBehavior": [
             "The compact controls remain on one line with noun, selected size, total, a vertical divider, and page position. When inline space is still insufficient, the pagination surface scrolls horizontally rather than wrapping labels away from their controls."
@@ -6022,6 +6022,10 @@
             "type": "boolean",
             "required": false
           },
+          "fitToPageInactive": {
+            "type": "boolean",
+            "required": false
+          },
           "itemLabel": {
             "type": "string",
             "required": false
@@ -7557,7 +7561,7 @@
             "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
             "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
             "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
-            "Keep managed page-header capacity compact or constrained through the complete PanelTools close transition, then restore the closed-tools capacity after the drawer no longer occupies page width.",
+            "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
             "The bottom bar remains visible at all route and tool depths in the foundation release."
           ],
           "frameworkCaveats": {
@@ -8877,21 +8881,21 @@
           "accessibility": [
             "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and occupy the leading content width inside the component-owned 8px inset. When columnCustomizer is enabled, the table adds a trailing Preferences control named Customize table; otherwise the header slot receives the complete content width.",
             "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
-            "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Locked action columns stay visible, inactive, and last. The selection checkbox is not a column and never appears. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
+            "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
             "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
             "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
             "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
             "Scrollable table regions become keyboard focusable and named only when overflow exists.",
             "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
-            "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. While focus is anywhere inside a paginated table, unmodified Left and Right Arrow request the adjacent page; editable fields, choice controls, sliders, and modified key combinations retain their own keyboard behavior. The footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy."
+            "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. While focus is anywhere inside a paginated table, unmodified Left and Right Arrow request the adjacent page; editable fields, choice controls, sliders, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
           ],
           "states": [
             "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize table precedes a decorative divider and the data-mode trigger remains the final action. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
             "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
-            "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last and cannot be hidden, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
+            "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
             "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
             "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
-            "Initial loading defaults to ten row-shaped skeletons and preserves row dividers, column dividers, selection lanes, and sticky boundaries. A selectable table renders a checkbox-sized control skeleton in its selection lane so loading geometry matches the real checkbox instead of a generic icon. Each column may declare representative text, multiline text, image, Tag, icon, icon-and-text, action, or intentionally blank loading geometry; the table applies the matching resolved-cell padding and track anatomy so the placeholder row has the same height and rhythm as its data row. Columns without a declaration use one text line, while action columns infer an icon action placeholder. Empty and initial error replace only the body with ds-empty-state, using Inbox or ErrorTriangle plus the table heading and body copy. In height-bounded and maxHeight tables that region fills the remaining viewport below the column header; content-sized tables keep a minimum empty-region height. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
+            "Initial loading defaults to ten row-shaped skeletons and preserves row dividers, column dividers, selection lanes, and sticky boundaries. A selectable table renders a checkbox-sized control skeleton in its selection lane so loading geometry matches the real checkbox instead of a generic icon. Each column may declare representative text, multiline text, image, Tag, icon, icon-and-text, action, or intentionally blank loading geometry; the table applies the matching resolved-cell padding and track anatomy so the placeholder row has the same height and rhythm as its data row. Columns without a declaration use one text line, while action columns infer an icon action placeholder. chromeLoading replaces opted-in table-owned caption controls with non-interactive control skeletons in the same slots and at the same dimensions, without changing dataMode or the surrounding caption geometry. Empty and initial error replace only the body with ds-empty-state, using Inbox or ErrorTriangle plus the table heading and body copy. In height-bounded and maxHeight tables that region fills the remaining viewport below the column header; content-sized tables keep a minimum empty-region height. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
             "dataMode selects the top-level window: infinite appends ungrouped rows through dsLoadMore when hasMore is true, pagination renders the controlled page supplied by the application and emits dsPaginationChange, and virtual recycles row DOM over the full in-memory rows or groups the application already supplied. Infinite mode also covers fixed result sets by leaving hasMore false. In a grouped paginated table, pagination counts and windows only parent groups; each expanded parent can still append its own members through dsGroupLoadMore. Virtual mode does not fetch, ignores hasMore and load bands, and requires a bounded viewport (height, maxHeight, or fitViewport with a definite block size). Without that height it fails visibly instead of mounting every row. The application owns requests, cancellation, cursors, deduplication, slicing, and query identity.",
             "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
             "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
@@ -8951,6 +8955,10 @@
             "type": "TableCaptionVisibility",
             "required": false
           },
+          "chromeLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "collapsedGroupIds": {
             "type": "string[]",
             "required": false
@@ -9280,12 +9288,12 @@
             "The naming dialog traps focus through Modal behavior, associates validation text with the input through Field, and restores focus to the saved-views control after closing."
           ],
           "states": [
-            "views, value, and dirty are controlled. Selection, create, save, discard, rename, and remove events communicate intent and never mutate application records.",
+            "views, value, and dirty are controlled. Dirty state is presented only for a selected custom view; the default template never shows the trigger dot or save/discard actions even if dirty is supplied. Selection, create, save, discard, rename, and remove events communicate intent and never mutate application records.",
             "The component owns only transient interaction state: the contextual menu, naming dialog, draft name, duplicate-name validation, and focus restoration.",
             "The default view is a non-editable template. Application-owned custom views appear in a separate section with Rename and Remove actions. New view opens the naming dialog. When an editable selected view is dirty, that view row shows Save and negative Discard supporting actions while the footer remains dedicated to New view. The application decides which table state to capture, restore, and persist."
           ],
           "responsiveBehavior": [
-            "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior.",
+            "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior. Its choice popup keeps the token-backed 200px menu-width-xs minimum.",
             "Place it in the leading region of ds-table-toolbar so narrow table headers preserve the expected control order."
           ],
           "frameworkCaveats": {

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

@@ -925,12 +925,12 @@
   "files": [
     {
       "path": "src/wc/components/Select/Select.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/search-control.css';\n@import '../../utils/select-trigger.css';\n@import '../../utils/typography.css';\n@import '../../styles/control-elevation.css';\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.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.select-option-row {\n  position: relative;\n  isolation: isolate;\n}\n\n.select-option-row__action {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-050);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.select-option-row:has(:focus-visible) .select-option-row__action,\n.select-option-row--action-open .select-option-row__action,\n.select-option-row--keyboard-active .select-option-row__action {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.select-option-row--action-open .select-option::after {\n  background: var(--ds-interaction-hover);\n}\n\n.select-option__subtext-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  min-inline-size: 0;\n  color: var(--color-foreground-secondary);\n}\n\n.select-option__subtext-action {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n}\n\n.select-option__subtext-action--negative {\n  --ds-text-action-foreground: var(--color-foreground-bold-negative);\n}\n\n.select-option__subtext-action-separator {\n  color: var(--color-foreground-tertiary);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .select-option-row:hover .select-option-row__action {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .select-option-row:hover .select-option::after {\n    background: var(--ds-interaction-hover);\n  }\n}\n\n@media (hover: none) {\n  .select-option-row__action {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .select-option-row--has-action .ds-choice-item__content {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n\n.error-text {\n  width: 100%;\n}\n",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/search-control.css';\n@import '../../utils/select-trigger.css';\n@import '../../utils/typography.css';\n@import '../../styles/control-elevation.css';\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.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.select-option-row {\n  position: relative;\n  isolation: isolate;\n}\n\n.select-option-row__action {\n  position: absolute;\n  top: 50%;\n  right: var(--dimension-space-050);\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.select-option-row:has(:focus-visible) .select-option-row__action,\n.select-option-row--action-open .select-option-row__action,\n.select-option-row--keyboard-active .select-option-row__action {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.select-option-row--action-open .select-option::after {\n  background: var(--ds-interaction-hover);\n}\n\n.select-option__subtext-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-inline-size: 0;\n  color: var(--color-foreground-secondary);\n}\n\n.select-option__subtext-action {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n}\n\n.select-option__subtext-action--negative {\n  --ds-text-action-foreground: var(--color-foreground-bold-negative);\n}\n\n.select-option__subtext-action-separator {\n  color: var(--color-foreground-tertiary);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .select-option-row:hover .select-option-row__action {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .select-option-row:hover .select-option::after {\n    background: var(--ds-interaction-hover);\n  }\n}\n\n@media (hover: none) {\n  .select-option-row__action {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .select-option-row--has-action .ds-choice-item__content {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n\n.error-text {\n  width: 100%;\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_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\nimport {\n  ChoiceActionFooter,\n  ChoiceFooter,\n  ChoiceOptionRow,\n  ChoiceSearch,\n} from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  flattenChoiceSections,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\nexport type SelectPopupAlign = 'start' | 'end';\nexport type SelectValue = string | string[];\nexport type SelectIndicator = 'down' | 'up-down';\n\nexport interface SelectOptionActionDetail {\n  value: string;\n  anchorId: string;\n  originalEvent: MouseEvent;\n}\n\nexport interface SelectOptionSubtextActionDetail {\n  value: string;\n  actionValue: string;\n  originalEvent: MouseEvent;\n}\n\nconst ICON_SIZE: Record<SelectSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst OPTION_ACTION_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet selectId = 0;\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  /** Enable independent multi-value selection while keeping the popup open. */\n  @Prop({ reflect: true }) multiple: boolean = false;\n  /** Selected scalar or array value according to `multiple`. */\n  @Prop({ mutable: true }) value: SelectValue = '';\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 = DEFAULT_REQUIRED_MESSAGE;\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Optional scalar-mode trigger text that does not change the selected option label. */\n  @Prop() triggerLabel: string | undefined;\n  /** Present triggerLabel with placeholder emphasis while preserving the selected value. */\n  @Prop() triggerLabelPlaceholder: boolean = false;\n  /** Show a supplemental notification dot beside the trigger label. */\n  @Prop() dot: boolean = false;\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = 'hug';\n  /** Align the popup's choice edge to the trigger start or end edge. */\n  @Prop() popupAlign: SelectPopupAlign = 'start';\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, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Trailing choice indicator. Use up-down for compact value steppers such as page size. */\n  @Prop() indicator: SelectIndicator = 'down';\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  /** Localized noun displayed after the selected count in multiple mode. */\n  @Prop() selectedLabel: string = 'selected';\n  /** Optional text action shown in the popup footer instead of the clear action. */\n  @Prop() footerActionLabel: string | undefined;\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 selection or clearing with the next scalar or array value. */\n  @Event() dsChange!: EventEmitter<SelectValue>;\n  /** Emitted after the footer clear action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted when the optional popup footer action is activated. */\n  @Event() dsFooterAction!: EventEmitter<void>;\n  /** Emitted when an option's contextual ellipsis action is activated. */\n  @Event() dsOptionAction!: EventEmitter<SelectOptionActionDetail>;\n  /** Emitted when an option's supporting text action is activated. */\n  @Event() dsOptionSubtextAction!: EventEmitter<SelectOptionSubtextActionDetail>;\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  @State() private compactFooterSummary = 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 initialValue: SelectValue = '';\n  private readonly controller = this.createController();\n  private footerContentElement?: HTMLDivElement;\n  private footerSummaryMeasureElement?: HTMLElement;\n  private footerClearElement?: HTMLButtonElement;\n  private footerResizeObserver?: ResizeObserver;\n  private observedFooterContentElement?: HTMLDivElement;\n  private footerMeasurementFrame?: number;\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<SelectOption>({\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        if (owner.multiple) return -1;\n        return owner.visibleOptions.findIndex(\n          option => option.value === owner.scalarValue && !option.isInactive\n        );\n      },\n      get popupAlign() {\n        return owner.popupAlign;\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.selectOption(option),\n    });\n  }\n\n  componentWillLoad() {\n    this.value = this.normalizeValueForMode(this.value);\n    this.initialValue = Array.isArray(this.value) ? [...this.value] : this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.controller.connect();\n    this.observeFooterContent();\n  }\n\n  componentDidRender() {\n    this.observeFooterContent();\n    this.scheduleFooterSummaryMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.controller.disconnect();\n    this.footerResizeObserver?.disconnect();\n    this.observedFooterContentElement = undefined;\n    if (this.footerMeasurementFrame !== undefined) {\n      cancelAnimationFrame(this.footerMeasurementFrame);\n    }\n  }\n\n  @Watch('value')\n  @Watch('multiple')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('name')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    if (\n      (this.multiple && !Array.isArray(this.value)) ||\n      (!this.multiple && Array.isArray(this.value))\n    ) {\n      this.value = this.normalizeValueForMode(this.value);\n    }\n    const inactive = this.isDisabled;\n    if (this.multiple) {\n      const values = this.resolvedValues;\n      setRepeatedFormControlValue(this.internals, this.name, values, { inactive });\n    } else {\n      const value = this.hasSelection ? this.scalarValue : '';\n      setFormControlValue(this.internals, value, { inactive });\n    }\n    const missing = this.required && !inactive && !this.hasSelection;\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('popupAlign')\n  onPopupAlignChange() {\n    this.controller.positionChanged();\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.value = this.normalizeValueForMode(this.initialValue);\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (!this.multiple) {\n      this.value = restoreStringFormState(state);\n      return;\n    }\n    this.value = restoreStringArrayFormState(state);\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 normalizeValueForMode(value: SelectValue): SelectValue {\n    if (this.multiple) {\n      return Array.isArray(value) ? [...value] : value ? [value] : [];\n    }\n    return Array.isArray(value) ? value[0] ?? '' : value;\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 scalarValue(): string {\n    return typeof this.value === 'string' ? this.value : '';\n  }\n\n  private get resolvedValues(): string[] {\n    if (!this.multiple || !Array.isArray(this.value)) return [];\n    const valid = new Set(this.allOptions.map(option => option.value));\n    return [...new Set(this.value.filter(value => valid.has(value)))];\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    if (this.multiple) return undefined;\n    return this.allOptions.find(option => option.value === this.scalarValue);\n  }\n\n  private get hasSelection(): boolean {\n    return this.multiple ? this.resolvedValues.length > 0 : Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return this.controller.activeOptionId;\n  }\n\n  private get popupRole(): 'listbox' | 'grid' {\n    return this.allOptions.some(option => Boolean(option.action)) ? 'grid' : 'listbox';\n  }\n\n  private observeFooterContent() {\n    const content =\n      this.open && this.multiple && this.hasSelection\n        ? this.footerContentElement\n        : undefined;\n    if (!content?.isConnected) {\n      this.footerResizeObserver?.disconnect();\n      this.observedFooterContentElement = undefined;\n      return;\n    }\n    if (this.observedFooterContentElement === content) return;\n\n    this.footerResizeObserver?.disconnect();\n    if (typeof ResizeObserver !== 'undefined') {\n      this.footerResizeObserver = new ResizeObserver(() =>\n        this.scheduleFooterSummaryMeasurement()\n      );\n      this.footerResizeObserver.observe(content);\n    }\n    this.observedFooterContentElement = content;\n  }\n\n  private scheduleFooterSummaryMeasurement() {\n    if (\n      !this.open ||\n      !this.multiple ||\n      !this.hasSelection ||\n      this.footerMeasurementFrame !== undefined\n    ) {\n      return;\n    }\n    this.footerMeasurementFrame = requestAnimationFrame(() => {\n      this.footerMeasurementFrame = undefined;\n      this.measureFooterSummary();\n    });\n  }\n\n  private measureFooterSummary() {\n    const content = this.footerContentElement;\n    const summary = this.footerSummaryMeasureElement;\n    const clear = this.footerClearElement;\n    if (!content?.isConnected || !summary?.isConnected || !clear?.isConnected) return;\n\n    const styles = getComputedStyle(content);\n    const innerWidth =\n      content.clientWidth -\n      Number.parseFloat(styles.paddingInlineStart || '0') -\n      Number.parseFloat(styles.paddingInlineEnd || '0');\n    const requiredWidth =\n      summary.getBoundingClientRect().width +\n      clear.getBoundingClientRect().width +\n      Number.parseFloat(styles.columnGap || '0');\n    const nextCompact = requiredWidth > innerWidth + 0.5;\n    if (nextCompact !== this.compactFooterSummary) {\n      this.compactFooterSummary = nextCompact;\n    }\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 selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    if (this.multiple) {\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.value = next;\n      this.dsChange.emit([...next]);\n      return;\n    }\n    this.value = option.value;\n    this.dsChange.emit(option.value);\n    this.controller.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = this.multiple ? [] : '';\n    this.dsChange.emit(this.multiple ? [] : '');\n    this.dsClear.emit();\n    if (!this.multiple) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      this.activeIndex = enabled[0] ?? -1;\n    }\n    this.controller.focusSearchOrTrigger();\n  };\n\n  private activateFooterAction = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dsFooterAction.emit();\n    this.closePopup();\n  };\n\n  private readonly handleListKeyDown = this.controller.handleListKeyDown;\n  private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean\n  ) {\n    const selected = this.multiple\n      ? this.resolvedValues.includes(option.value)\n      : option.value === this.scalarValue;\n    const active = index === this.activeIndex;\n    const actionId = `${this.generatedId}-option-action-${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        actionOpen={option.action?.expanded}\n        popupRole={this.popupRole}\n        leading={\n          this.multiple ? (\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          ) : usesIcons && option.icon ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={option.icon} size={this.size} color=\"inherit\" />\n            </span>\n          ) : undefined\n        }\n        supporting={\n          option.subtextActions?.length ? (\n            <span class=\"ds-choice-item__subtext ds-control-label-box select-option__subtext-actions\">\n              {option.subtextActions.map((action, actionIndex) => [\n                actionIndex > 0 ? (\n                  <ds-text\n                    class=\"select-option__subtext-action-separator\"\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                  >\n                    ·\n                  </ds-text>\n                ) : null,\n                <button\n                  type=\"button\"\n                  class={{\n                    'select-option__subtext-action': true,\n                    'select-option__subtext-action--negative': action.tone === 'negative',\n                    'ds-text-action': true,\n                    'ds-focus-ring': true,\n                  }}\n                  onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}\n                  onClick={(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.dsOptionSubtextAction.emit({\n                      value: option.value,\n                      actionValue: action.value,\n                      originalEvent: event,\n                    });\n                  }}\n                >\n                  <ds-text\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                  >\n                    {action.label}\n                  </ds-text>\n                </button>,\n              ])}\n            </span>\n          ) : undefined\n        }\n        action={\n          option.action ? (\n            <ds-tooltip label={option.action.label} side=\"left\" size=\"sm\">\n              <ds-button-unfilled\n                id={actionId}\n                variant=\"icon\"\n                size={OPTION_ACTION_SIZE[this.size]}\n                icon=\"Ellipses\"\n                rounded\n                hasBorder={false}\n                activeFill={false}\n                ariaLabel={option.action.label}\n                haspopup=\"menu\"\n                controls={option.action.controls}\n                expanded={option.action.expanded}\n                onKeyDown={event => {\n                  event.stopPropagation();\n                  if (event.key === 'Escape' || event.key === 'ArrowLeft') {\n                    event.preventDefault();\n                    this.controller.focusSearchOrTrigger();\n                  }\n                }}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  event.stopPropagation();\n                  this.dsOptionAction.emit({\n                    value: option.value,\n                    anchorId: actionId,\n                    originalEvent: event.detail,\n                  });\n                }}\n              />\n            </ds-tooltip>\n          ) : undefined\n        }\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 count = this.resolvedValues.length;\n    const label = this.multiple\n      ? `${this.placeholder}${count > 0 ? ` · ${count}` : ''}`\n      : showPlaceholder\n        ? this.placeholder\n        : (this.triggerLabel ?? this.selectedOption?.label);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = !this.multiple && choiceListUsesIcons(this.allOptions);\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-select-trigger-host': true,\n          'select-host--multiple': this.multiple,\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          [`ds-select-trigger-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--expanded': !inactive && this.open,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder && !this.multiple,\n            'trigger--has-value': this.hasSelection,\n            'trigger--label-placeholder':\n              !this.multiple && Boolean(this.triggerLabel) && this.triggerLabelPlaceholder,\n            'wrapper--error': this.hasBorder && this.error,\n            [`ds-control--${this.size}`]: true,\n            ...choiceBackgroundClassMap(this.background),\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup={this.popupRole}\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={event => {\n            const action = this.visibleOptions[this.activeIndex]?.action;\n            if (\n              this.open &&\n              action &&\n              (event.key === 'ArrowRight' || (event.key === 'F10' && event.shiftKey))\n            ) {\n              event.preventDefault();\n              document\n                .getElementById(`${this.generatedId}-option-action-${this.activeIndex}`)\n                ?.querySelector<HTMLElement>('button')\n                ?.focus();\n              return;\n            }\n            this.handleTriggerKeyDown(event);\n          }}\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          <span\n            class={{\n              'trigger__label-box': true,\n              'ds-interaction-fill__content': true,\n            }}\n          >\n            <span\n              class={{\n                'trigger__label-content': true,\n                'ds-control-label-box': true,\n                'ds-control-label-dot': this.dot,\n                'trigger__label-content--dot': this.dot,\n              }}\n            >\n              <ds-text\n                class=\"trigger__label\"\n                as=\"span\"\n                variant={textVariant}\n                color=\"inherit\"\n                lineTruncation={1}\n              >\n                {label}\n              </ds-text>\n              {this.dot && (\n                <ds-badge\n                  class=\"trigger__dot ds-control-label-dot__badge\"\n                  variant=\"dot\"\n                  hasRing={false}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          </span>\n          <span\n            class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n            aria-hidden=\"true\"\n          >\n            <ds-icon\n              name={this.indicator === 'up-down' ? 'ChevronUpDown' : 'ChevronDown'}\n              size={iconSize}\n              color=\"inherit\"\n            />\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={this.popupRole}\n              aria-multiselectable={this.multiple ? 'true' : undefined}\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 ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.loadingLabel}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-loader size={this.size} color=\"inherit\" />\n                    </span>\n                  ) : (\n                    <ds-loader size={this.size} color=\"inherit\" />\n                  )}\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.noResultsText}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-empty-state body={this.noResultsText} />\n                    </span>\n                  ) : (\n                    <ds-empty-state body={this.noResultsText} />\n                  )}\n                </div>\n              ) : (\n                this.visibleSections.map((section, sectionIndex) => (\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                      'ds-choice-section--headed-after-first':\n                        sectionIndex > 0 && Boolean(section.header),\n                    }}\n                    role={\n                      this.popupRole === 'grid'\n                        ? 'rowgroup'\n                        : section.header\n                          ? 'group'\n                          : undefined\n                    }\n                    aria-label={section.header}\n                  >\n                    {section.header && this.popupRole === 'grid' ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        role=\"row\"\n                      >\n                        <span\n                          class=\"ds-choice-section__header-label\"\n                          role=\"gridcell\"\n                        >\n                          {section.header}\n                        </span>\n                      </ds-text>\n                    ) : section.header ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading 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                        <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                      </ds-text>\n                    ) : null}\n                    {section.options.map(option =>\n                      this.renderOption(option, flatIndex++, usesOptionIcons, usesOptionSubtext)\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.footerActionLabel && !this.isLoading ? (\n              <ChoiceActionFooter\n                size={this.size}\n                label={this.footerActionLabel}\n                onAction={this.activateFooterAction}\n              />\n            ) : this.allowClear && this.hasSelection && !this.isLoading ? (\n              <ChoiceFooter\n                size={this.size}\n                summary={\n                  this.multiple ? `${count} ${this.selectedLabel}` : undefined\n                }\n                compactSummary={this.multiple ? String(count) : undefined}\n                useCompactSummary={this.compactFooterSummary}\n                contentRef={element => {\n                  this.footerContentElement = element ?? undefined;\n                }}\n                summaryMeasureRef={element => {\n                  this.footerSummaryMeasureElement = element ?? undefined;\n                }}\n                clearRef={element => {\n                  this.footerClearElement = element ?? undefined;\n                }}\n                clearLabel={this.clearLabel}\n                onClear={this.clearSelection}\n              />\n            ) : null}\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",
+      "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  restoreStringArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\nimport {\n  ChoiceActionFooter,\n  ChoiceFooter,\n  ChoiceOptionRow,\n  ChoiceSearch,\n} from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  flattenChoiceSections,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\nexport type SelectPopupAlign = 'start' | 'end';\nexport type SelectValue = string | string[];\nexport type SelectIndicator = 'down' | 'up-down';\n\nexport interface SelectOptionActionDetail {\n  value: string;\n  anchorId: string;\n  originalEvent: MouseEvent;\n}\n\nexport interface SelectOptionSubtextActionDetail {\n  value: string;\n  actionValue: string;\n  originalEvent: MouseEvent;\n}\n\nconst ICON_SIZE: Record<SelectSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst OPTION_ACTION_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet selectId = 0;\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  /** Enable independent multi-value selection while keeping the popup open. */\n  @Prop({ reflect: true }) multiple: boolean = false;\n  /** Selected scalar or array value according to `multiple`. */\n  @Prop({ mutable: true }) value: SelectValue = '';\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 = DEFAULT_REQUIRED_MESSAGE;\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Optional scalar-mode trigger text that does not change the selected option label. */\n  @Prop() triggerLabel: string | undefined;\n  /** Present triggerLabel with placeholder emphasis while preserving the selected value. */\n  @Prop() triggerLabelPlaceholder: boolean = false;\n  /** Show a supplemental notification dot beside the trigger label. */\n  @Prop() dot: boolean = false;\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = 'hug';\n  /** Align the popup's choice edge to the trigger start or end edge. */\n  @Prop() popupAlign: SelectPopupAlign = 'start';\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, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Trailing choice indicator. Use up-down for compact value steppers such as page size. */\n  @Prop() indicator: SelectIndicator = 'down';\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  /** Localized noun displayed after the selected count in multiple mode. */\n  @Prop() selectedLabel: string = 'selected';\n  /** Optional text action shown in the popup footer instead of the clear action. */\n  @Prop() footerActionLabel: string | undefined;\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 selection or clearing with the next scalar or array value. */\n  @Event() dsChange!: EventEmitter<SelectValue>;\n  /** Emitted after the footer clear action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted when the optional popup footer action is activated. */\n  @Event() dsFooterAction!: EventEmitter<void>;\n  /** Emitted when an option's contextual ellipsis action is activated. */\n  @Event() dsOptionAction!: EventEmitter<SelectOptionActionDetail>;\n  /** Emitted when an option's supporting text action is activated. */\n  @Event() dsOptionSubtextAction!: EventEmitter<SelectOptionSubtextActionDetail>;\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  @State() private compactFooterSummary = 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 initialValue: SelectValue = '';\n  private readonly controller = this.createController();\n  private footerContentElement?: HTMLDivElement;\n  private footerSummaryMeasureElement?: HTMLElement;\n  private footerClearElement?: HTMLButtonElement;\n  private footerResizeObserver?: ResizeObserver;\n  private observedFooterContentElement?: HTMLDivElement;\n  private footerMeasurementFrame?: number;\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<SelectOption>({\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        if (owner.multiple) return -1;\n        return owner.visibleOptions.findIndex(\n          option => option.value === owner.scalarValue && !option.isInactive\n        );\n      },\n      get popupAlign() {\n        return owner.popupAlign;\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.selectOption(option),\n    });\n  }\n\n  componentWillLoad() {\n    this.value = this.normalizeValueForMode(this.value);\n    this.initialValue = Array.isArray(this.value) ? [...this.value] : this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.controller.connect();\n    this.observeFooterContent();\n  }\n\n  componentDidRender() {\n    this.observeFooterContent();\n    this.scheduleFooterSummaryMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.controller.disconnect();\n    this.footerResizeObserver?.disconnect();\n    this.observedFooterContentElement = undefined;\n    if (this.footerMeasurementFrame !== undefined) {\n      cancelAnimationFrame(this.footerMeasurementFrame);\n    }\n  }\n\n  @Watch('value')\n  @Watch('multiple')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('name')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    if (\n      (this.multiple && !Array.isArray(this.value)) ||\n      (!this.multiple && Array.isArray(this.value))\n    ) {\n      this.value = this.normalizeValueForMode(this.value);\n    }\n    const inactive = this.isDisabled;\n    if (this.multiple) {\n      const values = this.resolvedValues;\n      setRepeatedFormControlValue(this.internals, this.name, values, { inactive });\n    } else {\n      const value = this.hasSelection ? this.scalarValue : '';\n      setFormControlValue(this.internals, value, { inactive });\n    }\n    const missing = this.required && !inactive && !this.hasSelection;\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('popupAlign')\n  onPopupAlignChange() {\n    this.controller.positionChanged();\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.value = this.normalizeValueForMode(this.initialValue);\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (!this.multiple) {\n      this.value = restoreStringFormState(state);\n      return;\n    }\n    this.value = restoreStringArrayFormState(state);\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 normalizeValueForMode(value: SelectValue): SelectValue {\n    if (this.multiple) {\n      return Array.isArray(value) ? [...value] : value ? [value] : [];\n    }\n    return Array.isArray(value) ? (value[0] ?? '') : value;\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 scalarValue(): string {\n    return typeof this.value === 'string' ? this.value : '';\n  }\n\n  private get resolvedValues(): string[] {\n    if (!this.multiple || !Array.isArray(this.value)) return [];\n    const valid = new Set(this.allOptions.map(option => option.value));\n    return [...new Set(this.value.filter(value => valid.has(value)))];\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    if (this.multiple) return undefined;\n    return this.allOptions.find(option => option.value === this.scalarValue);\n  }\n\n  private get hasSelection(): boolean {\n    return this.multiple ? this.resolvedValues.length > 0 : Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return this.controller.activeOptionId;\n  }\n\n  private get popupRole(): 'listbox' | 'grid' {\n    return this.allOptions.some(option => Boolean(option.action)) ? 'grid' : 'listbox';\n  }\n\n  private observeFooterContent() {\n    const content =\n      this.open && this.multiple && this.hasSelection ? this.footerContentElement : undefined;\n    if (!content?.isConnected) {\n      this.footerResizeObserver?.disconnect();\n      this.observedFooterContentElement = undefined;\n      return;\n    }\n    if (this.observedFooterContentElement === content) return;\n\n    this.footerResizeObserver?.disconnect();\n    if (typeof ResizeObserver !== 'undefined') {\n      this.footerResizeObserver = new ResizeObserver(() => this.scheduleFooterSummaryMeasurement());\n      this.footerResizeObserver.observe(content);\n    }\n    this.observedFooterContentElement = content;\n  }\n\n  private scheduleFooterSummaryMeasurement() {\n    if (\n      !this.open ||\n      !this.multiple ||\n      !this.hasSelection ||\n      this.footerMeasurementFrame !== undefined\n    ) {\n      return;\n    }\n    this.footerMeasurementFrame = requestAnimationFrame(() => {\n      this.footerMeasurementFrame = undefined;\n      this.measureFooterSummary();\n    });\n  }\n\n  private measureFooterSummary() {\n    const content = this.footerContentElement;\n    const summary = this.footerSummaryMeasureElement;\n    const clear = this.footerClearElement;\n    if (!content?.isConnected || !summary?.isConnected || !clear?.isConnected) return;\n\n    const styles = getComputedStyle(content);\n    const innerWidth =\n      content.clientWidth -\n      Number.parseFloat(styles.paddingInlineStart || '0') -\n      Number.parseFloat(styles.paddingInlineEnd || '0');\n    const requiredWidth =\n      summary.getBoundingClientRect().width +\n      clear.getBoundingClientRect().width +\n      Number.parseFloat(styles.columnGap || '0');\n    const nextCompact = requiredWidth > innerWidth + 0.5;\n    if (nextCompact !== this.compactFooterSummary) {\n      this.compactFooterSummary = nextCompact;\n    }\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 selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    if (this.multiple) {\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.value = next;\n      this.dsChange.emit([...next]);\n      return;\n    }\n    this.value = option.value;\n    this.dsChange.emit(option.value);\n    this.controller.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = this.multiple ? [] : '';\n    this.dsChange.emit(this.multiple ? [] : '');\n    this.dsClear.emit();\n    if (!this.multiple) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      this.activeIndex = enabled[0] ?? -1;\n    }\n    this.controller.focusSearchOrTrigger();\n  };\n\n  private activateFooterAction = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dsFooterAction.emit();\n    this.closePopup();\n  };\n\n  private readonly handleListKeyDown = this.controller.handleListKeyDown;\n  private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean\n  ) {\n    const selected = this.multiple\n      ? this.resolvedValues.includes(option.value)\n      : option.value === this.scalarValue;\n    const active = index === this.activeIndex;\n    const actionId = `${this.generatedId}-option-action-${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        actionOpen={option.action?.expanded}\n        popupRole={this.popupRole}\n        leading={\n          this.multiple ? (\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          ) : usesIcons && option.icon ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={option.icon} size={this.size} color=\"inherit\" />\n            </span>\n          ) : undefined\n        }\n        supporting={\n          option.subtextActions?.length ? (\n            <span class=\"ds-choice-item__subtext ds-control-label-box select-option__subtext-actions\">\n              {option.subtextActions.map((action, actionIndex) => [\n                actionIndex > 0 ? (\n                  <ds-text\n                    class=\"select-option__subtext-action-separator\"\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                  >\n                    ·\n                  </ds-text>\n                ) : null,\n                <button\n                  type=\"button\"\n                  class={{\n                    'select-option__subtext-action': true,\n                    'select-option__subtext-action--negative': action.tone === 'negative',\n                    'ds-text-action': true,\n                    'ds-focus-ring': true,\n                  }}\n                  onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}\n                  onClick={(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.dsOptionSubtextAction.emit({\n                      value: option.value,\n                      actionValue: action.value,\n                      originalEvent: event,\n                    });\n                  }}\n                >\n                  <ds-text\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                  >\n                    {action.label}\n                  </ds-text>\n                </button>,\n              ])}\n            </span>\n          ) : undefined\n        }\n        action={\n          option.action ? (\n            <ds-tooltip label={option.action.label} side=\"left\" size=\"sm\">\n              <ds-button-unfilled\n                id={actionId}\n                variant=\"icon\"\n                size={OPTION_ACTION_SIZE[this.size]}\n                icon=\"Ellipses\"\n                rounded\n                hasBorder={false}\n                activeFill={false}\n                ariaLabel={option.action.label}\n                haspopup=\"menu\"\n                controls={option.action.controls}\n                expanded={option.action.expanded}\n                onKeyDown={event => {\n                  event.stopPropagation();\n                  if (event.key === 'Escape' || event.key === 'ArrowLeft') {\n                    event.preventDefault();\n                    this.controller.focusSearchOrTrigger();\n                  }\n                }}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  event.stopPropagation();\n                  this.dsOptionAction.emit({\n                    value: option.value,\n                    anchorId: actionId,\n                    originalEvent: event.detail,\n                  });\n                }}\n              />\n            </ds-tooltip>\n          ) : undefined\n        }\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 count = this.resolvedValues.length;\n    const label = this.multiple\n      ? `${this.placeholder}${count > 0 ? ` · ${count}` : ''}`\n      : showPlaceholder\n        ? this.placeholder\n        : (this.triggerLabel ?? this.selectedOption?.label);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = !this.multiple && choiceListUsesIcons(this.allOptions);\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-select-trigger-host': true,\n          'select-host--multiple': this.multiple,\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          [`ds-select-trigger-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--expanded': !inactive && this.open,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder && !this.multiple,\n            'trigger--has-value': this.hasSelection,\n            'trigger--label-placeholder':\n              !this.multiple && Boolean(this.triggerLabel) && this.triggerLabelPlaceholder,\n            'wrapper--error': this.hasBorder && this.error,\n            [`ds-control--${this.size}`]: true,\n            ...choiceBackgroundClassMap(this.background),\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup={this.popupRole}\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={event => {\n            const action = this.visibleOptions[this.activeIndex]?.action;\n            if (\n              this.open &&\n              action &&\n              (event.key === 'ArrowRight' || (event.key === 'F10' && event.shiftKey))\n            ) {\n              event.preventDefault();\n              document\n                .getElementById(`${this.generatedId}-option-action-${this.activeIndex}`)\n                ?.querySelector<HTMLElement>('button')\n                ?.focus();\n              return;\n            }\n            this.handleTriggerKeyDown(event);\n          }}\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          <span\n            class={{\n              'trigger__label-box': true,\n              'ds-interaction-fill__content': true,\n            }}\n          >\n            <span\n              class={{\n                'trigger__label-content': true,\n                'ds-control-label-box': true,\n                'ds-control-label-dot': this.dot,\n                'trigger__label-content--dot': this.dot,\n              }}\n            >\n              <ds-text\n                class=\"trigger__label\"\n                as=\"span\"\n                variant={textVariant}\n                color=\"inherit\"\n                lineTruncation={1}\n              >\n                {label}\n              </ds-text>\n              {this.dot && (\n                <ds-badge\n                  class=\"trigger__dot ds-control-label-dot__badge\"\n                  variant=\"dot\"\n                  hasRing={false}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          </span>\n          <span\n            class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n            aria-hidden=\"true\"\n          >\n            <ds-icon\n              name={this.indicator === 'up-down' ? 'ChevronUpDown' : 'ChevronDown'}\n              size={iconSize}\n              color=\"inherit\"\n            />\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={this.popupRole}\n              aria-multiselectable={this.multiple ? 'true' : undefined}\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 ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.loadingLabel}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-loader size={this.size} color=\"inherit\" />\n                    </span>\n                  ) : (\n                    <ds-loader size={this.size} color=\"inherit\" />\n                  )}\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.noResultsText}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-empty-state body={this.noResultsText} />\n                    </span>\n                  ) : (\n                    <ds-empty-state body={this.noResultsText} />\n                  )}\n                </div>\n              ) : (\n                this.visibleSections.map((section, sectionIndex) => (\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                      'ds-choice-section--headed-after-first':\n                        sectionIndex > 0 && Boolean(section.header),\n                    }}\n                    role={\n                      this.popupRole === 'grid' ? 'rowgroup' : section.header ? 'group' : undefined\n                    }\n                    aria-label={section.header}\n                  >\n                    {section.header && this.popupRole === 'grid' ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        role=\"row\"\n                      >\n                        <span class=\"ds-choice-section__header-label\" role=\"gridcell\">\n                          {section.header}\n                        </span>\n                      </ds-text>\n                    ) : section.header ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading 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                        <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                      </ds-text>\n                    ) : null}\n                    {section.options.map(option =>\n                      this.renderOption(option, flatIndex++, usesOptionIcons, usesOptionSubtext)\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.footerActionLabel && !this.isLoading ? (\n              <ChoiceActionFooter\n                size={this.size}\n                label={this.footerActionLabel}\n                onAction={this.activateFooterAction}\n              />\n            ) : this.allowClear && this.hasSelection && !this.isLoading ? (\n              <ChoiceFooter\n                size={this.size}\n                summary={this.multiple ? `${count} ${this.selectedLabel}` : undefined}\n                compactSummary={this.multiple ? String(count) : undefined}\n                useCompactSummary={this.compactFooterSummary}\n                contentRef={element => {\n                  this.footerContentElement = element ?? undefined;\n                }}\n                summaryMeasureRef={element => {\n                  this.footerSummaryMeasureElement = element ?? undefined;\n                }}\n                clearRef={element => {\n                  this.footerClearElement = element ?? undefined;\n                }}\n                clearLabel={this.clearLabel}\n                onClear={this.clearSelection}\n              />\n            ) : null}\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"
     }
   ]