@ds-mo/ui 14.4.2 → 14.6.0

package/dist/types/components/Table/table-cell-model.d.ts

@@ -1,9 +1,16 @@
-import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn } from './table-types';
+import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellImageTracks, TableCellTag, TableCellTagVariant, TableCellTextRun, TableCellTextTrack, TableCellValue, TableCellLinkTarget, TableCellLineClamp, TableCellMaxLines, TableColumn } from './table-types';
+import type { IconColor } from '../Icon/Icon';
 import type { TextColor } from '../Text/text-types';
+/** Maximum independently colored runs on one secondary or tertiary track. */
+export declare const TABLE_CELL_TEXT_RUN_LIMIT = 3;
 export interface ResolvedTableCellText {
     primary: string | number;
-    secondary?: string | number;
+    secondary?: TableCellTextRun[];
+    tertiary?: TableCellTextRun[];
     secondaryColor?: TextColor;
+    tertiaryColor?: TextColor;
+    href?: string;
+    target?: TableCellLinkTarget;
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';
 }
@@ -19,10 +26,21 @@ export type TableCellPresentation = {
     kind: 'icon';
     cellType: 'icon';
     value: TableCellIcon;
+} | {
+    kind: 'icon-text';
+    cellType: 'icon-text';
+    icon: string;
+    iconColor?: IconColor;
+    iconLabel?: string;
+    value: ResolvedTableCellText;
+    variant: 'single' | 'multi' | 'triple';
+    wraps: boolean;
+    lineClamp: TableCellLineClamp;
 } | {
     kind: 'image';
     cellType: 'image';
     value: TableCellImage;
+    variant: 'single' | 'multi' | 'triple';
 } | {
     kind: 'action';
     cellType: 'action';
@@ -38,8 +56,28 @@ export type TableCellPresentation = {
     value: ResolvedTableCellText;
     primaryText: boolean;
     singleLine: boolean;
-    variant: 'single' | 'multi' | 'primary-pair';
+    variant: 'single' | 'multi' | 'triple' | 'primary-pair';
     wraps: boolean;
+    lineClamp: TableCellLineClamp;
+};
+/** Resolve an image cell's track stack; unknown values fall back to one track. */
+export declare function resolveTableCellImageTracks(tracks: TableCellImage['tracks']): TableCellImageTracks;
+/** Map an image track stack onto the shared single/multi/triple cell variant. */
+export declare function tableCellImageVariant(tracks: TableCellImageTracks): 'single' | 'multi' | 'triple';
+/** Collapse a consumer track into at most three non-empty runs. */
+export declare function normalizeTableCellTextTrack(track: TableCellTextTrack | number | undefined): TableCellTextRun[] | undefined;
+/** Map wrap / maxLines onto wrap-to-track geometry and a line clamp. */
+export declare function resolveTableCellTextOverflow(source: {
+    wrap?: boolean;
+    maxLines?: TableCellMaxLines;
+}, column: TableColumn): {
+    wraps: boolean;
+    lineClamp: TableCellLineClamp;
+};
+/** ds-text overflow props for a resolved clamp. */
+export declare function tableCellTextOverflowProps(lineClamp: TableCellLineClamp): {
+    lineTruncation: TableCellLineClamp;
+    wrap: 'wrap' | 'nowrap';
 };
 /** Resolve a cell's semantic and visual recipe once for both markup and classes. */
 export declare function resolveTableCellPresentation(value: TableCellValue, column: TableColumn): TableCellPresentation;

package/dist/types/components/Table/table-model.d.ts

@@ -1,4 +1,4 @@
-import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellValue, TableColumn, TableGroup, TableRow, TableSortState } from './table-types';
+import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellIconText, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellValue, TableColumn, TableGroup, TableRow, TableSortState } from './table-types';
 export interface TableSelectionState {
     selectableRowIds: string[];
     selectedLoadedCount: number;
@@ -9,6 +9,7 @@ export declare function isTableCellText(value: TableCellValue): value is TableCe
 export declare function isTableCellPrimaryText(value: TableCellValue): value is TableCellPrimaryText;
 export declare function isTableCellTag(value: TableCellValue): value is TableCellTag;
 export declare function isTableCellIcon(value: TableCellValue): value is TableCellIcon;
+export declare function isTableCellIconText(value: TableCellValue): value is TableCellIconText;
 export declare function isTableCellImage(value: TableCellValue): value is TableCellImage;
 export declare function isTableCellAction(value: TableCellValue): value is TableCellAction;
 export declare function isTableCellEmpty(value: TableCellValue): value is TableCellEmpty;

package/dist/types/components/Table/table-truncate.d.ts

@@ -0,0 +1,6 @@
+/** Marks text tracks that may present the table-owned truncation tooltip. */
+export declare const TABLE_TRUNCATE_ATTR = "data-table-truncate";
+/** Resolve the overflowing text track under a pointer or focus target. */
+export declare function resolveTableTruncateTrack(target: EventTarget | null): HTMLElement | null;
+export declare function tableTruncateLabel(track: HTMLElement): string;
+//# sourceMappingURL=table-truncate.d.ts.map

package/dist/types/components/Table/table-types.d.ts

@@ -5,12 +5,17 @@ import type { PaginationState } from '../Pagination/pagination-types';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableSelectionMode = 'none' | 'multiple';
 export type TableCellAlign = 'start' | 'center' | 'end';
+export type TableCellLinkTarget = '_self' | '_blank';
 export type TableColumnSticky = 'start' | 'end';
 export type TableCaptionVisibility = 'visible' | 'hidden';
 export type TableLoadMoreMode = 'auto' | 'manual';
 export type TableDataMode = 'infinite' | 'pagination';
 export type TableLoadMoreReason = 'auto' | 'manual' | 'retry';
 export type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Visible line budget before a text track ellipsizes. */
+export type TableCellMaxLines = 1 | 2 | 3;
+/** Resolved clamp, including unlimited wrapping. */
+export type TableCellLineClamp = TableCellMaxLines | 'none';
 /** Semantic color for a group section header (faint surface + bold title). */
 export type TableGroupIntent = 'brand' | 'neutral' | 'negative' | 'warning' | 'caution' | 'positive';
 /** Independently sortable label within a compound column header. */
@@ -31,14 +36,32 @@ export interface TableGroupingState {
     columnId: string;
     direction: TableSortDirection;
 }
-/** Standard two-line cell content owned by the table renderer. */
+/** One independently colored run inside a secondary or tertiary track. */
+export interface TableCellTextRun {
+    text: string;
+    /** Defaults to the track’s standard color. */
+    color?: TextColor;
+}
+/** A secondary or tertiary track: one string, or up to three colorable runs. */
+export type TableCellTextTrack = string | TableCellTextRun[];
+/** Standard two- or three-line cell content owned by the table renderer. */
 export interface TableCellText {
     primary: string | number;
-    secondary?: string;
-    /** Optional semantic foreground for secondary copy; defaults to the standard secondary color. */
+    secondary?: TableCellTextTrack;
+    /** Third subdued track; ignored on dual-primary cells. */
+    tertiary?: TableCellTextTrack;
+    /** Optional semantic foreground for a string secondary track. */
     secondaryColor?: TextColor;
+    /** Optional semantic foreground for a string tertiary track. */
+    tertiaryColor?: TextColor;
+    /** Application-owned URL for the primary track only. Scalars stay unlinked. */
+    href?: string;
+    /** Native anchor target for a resolved primary link. */
+    target?: TableCellLinkTarget;
     /** Allow this cell to wrap even when its column truncates by default. */
     wrap?: boolean;
+    /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */
+    maxLines?: TableCellMaxLines;
     fontFeature?: 'normal' | 'tabular-nums';
 }
 /** Two-line text content where both tracks use primary body text. */
@@ -46,8 +69,14 @@ export interface TableCellPrimaryText {
     kind: 'primary-text';
     primary: string | number;
     secondary: string | number;
+    /** Application-owned URL for the primary track only. */
+    href?: string;
+    /** Native anchor target for a resolved primary link. */
+    target?: TableCellLinkTarget;
     /** Allow this cell to wrap even when its column truncates by default. */
     wrap?: boolean;
+    /** Clamp wrapping text after 1, 2, or 3 lines. Overrides column wrap. */
+    maxLines?: TableCellMaxLines;
     fontFeature?: 'normal' | 'tabular-nums';
 }
 /** Applicable data point whose value is currently unavailable. */
@@ -69,6 +98,30 @@ export interface TableCellIcon {
     /** Application-owned value used when this icon column participates in sorting. */
     sortValue?: string | number | boolean;
 }
+/**
+ * Prefix icon beside a text copy stack. Independent of icon-only and plain
+ * text cells so those recipes stay unchanged.
+ */
+export interface TableCellIconText {
+    kind: 'icon-text';
+    /** Exact canonical IcoMo export name. */
+    icon: string;
+    iconColor?: IconColor;
+    /** Accessible name. Omit when the glyph is decorative. */
+    iconLabel?: string;
+    primary: string | number;
+    secondary?: TableCellTextTrack;
+    tertiary?: TableCellTextTrack;
+    secondaryColor?: TextColor;
+    tertiaryColor?: TextColor;
+    href?: string;
+    target?: TableCellLinkTarget;
+    wrap?: boolean;
+    maxLines?: TableCellMaxLines;
+    fontFeature?: 'normal' | 'tabular-nums';
+}
+/** Body-row track stack an image preview occupies. */
+export type TableCellImageTracks = 1 | 2 | 3;
 /** Declarative 16:9 image preview rendered by the table's standard cell primitive. */
 export interface TableCellImage {
     kind: 'image';
@@ -76,32 +129,63 @@ export interface TableCellImage {
     src?: string;
     /** Accessible description for either the image or its placeholder. */
     alt: string;
+    /**
+     * Which body-row contract the preview fills. The thumbnail height is that
+     * cell height minus 8px padding; width follows 16:9. Defaults to 1.
+     */
+    tracks?: TableCellImageTracks;
 }
 interface TableCellActionBase {
     kind: 'action';
-    /** Stable application-owned action identity emitted with dsCellAction. */
-    actionId: string;
     /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */
     hasBorder?: boolean;
     isInactive?: boolean;
     isLoading?: boolean;
 }
+/** One command inside an overflow action menu. */
+export interface TableCellActionMenuItem {
+    /** Stable application-owned action identity emitted with dsCellAction. */
+    actionId: string;
+    label: string;
+    isInactive?: boolean;
+    isDestructive?: boolean;
+}
+/** Visual separator between overflow action-menu commands. */
+export interface TableCellActionDivider {
+    kind: 'divider';
+}
+export type TableCellActionMenuEntry = TableCellActionMenuItem | TableCellActionDivider;
 /** Declarative ButtonUnfilled content rendered by the table's standard action cell. */
 export type TableCellAction = TableCellActionBase & ({
     variant?: 'label';
+    /** Stable application-owned action identity emitted with dsCellAction. */
+    actionId: string;
     label: string;
     icon?: never;
     ariaLabel?: string;
+    items?: never;
 } | {
     variant: 'icon-label';
+    actionId: string;
     label: string;
     icon: string;
     ariaLabel?: string;
+    items?: never;
 } | {
     variant: 'icon';
+    actionId: string;
     label?: never;
     icon: string;
     ariaLabel: string;
+    items?: never;
+} | {
+    variant?: 'icon';
+    /** Overflow commands. The Ellipses trigger opens ds-menu instead of emitting on click. */
+    items: TableCellActionMenuEntry[];
+    ariaLabel: string;
+    icon?: string;
+    actionId?: never;
+    label?: never;
 });
 /** Declarative Tag content rendered by the table's standard cell primitive. */
 export type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';
@@ -120,23 +204,32 @@ export type TableCellTag = TableCellTagBase & ({
     variant: Exclude<TableCellTagVariant, 'tag-only'>;
     text: string;
 });
-export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
+export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellIconText | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
 export type TableSkeletonWidth = string | number;
 /** Representative loading geometry for one table column. */
 export type TableCellSkeleton = {
     kind: 'text';
-    /** One track for scalar content, two for primary and secondary copy. */
-    lines?: 1 | 2;
+    /** One track for scalar content, two for primary and secondary, three when tertiary is present. */
+    lines?: 1 | 2 | 3;
     primaryWidth?: TableSkeletonWidth;
     secondaryWidth?: TableSkeletonWidth;
+    tertiaryWidth?: TableSkeletonWidth;
 } | {
     kind: 'image';
+    /** Match the loaded image cell's track stack. Defaults to 1. */
+    tracks?: TableCellImageTracks;
 } | {
     kind: 'tag';
     width?: TableSkeletonWidth;
 } | {
     kind: 'icon';
     rounded?: boolean;
+} | {
+    kind: 'icon-text';
+    lines?: 1 | 2 | 3;
+    primaryWidth?: TableSkeletonWidth;
+    secondaryWidth?: TableSkeletonWidth;
+    tertiaryWidth?: TableSkeletonWidth;
 } | {
     kind: 'action';
     /** Icon actions use a square control canvas; labeled actions may provide a wider width. */
@@ -164,6 +257,8 @@ export interface TableColumn {
     maxSize?: number;
     /** Wrap cell text instead of truncating it to one line. */
     wrap?: boolean;
+    /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */
+    maxLines?: TableCellMaxLines;
     /** Pin one application column to either inline edge during horizontal scrolling. */
     sticky?: TableColumnSticky;
     /**

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -32,6 +32,13 @@ export declare class Tooltip {
     delay: number | string;
     shortcutKey: string | undefined;
     shortcutKeyPosition: 'start' | 'end';
+    /**
+     * Link the trigger with aria-describedby while the popup is open. Disable when
+     * the label is already in the DOM, such as a truncated table cell.
+     */
+    describedBy: boolean;
+    /** Allow the label to wrap at a panel-xs max width instead of a single line. */
+    wrapLabel: boolean;
     private tooltipId;
     private delayTimer;
     private closeTimer;
@@ -42,6 +49,7 @@ export declare class Tooltip {
     private readonly position;
     private skipEnterAnimation;
     private isOpen;
+    private programmaticAnchor;
     private lastInteractionWasKeyboard;
     private pointerEnterHandler;
     private pointerLeaveHandler;
@@ -64,6 +72,13 @@ export declare class Tooltip {
     private get fadeOutMs();
     private get tooltipFallbackWidthPx();
     private get tooltipFallbackHeightPx();
+    /**
+     * Present against an external anchor the host already measured.
+     * Does not bind hover or focus on that anchor — the owner drives show/hide.
+     */
+    presentFrom(anchor: HTMLElement, label?: string): Promise<void>;
+    /** Dismiss a popup opened through presentFrom or the slotted trigger. */
+    dismiss(): Promise<void>;
     private bindAnchor;
     private unbindAnchor;
     private linkDescribedBy;

package/dist/types/components.d.ts

@@ -3216,10 +3216,23 @@ export namespace Components {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay": number | string;
+        /**
+          * Link the trigger with aria-describedby while the popup is open. Disable when the label is already in the DOM, such as a truncated table cell.
+          * @default true
+         */
+        "describedBy": boolean;
+        /**
+          * Dismiss a popup opened through presentFrom or the slotted trigger.
+         */
+        "dismiss": () => Promise<void>;
         /**
           * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
          */
         "label": string;
+        /**
+          * Present against an external anchor the host already measured. Does not bind hover or focus on that anchor — the owner drives show/hide.
+         */
+        "presentFrom": (anchor: HTMLElement, label?: string) => Promise<void>;
         "shortcutKey": string | undefined;
         /**
           * @default 'end'
@@ -3239,6 +3252,11 @@ export namespace Components {
           * @default 'md'
          */
         "size": TooltipSize;
+        /**
+          * Allow the label to wrap at a panel-xs max width instead of a single line.
+          * @default false
+         */
+        "wrapLabel": boolean;
     }
     /**
      * Positioned value/label callout for chart hover interactions (bar, line point,
@@ -7999,6 +8017,11 @@ declare namespace LocalJSX {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay"?: number | string;
+        /**
+          * Link the trigger with aria-describedby while the popup is open. Disable when the label is already in the DOM, such as a truncated table cell.
+          * @default true
+         */
+        "describedBy"?: boolean;
         /**
           * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
          */
@@ -8022,6 +8045,11 @@ declare namespace LocalJSX {
           * @default 'md'
          */
         "size"?: TooltipSize;
+        /**
+          * Allow the label to wrap at a panel-xs max width instead of a single line.
+          * @default false
+         */
+        "wrapLabel"?: boolean;
     }
     /**
      * Positioned value/label callout for chart hover interactions (bar, line point,
@@ -8809,6 +8837,8 @@ declare namespace LocalJSX {
         "delay": string;
         "shortcutKey": string | undefined;
         "shortcutKeyPosition": 'start' | 'end';
+        "describedBy": boolean;
+        "wrapLabel": boolean;
     }
     interface DsTooltipChartAttributes {
         "value": string;

package/dist/types/utils/index.d.ts

@@ -6,6 +6,7 @@ export type { PercentageDecimals } from './format-percentage';
 export { computeMetricChange, resolveMetricTrend } from './metric-change';
 export type { MetricChange, MetricTrend, MetricTrendDirection, MetricTrendTone, ResolveMetricTrendOptions, } from './metric-change';
 export { truncateSvgTextToWidth } from './truncate-svg-text';
+export { isElementTruncated } from './is-element-truncated';
 export { parseCssTimeMs, prefersReducedMotion, resolveCssTimeMs, resolveMotionTimeMs, } from './resolve-css-time-ms';
 export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdge, resolveScrollEdgeFadeSize, scrollEdgeFadeClassMap, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, scrollEdgeFadeSizeStyle, } from './scroll-edge-fade';
 export type { ScrollEdgeFadeEdge, ScrollEdgeFadeOptions, ScrollEdgeFadeSize, ScrollEdgeFadeSizeToken, } from './scroll-edge-fade';

package/dist/types/utils/is-element-truncated.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether a laid-out element is visually truncated.
+ * Prefers `ds-text`'s inner semantic node when present so host flex layout
+ * does not hide horizontal or line-clamp overflow.
+ */
+export declare function isElementTruncated(element: HTMLElement): boolean;
+//# sourceMappingURL=is-element-truncated.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.4.2",
+  "version": "14.6.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-Ccq1RmOb.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isMenuSwatchPickerSection","section","variant","isMenuPickerSection","snapshotMenuSections","sections","map","options","option","swatchSection","items","item","menuCss","MENU_ITEM_TAG_SIZE","lg","md","sm","xs","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","size","selectionMode","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","closeTimer","position","AnchoredPositionController","getAnchor","resolvedAnchor","getPopup","el","querySelector","measure","anchorEl","popup","anchorRect","getBoundingClientRect","sectionInsetPx","viewportPadPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupFallbackWidthPx","popupHeight","offsetHeight","popupFallbackHeightPx","sideOffsetPx","alignOffsetPx","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","apply","onReady","liveUpdate","topLayer","lastRenderedSections","closingSections","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","cancelLivePositionUpdate","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","captureClosingSections","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","menuWidthXs","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","matches","hidePopover","dsAfterClose","emit","visibleSections","length","activeSections","anchor","anchorId","document","getElementById","anchorFocusTarget","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","index","indexOf","compositeTabLeavesPopup","event","focusables","currentIndex","target","shiftKey","flatItems","flatMap","hasCompositeSections","some","cancel","scheduleLivePositionUpdate","scheduleLiveUpdate","schedule","calculatePosition","update","requestAnimationFrame","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","observe","unobserve","removeEventListener","clearTimeout","restoreFocus","dsClose","handleKeyDown","key","preventDefault","enabled","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","dsSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","left","top","transform","Math","round","zIndex","visibility","menuWidth","popover","class","role","undefined","si","Boolean","header","as","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","color","groupLabel","onDsChange","detail","isFocused","isSingleSelectionItem","showSwitch","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","CONTROL_TEXT_VARIANT","label","subtext","tag","intent","contrast","rounded","dot","hasRing","checked","presentation"],"sources":["src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/menu-sections.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\nimport type { TagContrast, TagIntent } from '../Tag/Tag';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n  type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemTagData {\n  label: string;\n  intent?: TagIntent;\n  contrast?: TagContrast;\n  rounded?: boolean;\n}\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  /** Show a non-interactive tag at the trailing edge of the row. */\n  tag?: MenuItemTagData;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nexport interface MenuSwatchPickerSection {\n  header?: string;\n  variant: 'swatch-picker';\n  value: string;\n  options?: SwatchPickerOption[];\n  sections?: SwatchPickerSection[];\n  groupLabel?: string;\n}\n\nexport type MenuSection =\n  | MenuItemsSection\n  | MenuSwatchPickerSection;\n\nexport function isMenuSwatchPickerSection(\n  section: MenuSection,\n): section is MenuSwatchPickerSection {\n  return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n  section: MenuSection,\n): section is MenuSwatchPickerSection {\n  return isMenuSwatchPickerSection(section);\n}\n\nexport type { SwatchPickerOption, SwatchPickerSection };\n","import type { MenuSection } from './menu-types';\nimport { isMenuSwatchPickerSection } from './menu-types';\n\n/** Preserve the exact menu context painted during exit motion. */\nexport function snapshotMenuSections(sections: readonly MenuSection[]): MenuSection[] {\n  return sections.map(section => {\n    if (isMenuSwatchPickerSection(section)) {\n      return {\n        ...section,\n        ...(section.options\n          ? { options: section.options.map(option => ({ ...option })) }\n          : {}),\n        ...(section.sections\n          ? {\n              sections: section.sections.map(swatchSection => ({\n                ...swatchSection,\n                options: swatchSection.options.map(option => ({ ...option })),\n              })),\n            }\n          : {}),\n      };\n    }\n    return { ...section, items: section.items.map(item => ({ ...item })) };\n  });\n}\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item--switch {\n  gap: var(--dimension-space-100);\n}\n\n.menu-item__switch {\n  flex-shrink: 0;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  choicePopupMinWidth,\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n  type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport {\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n  type MenuItemData,\n  type MenuSection,\n} from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nconst MENU_ITEM_TAG_SIZE: Record<MenuSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** Choice-row density. */\n  @Prop() size: MenuSize = 'md';\n  /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n  @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  /**\n   * Anchored placement. The choice-cell measurement stays here on purpose: the\n   * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n   * semantics, not shared geometry.\n   */\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    measure: (anchorEl, popup) => {\n      if (!this.open) return null;\n\n      const anchorRect = anchorEl.getBoundingClientRect();\n      const sectionInsetPx = this.viewportPadPx;\n      if (!this.minWidth) {\n        if (\n          this.anchorAlignment === 'choice-cell' &&\n          (this.side === 'top' || this.side === 'bottom')\n        ) {\n          popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n            anchorRect.width,\n            sectionInsetPx\n          )}px)`;\n        } else {\n          popup.style.removeProperty('min-width');\n        }\n      }\n\n      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: this.sideOffsetPx,\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: this.alignOffsetPx,\n          sectionInsetPx,\n          anchorAlignment: this.anchorAlignment,\n        }),\n        viewportPadPx: this.viewportPadPx,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\n  });\n  /** Last content actually painted while open; retained unchanged through exit motion. */\n  private lastRenderedSections: MenuSection[] = [];\n  private closingSections: MenuSection[] | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.cancelLivePositionUpdate();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSections = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.captureClosingSections();\n      this.closing = true;\n      this.teardownListeners();\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('anchorAlignment')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.lastRenderedSections = [];\n    this.closingSections = null;\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSections() {\n    if (this.closingSections) return;\n    const visibleSections = this.lastRenderedSections.length\n      ? this.lastRenderedSections\n      : this.activeSections;\n    this.closingSections = snapshotMenuSections(visibleSections);\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    this.position.cancel();\n  }\n\n  private cancelLivePositionUpdate() {\n    this.position.cancel();\n  }\n\n  /** Reposition after the current scroll/layout frame without hiding the open popup. */\n  private scheduleLivePositionUpdate() {\n    this.position.scheduleLiveUpdate();\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n    this.positionReady = false;\n    this.position.schedule(onReady);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    return this.position.update();\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (this.hasCompositeSections) {\n      requestAnimationFrame(() => {\n        this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n      });\n      return;\n    }\n\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSections();\n    if (restoreFocus) this.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive)\n      .map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    // Consumers commonly change the item source while handling selection.\n    // Capture first so the exit animation never paints the next menu context.\n    this.captureClosingSections();\n    this.dsSelect.emit(item);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.closing\n      ? (this.closingSections ?? this.lastRenderedSections)\n      : this.activeSections;\n    const hasCompositeSections = sections.some(isMenuPickerSection);\n    if (!this.closing) {\n      this.lastRenderedSections = snapshotMenuSections(sections);\n      this.closingSections = null;\n    }\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          popover=\"manual\"\n          class={{\n            'menu-popup': true,\n            'menu-popup--closing': this.closing,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role={hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n        >\n          <div class=\"ds-choice-list\">\n            {sections.map((section, si) => (\n              <div\n                key={si}\n                class={{\n                  'menu-section': true,\n                  'menu-section--divided': si < sections.length - 1,\n                  'menu-section--swatch-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-chrome-column': true,\n                  'ds-chrome-space--sm': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                  'ds-choice-section--headed-after-first': si > 0 && Boolean(section.header),\n                }}\n                role={section.header ? 'group' : undefined}\n                aria-label={section.header}\n              >\n                {section.header && (\n                  <ds-text\n                    class={`section-header 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                )}\n                {isMenuSwatchPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n                    options={section.options ?? []}\n                    sections={section.sections ?? []}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleSwatchSelect(e.detail);\n                    }}\n                  />\n                ) : (\n                  section.items.map(item => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isSingleSelectionItem =\n                      !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n                    return (\n                      <button\n                        key={idx}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control-frame': true,\n                          [`ds-control--${this.size}`]: true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !item.isInactive,\n                          'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                          'menu-item--selected': !!item.isSelected,\n                          'menu-item--switch': !!item.showSwitch,\n                          'ds-control-inactive': !!item.isInactive,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                        }}\n                        role={\n                          hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                              ? 'menuitemcheckbox'\n                              : isSingleSelectionItem\n                                ? 'menuitemradio'\n                                : 'menuitem'\n                        }\n                        aria-checked={\n                          !hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isSingleSelectionItem\n                              ? String(!!item.isSelected)\n                              : undefined\n                        }\n                        aria-pressed={\n                          hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isSingleSelectionItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        disabled={item.isInactive}\n                        tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                        onMouseDown={() => {\n                          this.focusRingVisible = false;\n                        }}\n                        onClick={() => this.handleItemClick(item)}\n                        onFocus={() => {\n                          this.focusedIndex = idx;\n                        }}\n                      >\n                        <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n                          <ds-text\n                            class=\"menu-item__label ds-choice-item__label ds-control-label-box\"\n                            as=\"span\"\n                            variant={CONTROL_TEXT_VARIANT[this.size]}\n                            color={item.isSelected ? 'primary' : 'secondary'}\n                          >\n                            {item.label}\n                          </ds-text>\n                          {item.subtext && (\n                            <ds-text\n                              class=\"menu-item__subtext ds-choice-item__subtext ds-control-label-box\"\n                              as=\"span\"\n                              variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.tag && (\n                          <ds-tag\n                            class=\"ds-choice-item__tag ds-interaction-fill__content\"\n                            label={item.tag.label}\n                            size={MENU_ITEM_TAG_SIZE[this.size]}\n                            intent={item.tag.intent ?? 'neutral'}\n                            contrast={item.tag.contrast ?? 'faint'}\n                            rounded={item.tag.rounded ?? false}\n                          />\n                        )}\n                        {item.dot && (\n                          <span\n                            class=\"menu-item__dot-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-badge\n                              class=\"menu-item__dot\"\n                              variant=\"dot\"\n                              hasRing={false}\n                              label=\"\"\n                            />\n                          </span>\n                        )}\n                        {item.showSwitch && (\n                          <ds-switch\n                            class=\"menu-item__switch ds-interaction-fill__content\"\n                            size={this.size}\n                            checked={!!item.switchValue}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CtOK5oZ1.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,h as i,a as s,t as n}from"./index.js";import{A as e}from"./p-BBxcMVqk.js";import{d as r}from"./p-DZFilC--.js";import{b as d,T as c,r as l,a}from"./p-NdahPypA.js";import{r as h}from"./p-BMc0DE59.js";import{C as p}from"./p-CuwopElg.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const f={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function m(t){return f[t.toLowerCase()]??t}function g(t){const o=t.trim();if(!o)return[];if(o.includes("+")){return o.split("+").map((t=>t.trim())).filter(Boolean).map(m)}if(/\s/.test(o)){return o.split(/\s+/).filter(Boolean).map(m)}const i=Array.from(o);const s=[];while(i.length>1&&u.has(i[0])){s.push(i.shift())}s.push(i.join(""));return s}const v=()=>`.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}@media (forced-colors: active){.sc-ds-tooltip:root,.sc-ds-tooltip-h,.ds-forced-colors-scope.sc-ds-tooltip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}@media (forced-colors: active){.tooltip-popup.sc-ds-tooltip{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const y={md:c.size400,sm:c.size300,xs:c.size200};let b=0;let x=0;let w=null;function C(t){const o=document.createElement("ds-text");o.as="span";o.variant=t.variant;o.emphasis=t.emphasis??false;o.color=t.color??"inherit";if(t.wrap)o.wrap=t.wrap;o.textContent=t.text;return o}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const P=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=d.space050;this.alignOffset=0;this.delay=c.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.anchorObserver=null;this.didLoad=false;this.position=new e({getAnchor:()=>this.anchor,getPopup:()=>this.popupEl,measure:(t,o)=>({anchorRect:t.getBoundingClientRect(),popupWidth:o.offsetWidth||this.tooltipFallbackWidthPx,popupHeight:o.offsetHeight||this.tooltipFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}),apply:({x:t,y:o,resolvedSide:i})=>{if(!this.popupEl)return;this.popupEl.dataset.side=i;this.popupEl.style.transform=`translate(${Math.round(t)}px, ${Math.round(o)}px)`},liveUpdate:"frame",observeResize:true});this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const o=t.relatedTarget;if(o&&this.anchor?.contains(o))return;this.hide()};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const o=t?.assignedElements?.()[0]??this.el.firstElementChild;if(o===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}connectedCallback(){if(!this.didLoad)return;this.connectAnchor()}componentDidLoad(){this.didLoad=true;this.connectAnchor()}connectAnchor(){this.bindAnchor();if(this.anchorObserver)return;this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(c.space050,c.space050)}get sideOffsetPx(){return h(this.sideOffset,c.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,c.animationDelayMedium3)}get instantReopenMs(){return l(c.animationDurationMedium1,c.animationDurationMedium1)}get fadeOutMs(){return a(c.motionShort3,c.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(c.tooltipFallbackWidth,c.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const o=t?.assignedElements?.()??[];const i=o[0]??this.el.firstElementChild;if(!i||i===this.anchor)return;this.anchor=i;i.addEventListener("pointerenter",this.pointerEnterHandler);i.addEventListener("pointerleave",this.pointerLeaveHandler);i.addEventListener("pointerdown",this.pointerDownHandler);i.addEventListener("keydown",this.keyDownHandler);i.addEventListener("focusin",this.focusHandler);i.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){this.position.observe();document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){this.position.unobserve();document.removeEventListener("keydown",this.escapeHandler)}destroyPopup(){this.teardownOpenListeners();this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof o)k(t)};requestAnimationFrame((()=>{t();this.position.update();requestAnimationFrame((()=>{t();this.position.update()}))}));this.position.observeResizeTargets()}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup ds-forced-colors-scope sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const o=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const i="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${o} ${i}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const o=document.createElement("span");o.className=`key-hint-group ${i}`;o.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${i}`;const e=document.createElement("span");e.className=`key-hint__label ${i}`;e.textContent=t;s.appendChild(e);o.appendChild(s)}s.appendChild(o)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}render(){return i(s,{key:"b042c06ad1f35ac04195720838b5642fc149786d",style:{display:"contents"}},i("slot",{key:"abaa8f396f57f9015552f25ee960c16239ee4e11",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function O(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),P)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}O();export{P as T,O as d};
-//# sourceMappingURL=p-CtOK5oZ1.js.map