@ds-mo/ui 14.18.1 → 14.19.1

package/dist/styles/prose.css

@@ -17,12 +17,16 @@
 }
 
 :where(.ds-prose)
-  > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote):not(
+    :where([data-ds-prose='off'], [data-ds-prose='off'] *)
+  ) {
   max-inline-size: var(--ds-prose-text-max-inline-size, 100%);
 }
 
 :where(.ds-prose)
-  :where(p, ul, ol, dl, blockquote, figure, figcaption, table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  :where(p, ul, ol, dl, blockquote, figure, figcaption, table):not(
+    :where([data-ds-prose='off'], [data-ds-prose='off'] *)
+  ) {
   margin: 0;
   color: inherit;
   font-family: var(--typography-font-family-ui);
@@ -40,22 +44,19 @@
   font-weight: var(--typography-weight-semibold);
 }
 
-:where(.ds-prose)
-  :where(h1, h2):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(h1, h2):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   font-size: var(--typography-fontsize-xl);
   line-height: var(--typography-lineheight-xl);
   letter-spacing: var(--typography-letterspacing-negative-double);
 }
 
-:where(.ds-prose)
-  :where(h3, h4):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(h3, h4):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   font-size: var(--typography-fontsize-lg);
   line-height: var(--typography-lineheight-lg);
   letter-spacing: var(--typography-letterspacing-negative);
 }
 
-:where(.ds-prose)
-  :where(h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   font-size: var(--typography-fontsize-md);
   line-height: var(--typography-lineheight-md);
   letter-spacing: var(--typography-letterspacing-negative);
@@ -90,8 +91,7 @@
   margin-block-start: var(--dimension-space-050);
 }
 
-:where(.ds-prose)
-  :where(ul, ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(ul, ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   padding-inline-start: var(--dimension-space-300);
 }
 
@@ -105,15 +105,13 @@
   margin-inline-end: var(--dimension-space-050);
 }
 
-:where(.ds-prose)
-  :where(blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   padding-inline-start: var(--dimension-space-150);
   border-inline-start: var(--dimension-stroke-width-025) solid var(--color-border-secondary);
   color: var(--color-foreground-secondary);
 }
 
-:where(.ds-prose)
-  :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   font-weight: var(--typography-weight-medium);
 }
 
@@ -123,8 +121,7 @@
   font-weight: inherit;
 }
 
-:where(.ds-prose)
-  :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   color: var(--color-foreground-bold-brand);
   text-decoration-line: none;
   text-decoration-color: currentcolor;
@@ -133,15 +130,13 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  :where(.ds-prose)
-    :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)):hover {
+  :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'] *)) {
+  :where(.ds-prose) :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
     text-decoration-line: underline;
   }
 }
@@ -153,8 +148,16 @@
   background: var(--color-background-secondary);
   font-family: var(
     --typography-font-family-code,
-    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',
-    Menlo, Monaco, Consolas, 'Liberation Mono', monospace
+    'Fira Code',
+    ui-monospace,
+    'SFMono-Regular',
+    'Cascadia Code',
+    'Roboto Mono',
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    monospace
   );
   font-size: var(--typography-fontsize-sm);
   font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);
@@ -163,8 +166,7 @@
   letter-spacing: var(--typography-letterspacing-none);
 }
 
-:where(.ds-prose)
-  :where(pre):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(pre):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   box-sizing: border-box;
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -176,8 +178,16 @@
   color: var(--color-foreground-faint-neutral);
   font-family: var(
     --typography-font-family-code,
-    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',
-    Menlo, Monaco, Consolas, 'Liberation Mono', monospace
+    'Fira Code',
+    ui-monospace,
+    'SFMono-Regular',
+    'Cascadia Code',
+    'Roboto Mono',
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    monospace
   );
   font-size: var(--typography-fontsize-sm);
   font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);
@@ -187,8 +197,7 @@
   tab-size: 2;
 }
 
-:where(.ds-prose)
-  :where(pre code):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(pre code):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   padding: 0;
   background: transparent;
   color: inherit;
@@ -197,8 +206,7 @@
   white-space: pre;
 }
 
-:where(.ds-prose)
-  :where(hr):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(hr):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   margin: 0;
   border: 0;
   border-block-start: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
@@ -211,14 +219,12 @@
   overflow-x: auto;
 }
 
-:where(.ds-prose)
-  :where(table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   inline-size: 100%;
   border-collapse: collapse;
 }
 
-:where(.ds-prose)
-  :where(th, td):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(th, td):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   padding: var(--dimension-space-075);
   border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
   text-align: start;
@@ -226,8 +232,7 @@
   overflow-wrap: anywhere;
 }
 
-:where(.ds-prose)
-  :where(th):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(th):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   color: var(--color-foreground-primary);
   font-weight: var(--typography-weight-medium);
 }
@@ -238,8 +243,7 @@
   block-size: auto;
 }
 
-:where(.ds-prose)
-  :where(figcaption):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+:where(.ds-prose) :where(figcaption):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   margin-block-start: var(--dimension-space-050);
   color: var(--color-foreground-secondary);
   font-size: var(--typography-fontsize-sm);

package/dist/styles/table.css

@@ -9,33 +9,24 @@
 
 :where(.ds-table) {
   --_table-cell-track-min-block-size: var(--dimension-size-300);
-  --_table-cell-track-padding-inline: calc(
-    var(--dimension-space-075) - var(--dimension-space-025)
-  );
+  --_table-cell-track-padding-inline: calc(var(--dimension-space-075) - var(--dimension-space-025));
   --_table-cell-track-label-inset: var(--dimension-space-025);
   --_table-caption-bar-block-size: var(--dimension-size-600);
   --_table-image-block-size: var(--_table-cell-track-min-block-size);
   --_table-image-block-size-multi: calc(
-    var(--_table-cell-track-min-block-size)
-    + var(--dimension-space-025)
-    + var(--dimension-size-250)
+    var(--_table-cell-track-min-block-size) + var(--dimension-space-025) + var(--dimension-size-250)
   );
   --_table-image-block-size-triple: calc(
-    var(--_table-image-block-size-multi)
-    + var(--dimension-space-025)
-    + var(--dimension-size-250)
+    var(--_table-image-block-size-multi) + var(--dimension-space-025) + var(--dimension-size-250)
   );
   --_table-image-column-inline-size: calc(
-    ((var(--_table-image-block-size) * 16) / 9)
-    + (var(--_table-cell-padding-inline) * 2)
+    ((var(--_table-image-block-size) * 16) / 9) + (var(--_table-cell-padding-inline) * 2)
   );
   --_table-image-column-inline-size-multi: calc(
-    ((var(--_table-image-block-size-multi) * 16) / 9)
-    + (var(--_table-cell-padding-inline) * 2)
+    ((var(--_table-image-block-size-multi) * 16) / 9) + (var(--_table-cell-padding-inline) * 2)
   );
   --_table-image-column-inline-size-triple: calc(
-    ((var(--_table-image-block-size-triple) * 16) / 9)
-    + (var(--_table-cell-padding-inline) * 2)
+    ((var(--_table-image-block-size-triple) * 16) / 9) + (var(--_table-cell-padding-inline) * 2)
   );
   /*
    * Wrapping primary on a 1-track cell occupies later tracks instead of a
@@ -48,19 +39,17 @@
   );
   --_table-wrap-primary-padding-block: calc(
     (
-      var(--_table-cell-track-min-block-size)
-      - var(--typography-lineheight-md)
-      - var(--dimension-space-025)
-    ) / 2
+        var(--_table-cell-track-min-block-size) - var(--typography-lineheight-md) -
+          var(--dimension-space-025)
+      ) /
+      2
   );
   /*
    * Wrapping secondary on a 2-track cell occupies later tracks. Zero the copy
    * gap and use later-track + gap as line-height so 1 / 2 / 3 secondary lines
    * land on 62 / 84 / 106 with primary remaining the first 24px track.
    */
-  --_table-wrap-secondary-line-height: calc(
-    var(--dimension-size-250) + var(--dimension-space-025)
-  );
+  --_table-wrap-secondary-line-height: calc(var(--dimension-size-250) + var(--dimension-space-025));
   --_table-wrap-secondary-padding-block: 0;
   --_table-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
@@ -73,22 +62,10 @@
   --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-tertiary));
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
   --_table-radius: var(--ds-table-radius, var(--dimension-radius-000));
-  --_table-header-min-block-size: var(
-    --ds-table-header-min-block-size,
-    var(--dimension-size-400)
-  );
-  --_table-row-min-block-size: var(
-    --ds-table-row-min-block-size,
-    var(--dimension-size-500)
-  );
-  --_table-cell-padding-block: var(
-    --ds-table-cell-padding-block,
-    var(--dimension-space-100)
-  );
-  --_table-cell-padding-inline: var(
-    --ds-table-cell-padding-inline,
-    var(--dimension-space-100)
-  );
+  --_table-header-min-block-size: var(--ds-table-header-min-block-size, var(--dimension-size-400));
+  --_table-row-min-block-size: var(--ds-table-row-min-block-size, var(--dimension-size-500));
+  --_table-cell-padding-block: var(--ds-table-cell-padding-block, var(--dimension-space-100));
+  --_table-cell-padding-inline: var(--ds-table-cell-padding-inline, var(--dimension-space-100));
   --_table-selection-column-inline-size: var(
     --ds-table-selection-column-inline-size,
     var(--dimension-size-500)
@@ -190,8 +167,7 @@
   min-inline-size: max(
     100%,
     calc(
-      var(--ds-table-explicit-min-inline-size, 0px) +
-        var(--_table-selection-column-contribution)
+      var(--ds-table-explicit-min-inline-size, 0px) + var(--_table-selection-column-contribution)
     )
   );
   border: 0;
@@ -485,7 +461,9 @@
   z-index: 3;
 }
 
-:where(.ds-table--document-sticky-header.ds-table--caption-visible .ds-table__document-sticky-header) {
+:where(
+  .ds-table--document-sticky-header.ds-table--caption-visible .ds-table__document-sticky-header
+) {
   inset-block-start: calc(
     var(--ds-table-sticky-header-offset, 0px) + var(--_table-caption-bar-block-size)
   );
@@ -538,10 +516,7 @@
 
 :where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
   transform: translate3d(
-    calc(
-      var(--ds-table-inline-scroll-offset, 0) -
-      var(--ds-table-inline-scroll-max-offset, 0)
-    ),
+    calc(var(--ds-table-inline-scroll-offset, 0) - var(--ds-table-inline-scroll-max-offset, 0)),
     0,
     0
   );
@@ -571,30 +546,30 @@
 }
 
 @keyframes ds-table-follow-inline-scroll {
-  from { transform: translate3d(0, 0, 0); }
+  from {
+    transform: translate3d(0, 0, 0);
+  }
   to {
-    transform: translate3d(
-      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
-      0,
-      0
-    );
+    transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)), 0, 0);
   }
 }
 
 @keyframes ds-table-counter-inline-scroll-start {
-  from { transform: translate3d(0, 0, 0); }
-  to { transform: translate3d(var(--ds-table-inline-scroll-max-offset, 0), 0, 0); }
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(var(--ds-table-inline-scroll-max-offset, 0), 0, 0);
+  }
 }
 
 @keyframes ds-table-counter-inline-scroll-end {
   from {
-    transform: translate3d(
-      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
-      0,
-      0
-    );
+    transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)), 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
   }
-  to { transform: translate3d(0, 0, 0); }
 }
 
 :where(.ds-table__head--semantic-copy) {
@@ -735,7 +710,6 @@
   :where(.ds-table__header-label--interactive:hover) {
     color: var(--color-foreground-primary);
   }
-
 }
 
 :where(.ds-table__header-label--interactive:active) {
@@ -1276,9 +1250,7 @@
   justify-content: center;
   box-sizing: border-box;
   inline-size: 100%;
-  min-block-size: calc(
-    var(--_table-header-min-block-size) - var(--dimension-stroke-width-012)
-  );
+  min-block-size: calc(var(--_table-header-min-block-size) - var(--dimension-stroke-width-012));
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -1386,7 +1358,9 @@
 
 /* A section header yields its divider only when no member or load row follows
  * it and the section itself is the table's final body. */
-:where(.ds-table__group:last-child > .ds-table__group-row:last-child .ds-table__group-content)::after {
+:where(
+  .ds-table__group:last-child > .ds-table__group-row:last-child .ds-table__group-content
+)::after {
   display: none;
 }
 
@@ -1429,9 +1403,7 @@
 
 :where(.ds-table__table--selectable .ds-table__group-copy),
 :where(.ds-table__sticky-group--selectable .ds-table__group-copy) {
-  padding-inline-start: calc(
-    var(--dimension-space-100) + var(--_table-cell-track-label-inset)
-  );
+  padding-inline-start: calc(var(--dimension-space-100) + var(--_table-cell-track-label-inset));
 }
 
 :where(.ds-table__group-separator),

package/dist/types/components/CardSetting/index.d.ts

@@ -1,2 +1,2 @@
-export type { CardSettingAction, CardSettingActionDetail, CardSettingWidth, } from './CardSetting';
+export type { CardSettingAction, CardSettingActionDetail, CardSettingWidth } from './CardSetting';
 //# sourceMappingURL=index.d.ts.map

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

@@ -30,6 +30,8 @@ export declare class Pagination {
     pageSizeAriaLabel: string | undefined;
     /** Accessible name for the pagination navigation region. */
     label: string;
+    /** Include direct first-page and last-page controls. */
+    showFirstLastButtons: boolean;
     /** Prevent interaction while the owner replaces the current data page. */
     loading: boolean;
     /** Emits the complete next controlled state after a page or page-size request. */

package/dist/types/components/Pagination/pagination-types.d.ts

@@ -28,6 +28,8 @@ export interface PaginationState {
     pageSizeLabel?: string;
     /** Accessible name for the pagination navigation region. */
     ariaLabel?: string;
+    /** Include direct first-page and last-page controls around Previous and Next. */
+    showFirstLastButtons?: boolean;
 }
 /** Complete next controlled state emitted for a page or page-size request. */
 export interface PaginationChangeDetail extends PaginationState {

package/dist/types/components/TooltipChart/index.d.ts

@@ -1,2 +1,2 @@
-export type { TooltipChartSide, TooltipChartAlign, TooltipChartItem, } from './TooltipChart';
+export type { TooltipChartSide, TooltipChartAlign, TooltipChartItem } from './TooltipChart';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components.d.ts

@@ -1941,6 +1941,11 @@ export namespace Components {
           * @default [25, 50, 100, 200]
          */
         "pageSizeOptions": number[];
+        /**
+          * Include direct first-page and last-page controls.
+          * @default false
+         */
+        "showFirstLastButtons": boolean;
         /**
           * Controlled total number of top-level items across every page.
           * @default 0
@@ -6960,6 +6965,11 @@ declare namespace LocalJSX {
           * @default [25, 50, 100, 200]
          */
         "pageSizeOptions"?: number[];
+        /**
+          * Include direct first-page and last-page controls.
+          * @default false
+         */
+        "showFirstLastButtons"?: boolean;
         /**
           * Controlled total number of top-level items across every page.
           * @default 0
@@ -9202,6 +9212,7 @@ declare namespace LocalJSX {
         "pageSizeLabel": string;
         "pageSizeAriaLabel": string | undefined;
         "label": string;
+        "showFirstLastButtons": boolean;
         "loading": boolean;
     }
     interface DsPanelNavAttributes {

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

@@ -1,5 +1,5 @@
 export type { NavChromeStyle } from './nav-chrome';
-export type { PanelNavGroup, PanelNavItem, } from '../components/PanelNav/panel-nav-types';
+export type { PanelNavGroup, PanelNavItem } from '../components/PanelNav/panel-nav-types';
 export type { BarNavTab } from '../components/BarNav/bar-nav-types';
 export type { ShellPageContentInset, ShellPageContentSurface, } from '../components/ShellPage/shell-page-types';
 export type { ShellAppComposition, ShellNavigationConfig, ShellNavigationSelectDetail, ShellPageChromeConfig, ShellToolsConfig, } from '../components/ShellApp/shell-app-types';
@@ -11,5 +11,5 @@ export { PANEL_NAV_USER_MENU_PLACEMENT, PANEL_TOOLS_HEADER_MENU_PLACEMENT, } fro
 export type { ShellGradientPickerOption, ShellGradientPickerPreview, ShellGradientPickerSection, ShellGradientPreset, } from './shell-gradient-presets';
 export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPickerSections, } from './shell-gradient-presets';
 export { SHELL_DEFAULT_INBOX_TOOL, isShellInboxTool, resolveAvailableInboxTool, resolveShellResponsiveMode, shellMobileDestinationForTool, shouldEmitMobileDestinationChange, } from './shell-responsive';
-export type { ShellInboxToolId, MobileDestination, ShellResponsiveMode, } from './shell-responsive';
+export type { ShellInboxToolId, MobileDestination, ShellResponsiveMode } from './shell-responsive';
 //# sourceMappingURL=index.d.ts.map

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

@@ -23,6 +23,6 @@ export { arcMark, areaY, bandX, bandY, barX, barY, binX, boxStatistics, boxY, ce
 export type { ChartArcOptions, ChartAreaYOptions, ChartAxisOptions, ChartAxisPresentation, ChartBarLayout, ChartBarOptions, ChartBandOptions, ChartBinDatum, ChartBinOptions, ChartBoxYOptions, ChartBuildContext, ChartCartesianCoordinate, ChartCellOptions, ChartCenterContent, ChartCenterOptions, ChartChannel, ChartColorOptions, ChartCoordinate, ChartDataIntent, ChartDefinition, ChartDensityDatum, ChartDensityOptions, ChartDotOptions, ChartFocusMode, ChartKey, ChartLineYOptions, ChartMargin, ChartMark, ChartMarkKind, ChartPieDatum, ChartPieOptions, ChartPoint, ChartPolarAxisOptions, ChartPolarContainerOptions, ChartPolarCoordinate, ChartRadialOptions, ChartRectOptions, ChartRuleOptions, ChartScale, ChartScaleSource, ChartSpec, ChartSpecBuilder, ChartTextOptions, ChartTickOptions, ChartTooltip, ChartTooltipContext, ChartTooltipItem, ChartTooltipOptions, ChartValue, ChartVisual, NormalizedStackDatum, NormalizeStackOptions, } from './chart-grammar';
 export { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from './control-text';
 export type { ControlInsetDepth, ControlSize } from './control-text';
-export { choicePopupMinWidth, resolveChoicePopupAlignOffset, } from './choice-popup-alignment';
+export { choicePopupMinWidth, resolveChoicePopupAlignOffset } from './choice-popup-alignment';
 export type { ChoicePopupAnchorAlignment } from './choice-popup-alignment';
 //# sourceMappingURL=index.d.ts.map

package/dist/vue/ds-pagination.js

@@ -18,6 +18,7 @@ export const DsPagination = /*@__PURE__*/ defineContainer('ds-pagination', defin
     'pageSizeLabel',
     'pageSizeAriaLabel',
     'label',
+    'showFirstLastButtons',
     'loading',
     'dsChange'
 ], [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.18.1",
+  "version": "14.19.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -87,8 +87,13 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/verify-framework-proxies.mjs && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/build-lib-exports.mjs && node scripts/build-style-exports.mjs && node scripts/build-framework-exports.mjs && node scripts/build-registry.mjs && node scripts/build-agent-manifest.mjs && node scripts/build-mcp.mjs && node scripts/verify-framework-proxies.mjs && node scripts/write-build-stamp.mjs",
     "verify:pack": "node scripts/verify-framework-proxies.mjs && node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
+    "verify:local": "npm run format:check && npm run typecheck && npm run typecheck:storybook && npm run lint && npm test && npm run build && npm run agent:validate && npm run verify:pack",
+    "verify:local:full": "npm run verify:local && npm run test:e2e:chromium",
     "test": "node --import tsx/esm --test tests/*.test.ts",
     "test:e2e": "npm run build && playwright test",
+    "test:e2e:chromium": "playwright test --project=chromium",
+    "test:e2e:pr": "playwright test --grep \"@(cross-browser|pr-critical)\"",
+    "test:e2e:webkit": "playwright test --project=webkit",
     "test:e2e:firefox:local": "node scripts/test-firefox-local.mjs",
     "test:e2e:install": "playwright install chromium firefox webkit",
     "prebuild:docs": "npm run clean:framework-proxies",
@@ -101,6 +106,10 @@
     "storybook": "node scripts/storybook-dev.mjs",
     "storybook:build": "storybook build",
     "storybook:test:a11y": "vitest run --project=storybook-light --project=storybook-dark",
+    "storybook:test:a11y:light": "vitest run --project=storybook-light",
+    "storybook:test:a11y:dark": "vitest run --project=storybook-dark",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,md,mdx}\" \"tests/**/*.ts\" \"scripts/**/*.{mjs,js}\" \".storybook/**/*.{ts,js,mjs}\" \"*.config.{ts,js}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css,md,mdx}\" \"tests/**/*.ts\" \"scripts/**/*.{mjs,js}\" \".storybook/**/*.{ts,js,mjs}\" \"*.config.{ts,js}\"",
     "clean": "rm -rf dist",
     "clean:framework-proxies": "node scripts/clean-framework-proxies.mjs",
     "typecheck": "tsc --noEmit",
@@ -180,6 +189,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.7.0",
     "lit": "^3.3.3",
+    "prettier": "3.8.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "storybook": "^10.5.0",

package/dist/components/p-B00PEE6t.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as n}from"./p-BMc0DE59.js";function l(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const h=()=>`.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-primary);--_shell-page-header-background:var(--color-background-primary);--_shell-page-responsive-content-block-start-inset:var(--dimension-space-400);--_shell-page-content-block-start-inset:var(     --ds-shell-page-content-block-start-inset,     var(--_shell-page-responsive-content-block-start-inset)   );--ds-shell-page-sticky-header-block-size:var(--dimension-size-600);--ds-shell-page-content-block-start-offset:calc(     var(--ds-shell-page-sticky-header-block-size) +       var(--_shell-page-content-block-start-inset)   );display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--surface-secondary.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-secondary)}.shell-page-host--surface-secondary[responsive-mode='desktop'].sc-ds-shell-page-h,.shell-page-host--surface-secondary[responsive-mode='tablet'].sc-ds-shell-page-h{--_shell-page-header-background:var(--color-background-secondary)}[responsive-mode='tablet'].sc-ds-shell-page-h,[responsive-mode='mobile'].sc-ds-shell-page-h{--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200)}[responsive-mode='mobile'].sc-ds-shell-page-h{--ds-shell-page-sticky-header-block-size:calc(     var(--dimension-size-500) + var(--dimension-space-200)   )}.shell-page-host--header-compact.sc-ds-shell-page-h,.shell-page-host--header-constrained.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var(     --ds-shell-page-compact-content-block-start-inset,     var(--_shell-page-responsive-content-block-start-inset)   )}.shell-page-host--inset-none.sc-ds-shell-page-h,.shell-page-host--block-start-inset-none.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:0px}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--_shell-page-header-background);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--_shell-page-content-background)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-default[responsive-mode='tablet'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page,.shell-page-host--inset-default[responsive-mode='mobile'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.contentInsetBlockStart="default";this.scrollCompaction=true;this.contentSurface="primary";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.pageHeaderResizeObserver=null;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.reconnectFrame=null;this.scrollRoot=null;this.hasLoaded=false;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;this.syncHeaderDividerInset(e);const s=this.sentinelEl.getBoundingClientRect().top>=e;if(this.scrollCompaction&&!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.el.style.removeProperty("--ds-shell-page-sticky-header-block-size");this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader())}componentDidLoad(){this.hasLoaded=true;this.connectRuntime()}componentDidRender(){this.syncHeaderVariant()}connectedCallback(){if(!this.hasLoaded)return;if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=requestAnimationFrame((()=>{this.reconnectFrame=null;if(this.el.isConnected)this.connectRuntime()}))}disconnectedCallback(){if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=null;this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}connectRuntime(){this.observePageHeaderGeometry();this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}get effectiveVariant(){return l(this.headerPresentation,this.headerCapacity??"roomy",this.scrollCompaction?this.pageTopVisible:true)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}get contentInsetStyles(){const e={};const s=this.contentInsetBlockStartSize?.trim();const t=this.compactContentInsetBlockStartSize?.trim();if(s)e["--ds-shell-page-content-block-start-inset"]=s;if(t)e["--ds-shell-page-compact-content-block-start-inset"]=t;return e}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}get scrollRootResolved(){const e=this.el.closest("ds-shell-app");if(!e)return true;const s=e.querySelector(".shell-app__content");return s!==null&&this.scrollRoot===s}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return n("--dimension-size-600",0)}syncHeaderDividerInset(e){const s=this.headerEl;if(!s)return;const t=this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy";const i=n("--dimension-space-400",0);if(!t||!this.sentinelEl||!this.scrollRoot||this.headerTravel<=0||i<=0){s.style.removeProperty("--ds-bar-title-divider-inset");return}const a=e??(this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top);const l=this.sentinelEl.getBoundingClientRect().top-a;const h=Math.min(1,Math.max(0,1-l/this.headerTravel));s.style.setProperty("--ds-bar-title-divider-inset",`${i*(1-h)}px`)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const n=a.top-i.top;const l=Math.max(0,(t-a.height)/2);this.setHeaderTravel(n-l)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=Math.max(this.expandedHeaderHeight,e.getBoundingClientRect().height);this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncPageHeaderBlockSize(){const e=this.stickyHeaderEl?.getBoundingClientRect().height??0;if(e>0){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size",`${e}px`)}}observePageHeaderGeometry(){this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.syncPageHeaderBlockSize();if(!this.stickyHeaderEl||typeof ResizeObserver==="undefined")return;this.pageHeaderResizeObserver=new ResizeObserver((()=>{this.syncPageHeaderBlockSize()}));this.pageHeaderResizeObserver.observe(this.stickyHeaderEl)}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;this.syncPageHeaderBlockSize();this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&this.scrollRootResolved&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;this.syncHeaderDividerInset();if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(i&&this.isScrollCompacted){this.setSpacerHeight(this.expandedHeaderHeight-this.compactHeaderHeight);this.setStickyHeaderOffset(t)}if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t){s.variant=t;this.scheduleHeaderGeometrySync(s)}if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"],childList:true,subtree:true})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"a7eaf87dc48f4ca45603596076e42068d08adeb1",role:"main",style:this.contentInsetStyles,class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--block-start-inset-none":this.contentInsetBlockStart==="none","shell-page-host--surface-primary":this.contentSurface==="primary","shell-page-host--surface-secondary":this.contentSurface==="secondary","shell-page-host--mobile":e,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"7289eb91fa38dcd89be9682a501ed072759ece1f",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"3f9156d5d84a81600c6907c9f0fedd09fa0b8182",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"69b2a8628adc121d993feabca3486e28cf6f1e23",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"bd6b1f2783e891664c65b8d28135e5b1db8c4c98",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"e553c410176a00b571a6169b4eaecdd996226dad",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"e32e9677328068c4b409d308fa17cba62828291e",name:"mobile-header"}))),t("div",{key:"70e8cacb339cd888066df7d56da8c0f4d66521d4",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"6ac61fceae05bca75cd80407f035348848bc1253",class:"shell-page__content"},t("slot",{key:"39210c05e885b0e333b241d3849a3b0cc3a84d50"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}}static get style(){return h()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],contentInsetBlockStart:[1,"content-inset-block-start"],contentInsetBlockStartSize:[1,"content-inset-block-start-size"],compactContentInsetBlockStartSize:[1,"compact-content-inset-block-start-size"],scrollCompaction:[4,"scroll-compaction"],contentSurface:[1,"content-surface"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}o();export{r as S,o as d};
-//# sourceMappingURL=p-B00PEE6t.js.map