@ds-mo/ui 13.16.1 → 13.18.0

package/dist/styles/prose.css

@@ -125,9 +125,25 @@
 
 :where(.ds-prose)
   :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
-  color: var(--color-foreground-brand);
-  text-decoration: underline;
-  text-decoration-color: var(--color-foreground-tertiary);
+  color: var(--color-foreground-bold-brand);
+  text-decoration-line: none;
+  text-decoration-color: currentcolor;
+  text-decoration-thickness: var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));
+  text-underline-offset: var(--ds-text-decoration-offset, var(--dimension-space-025));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-prose)
+    :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)):hover {
+    text-decoration-line: underline;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(.ds-prose)
+    :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+    text-decoration-line: underline;
+  }
 }
 
 :where(.ds-prose)

package/dist/styles/table.css

@@ -163,6 +163,66 @@
   --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
 }
 
+/*
+ * A contained grouped table uses native sticky positioning without a scroll
+ * listener or duplicated section lane. Turning its table formatting boxes into
+ * explicit blocks makes every real tbody a section boundary; shared grid tracks
+ * retain exact header/body alignment while the browser performs push-off in the
+ * same layout pass as scrolling and container resize.
+ */
+:where(.ds-table__table--native-group-sticky) {
+  display: block;
+}
+
+:where(.ds-table__table--native-group-sticky > colgroup) {
+  display: none;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__head),
+:where(.ds-table__table--native-group-sticky > .ds-table__body) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__group) {
+  position: relative;
+  contain: layout style;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-row),
+:where(.ds-table__table--native-group-sticky .ds-table__row),
+:where(.ds-table__table--native-group-sticky .ds-table__skeleton-row) {
+  display: grid;
+  grid-template-columns: var(--_table-grid-template-columns);
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-row),
+:where(.ds-table__table--native-group-sticky .ds-table__state-row),
+:where(.ds-table__table--native-group-sticky .ds-table__load-row) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__cell),
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  display: block;
+  inline-size: auto;
+  width: auto;
+  max-inline-size: none;
+  max-width: none;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  inline-size: 100%;
+  width: 100%;
+}
+
 :where(.ds-table__caption-bar),
 :where(.ds-table__footer) {
   box-sizing: border-box;
@@ -184,6 +244,20 @@
   color: var(--color-foreground-primary);
 }
 
+:where(.ds-table__caption-content) {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__caption-content > slot) {
+  display: contents;
+}
+
 :where(.ds-table--caption-visible .ds-table__frame),
 :where(.ds-table--caption-visible .ds-table__viewport) {
   border-start-start-radius: 0;
@@ -306,9 +380,18 @@
   inline-size: 100%;
   block-size: var(--_table-row-min-block-size);
   overflow: hidden;
+}
+
+:where(.ds-table--document-sticky-header .ds-table__sticky-group) {
   will-change: inset-block-start;
 }
 
+:where(.ds-table--contained-sticky-header .ds-table__sticky-group) {
+  inset-block-start: var(--_table-header-min-block-size);
+  transform: translateY(var(--_table-sticky-group-push, 0));
+  will-change: transform;
+}
+
 :where(.ds-table__sticky-group .ds-table__group-content) {
   position: relative;
 }
@@ -452,6 +535,21 @@
   vertical-align: top;
 }
 
+/*
+ * Native table cells add their block padding outside the declared content
+ * height and grow together with their row. Grid items use border-box sizing,
+ * so restore intrinsic sizing and grid-track stretch for the grouped-sticky
+ * renderer instead of turning the native recipe's base sizes into hard caps.
+ */
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell) {
+  min-block-size: var(--_table-header-min-block-size);
+  block-size: auto;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__cell) {
+  block-size: auto;
+}
+
 :where(.ds-table__header-cell + .ds-table__header-cell) {
   border-inline-start: 0;
 }
@@ -710,9 +808,7 @@
 }
 
 :where(.ds-table__cell-tag-stack--tag-with-text .ds-table__cell-tag-text) {
-  padding-inline: calc(
-    var(--_table-cell-track-padding-inline) + var(--_table-cell-track-label-inset)
-  );
+  padding-inline: var(--_table-cell-track-padding-inline);
   padding-block: var(--dimension-space-025);
   min-block-size: 0;
 }
@@ -991,6 +1087,13 @@
   background: transparent;
 }
 
+/* Each real section owns one sticky row and its own push-off boundary. */
+:where(.ds-table--contained-sticky-header .ds-table__group-row--native-sticky) {
+  position: sticky;
+  inset-block-start: var(--_table-header-min-block-size);
+  z-index: 5;
+}
+
 /* Intentful groups resolve from their faint signal into neutral at the trailing edge. */
 :where(.ds-table__group-cell--intent-brand),
 :where(.ds-table__group-cell--intent-negative),

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

@@ -0,0 +1,137 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
+import type { AnchoredAlign, AnchoredSide } from '../../utils/anchored-position';
+export type FilterMenuFilterKind = 'single' | 'multiple' | 'boolean' | 'date';
+export type FilterMenuSize = 'lg' | 'md' | 'sm' | 'xs';
+export type FilterMenuWidth = ControlWidth;
+export interface FilterMenuOption {
+    label: string;
+    value: string;
+    description?: string;
+    isInactive?: boolean;
+}
+export interface FilterMenuFilter {
+    id: string;
+    label: string;
+    kind: FilterMenuFilterKind;
+    options?: FilterMenuOption[];
+    description?: string;
+    fieldLabel?: string;
+    /** Draw a standard menu-section divider after this category. */
+    divider?: boolean;
+}
+export type FilterMenuValue = string[] | boolean | string;
+export type FilterMenuValues = Record<string, FilterMenuValue | undefined>;
+export interface FilterMenuChangeDetail {
+    filterId: string;
+    value: FilterMenuValue;
+}
+export declare class FilterMenu {
+    el: HTMLElement;
+    /** Controlled popup visibility. */
+    open: boolean;
+    /** Select trigger text. The selected count is appended automatically. */
+    triggerLabel: string;
+    /** Optional select trigger prefix icon name. */
+    icon: string | undefined;
+    /** Select trigger density. */
+    size: FilterMenuSize;
+    /** Select trigger width fit. */
+    width: FilterMenuWidth;
+    /** Show the surface-aware inset border around the select trigger. */
+    hasBorder: boolean;
+    /** Show selected interaction fill when one or more criteria are active. */
+    activeFill: boolean;
+    /** ID applied to the internal select trigger. */
+    inputId: string | undefined;
+    /** Direct accessible name for the internal select trigger. */
+    ariaLabel: string | null;
+    /** Product-owned filter categories and option definitions. */
+    filters: FilterMenuFilter[];
+    /** Controlled values keyed by filter id. */
+    values: FilterMenuValues;
+    /** Controlled category shown in the option pane. */
+    activeFilterId: string | undefined;
+    /** External trigger element to position against. */
+    anchor: HTMLElement | undefined;
+    /** ID of the external trigger element used for positioning and focus return. */
+    anchorId: string | undefined;
+    /** Preferred popup side; collision handling may flip it. */
+    side: AnchoredSide;
+    /** Cross-axis alignment against the trigger. */
+    align: AnchoredAlign;
+    /** Gap between trigger and popup — number in px or a TokoMo length. */
+    sideOffset: number | string;
+    /** Cross-axis offset — number in px or a TokoMo length. */
+    alignOffset: number | string;
+    /** Popup width. It remains clamped to the viewport by the component recipe. */
+    menuWidth: string;
+    /** Accessible name for the non-modal filter dialog. */
+    menuLabel: string;
+    /** Accessible name for the category tab list. */
+    categoriesLabel: string;
+    /** Footer action and date-clear accessible label. */
+    clearLabel: string;
+    /** Show a visible focus ring on initial entry after keyboard activation. */
+    initialFocusVisible: boolean;
+    private shouldRender;
+    private closing;
+    private positionReady;
+    private pos;
+    private focusRingVisible;
+    private activeOptionIndex;
+    /** Requests a controlled value replacement without closing the popup. */
+    dsChange: EventEmitter<FilterMenuChangeDetail>;
+    /** Requests that the consumer clear every filter value. */
+    dsClear: EventEmitter<void>;
+    /** Requests a controlled active-category replacement. */
+    dsActiveFilterChange: EventEmitter<string>;
+    /** Requests that the controlled popup close. */
+    dsClose: EventEmitter<void>;
+    /** Emitted whenever internal select-trigger activation changes popup visibility. */
+    dsOpenChange: EventEmitter<boolean>;
+    /** Emitted after exit motion and rendered popup removal complete. */
+    dsAfterClose: EventEmitter<void>;
+    private readonly generatedId;
+    private outsideHandler;
+    private triggerElement;
+    private pendingInitialFocusVisible;
+    private closeTimer;
+    private closingSnapshot;
+    private readonly position;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onOpenChange(isOpen: boolean): void;
+    onPositionInputChange(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private get resolvedAnchor();
+    private get usesInternalTrigger();
+    private get anchorFocusTarget();
+    private get viewportPad();
+    private get popupFallbackWidth();
+    private get popupFallbackHeight();
+    private setupListeners;
+    private teardownListeners;
+    private close;
+    private toggleFromTrigger;
+    private handleTriggerKeyDown;
+    private finishClose;
+    private captureClosingSnapshot;
+    private focusAnchor;
+    private focusInitialCategory;
+    private tabLeavesPopup;
+    private moveFocusAfterTab;
+    private selectedFilter;
+    private selectedCount;
+    private totalSelected;
+    private activeFilterCount;
+    private selectCategory;
+    private handleCategoryKeyDown;
+    private handlePanelKeyDown;
+    private handleOptionKeyDown;
+    private toggleMultiple;
+    private selectOption;
+    private renderOptions;
+    render(): any;
+}
+//# sourceMappingURL=FilterMenu.d.ts.map

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ChoicePopupAnchorAlignment, type ControlSize } from '../../utils';
 import type { MenuAlign, MenuSide } from './menu-position';
-import type { MenuItemData, MenuSection } from './menu-types';
+import { type MenuItemData, type MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
 export declare class Menu {

package/dist/types/components/Menu/menu-types.d.ts

@@ -1,12 +1,21 @@
 import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';
+import type { TagContrast, TagIntent } from '../Tag/Tag';
 export type { MenuAlign, MenuSide } from './menu-position';
 export { PANEL_NAV_USER_MENU_PLACEMENT, PANEL_TOOLS_HEADER_MENU_PLACEMENT, type MenuPlacement, } from './menu-placement';
+export interface MenuItemTagData {
+    label: string;
+    intent?: TagIntent;
+    contrast?: TagContrast;
+    rounded?: boolean;
+}
 export interface MenuItemData {
     label: string;
     value?: string;
     subtext?: string;
     /** Show a supplemental brand notification dot. */
     dot?: boolean;
+    /** Show a non-interactive tag at the trailing edge of the row. */
+    tag?: MenuItemTagData;
     isSelected?: boolean;
     isInactive?: boolean;
     isDestructive?: boolean;

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

@@ -27,6 +27,7 @@ export declare class Modal {
     private previousFocus;
     private closeTimer;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
     private focusClose;

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

@@ -6,7 +6,13 @@ export type SelectSection = ChoiceSection;
 export type SelectBackground = ChoiceBackground;
 export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';
 export type SelectWidth = ControlWidth;
+export type SelectPopupAlign = 'start' | 'end';
 export type SelectValue = string | string[];
+export interface SelectOptionActionDetail {
+    value: string;
+    anchorId: string;
+    originalEvent: MouseEvent;
+}
 export declare class Select {
     el: HTMLElement;
     internals: ElementInternals;
@@ -30,10 +36,18 @@ export declare class Select {
     requiredMessage: string;
     /** Trigger text shown when no valid value is selected. */
     placeholder: string;
+    /** Optional scalar-mode trigger text that does not change the selected option label. */
+    triggerLabel: string | undefined;
+    /** Present triggerLabel with placeholder emphasis while preserving the selected value. */
+    triggerLabelPlaceholder: boolean;
+    /** Show a supplemental notification dot beside the trigger label. */
+    dot: boolean;
     /** Control density. */
     size: SelectSize;
     /** Width fit — hug content (default) or fill the parent. */
     width: SelectWidth;
+    /** Align the popup's choice edge to the trigger start or end edge. */
+    popupAlign: SelectPopupAlign;
     /** Shared inactive treatment; removes interaction and form submission. */
     isInactive: boolean;
     /** Replace the prefix with a loader and disable option interaction. */
@@ -50,6 +64,8 @@ export declare class Select {
     clearLabel: string;
     /** Localized noun displayed after the selected count in multiple mode. */
     selectedLabel: string;
+    /** Optional text action shown in the popup footer instead of the clear action. */
+    footerActionLabel: string | undefined;
     /** Show immediate local filtering over option labels, subtext, and section headings. */
     searchable: boolean;
     /** Localized search-field placeholder and accessible name. */
@@ -78,23 +94,36 @@ export declare class Select {
     dsClear: EventEmitter<void>;
     /** Emitted whenever popup visibility changes. */
     dsOpenChange: EventEmitter<boolean>;
+    /** Emitted when the optional popup footer action is activated. */
+    dsFooterAction: EventEmitter<void>;
+    /** Emitted when an option's contextual ellipsis action is activated. */
+    dsOptionAction: EventEmitter<SelectOptionActionDetail>;
     private activeIndex;
     private searchTerm;
     private formDisabled;
     private position;
     private positionReady;
     private focusRingVisible;
+    private compactFooterSummary;
     private readonly generatedId;
     private readonly listboxId;
     private readonly errorId;
     private initialValue;
     private readonly controller;
+    private footerContentElement?;
+    private footerSummaryMeasureElement?;
+    private footerClearElement?;
+    private footerResizeObserver?;
+    private observedFooterContentElement?;
+    private footerMeasurementFrame?;
     private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     syncFormValue(): void;
     onLoadingChange(): void;
+    onPopupAlignChange(): void;
     onOpenChange(open: boolean): void;
     onSearchTermChange(): void;
     onActiveIndexChange(): void;
@@ -113,10 +142,15 @@ export declare class Select {
     private get selectedOption();
     private get hasSelection();
     private get activeOptionId();
+    private get popupRole();
+    private observeFooterContent;
+    private scheduleFooterSummaryMeasurement;
+    private measureFooterSummary;
     private closePopup;
     private openPopup;
     private selectOption;
     private clearSelection;
+    private activateFooterAction;
     private readonly handleListKeyDown;
     private readonly handleTriggerKeyDown;
     private renderOption;

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

@@ -81,9 +81,7 @@ export declare class Table {
     private announcement;
     private activeStickyGroupId;
     private viewportFitSettled;
-    private headerLeadingPresent;
-    private headerCopyPresent;
-    private headerTrailingPresent;
+    private headerPresent;
     private rootEl;
     private viewportEl;
     private frameEl;
@@ -108,6 +106,7 @@ export declare class Table {
     private syncHeaderSlotPresence;
     private connectHeaderSlotObserver;
     private connectStickyGroup;
+    private syncStickyGroupConnection;
     private disconnectStickyGroup;
     private readonly updateStickyGroup;
     handleStructureChange(): void;

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

@@ -1,6 +1,5 @@
 export interface TableLayoutElements {
     viewport: HTMLElement | null;
-    table: HTMLTableElement | null;
     stickyHeaderTable: HTMLTableElement | null;
     collapseAllOverlay: HTMLElement | null;
     frame: HTMLElement | null;
@@ -28,7 +27,6 @@ export interface TableLayoutMetricInput {
     scrollInlineSize: number;
     scrollBlockSize: number;
     scrollInlineOffset: number;
-    tableInlineSize: number;
     collapseHeadBlockStart?: number;
     collapseFrameBlockStart?: number;
 }
@@ -51,7 +49,6 @@ export declare class TableLayoutController {
     private readonly options;
     private connected;
     private connectedViewport;
-    private observedTable;
     private resizeObserver;
     private frame;
     private overflow;