@ds-mo/ui 4.1.2 → 5.0.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-12T22:30:27",
+  "timestamp": "2026-07-13T17:34:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -9357,27 +9357,43 @@
       "usage": {},
       "props": [
         {
-          "name": "height",
-          "type": "number | string | undefined",
+          "name": "controlSize",
+          "type": "\"md\" | \"sm\" | \"xs\"",
           "complexType": {
-            "original": "string | number | undefined",
-            "resolved": "number | string | undefined",
-            "references": {}
+            "original": "ControlSize",
+            "resolved": "\"md\" | \"sm\" | \"xs\"",
+            "references": {
+              "ControlSize": {
+                "location": "import",
+                "path": "../../utils/control-text",
+                "id": "src/wc/utils/control-text.ts::ControlSize",
+                "referenceLocation": "ControlSize"
+              }
+            }
           },
           "mutable": false,
-          "attr": "height",
+          "attr": "control-size",
           "reflectToAttr": false,
-          "docs": "Height as a CSS value string or number (px).",
-          "docsTags": [],
+          "docs": "Shared control-density size whose height defines the control canvas.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'md'"
+            }
+          ],
+          "default": "'md'",
           "values": [
             {
-              "type": "number"
+              "value": "md",
+              "type": "string"
             },
             {
+              "value": "sm",
               "type": "string"
             },
             {
-              "type": "undefined"
+              "value": "xs",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -9386,27 +9402,88 @@
           "setter": false
         },
         {
-          "name": "lines",
-          "type": "number",
+          "name": "iconSize",
+          "type": "\"2xl\" | \"3xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
           "complexType": {
-            "original": "number",
-            "resolved": "number",
+            "original": "IconSize",
+            "resolved": "\"2xl\" | \"3xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+            "references": {
+              "IconSize": {
+                "location": "import",
+                "path": "../Icon/Icon",
+                "id": "src/wc/components/Icon/Icon.tsx::IconSize",
+                "referenceLocation": "IconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "icon-size",
+          "reflectToAttr": false,
+          "docs": "Iconography token whose square canvas defines the icon canvas.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'md'"
+            }
+          ],
+          "default": "'md'",
+          "values": [
+            {
+              "value": "2xl",
+              "type": "string"
+            },
+            {
+              "value": "3xl",
+              "type": "string"
+            },
+            {
+              "value": "lg",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "sm",
+              "type": "string"
+            },
+            {
+              "value": "xl",
+              "type": "string"
+            },
+            {
+              "value": "xs",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "rounded",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
-          "attr": "lines",
+          "attr": "rounded",
           "reflectToAttr": false,
-          "docs": "Number of text lines. Only used when variant is 'text'.",
+          "docs": "Round icon skeletons into circles and control skeletons into pills. Ignored for text.",
           "docsTags": [
             {
               "name": "default",
-              "text": "1"
+              "text": "false"
             }
           ],
-          "default": "1",
+          "default": "false",
           "values": [
             {
-              "type": "number"
+              "type": "boolean"
             }
           ],
           "optional": false,
@@ -9443,12 +9520,149 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "surface",
+          "type": "\"always-dark\" | \"default\" | \"inverted\" | \"media\" | \"navigation\" | \"on-bold-background\" | \"on-medium-background\" | \"on-strong-background\" | \"on-translucent-background\"",
+          "complexType": {
+            "original": "SkeletonSurface",
+            "resolved": "\"always-dark\" | \"default\" | \"inverted\" | \"media\" | \"navigation\" | \"on-bold-background\" | \"on-medium-background\" | \"on-strong-background\" | \"on-translucent-background\"",
+            "references": {
+              "SkeletonSurface": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/Skeleton/Skeleton.tsx",
+                "id": "src/wc/components/Skeleton/Skeleton.tsx::SkeletonSurface"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "surface",
+          "reflectToAttr": false,
+          "docs": "Surface context used to select the matching foreground base and shimmer tokens.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "always-dark",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "inverted",
+              "type": "string"
+            },
+            {
+              "value": "media",
+              "type": "string"
+            },
+            {
+              "value": "navigation",
+              "type": "string"
+            },
+            {
+              "value": "on-bold-background",
+              "type": "string"
+            },
+            {
+              "value": "on-medium-background",
+              "type": "string"
+            },
+            {
+              "value": "on-strong-background",
+              "type": "string"
+            },
+            {
+              "value": "on-translucent-background",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "textVariant",
+          "type": "\"text-body-large\" | \"text-body-medium\" | \"text-body-small\" | \"text-caption\" | \"text-display-medium\" | \"text-display-small\" | \"text-title-large\" | \"text-title-medium\" | \"text-title-small\"",
+          "complexType": {
+            "original": "TextVariant",
+            "resolved": "\"text-body-large\" | \"text-body-medium\" | \"text-body-small\" | \"text-caption\" | \"text-display-medium\" | \"text-display-small\" | \"text-title-large\" | \"text-title-medium\" | \"text-title-small\"",
+            "references": {
+              "TextVariant": {
+                "location": "import",
+                "path": "../Text/text-types",
+                "id": "src/wc/components/Text/text-types.ts::TextVariant",
+                "referenceLocation": "TextVariant"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "text-variant",
+          "reflectToAttr": false,
+          "docs": "Text metric recipe whose line-height defines the text canvas.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'text-body-medium'"
+            }
+          ],
+          "default": "'text-body-medium'",
+          "values": [
+            {
+              "value": "text-body-large",
+              "type": "string"
+            },
+            {
+              "value": "text-body-medium",
+              "type": "string"
+            },
+            {
+              "value": "text-body-small",
+              "type": "string"
+            },
+            {
+              "value": "text-caption",
+              "type": "string"
+            },
+            {
+              "value": "text-display-medium",
+              "type": "string"
+            },
+            {
+              "value": "text-display-small",
+              "type": "string"
+            },
+            {
+              "value": "text-title-large",
+              "type": "string"
+            },
+            {
+              "value": "text-title-medium",
+              "type": "string"
+            },
+            {
+              "value": "text-title-small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "variant",
-          "type": "\"circular\" | \"rectangular\" | \"text\"",
+          "type": "\"control\" | \"icon\" | \"text\"",
           "complexType": {
             "original": "SkeletonVariant",
-            "resolved": "\"circular\" | \"rectangular\" | \"text\"",
+            "resolved": "\"control\" | \"icon\" | \"text\"",
             "references": {
               "SkeletonVariant": {
                 "location": "local",
@@ -9470,11 +9684,11 @@
           "default": "'text'",
           "values": [
             {
-              "value": "circular",
+              "value": "control",
               "type": "string"
             },
             {
-              "value": "rectangular",
+              "value": "icon",
               "type": "string"
             },
             {
@@ -9498,7 +9712,7 @@
           "mutable": false,
           "attr": "width",
           "reflectToAttr": false,
-          "docs": "Width as a CSS value string (e.g. '200px', '100%') or number (px).",
+          "docs": "Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons.",
           "docsTags": [],
           "values": [
             {
@@ -9524,9 +9738,15 @@
       "slots": [],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "ds-table"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "ds-table": [
+          "ds-skeleton"
+        ]
+      }
     },
     {
       "filePath": "src/wc/components/Slider/Slider.tsx",
@@ -10905,11 +11125,13 @@
       "states": [],
       "dependents": [],
       "dependencies": [
-        "ds-text"
+        "ds-text",
+        "ds-skeleton"
       ],
       "dependencyGraph": {
         "ds-table": [
-          "ds-text"
+          "ds-text",
+          "ds-skeleton"
         ]
       }
     },
@@ -11600,6 +11822,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "shimmer",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "shimmer",
+          "reflectToAttr": false,
+          "docs": "Animate the visible glyphs with the shared loading shimmer treatment.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "textId",
           "type": "string | undefined",
@@ -12819,7 +13070,22 @@
       "path": "src/wc/components/Select/Select.tsx"
     },
     "src/wc/components/Skeleton/Skeleton.tsx::SkeletonVariant": {
-      "declaration": "export type SkeletonVariant = 'text' | 'circular' | 'rectangular';",
+      "declaration": "export type SkeletonVariant = 'text' | 'icon' | 'control';",
+      "docstring": "",
+      "path": "src/wc/components/Skeleton/Skeleton.tsx"
+    },
+    "src/wc/components/Text/text-types.ts::TextVariant": {
+      "declaration": "export type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-medium'\n  | 'text-body-small'\n  | 'text-caption';",
+      "docstring": "",
+      "path": "src/wc/components/Text/text-types.ts"
+    },
+    "src/wc/utils/control-text.ts::ControlSize": {
+      "declaration": "export type ControlSize = 'md' | 'sm' | 'xs';",
+      "docstring": "",
+      "path": "src/wc/utils/control-text.ts"
+    },
+    "src/wc/components/Skeleton/Skeleton.tsx::SkeletonSurface": {
+      "declaration": "export type SkeletonSurface =\n  | 'default'\n  | 'on-bold-background'\n  | 'on-strong-background'\n  | 'on-medium-background'\n  | 'on-translucent-background'\n  | 'navigation'\n  | 'media'\n  | 'always-dark'\n  | 'inverted';",
       "docstring": "",
       "path": "src/wc/components/Skeleton/Skeleton.tsx"
     },
@@ -12863,11 +13129,6 @@
       "docstring": "",
       "path": "src/wc/components/Tag/Tag.tsx"
     },
-    "src/wc/components/Text/text-types.ts::TextVariant": {
-      "declaration": "export type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-medium'\n  | 'text-body-small'\n  | 'text-caption';",
-      "docstring": "",
-      "path": "src/wc/components/Text/text-types.ts"
-    },
     "src/wc/components/Text/text-types.ts::TextColor": {
       "declaration": "export type TextColor = TextColorToken | `var(--${string})`;",
       "docstring": "",

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

@@ -1,16 +1,25 @@
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+import type { IconSize } from '../Icon/Icon';
+import type { TextVariant } from '../Text/text-types';
+import type { ControlSize } from '../../utils/control-text';
+export type SkeletonVariant = 'text' | 'icon' | 'control';
+export type SkeletonSurface = 'default' | 'on-bold-background' | 'on-strong-background' | 'on-medium-background' | 'on-translucent-background' | 'navigation' | 'media' | 'always-dark' | 'inverted';
 export declare class Skeleton {
     variant: SkeletonVariant;
-    /** Width as a CSS value string (e.g. '200px', '100%') or number (px). */
+    /** Text metric recipe whose line-height defines the text canvas. */
+    textVariant: TextVariant;
+    /** Iconography token whose square canvas defines the icon canvas. */
+    iconSize: IconSize;
+    /** Shared control-density size whose height defines the control canvas. */
+    controlSize: ControlSize;
+    /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */
     width: string | number | undefined;
-    /** Height as a CSS value string or number (px). */
-    height: string | number | undefined;
-    /** Number of text lines. Only used when variant is 'text'. */
-    lines: number;
+    /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */
+    rounded: boolean;
     /** Whether to show the shimmer animation. */
     shimmer: boolean;
+    /** Surface context used to select the matching foreground base and shimmer tokens. */
+    surface: SkeletonSurface;
     private get widthCss();
-    private get heightCss();
     render(): any;
 }
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,2 +1,2 @@
-export type { SkeletonVariant } from './Skeleton';
+export type { SkeletonSurface, SkeletonVariant } from './Skeleton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -11,6 +11,8 @@ export declare class Text {
     color: TextColor | undefined;
     decoration: TextDecoration | undefined;
     italic: boolean;
+    /** Animate the visible glyphs with the shared loading shimmer treatment. */
+    shimmer: boolean;
     align: TextAlign | undefined;
     lineTruncation: LineTruncation;
     wrap: TextWrap | undefined;

package/dist/types/components.d.ts

@@ -32,13 +32,15 @@ import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-import { SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
+import { IconSize as IconSize1 } from "./components/Icon/Icon";
+import { ControlSize } from "./utils/control-text";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export { NavChromeStyle } from "./nav/nav-chrome";
 export { ShellGradientPreset } from "./nav/shell-gradient-presets";
@@ -67,13 +69,15 @@ export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-export { SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
+export { IconSize as IconSize1 } from "./components/Icon/Icon";
+export { ControlSize } from "./utils/control-text";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
 export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export namespace Components {
     interface DsAppShell {
@@ -1084,25 +1088,41 @@ export namespace Components {
     }
     interface DsSkeleton {
         /**
-          * Height as a CSS value string or number (px).
+          * Shared control-density size whose height defines the control canvas.
+          * @default 'md'
+         */
+        "controlSize": ControlSize;
+        /**
+          * Iconography token whose square canvas defines the icon canvas.
+          * @default 'md'
          */
-        "height": string | number | undefined;
+        "iconSize": IconSize1;
         /**
-          * Number of text lines. Only used when variant is 'text'.
-          * @default 1
+          * Round icon skeletons into circles and control skeletons into pills. Ignored for text.
+          * @default false
          */
-        "lines": number;
+        "rounded": boolean;
         /**
           * Whether to show the shimmer animation.
           * @default true
          */
         "shimmer": boolean;
+        /**
+          * Surface context used to select the matching foreground base and shimmer tokens.
+          * @default 'default'
+         */
+        "surface": SkeletonSurface;
+        /**
+          * Text metric recipe whose line-height defines the text canvas.
+          * @default 'text-body-medium'
+         */
+        "textVariant": TextVariant;
         /**
           * @default 'text'
          */
         "variant": SkeletonVariant;
         /**
-          * Width as a CSS value string (e.g. '200px', '100%') or number (px).
+          * Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons.
          */
         "width": string | number | undefined;
     }
@@ -1286,6 +1306,11 @@ export namespace Components {
           * @default 'none'
          */
         "lineTruncation": LineTruncation;
+        /**
+          * Animate the visible glyphs with the shared loading shimmer treatment.
+          * @default false
+         */
+        "shimmer": boolean;
         /**
           * Forwarded to the inner element (e.g. aria-labelledby targets).
          */
@@ -3221,25 +3246,41 @@ declare namespace LocalJSX {
     }
     interface DsSkeleton {
         /**
-          * Height as a CSS value string or number (px).
+          * Shared control-density size whose height defines the control canvas.
+          * @default 'md'
          */
-        "height"?: string | number | undefined;
+        "controlSize"?: ControlSize;
         /**
-          * Number of text lines. Only used when variant is 'text'.
-          * @default 1
+          * Iconography token whose square canvas defines the icon canvas.
+          * @default 'md'
+         */
+        "iconSize"?: IconSize1;
+        /**
+          * Round icon skeletons into circles and control skeletons into pills. Ignored for text.
+          * @default false
          */
-        "lines"?: number;
+        "rounded"?: boolean;
         /**
           * Whether to show the shimmer animation.
           * @default true
          */
         "shimmer"?: boolean;
+        /**
+          * Surface context used to select the matching foreground base and shimmer tokens.
+          * @default 'default'
+         */
+        "surface"?: SkeletonSurface;
+        /**
+          * Text metric recipe whose line-height defines the text canvas.
+          * @default 'text-body-medium'
+         */
+        "textVariant"?: TextVariant;
         /**
           * @default 'text'
          */
         "variant"?: SkeletonVariant;
         /**
-          * Width as a CSS value string (e.g. '200px', '100%') or number (px).
+          * Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons.
          */
         "width"?: string | number | undefined;
     }
@@ -3430,6 +3471,11 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "lineTruncation"?: LineTruncation;
+        /**
+          * Animate the visible glyphs with the shared loading shimmer treatment.
+          * @default false
+         */
+        "shimmer"?: boolean;
         /**
           * Forwarded to the inner element (e.g. aria-labelledby targets).
          */
@@ -3825,10 +3871,13 @@ declare namespace LocalJSX {
     }
     interface DsSkeletonAttributes {
         "variant": SkeletonVariant;
+        "textVariant": TextVariant;
+        "iconSize": IconSize;
+        "controlSize": ControlSize;
         "width": string;
-        "height": string;
-        "lines": number;
+        "rounded": boolean;
         "shimmer": boolean;
+        "surface": SkeletonSurface;
     }
     interface DsSliderAttributes {
         "value": number;
@@ -3882,6 +3931,7 @@ declare namespace LocalJSX {
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
         "italic": boolean;
+        "shimmer": boolean;
         "align": TextAlign | undefined;
         "lineTruncation": string;
         "wrap": TextWrap | undefined;