@ds-mo/ui 7.0.0 → 8.0.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-15T18:43:58",
+  "timestamp": "2026-07-15T20:57:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -23,8 +23,8 @@
             "references": {
               "ShellGradientPreset": {
                 "location": "import",
-                "path": "../../nav/shell-gradient-presets",
-                "id": "src/wc/nav/shell-gradient-presets.ts::ShellGradientPreset",
+                "path": "../../shell/shell-gradient-presets",
+                "id": "src/wc/shell/shell-gradient-presets.ts::ShellGradientPreset",
                 "referenceLocation": "ShellGradientPreset"
               }
             }
@@ -76,8 +76,8 @@
             "references": {
               "NavChromeStyle": {
                 "location": "import",
-                "path": "../../nav/nav-chrome",
-                "id": "src/wc/nav/nav-chrome.ts::NavChromeStyle",
+                "path": "../../shell/nav-chrome",
+                "id": "src/wc/shell/nav-chrome.ts::NavChromeStyle",
                 "referenceLocation": "NavChromeStyle"
               }
             }
@@ -259,7 +259,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Accessible label. Defaults to the count as a string.",
+          "docs": "Contextual supplemental text. Omit when the owner hides the badge from assistive technology.",
           "docsTags": [],
           "values": [
             {
@@ -285,7 +285,7 @@
           "mutable": false,
           "attr": "max",
           "reflectToAttr": false,
-          "docs": "Highest count shown before compacting to \"+\".",
+          "docs": "Highest count shown before compacting to \"{max}+\".",
           "docsTags": [
             {
               "name": "default",
@@ -305,10 +305,10 @@
         },
         {
           "name": "surface",
-          "type": "\"always-dark\" | \"bold\" | \"default\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\"",
+          "type": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\" | \"translucent\"",
           "complexType": {
             "original": "BadgeSurface",
-            "resolved": "\"always-dark\" | \"bold\" | \"default\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\"",
+            "resolved": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\" | \"translucent\"",
             "references": {
               "BadgeSurface": {
                 "location": "local",
@@ -320,14 +320,14 @@
           "mutable": false,
           "attr": "surface",
           "reflectToAttr": false,
-          "docs": "Surface context for the ring around dots.",
+          "docs": "Immediate backing surface matched by the ring around either variant.",
           "docsTags": [
             {
               "name": "default",
-              "text": "'default'"
+              "text": "'primary'"
             }
           ],
-          "default": "'default'",
+          "default": "'primary'",
           "values": [
             {
               "value": "always-dark",
@@ -338,7 +338,15 @@
               "type": "string"
             },
             {
-              "value": "default",
+              "value": "faint",
+              "type": "string"
+            },
+            {
+              "value": "inverted",
+              "type": "string"
+            },
+            {
+              "value": "media",
               "type": "string"
             },
             {
@@ -360,6 +368,10 @@
             {
               "value": "strong",
               "type": "string"
+            },
+            {
+              "value": "translucent",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -878,8 +890,8 @@
             "references": {
               "NavChromeStyle": {
                 "location": "import",
-                "path": "../../nav/nav-chrome",
-                "id": "src/wc/nav/nav-chrome.ts::NavChromeStyle",
+                "path": "../../shell/nav-chrome",
+                "id": "src/wc/shell/nav-chrome.ts::NavChromeStyle",
                 "referenceLocation": "NavChromeStyle"
               }
             }
@@ -1079,7 +1091,7 @@
           "mutable": false,
           "attr": "aria-label",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Accessible name override. Required for icon-only buttons.",
           "docsTags": [
             {
               "name": "default",
@@ -1616,7 +1628,7 @@
           "mutable": false,
           "attr": "aria-label",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Accessible name override. Required for icon-only buttons.",
           "docsTags": [
             {
               "name": "default",
@@ -4268,6 +4280,71 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "background",
+          "type": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+          "complexType": {
+            "original": "DividerBackground | undefined",
+            "resolved": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+            "references": {
+              "DividerBackground": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/Divider/Divider.tsx",
+                "id": "src/wc/components/Divider/Divider.tsx::DividerBackground"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "background",
+          "reflectToAttr": false,
+          "docs": "Actual parent surface context. Omit on primary and secondary surfaces.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "always-dark",
+              "type": "string"
+            },
+            {
+              "value": "bold",
+              "type": "string"
+            },
+            {
+              "value": "faint",
+              "type": "string"
+            },
+            {
+              "value": "inverted",
+              "type": "string"
+            },
+            {
+              "value": "media",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "navigation",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "translucent",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "inset",
           "type": "\"none\" | \"space-000\" | \"space-012\" | \"space-025\" | \"space-050\" | \"space-075\" | \"space-100\" | \"space-125\" | \"space-150\" | \"space-175\" | \"space-200\" | \"space-250\" | \"space-300\" | \"space-400\" | \"space-600\" | \"space-800\" | string & {}",
@@ -4478,74 +4555,6 @@
           "required": false,
           "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": "DividerSurface",
-            "resolved": "\"always-dark\" | \"default\" | \"inverted\" | \"media\" | \"navigation\" | \"on-bold-background\" | \"on-medium-background\" | \"on-strong-background\" | \"on-translucent-background\"",
-            "references": {
-              "DividerSurface": {
-                "location": "local",
-                "path": "/home/runner/work/compomo/compomo/src/wc/components/Divider/Divider.tsx",
-                "id": "src/wc/components/Divider/Divider.tsx::DividerSurface"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "surface",
-          "reflectToAttr": false,
-          "docs": "Surface context so the divider uses the right TokoMo divider token.",
-          "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
         }
       ],
       "methods": [],
@@ -4802,10 +4811,10 @@
       "props": [
         {
           "name": "color",
-          "type": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+          "type": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
           "complexType": {
-            "original": "IconColor | undefined",
-            "resolved": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+            "original": "IconColor",
+            "resolved": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
             "references": {
               "IconColor": {
                 "location": "local",
@@ -4818,7 +4827,13 @@
           "attr": "color",
           "reflectToAttr": false,
           "docs": "Semantic foreground color token, or a raw CSS var reference.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'inherit'"
+            }
+          ],
+          "default": "'inherit'",
           "values": [
             {
               "value": "ai",
@@ -4994,38 +5009,6 @@
             },
             {
               "type": "`var(--${string})`"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "flag",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "flag",
-          "reflectToAttr": false,
-          "docs": "Set `true` to look up from the flag icon set instead of the system icon set.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
             }
           ],
           "optional": false,
@@ -5070,7 +5053,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Name of the system icon (e.g. `\"Gear\"`, `\"ArrowRight\"`) or flag (e.g. `\"US\"`)",
+          "docs": "Exact canonical IcoMo export name, including the `Flag` prefix for flags.",
           "docsTags": [
             {
               "name": "default",
@@ -5162,7 +5145,8 @@
         "ds-chip",
         "ds-panel-nav",
         "ds-select",
-        "ds-tab-group"
+        "ds-tab-group",
+        "ds-tag"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -5183,6 +5167,9 @@
         ],
         "ds-tab-group": [
           "ds-icon"
+        ],
+        "ds-tag": [
+          "ds-icon"
         ]
       }
     },
@@ -5750,10 +5737,10 @@
       "props": [
         {
           "name": "color",
-          "type": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+          "type": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
           "complexType": {
-            "original": "LoaderColor | undefined",
-            "resolved": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+            "original": "LoaderColor",
+            "resolved": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
             "references": {
               "LoaderColor": {
                 "location": "local",
@@ -5766,7 +5753,13 @@
           "attr": "color",
           "reflectToAttr": false,
           "docs": "Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'inherit'"
+            }
+          ],
+          "default": "'inherit'",
           "values": [
             {
               "value": "ai",
@@ -5942,9 +5935,6 @@
             },
             {
               "type": "`var(--${string})`"
-            },
-            {
-              "type": "undefined"
             }
           ],
           "optional": false,
@@ -6518,8 +6508,8 @@
             "references": {
               "ShellGradientPreset": {
                 "location": "import",
-                "path": "../../nav/shell-gradient-presets",
-                "id": "src/wc/nav/shell-gradient-presets.ts::ShellGradientPreset",
+                "path": "../../shell/shell-gradient-presets",
+                "id": "src/wc/shell/shell-gradient-presets.ts::ShellGradientPreset",
                 "referenceLocation": "ShellGradientPreset"
               }
             }
@@ -7337,8 +7327,8 @@
             "references": {
               "NavChromeStyle": {
                 "location": "import",
-                "path": "../../nav/nav-chrome",
-                "id": "src/wc/nav/nav-chrome.ts::NavChromeStyle",
+                "path": "../../shell/nav-chrome",
+                "id": "src/wc/shell/nav-chrome.ts::NavChromeStyle",
                 "referenceLocation": "NavChromeStyle"
               }
             }
@@ -7591,8 +7581,8 @@
             "references": {
               "ChromeTransitionDetail": {
                 "location": "import",
-                "path": "../../nav/chrome-transition",
-                "id": "src/wc/nav/chrome-transition.ts::ChromeTransitionDetail",
+                "path": "../../shell/chrome-transition",
+                "id": "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail",
                 "referenceLocation": "ChromeTransitionDetail"
               }
             }
@@ -7612,8 +7602,8 @@
             "references": {
               "ChromeTransitionDetail": {
                 "location": "import",
-                "path": "../../nav/chrome-transition",
-                "id": "src/wc/nav/chrome-transition.ts::ChromeTransitionDetail",
+                "path": "../../shell/chrome-transition",
+                "id": "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail",
                 "referenceLocation": "ChromeTransitionDetail"
               }
             }
@@ -8276,8 +8266,8 @@
             "references": {
               "ChromeTransitionDetail": {
                 "location": "import",
-                "path": "../../nav/chrome-transition",
-                "id": "src/wc/nav/chrome-transition.ts::ChromeTransitionDetail",
+                "path": "../../shell/chrome-transition",
+                "id": "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail",
                 "referenceLocation": "ChromeTransitionDetail"
               }
             }
@@ -8297,8 +8287,8 @@
             "references": {
               "ChromeTransitionDetail": {
                 "location": "import",
-                "path": "../../nav/chrome-transition",
-                "id": "src/wc/nav/chrome-transition.ts::ChromeTransitionDetail",
+                "path": "../../shell/chrome-transition",
+                "id": "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail",
                 "referenceLocation": "ChromeTransitionDetail"
               }
             }
@@ -9540,6 +9530,71 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "background",
+          "type": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+          "complexType": {
+            "original": "SkeletonBackground | undefined",
+            "resolved": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+            "references": {
+              "SkeletonBackground": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/Skeleton/Skeleton.tsx",
+                "id": "src/wc/components/Skeleton/Skeleton.tsx::SkeletonBackground"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "background",
+          "reflectToAttr": false,
+          "docs": "Actual parent surface context. Omit on primary and secondary surfaces.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "always-dark",
+              "type": "string"
+            },
+            {
+              "value": "bold",
+              "type": "string"
+            },
+            {
+              "value": "faint",
+              "type": "string"
+            },
+            {
+              "value": "inverted",
+              "type": "string"
+            },
+            {
+              "value": "media",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "navigation",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "translucent",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "controlSize",
           "type": "\"md\" | \"sm\" | \"xs\"",
@@ -9704,74 +9759,6 @@
           "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\"",
@@ -11281,6 +11268,32 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "ariaControls",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "aria-controls",
+          "reflectToAttr": false,
+          "docs": "ID of the menu controlled by an interactive Tag.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "contrast",
           "type": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
@@ -11329,6 +11342,64 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "expanded",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "expanded",
+          "reflectToAttr": false,
+          "docs": "Controlled open state for the menu triggered by an interactive Tag.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "Canonical icon name rendered before the visible label.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "intent",
           "type": "\"ai\" | \"brand\" | \"caution\" | \"negative\" | \"neutral\" | \"positive\" | \"warning\"",
@@ -11389,6 +11460,64 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "interactive",
+          "reflectToAttr": false,
+          "docs": "Render a menu-trigger button with a fixed ChevronUpDown suffix.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "isInactive",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "is-inactive",
+          "reflectToAttr": false,
+          "docs": "Disable an interactive Tag and apply the shared inactive treatment.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -11516,7 +11645,27 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "MouseEvent",
+            "resolved": "MouseEvent",
+            "references": {
+              "MouseEvent": {
+                "location": "global",
+                "id": "global::MouseEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when the interactive Tag button is activated.",
+          "docsTags": []
+        }
+      ],
       "listeners": [],
       "styles": [],
       "slots": [],
@@ -11524,10 +11673,12 @@
       "states": [],
       "dependents": [],
       "dependencies": [
+        "ds-icon",
         "ds-text"
       ],
       "dependencyGraph": {
         "ds-tag": [
+          "ds-icon",
           "ds-text"
         ]
       }
@@ -11657,10 +11808,10 @@
         },
         {
           "name": "color",
-          "type": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+          "type": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})`",
           "complexType": {
-            "original": "TextColor | undefined",
-            "resolved": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})` | undefined",
+            "original": "TextColor",
+            "resolved": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})`",
             "references": {
               "TextColor": {
                 "location": "import",
@@ -11674,7 +11825,13 @@
           "attr": "color",
           "reflectToAttr": false,
           "docs": "",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'inherit'"
+            }
+          ],
+          "default": "'inherit'",
           "values": [
             {
               "value": "ai",
@@ -11726,9 +11883,6 @@
             },
             {
               "type": "`var(--${string})`"
-            },
-            {
-              "type": "undefined"
             }
           ],
           "optional": false,
@@ -11905,10 +12059,10 @@
         },
         {
           "name": "lineTruncation",
-          "type": "\"none\" | 1 | 2 | 3 | 4 | 5",
+          "type": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"none\" | 1 | 2 | 3 | 4 | 5",
           "complexType": {
             "original": "LineTruncation",
-            "resolved": "\"none\" | 1 | 2 | 3 | 4 | 5",
+            "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"none\" | 1 | 2 | 3 | 4 | 5",
             "references": {
               "LineTruncation": {
                 "location": "import",
@@ -11930,6 +12084,26 @@
           ],
           "default": "'none'",
           "values": [
+            {
+              "value": "1",
+              "type": "string"
+            },
+            {
+              "value": "2",
+              "type": "string"
+            },
+            {
+              "value": "3",
+              "type": "string"
+            },
+            {
+              "value": "4",
+              "type": "string"
+            },
+            {
+              "value": "5",
+              "type": "string"
+            },
             {
               "value": "none",
               "type": "string"
@@ -12788,7 +12962,7 @@
       "path": "src/wc/components/Badge/Badge.tsx"
     },
     "src/wc/components/Badge/Badge.tsx::BadgeSurface": {
-      "declaration": "export type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';",
+      "declaration": "export type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';",
       "docstring": "",
       "path": "src/wc/components/Badge/Badge.tsx"
     },
@@ -12892,8 +13066,8 @@
       "docstring": "",
       "path": "src/wc/components/Divider/Divider.tsx"
     },
-    "src/wc/components/Divider/Divider.tsx::DividerSurface": {
-      "declaration": "export type DividerSurface =\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';",
+    "src/wc/components/Divider/Divider.tsx::DividerBackground": {
+      "declaration": "export type DividerBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';",
       "docstring": "",
       "path": "src/wc/components/Divider/Divider.tsx"
     },
@@ -12987,8 +13161,8 @@
       "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';",
+    "src/wc/components/Skeleton/Skeleton.tsx::SkeletonBackground": {
+      "declaration": "export type SkeletonBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';",
       "docstring": "",
       "path": "src/wc/components/Skeleton/Skeleton.tsx"
     },
@@ -13048,7 +13222,7 @@
       "path": "src/wc/components/Text/text-types.ts"
     },
     "src/wc/components/Text/text-types.ts::LineTruncation": {
-      "declaration": "export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';",
+      "declaration": "export type LineTruncation = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | 'none';",
       "docstring": "",
       "path": "src/wc/components/Text/text-types.ts"
     },
@@ -13082,15 +13256,15 @@
       "docstring": "",
       "path": "src/wc/components/Tooltip/Tooltip.tsx"
     },
-    "src/wc/nav/nav-chrome.ts::NavChromeStyle": {
+    "src/wc/shell/nav-chrome.ts::NavChromeStyle": {
       "declaration": "export type NavChromeStyle = 'dashboard' | 'settings';",
       "docstring": "",
-      "path": "src/wc/nav/nav-chrome.ts"
+      "path": "src/wc/shell/nav-chrome.ts"
     },
-    "src/wc/nav/shell-gradient-presets.ts::ShellGradientPreset": {
+    "src/wc/shell/shell-gradient-presets.ts::ShellGradientPreset": {
       "declaration": "export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';",
       "docstring": "",
-      "path": "src/wc/nav/shell-gradient-presets.ts"
+      "path": "src/wc/shell/shell-gradient-presets.ts"
     },
     "src/wc/components/BarNav/bar-nav-types.ts::BarNavTab": {
       "declaration": "export type TabItem = TabItemTab | TabItemDivider;",
@@ -13137,10 +13311,10 @@
       "docstring": "",
       "path": "src/wc/components/PanelNav/panel-nav-types.ts"
     },
-    "src/wc/nav/chrome-transition.ts::ChromeTransitionDetail": {
+    "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail": {
       "declaration": "export interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}",
       "docstring": "",
-      "path": "src/wc/nav/chrome-transition.ts"
+      "path": "src/wc/shell/chrome-transition.ts"
     },
     "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavUserActionDetail": {
       "declaration": "export interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n  /** Recommended `ds-menu` placement — spread onto external user menu instance. */\n  menuPlacement: MenuPlacement;\n}",