@ds-mo/ui 13.15.0 → 13.16.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-12T19:17:25",
+  "timestamp": "2026-08-13T00:16:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -3115,6 +3115,61 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "showCompactDivider",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-compact-divider",
+          "reflectToAttr": false,
+          "docs": "Override divider visibility for compact and constrained variants.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showDivider",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-divider",
+          "reflectToAttr": false,
+          "docs": "Draw the page-title divider beneath the header.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -19553,6 +19608,32 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "compactContentInsetBlockStartSize",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "compact-content-inset-block-start-size",
+          "reflectToAttr": false,
+          "docs": "Exact block-start content inset while the header is compact or constrained.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "contentInset",
           "type": "\"default\" | \"none\"",
@@ -19594,6 +19675,73 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "contentInsetBlockStart",
+          "type": "\"default\" | \"none\"",
+          "complexType": {
+            "original": "ShellPageContentInset",
+            "resolved": "\"default\" | \"none\"",
+            "references": {
+              "ShellPageContentInset": {
+                "location": "import",
+                "path": "./shell-page-types",
+                "id": "src/wc/components/ShellPage/shell-page-types.ts::ShellPageContentInset",
+                "referenceLocation": "ShellPageContentInset"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "content-inset-block-start",
+          "reflectToAttr": false,
+          "docs": "Preserve the responsive side/end gutters while allowing content to meet the header.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "contentInsetBlockStartSize",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "content-inset-block-start-size",
+          "reflectToAttr": false,
+          "docs": "Exact block-start content inset, overriding the responsive default when provided.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "contentSurface",
           "type": "\"primary\" | \"secondary\"",
@@ -19770,6 +19918,35 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "scrollCompaction",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "scroll-compaction",
+          "reflectToAttr": false,
+          "docs": "Allow roomy automatic headers to compact as the page scrolls.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -23013,6 +23190,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "fitViewport",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-viewport",
+          "reflectToAttr": false,
+          "docs": "Fit the complete table composition to its nearest vertical scrollport.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "grouping",
           "type": "TableGroupingState | null",
@@ -23115,6 +23321,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "height",
+          "type": "number | string | undefined",
+          "complexType": {
+            "original": "string | number | undefined",
+            "resolved": "number | string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "height",
+          "reflectToAttr": false,
+          "docs": "Fixed height for the complete header, table frame, and footer composition.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "lazyLoading",
           "type": "boolean",
@@ -23755,6 +23990,70 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "viewportInsetBlockEnd",
+          "type": "number | string",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "viewport-inset-block-end",
+          "reflectToAttr": false,
+          "docs": "Reserved space below a viewport-fitted table.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "viewportInsetBlockStart",
+          "type": "number | string",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "viewport-inset-block-start",
+          "reflectToAttr": false,
+          "docs": "Reserved space above a viewport-fitted table once surrounding chrome is compact.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -27037,7 +27336,7 @@
       "path": "src/wc/components/ShellApp/shell-app-types.ts"
     },
     "src/wc/components/ShellApp/shell-app-types.ts::ShellPageChromeConfig": {
-      "declaration": "export interface ShellPageChromeConfig {\n  heading?: string;\n  /** Desktop/tablet route-navigation heading when it differs from the page h1. */\n  routeHeading?: string;\n  description?: string;\n  headingLevel?: 'h1' | 'h2';\n  tabs?: BarNavTab[];\n  value?: string;\n  basePath?: string;\n  currentUrl?: string;\n  sectionsAriaLabel?: string;\n  subsections?: BarNavTab[];\n  subvalue?: string;\n  subsectionsAriaLabel?: string;\n  showBack?: boolean;\n  backAriaLabel?: string;\n  backIcon?: string;\n  backLabel?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  breadcrumbAriaLabel?: string;\n  primaryAction?: BarTitlePrimaryAction | null;\n  actions?: BarTitleActionItem[];\n  /** Icon actions rendered in the mobile header's trailing lane. */\n  mobileActions?: PanelToolsHeaderAction[];\n  actionsAriaLabel?: string;\n  tone?: MobileHeaderTone;\n  contentInset?: ShellPageContentInset;\n  /** Canvas surface painted by ShellPage around and beneath routed content. */\n  contentSurface?: ShellPageContentSurface;\n}",
+      "declaration": "export interface ShellPageChromeConfig {\n  heading?: string;\n  /** Desktop/tablet route-navigation heading when it differs from the page h1. */\n  routeHeading?: string;\n  description?: string;\n  headingLevel?: 'h1' | 'h2';\n  tabs?: BarNavTab[];\n  value?: string;\n  basePath?: string;\n  currentUrl?: string;\n  sectionsAriaLabel?: string;\n  subsections?: BarNavTab[];\n  subvalue?: string;\n  subsectionsAriaLabel?: string;\n  showBack?: boolean;\n  backAriaLabel?: string;\n  backIcon?: string;\n  backLabel?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  breadcrumbAriaLabel?: string;\n  primaryAction?: BarTitlePrimaryAction | null;\n  actions?: BarTitleActionItem[];\n  /** Icon actions rendered in the mobile header's trailing lane. */\n  mobileActions?: PanelToolsHeaderAction[];\n  actionsAriaLabel?: string;\n  tone?: MobileHeaderTone;\n  contentInset?: ShellPageContentInset;\n  /** Remove only the content gutter adjacent to the page header. */\n  contentInsetBlockStart?: ShellPageContentInset;\n  /** Exact roomy block-start content inset when the responsive default is not appropriate. */\n  contentInsetBlockStartSize?: string;\n  /** Exact block-start content inset while page-title capacity is compact or constrained. */\n  compactContentInsetBlockStartSize?: string;\n  /** Allow a roomy page title to compact in response to page scrolling. */\n  scrollCompaction?: boolean;\n  /** Draw the divider beneath the desktop/tablet page title. */\n  showHeaderDivider?: boolean;\n  /** Override divider visibility while the page title is compact or constrained. */\n  showCompactHeaderDivider?: boolean;\n  /** Canvas surface painted by ShellPage around and beneath routed content. */\n  contentSurface?: ShellPageContentSurface;\n}",
       "docstring": "Route-owned page chrome. The same data drives desktop BarNav/BarTitle and\nthe intentionally different mobile MobileHeader presentation.",
       "path": "src/wc/components/ShellApp/shell-app-types.ts"
     },

package/dist/lib/components/ShellApp/shell-app-types.d.ts

@@ -69,6 +69,18 @@ export interface ShellPageChromeConfig {
     actionsAriaLabel?: string;
     tone?: MobileHeaderTone;
     contentInset?: ShellPageContentInset;
+    /** Remove only the content gutter adjacent to the page header. */
+    contentInsetBlockStart?: ShellPageContentInset;
+    /** Exact roomy block-start content inset when the responsive default is not appropriate. */
+    contentInsetBlockStartSize?: string;
+    /** Exact block-start content inset while page-title capacity is compact or constrained. */
+    compactContentInsetBlockStartSize?: string;
+    /** Allow a roomy page title to compact in response to page scrolling. */
+    scrollCompaction?: boolean;
+    /** Draw the divider beneath the desktop/tablet page title. */
+    showHeaderDivider?: boolean;
+    /** Override divider visibility while the page title is compact or constrained. */
+    showCompactHeaderDivider?: boolean;
     /** Canvas surface painted by ShellPage around and beneath routed content. */
     contentSurface?: ShellPageContentSurface;
 }

package/dist/lib/utils/index.js

@@ -28,15 +28,50 @@ function getProbeElement() {
   }
   return probeEl;
 }
+function applyContextVariables(probe, cssLength, context) {
+  const contextStyle = getComputedStyle(context);
+  const pending = [...cssLength.matchAll(/var\(\s*(--[\w-]+)/g)].map((match) => match[1]);
+  const visited = /* @__PURE__ */ new Set();
+  const previous = [];
+  while (pending.length > 0) {
+    const name = pending.shift();
+    if (!name || visited.has(name)) continue;
+    visited.add(name);
+    const value = contextStyle.getPropertyValue(name).trim();
+    if (!value) continue;
+    previous.push({
+      name,
+      value: probe.style.getPropertyValue(name),
+      priority: probe.style.getPropertyPriority(name)
+    });
+    probe.style.setProperty(name, value);
+    for (const match of value.matchAll(/var\(\s*(--[\w-]+)/g)) pending.push(match[1]);
+  }
+  return previous;
+}
+function restoreProbeVariables(probe, previous) {
+  for (const { name, value, priority } of previous) {
+    if (value) probe.style.setProperty(name, value, priority);
+    else probe.style.removeProperty(name);
+  }
+}
 function clearCssLengthPxCache() {
   lengthPxCache.clear();
 }
-function resolveCssLengthPx(value, fallback) {
+function resolveCssLengthPx(value, fallback, context) {
   const resolved = value === void 0 || value === null || value === "" ? fallback : value;
   if (typeof resolved === "number") return resolved;
   const trimmed = resolved.trim();
-  if (!trimmed) return resolveCssLengthPx(fallback, 0);
-  const cached = lengthPxCache.get(trimmed);
+  if (!trimmed) return resolveCssLengthPx(fallback, 0, context);
+  const scopedProperty = context ? trimmed.match(/^var\(\s*(--[\w-]+)/)?.[1] : void 0;
+  if (context && scopedProperty) {
+    const scopedValue = getComputedStyle(context).getPropertyValue(scopedProperty).trim();
+    if (scopedValue && scopedValue !== trimmed) {
+      return resolveCssLengthPx(scopedValue, fallback, context);
+    }
+  }
+  const contextDependent = !!context && trimmed.includes("var(");
+  const cached = contextDependent ? void 0 : lengthPxCache.get(trimmed);
   if (cached !== void 0) return cached;
   if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
     const n = Number(trimmed);
@@ -54,10 +89,12 @@ function resolveCssLengthPx(value, fallback) {
   if (!probe) {
     return typeof fallback === "number" ? fallback : 0;
   }
+  const previousVariables = context ? applyContextVariables(probe, cssLength, context) : [];
   probe.style.width = cssLength;
   const px = probe.getBoundingClientRect().width;
   probe.style.width = "";
-  if (px !== 0 || !cssLength.includes("var(")) {
+  restoreProbeVariables(probe, previousVariables);
+  if (!contextDependent && (px !== 0 || !cssLength.includes("var("))) {
     lengthPxCache.set(trimmed, px);
   }
   return px;