@cueplusplus/ui 0.18.2 → 0.20.0

package/manifest/components/hero.json

@@ -0,0 +1,204 @@
+{
+  "name": "Hero",
+  "slug": "hero",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The opening of a page: a title, the line under it, what to do next, and art.\n\n**The Look decides the arrangement, not this component.** The grid reads the\nstyle set's hero recipe — `style-hero-columns`, `style-hero-align` and\n`style-hero-media-order` — so the same hero opens centred under one Look, with\nits art beside the words under another, and with the art first under a third,\nwith no prop changed. Unset, it is one column, start-aligned, art after the\nwords.\n\n**No media, one column**, whatever the recipe says: two columns with nothing in\nthe second is half a page of nothing.\n\n`surface=\"inverse\"` is a theme island in dark mode, so every ink inside it —\nthe title, the lede, a button's fill and its focus ring — is the dark palette's,\nand an overlay opened from it inherits that. The island carries\n`data-cue-rescope`, where the token build re-declares the active set's and\npack's inks, so the card is right in the first frame, before hydration.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "eyebrow",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "A short line above the title, usually an `Eyebrow`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "title",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The title's first line. A hero without a title is a band; use `Band`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "titleSecond",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The title's second line, drawn in the style set's second ink: the accent, a\nmuted ink or the keyword gradient, by the Look. Omit it for a one-line title.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "level",
+      "type": "1 | 2 | 3",
+      "required": false,
+      "defaultValue": "1",
+      "description": "The title's heading level. `1`, the default, is a page's opening; `2` or `3`\nis a hero that opens a section under the page's own `<h1>`, or a preview of\none on a page about something else.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          1,
+          2,
+          3
+        ],
+        "min": 1,
+        "max": 3
+      }
+    },
+    {
+      "name": "lede",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The sentence under the title.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "actions",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The calls to action, usually a primary and a secondary `Button`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "media",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Art beside or behind the words: a `Motif`, an image, a product shot.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "stats",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "A row of figures under the lede, usually a `StatBand`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "surface",
+      "type": "\"page\" | \"inverse\"",
+      "required": false,
+      "defaultValue": "page",
+      "description": "`page` draws the hero on the page's own ground. `inverse` draws it as a dark\ncard on any page — its whole colour scope flipped, controls and focus included —\nwhich is how a report opens on a light page. Defaults to `\"page\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "page",
+          "inverse"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"section\">, \"title\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-leading-ui",
+    "--cue-radius-surface",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-space-7",
+    "--cue-style-body-face",
+    "--cue-style-body-weight",
+    "--cue-style-display",
+    "--cue-style-display-case",
+    "--cue-style-display-face",
+    "--cue-style-display-variation",
+    "--cue-style-display-weight",
+    "--cue-style-heading-ink",
+    "--cue-style-hero-align",
+    "--cue-style-hero-columns",
+    "--cue-style-hero-media-order",
+    "--cue-style-hero-title-clip-2",
+    "--cue-style-hero-title-fill-2",
+    "--cue-style-hero-title-ink-2",
+    "--cue-style-hero-title-size",
+    "--cue-style-hero-title-text-2",
+    "--cue-style-leading-display",
+    "--cue-style-lede-ink",
+    "--cue-style-lede-leading",
+    "--cue-style-lede-size",
+    "--cue-style-page-title-face",
+    "--cue-style-page-title-leading",
+    "--cue-style-page-title-size",
+    "--cue-style-page-title-tracking",
+    "--cue-style-page-title-weight",
+    "--cue-style-prose-ink",
+    "--cue-style-prose-tracking",
+    "--cue-style-tracking-display",
+    "--cue-text-title",
+    "--cue-text-ui"
+  ],
+  "summary": "The opening of a page: a title, its second line, what to do next, and art — arranged by the Look.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Hero eyebrow={<Eyebrow>Category report</Eyebrow>} title=\"Snacks & nuts\" titleSecond=\"Range review\"\n  lede=\"Every recommendation has a boundary.\" actions={<Button>Open the report</Button>} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/hero",
+  "mdUrl": "/docs/components/hero.md",
+  "jsonUrl": "/r/components/hero.json",
+  "whenToUse": [
+    "The top of a landing, product or report page, where one statement and one action lead.",
+    "A report's opening card: `surface='inverse'` with `stats` draws the dark KPI hero on a light page."
+  ],
+  "whenNotToUse": [
+    "A section further down the page. Use `Band` with a `SectionHeader`; a page has one hero.",
+    "An app screen. Apps open on their work, not a statement; use `AppShell` and `PageShell`."
+  ],
+  "commonMistakes": [
+    "Passing layout props to make it centred or two-column. The Look decides that through its style set; a hero that hard-codes it cannot be re-skinned.",
+    "Two columns with no `media`: the hero falls back to one column, by design, so supply the art or let it be one column.",
+    "Leaving the default `level={1}` on a hero drawn inside a page that already has its own `<h1>` — a preview, a tile, an embedded page. Pass `level={2}`."
+  ],
+  "specimens": [
+    {
+      "title": "Hero",
+      "group": "chrome",
+      "components": [
+        "Hero"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-7)\">\n  <Hero\n    eyebrow={<Eyebrow>Category report</Eyebrow>}\n    title=\"Snacks and nuts\"\n    titleSecond=\"Range review, week 32\"\n    lede=\"Every recommendation has a boundary, and every boundary has a reason you can read.\"\n    actions={\n      <>\n        <Button variant=\"primary\">Open the report</Button>\n        <Button>Download the deck</Button>\n      </>\n    }\n    media={<div className=\"aspect-[4/3] w-full rounded-(--radius-surface) bg-surface-2\" />}\n  />\n  <Hero\n    surface=\"inverse\"\n    eyebrow={<Eyebrow>This week</Eyebrow>}\n    title=\"Availability held at 97.4%\"\n    lede=\"The dark card is the page's choice, not the Look's: an island in dark mode, drawn in the Look's own dark palette.\"\n    stats={\n      <StatBand\n        stats={[\n          { label: \"Lines\", value: \"1,091\" },\n          { label: \"Brands\", value: \"148\" },\n          { label: \"Delisted\", value: \"37\", note: \"of 1,128\" },\n        ]}\n      />\n    }\n  />\n</div>",
+      "note": "The opening of a page. The style set decides the arrangement — one column or two, centred or start-aligned, art first or after — so this hero changes shape with the Look while its props stay put. With no media it is one column whatever the set says.",
+      "interaction": "none of its own; the actions are ordinary Buttons."
+    }
+  ]
+}

package/manifest/components/hover-card.json

@@ -146,7 +146,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -174,6 +173,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/input-group.json

@@ -87,12 +87,14 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -101,6 +103,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-glyph-ink",

package/manifest/components/input.json

@@ -84,11 +84,13 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -97,6 +99,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-input-face",

package/manifest/components/kbd.json

@@ -24,6 +24,7 @@
     "--cue-space-2",
     "--cue-style-chip-size",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-kbd-edge",
     "--cue-style-kbd-fill",
     "--cue-style-kbd-height",

package/manifest/components/keyword.json

@@ -0,0 +1,67 @@
+{
+  "name": "Keyword",
+  "slug": "keyword",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A word in a title filled with the Look's keyword gradient.\n\nReads `style-keyword-fill`, a gradient of the theme's own inks, through\n`background-clip: text`. Where the browser cannot clip a background to text, or\nin forced colours, it is the accent instead, so the word is never transparent.\nUnset, the fill is the accent itself.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The words to mark: one word or a short phrase in a title.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"span\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-style-keyword-fill"
+  ],
+  "summary": "A word in a title filled with the Look's keyword gradient, with a solid accent fallback.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<h1>The world's first <Keyword>predictive</Keyword> retail system.</h1>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/keyword",
+  "mdUrl": "/docs/components/keyword.md",
+  "jsonUrl": "/r/components/keyword.json",
+  "whenToUse": [
+    "One word or a short phrase a marketing title leans on: “the world's first *predictive* system”."
+  ],
+  "whenNotToUse": [
+    "Whole sentences or body copy. A gradient across running text is hard to read.",
+    "Links or emphasis in prose. Use `Link` or `<strong>`."
+  ],
+  "commonMistakes": [
+    "Assuming the gradient shows everywhere. Without `background-clip: text`, and in forced colours, it is the accent; the word is never transparent."
+  ],
+  "specimens": [
+    {
+      "title": "Keyword",
+      "group": "chrome",
+      "components": [
+        "Keyword"
+      ],
+      "code": "<p className=\"m-0 text-(length:--cue-text-title) font-semibold text-fg\">\n  Payments <Keyword>infrastructure</Keyword> for the internet\n</p>",
+      "note": "An inline word filled with the set's keyword gradient. Where text cannot be a background clip it is the accent, and in forced colours it is the system's text colour.",
+      "interaction": "none."
+    }
+  ]
+}

package/manifest/components/ledger.json

@@ -73,16 +73,16 @@
         },
         {
           "name": "headingLevel",
-          "type": "4 | 2 | 3",
+          "type": "2 | 4 | 3",
           "required": false,
           "defaultValue": "2",
           "description": "Which heading element the tier's name is. Defaults to `2`.\n\nThe outline is the navigation: a screen-reader user moves through a long\nledger by heading, so the levels have to describe the real nesting of the\npage the ledger sits in, not the ledger's own idea of itself.",
           "control": {
             "kind": "enum",
             "members": [
-              4,
               2,
-              3
+              3,
+              4
             ],
             "min": 2,
             "max": 4
@@ -170,8 +170,8 @@
           "control": {
             "kind": "enum",
             "members": [
-              4,
-              3
+              3,
+              4
             ],
             "min": 3,
             "max": 4

package/manifest/components/logo-strip.json

@@ -0,0 +1,93 @@
+{
+  "name": "LogoStrip",
+  "slug": "logo-strip",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A row of names under a caption: the \"trusted by\" strip of a product page.\n\nText wordmarks only, set in the display face at a muted ink, never an image: a\nreal company's mark is a trademark that is not this library's to draw, and a\ngallery page's names are fictional. The row wraps, and centres when it does.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "names",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The names, as text. A real company's logo is never drawn here.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "caption",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The line above the row, e.g. \"Trusted by teams at\".",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-font-sans",
+    "--cue-space-4",
+    "--cue-space-7",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-title",
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
+  ],
+  "summary": "A caption and a row of names: the “trusted by” strip of a product page, in text.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<LogoStrip caption=\"Trusted by teams at\" names={[\"Northwind\", \"Halcyon\", \"Kestrel\"]} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/logo-strip",
+  "mdUrl": "/docs/components/logo-strip.md",
+  "jsonUrl": "/r/components/logo-strip.json",
+  "whenToUse": [
+    "Under a landing hero, to say who uses the product.",
+    "A row of partner or customer names on a marketing page."
+  ],
+  "whenNotToUse": [
+    "Real company logos. This draws text wordmarks only; a real mark is a trademark that is not ours to draw.",
+    "Navigation or links. The names are not interactive."
+  ],
+  "commonMistakes": [
+    "Using real client names on a gallery or demo page. Gallery pages are fictional."
+  ],
+  "specimens": [
+    {
+      "title": "LogoStrip",
+      "group": "chrome",
+      "components": [
+        "LogoStrip"
+      ],
+      "code": "<LogoStrip caption=\"Trusted by teams at\" names={[\"Northwind\", \"Contoso\", \"Fabrikam\", \"Tailspin\", \"Litware\"]} />",
+      "note": "A row of wordmarks, drawn as text. A real brand's logo is never drawn here; a page that has the right to one passes its own art.",
+      "interaction": "none."
+    }
+  ]
+}

package/manifest/components/markdown-text.json

@@ -46,16 +46,16 @@
     },
     {
       "name": "headingLevel",
-      "type": "4 | 2 | 3",
+      "type": "2 | 4 | 3",
       "required": false,
       "defaultValue": "2",
       "description": "The heading level `#` renders at; `##` and below follow it, clamped at\n`h6`. Defaults to `2`, because model output is a passage inside a page\nthat already owns its `h1`.",
       "control": {
         "kind": "enum",
         "members": [
-          4,
           2,
-          3
+          3,
+          4
         ],
         "min": 2,
         "max": 4

package/manifest/components/menubar.json

@@ -140,7 +140,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
@@ -169,6 +168,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-focus-width",
     "--cue-style-group-label-ink",

package/manifest/components/message.json

@@ -108,15 +108,23 @@
     "--cue-accent",
     "--cue-accent-fg",
     "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-space-5",
+    "--cue-style-control-radius",
+    "--cue-style-field-hover-edge",
+    "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-label-case",
     "--cue-style-label-face",
     "--cue-style-label-tracking",

package/manifest/components/motif.json

@@ -0,0 +1,90 @@
+{
+  "name": "Motif",
+  "slug": "motif",
+  "group": "brand",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The art a Look draws in a hero: a ribbon, a halftone, a gloss object or a\nparticle word, whichever the style set chooses (spec 2026-10-02 §3.4).\n\n**The Look chooses, at the CSS layer.** Every offered variant is rendered, each\nin a wrapper whose `display` is the set's `style-motif-*` token, `none` unless\nthe set turns it on. So switching the Look switches the art with no re-render,\nthe server and the browser draw the same markup, and the paint pack `none` stays\nempty. A Look that turns none on draws nothing here and takes no room: the\ncontainer's own `display` is `style-motif-shown`, which the build derives as\n`block` for a set that shows a motif and which is `none` everywhere else. The\nparticle variant animates only while it is the one displayed.\n\nStatic markup — no `\"use client\"`; the particle variant is its own client island.",
+  "props": [
+    {
+      "name": "variants",
+      "type": "readonly MotifVariant[]",
+      "required": false,
+      "defaultValue": "[\"ribbon\", \"halftone\", \"gloss\", \"particles\"]",
+      "description": "The variants this page offers. The Look shows at most one of them. Defaults to all four.",
+      "control": {
+        "kind": "array"
+      }
+    },
+    {
+      "name": "seed",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "The same seed draws the same picture, on the server and in the browser. Defaults to `1`.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "word",
+      "type": "string",
+      "required": false,
+      "defaultValue": "CUE",
+      "description": "The word the particle variant draws. Defaults to `\"CUE\"`.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-style-motif-gloss",
+    "--cue-style-motif-halftone",
+    "--cue-style-motif-particles",
+    "--cue-style-motif-ribbon",
+    "--cue-style-motif-shown"
+  ],
+  "summary": "The art a Look draws in a hero — a ribbon, a halftone, a gloss object or a particle word — chosen by the style set.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Hero title=\"Payments infrastructure\" media={<Motif seed={2} />} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/motif",
+  "mdUrl": "/docs/components/motif.md",
+  "jsonUrl": "/r/components/motif.json",
+  "whenToUse": [
+    "`Hero`'s `media` slot on a landing page, so each Look brings its own art.",
+    "Any decorative panel whose art should follow the Look."
+  ],
+  "whenNotToUse": [
+    "Meaningful imagery: a chart, a product shot, a diagram. A motif is decoration and is hidden from assistive technology.",
+    "A specific motif regardless of Look. Use `Ribbon`, `Halftone`, `GlossObject` or `ParticleMark` directly."
+  ],
+  "commonMistakes": [
+    "Expecting it to draw under every Look. A set that turns no motif on draws nothing here, which is that Look's choice."
+  ],
+  "specimens": [
+    {
+      "title": "Motif",
+      "group": "brand",
+      "components": [
+        "Motif"
+      ],
+      "code": "<Specimens>\n  {Object.entries(MOTIF_TOKENS).map(([variant, token]) => (\n    <Specimen key={variant} label={variant} wide>\n      <div className=\"w-64\" style={{ [token]: \"block\", \"--cue-style-motif-shown\": \"block\" } as React.CSSProperties}>\n        <Motif seed={3} word=\"CUE\" />\n      </div>\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "The art a Look draws in a hero. Every offered variant is in the markup, each hidden until the style set turns its token on, so switching the Look switches the art with no re-render. Each specimen below sets one token inline to show what a set would.",
+      "interaction": "none. The particle variant animates only while it is shown, on screen, in a visible tab, and not held still."
+    }
+  ]
+}

package/manifest/components/multi-select.json

@@ -261,6 +261,7 @@
     "--cue-style-chip-size",
     "--cue-style-chip-tracking",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -270,6 +271,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-glyph-ink",

package/manifest/components/musical-time-input.json

@@ -115,12 +115,14 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -129,6 +131,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-input-face",