@orange-halo/components 2.2.0 → 3.1.0

package/custom-elements.json

@@ -8,8 +8,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Collapsible sections, each with a heading that shows and hides its content. Use one item for a single show/hide section.\n\n**Use it for** content readers scan by heading and open as needed (FAQs, details, a \"Show as table\" section). **Don't use it for** content most readers need (leave it visible); for switching between views of the same thing (use tabs); or for site navigation.\n\n**Parts:** `items` is an array of `{ heading, hiddenText?, open? }` (in HTML, a JSON array). Item N's content is any markup in a child with `slot=\"item-N\"`, such as a paragraph or a table.\n\n**Variants:** `subtle` (default), inline with surrounding content, its trigger styled as a link; `standout`, each item a separate boxed surface, for when the sections are the page's main content.\n\n**States:** collapsed and expanded per item (any number can be open; `open` sets the starting state), plus hover and focus-visible on the trigger.\n\n**Behaviour:** each trigger is a `<button>` inside a heading at `heading-level` (default 3), so the items fit the page's outline. Click, Enter or Space toggles it. While collapsed, the panel is `aria-hidden` and `inert`, so nothing inside it takes focus. Motion is turned off under `prefers-reduced-motion`.\n\n**Accessibility:** the trigger has `aria-expanded` and `aria-controls`; the panel is a `region` labelled by its trigger. `hiddenText` adds heading text only screen readers hear, so several items with the same visible heading (e.g. \"Show as table\") can be told apart. Set `heading-level` to fit the headings around it.\n\n**Look:** set by tokens. `subtle`: the trigger uses `color.text.link` and an underline set by `decoration.underlineThickness`, `underlineDash` and `underlinePeriod`, which clears on hover; focus is a solid `color.brand.primary` underline; items are divided by `stroke.divider` in `color.border.subtle`. `standout`: each item uses `color.surface.raised`, a `stroke.control` border in `color.border.emphasis` (`color.brand.primary` when expanded), `shape.container` corners and an `elevation.offset.*` shadow in `elevation.color.neutral`, which moves by `lift.hoverMd` on hover. Type uses `typography.body.*`; motion uses `motion.*` tokens.",
           "name": "OhAccordion",
+          "slots": [
+            {
+              "description": "The content of the item at index N (item-0 is the first)",
+              "name": "item-N"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -18,6 +24,7 @@
                 "text": "AccordionItem[]"
               },
               "default": "[]",
+              "description": "The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.\nEach item's content is a child with slot=\"item-<index>\".",
               "attribute": "items"
             },
             {
@@ -27,6 +34,7 @@
                 "text": "AccordionVariant"
               },
               "default": "\"subtle\"",
+              "description": "subtle (inline) or standout (boxed)",
               "attribute": "variant",
               "reflects": true
             },
@@ -37,6 +45,7 @@
                 "text": "HeadingLevel"
               },
               "default": "3",
+              "description": "The heading level of each item's trigger, to fit the page's outline",
               "attribute": "heading-level",
               "reflects": true
             }
@@ -48,6 +57,7 @@
                 "text": "AccordionItem[]"
               },
               "default": "[]",
+              "description": "The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.\nEach item's content is a child with slot=\"item-<index>\".",
               "fieldName": "items"
             },
             {
@@ -56,6 +66,7 @@
                 "text": "AccordionVariant"
               },
               "default": "\"subtle\"",
+              "description": "subtle (inline) or standout (boxed)",
               "fieldName": "variant"
             },
             {
@@ -64,6 +75,7 @@
                 "text": "HeadingLevel"
               },
               "default": "3",
+              "description": "The heading level of each item's trigger, to fit the page's outline",
               "fieldName": "headingLevel"
             }
           ],
@@ -100,8 +112,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A message box that tells the user about the result of an action or something that needs their attention.\n\n**Use it for** feedback on what just happened (saved, failed) or a notice about the page or account, near the content it's about. **Don't use it for** a short status label (use `oh-badge`); for a field's validation error (use the field's own error message); or for a message that must interrupt the user (use `oh-modal`).\n\n**Variants:** `info` (default), `success`, `warning`, `error`, each by its feedback role. Each has its own icon, so the meaning isn't carried by colour alone.\n\n**Behaviour:** with `dismissible`, a \"Close\" button follows the content; selecting it fires `oh-dismiss` and sets `hidden` on the alert. Content goes in the default slot and can include links.\n\n**Accessibility:** set `live` only for an alert added after the page has rendered (e.g. after submit); it adds `role=\"alert\"` so screen readers announce it. Leave it off for alerts present on page load. Icons are `aria-hidden`; put the meaning in the text. Links show a solid outline in the current text colour on focus; the close button shows an underline.\n\n**Look:** set by tokens. Each variant uses `color.feedback.<variant>Subtle` for the background and `color.feedback.<variant>` for the border, icon and links; text is `color.text.primary`. `stroke.control` sets the border, `shape.container` the corners, `typography.body.*` the text, and `decoration.underlineThickness`, `underlineDash` and `underlinePeriod` the link underline. The close button uses `closeButton.backgroundHover`, `closeButton.shadowHover`, `elevation.offset.*`, `lift.*` and `shape.compact`.",
           "name": "OhAlert",
+          "cssParts": [
+            {
+              "description": "The alert box.",
+              "name": "alert"
+            },
+            {
+              "description": "The message wrapper.",
+              "name": "content"
+            },
+            {
+              "description": "The close button (only when `dismissible`).",
+              "name": "close"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The message. Can include links.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -135,6 +167,12 @@
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "When the close button is selected, before the alert hides.",
+              "name": "oh-dismiss"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",
@@ -195,8 +233,24 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A short, non-interactive label that shows the status or category of the thing next to it.\n\n**Use it for** a status (\"Delivered\", \"Pending\"), a count or a tag next to the item it describes. **Don't use it for** anything the user can select (use `oh-button` or a link); or for a message with more than a word or two (use `oh-alert`).\n\n**Variants:** `brand` (default) and `accent` for categories; `success`, `warning`, `error` and `info` for status. **Appearance:** `subtle` (default), for most badges; `filled`, the stronger appearance, for the one status that matters most.\n\n**Parts:** the default slot holds the text; the `icon` slot an optional leading icon, sized to the text.\n\n**Behaviour:** none. It doesn't take focus or respond to the pointer.\n\n**Accessibility:** the badge is plain text to screen readers, so the text must make sense on its own (say \"Pending\", don't rely on the colour). Mark a decorative icon `aria-hidden`.\n\n**Look:** set by tokens. Subtle uses the variant's `color.feedback.<variant>Subtle`, `color.brand.primarySubtle` or `color.accent.subtle` background with the role colour as text; filled uses the role colour (`color.feedback.<variant>`, `color.brand.primary`, `color.accent.default`) as background with `color.text.on<Role>` as text. `shape.compact` sets the corners; `typography.body.*`, `typography.label.base.fontWeight` and `typography.control.letterSpacing` the text.",
           "name": "OhBadge",
+          "cssParts": [
+            {
+              "description": "The badge.",
+              "name": "badge"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge text.",
+              "name": ""
+            },
+            {
+              "description": "Optional leading icon.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -210,12 +264,13 @@
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "appearance",
               "type": {
-                "text": "BadgeType"
+                "text": "BadgeAppearance"
               },
               "default": "\"subtle\"",
-              "attribute": "type",
+              "description": "`subtle` (default) for most badges; `filled`, the stronger appearance, for the one status that matters most",
+              "attribute": "appearance",
               "reflects": true
             }
           ],
@@ -229,12 +284,13 @@
               "fieldName": "variant"
             },
             {
-              "name": "type",
+              "name": "appearance",
               "type": {
-                "text": "BadgeType"
+                "text": "BadgeAppearance"
               },
               "default": "\"subtle\"",
-              "fieldName": "type"
+              "description": "`subtle` (default) for most badges; `filled`, the stronger appearance, for the one status that matters most",
+              "fieldName": "appearance"
             }
           ],
           "superclass": {
@@ -270,7 +326,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A breadcrumb trail showing where the current page sits in the site's hierarchy.\n\n**Use it for** pages two or more levels deep in a hierarchy. **Don't use it\nfor** a site's main navigation (use `oh-navbar`) or for steps in a process.\n\n**Parts:** pass `items`, an array of `{ label, href }`, from the top level\ndown. The last item is the current page and is shown as text, not a link.\n\n**Behaviour:** below the `size.breakpoint.sm` width the trail collapses to a\nsingle \"Back to [parent]\" link to the second-to-last item; with one item,\nnothing shows there. Link underlines retract on hover; keyboard focus\n(`:focus-visible`) shows a solid underline and a background tint.\nTransitions are cut short under `prefers-reduced-motion`. Renders nothing\nwhen `items` is empty.\n\n**Accessibility:** renders `<nav aria-label=\"Breadcrumb\">` with an ordered\nlist, `aria-current=\"page\"` on the last item and `aria-hidden` separators.\nUse one breadcrumb per page.\n\n**Look:** set by tokens — `color.text.link` the links,\n`decoration.underlineThickness`, `decoration.underlineDash` and\n`decoration.underlinePeriod` their underline; `color.brand.primary` the\nfocus underline and `color.surface.hover` the focus tint;\n`color.text.primary` and `typography.label.base.fontWeight` the current\npage; `color.text.secondary` the separators; `typography.body.*` the text;\n`spacing.*` the gaps; `motion.relaxed` and `motion.easeGentle` the\ntransitions.",
           "name": "OhBreadcrumb",
           "members": [
             {
@@ -326,8 +382,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A button that starts an action, or a link styled as a button when `href` is set.\n\n**Use it for** actions: submitting, saving, opening a dialog, confirming.\n**Don't use it for** links inside running text (use `oh-link`).\n\n**Variants:** `primary` for the main action, `secondary` for the others,\n`accent` for an action that takes the accent colour role. **Sizes:** `sm`, `md` (default), `lg`.\n**States:** rest, hover, active, focus and `loading`.\n\n**Behaviour:** fires `oh-click` when the inner `<button>` is clicked, except\nwhile `loading`. `loading` shows a spinner, keeps the label for screen\nreaders, sets `aria-busy` and `aria-disabled` and ignores clicks, while the\nbutton stays focusable. With `href` it renders an `<a>` (and\n`target=\"_blank\"` adds `rel=\"noopener noreferrer\"`); link buttons don't fire\n`oh-click`. It has no `disabled` property and doesn't submit a form by\nitself: handle `oh-click`. Under `prefers-reduced-motion` it doesn't move.\n\n**Accessibility:** focus shows a solid underline on the label. An\n`icon-only` button has no visible text, so always set `accessible-label`\n(not `aria-label`, which isn't forwarded into the shadow root).\n\n**Look:** set by tokens — `stroke.control` (border width), `shape.control`\n(corners), `typography.control.*` (type), `button.variant.<variant>.*`\n(background, text, border and shadow colour per state), `button.size.<size>.*`\n(font size, padding, minimum height), `elevation.offset.*` (shadow offset)\nand `lift.hoverMd` / `lift.pressMd` (movement on hover and press).",
           "name": "OhButton",
+          "cssParts": [
+            {
+              "description": "The inner `<button>` or `<a>`.",
+              "name": "button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label.",
+              "name": ""
+            },
+            {
+              "description": "An icon before the label.",
+              "name": "icon-left"
+            },
+            {
+              "description": "An icon after the label.",
+              "name": "icon-right"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -385,7 +461,7 @@
                 "text": "ButtonState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'active' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'active' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             },
@@ -427,6 +503,12 @@
               "description": "Blur the internal button/anchor element"
             }
           ],
+          "events": [
+            {
+              "description": "The button was clicked (not while loading). `detail.originalEvent` is the click.",
+              "name": "oh-click"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",
@@ -474,7 +556,7 @@
                 "text": "ButtonState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'active' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'active' | 'focus'",
               "fieldName": "forceState"
             },
             {
@@ -527,8 +609,40 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A surface that groups related content (a summary, a teaser, a settings group), with optional header and footer.\n\n**Use it for** a self-contained block of content among others, or a whole-card link to more detail (`interactive`). **Don't use it for** page layout or spacing alone (use `oh-stack`, `oh-grid`); for a message that needs attention (use `oh-alert`); or for a single action (use `oh-button`).\n\n**Variants:** `default`, the standard card; `featured`, for the one card that should stand out; `subtle`, a quieter card, for dense layouts. **Padding:** `none`, `sm`, `md` (default), `lg` set the content padding (and the header and footer padding to match). With `none`, the content sets its own padding.\n\n**States (interactive only):** rest, hover, active (pressed) and focus-visible.\n\n**Behaviour:** with `interactive`, the card is focusable (`tabindex=\"0\"`), has `role=\"button\"`, and fires `oh-click` on click, Enter or Space. Hover movement is turned off under `prefers-reduced-motion`.\n\n**Accessibility:** focus shows a solid outline (`focus.ringWidth`, `focus.ringColor`, `focus.ringOffset`). Links inside use `color.text.linkRaised`, which keeps contrast on card surfaces. An interactive card is one button: give it a short heading so its accessible name makes sense, and don't put other buttons or links inside it.\n\n**Look:** set by tokens. `card.variant.<variant>.gradientStart`/`gradientMid`/`gradientEnd` set each variant's surface, `card.variant.<variant>.borderColor` and `card.base.borderWidth` its border, `shape.large` the corners, and `elevation.surface.default`/`subtle`/`featured` its shadow. Hover uses `color.border.strong` (or `card.variant.featured.borderColorHover`), `elevation.surface.hover`/`featuredHover` and `lift.hoverMd`/`lift.hoverSm`; active uses `elevation.surface.active`; focus sets the border to `color.brand.primary` and adds `focus.glowColor` with `elevation.surface.focus`/`featuredFocus`. Header and footer dividers use `card.section.dividerColor` and `stroke.divider`; the header surface uses `card.section.headerGradientStart`/`End`, the footer `color.surface.raised` to `color.surface.inset`; motion uses `motion.gentle` and `motion.easeGentle`.",
           "name": "OhCard",
+          "cssParts": [
+            {
+              "description": "The card surface (the button when `interactive`).",
+              "name": "card"
+            },
+            {
+              "description": "The header wrapper.",
+              "name": "header"
+            },
+            {
+              "description": "The content wrapper.",
+              "name": "content"
+            },
+            {
+              "description": "The footer wrapper.",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card's main content.",
+              "name": ""
+            },
+            {
+              "description": "Optional header, above the content, with a divider below. Not drawn when nothing is slotted.",
+              "name": "header"
+            },
+            {
+              "description": "Optional footer, below the content, with a divider above (e.g. actions). Not drawn when nothing is slotted.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -536,7 +650,7 @@
               "type": {
                 "text": "CardVariant"
               },
-              "default": "\"raised\"",
+              "default": "\"default\"",
               "attribute": "variant",
               "reflects": true
             },
@@ -561,13 +675,19 @@
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "When an `interactive` card is clicked or activated with Enter or Space. `detail.originalEvent` holds the source event.",
+              "name": "oh-click"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",
               "type": {
                 "text": "CardVariant"
               },
-              "default": "\"raised\"",
+              "default": "\"default\"",
               "fieldName": "variant"
             },
             {
@@ -620,17 +740,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A set of related checkboxes under one legend, where any number can be\nchosen.\n\n**Use it for** choosing any number of options from a short list, such as\ninterests or notification types. **Don't use it for** one standalone\nyes/no option (use `oh-checkbox`), exactly one choice (use\n`oh-radio-group`, or `oh-select` for a long list), or settings that apply\nstraight away (use `oh-toggle`).\n\n**Parts:** a `label` (rendered as the fieldset's `<legend>`) and a list of `options` (`{ label, value }`).\n`value` is the array of checked option values. **States:** each option\nunchecked, checked, hover, active and focus; the group can be `required`\n(a marker on the label) and in error (set `error-text`).\n\n**Behaviour:** Tab moves through the options and Space toggles one. Each\nchange updates `value` and fires `oh-change` with the new array. The\nnative checkboxes sit in the shadow root, so they don't submit with a\nnative form: read `value` or listen for `oh-change`. `required` doesn't\nvalidate; set the error yourself.\n\n**Accessibility:** a `<fieldset>` with a `<legend>`, so screen readers\nread the label with each option. Always set `label`. The error shows\nafter the legend and before the options, with an icon; the fieldset gets\n`aria-invalid` and `aria-describedby`, and the error is announced\n(`role=\"alert\"`) only when it appears after first render. Focus underlines\nthe option's label.\n\n**Look:** set by tokens — the same as `oh-checkbox`: `stroke.control` in\n`color.border.emphasis` (border), `shape.compact` (corners),\n`elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (shadow),\n`lift.hoverSm` / `lift.pressSm` (movement on hover and press),\n`color.brand.primary` and `color.text.onBrand` (checked),\n`color.feedback.error` and `elevation.color.error` (error); `typography.control.*`\nfor the legend and labels.",
           "name": "OhCheckboxGroup",
           "members": [
             {
               "kind": "field",
-              "name": "legend",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "legend"
+              "description": "The group's label, rendered as the fieldset's <legend>. Always set one",
+              "attribute": "label"
             },
             {
               "kind": "field",
@@ -671,32 +792,30 @@
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "errorMessage",
+              "name": "errorText",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errormessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "attribute": "error-text"
+            }
+          ],
+          "events": [
+            {
+              "description": "An option was toggled. detail: { value } (the checked values)",
+              "name": "oh-change"
             }
           ],
           "attributes": [
             {
-              "name": "legend",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "legend"
+              "description": "The group's label, rendered as the fieldset's <legend>. Always set one",
+              "fieldName": "label"
             },
             {
               "name": "name",
@@ -731,20 +850,13 @@
               "fieldName": "required"
             },
             {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "errormessage",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "errorMessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "fieldName": "errorText"
             }
           ],
           "superclass": {
@@ -780,8 +892,22 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A single checkbox with its label, for turning one option on or off.\n\n**Use it for** one yes/no choice, such as agreeing to terms, or as part of\na set where any number can be chosen. **Don't use it for** a set of\nrelated options on its own (use `oh-checkbox-group`, which adds the\nfieldset and legend), one choice from several (use `oh-radio-group`), or a\nsetting that applies straight away (use `oh-toggle`).\n\n**States:** unchecked, checked, hover, active, focus, error (set `error-text`).\n\n**Behaviour:** clicking the box or the label toggles it, as does Space\nwhen it's focused. Each change sets `checked` and fires `oh-change`. The\nnative `<input type=\"checkbox\">` sits in the shadow root, so it doesn't\nsubmit with a native form: read `checked` or listen for `oh-change`. It\nhas no `disabled` property.\n\n**Accessibility:** a real native checkbox, visually hidden, carries the\nrole, state and keyboard behaviour; the drawn box is decoration. Always\nset `label`: it's the checkbox's name. Focus underlines the label. The\nerror message shows under the checkbox with an icon, sets `aria-invalid`\nand is linked with `aria-describedby`; it's announced (`role=\"alert\"`)\nonly when it appears after first render.\n\n**Look:** set by tokens — `stroke.control` in `color.border.emphasis`\n(border), `shape.compact` (corners), `typography.control.*` (label),\n`elevation.offset.*` and `elevation.color.secondary` (shadow), `lift.hoverSm` /\n`lift.pressSm` (movement on hover and press), `color.border.hover`\n(hover), `color.brand.primary` (and its hover and active tokens),\n`color.text.onBrand` and `elevation.color.primary` (checked),\n`color.feedback.error` and `elevation.color.error` (error).",
           "name": "OhCheckbox",
+          "cssParts": [
+            {
+              "description": "The drawn checkbox",
+              "name": "box"
+            },
+            {
+              "description": "The label text",
+              "name": "label"
+            },
+            {
+              "description": "The error message",
+              "name": "error"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -822,22 +948,13 @@
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "errorMessage",
+              "name": "errorText",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errormessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "attribute": "error-text"
             },
             {
               "kind": "field",
@@ -846,11 +963,17 @@
                 "text": "CheckboxState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "The checkbox was toggled. detail: { checked, value }",
+              "name": "oh-change"
+            }
+          ],
           "attributes": [
             {
               "name": "checked",
@@ -885,20 +1008,13 @@
               "fieldName": "value"
             },
             {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "errormessage",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "errorMessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "fieldName": "errorText"
             },
             {
               "name": "force-state",
@@ -906,7 +1022,7 @@
                 "text": "CheckboxState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -943,8 +1059,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A horizontal group of items that wraps onto new lines when space runs out.\n\n**Use it for** button groups, tags and rows of links. **Don't use it for**\nvertical lists (use `oh-stack`) or equal-width columns (use `oh-grid`).\n\n**Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`\n(default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`), between\nitems and between rows. `justify` is `start` (default), `center`, `end`,\n`between` or `around`; `align` is `start`, `center` (default), `end` or\n`baseline`. `nowrap` keeps everything on one line.",
           "name": "OhCluster",
+          "slots": [
+            {
+              "description": "The items to group.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1054,8 +1176,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A centred wrapper that limits content to a maximum width and adds side padding.\n\n**Use it for** the outer width of a page or section. **Don't use it for**\nspacing between items (use `oh-stack`, `oh-cluster` or `oh-grid`).\n\n**Sizes:** `size` picks the max-width: `sm`, `md`, `lg` (default) and `xl`\nuse `layout.container.sm` to `layout.container.xl`; `full` is the full\nwidth with no side padding. `center` centres the text.\n\n**Behaviour:** side padding is `spacing.4`, rising to `spacing.6` from the\n`size.breakpoint.sm` width and `spacing.8` from `size.breakpoint.lg`.",
           "name": "OhContainer",
+          "slots": [
+            {
+              "description": "The content to contain.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1129,8 +1257,20 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.\n\n**Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).\n\n**Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.\n\n**Positions:** `start` (the default) or `end` follow the text direction, so in right-to-left text a `start` drawer opens from the right. `left` and `right` are the same physical side in either direction.\n\n**Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.\n\n**Accessibility:** the panel is `role=\"dialog\"` with `aria-modal=\"true\"`, labelled by `heading`, or \"Navigation menu\" when there's no heading, so set `heading` for any other use. The Close button's accessible name is \"Close menu\".\n\n**Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A start or left drawer's shadow is `elevation.strong`; an end or right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.",
           "name": "OhDrawer",
+          "cssProperties": [
+            {
+              "description": "Width of the drawer. It never fills the whole viewport width.",
+              "name": "--oh-drawer-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for drawer content",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1147,10 +1287,10 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "DrawerPosition"
               },
-              "default": "\"left\"",
-              "description": "Position of the drawer",
+              "default": "\"start\"",
+              "description": "The side the drawer opens from. `start` (the default) and `end` follow the\ntext direction: `start` is the left in left-to-right text and the right in\nright-to-left. `left` and `right` are the same physical side either way.",
               "attribute": "position"
             },
             {
@@ -1178,7 +1318,8 @@
               "name": "oh-close",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself."
             }
           ],
           "attributes": [
@@ -1194,10 +1335,10 @@
             {
               "name": "position",
               "type": {
-                "text": "\"left\" | \"right\""
+                "text": "DrawerPosition"
               },
-              "default": "\"left\"",
-              "description": "Position of the drawer",
+              "default": "\"start\"",
+              "description": "The side the drawer opens from. `start` (the default) and `end` follow the\ntext direction: `start` is the left in left-to-right text and the right in\nright-to-left. `left` and `right` are the same physical side either way.",
               "fieldName": "position"
             },
             {
@@ -1242,8 +1383,22 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A site footer with a logo, copyright line, social links and columns of links.\n\n**Use it for** the footer at the bottom of every page. **Don't use it for**\nthe main navigation (use `oh-navbar`).\n\n**Parts:** the `logo` slot; `copyright`, a line of text under the logo;\nthe `social` slot for `oh-icon` links (with `inverse`); and the default\nslot, where each `oh-stack` becomes a column (start it with a heading, then\n`oh-link`s with `inverse`).\n\n**Behaviour:** the columns follow `oh-grid`'s four-column steps at the\n`size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo\ncolumn spans the full width.\n\n**Accessibility:** renders a `<footer>`. Give the logo an accessible name,\neach social icon a `label`, and the column headings a level that fits the\npage's outline.\n\n**Look:** set by tokens — `color.accent.default` the background,\n`color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`\nthe vertical padding.",
           "name": "OhFooter",
+          "slots": [
+            {
+              "description": "Slot for logo element",
+              "name": "logo"
+            },
+            {
+              "description": "Slot for social media icons",
+              "name": "social"
+            },
+            {
+              "description": "Default slot for link columns (use oh-stack for each column)",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1300,8 +1455,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A CSS grid of equal-width columns, fixed or as many as fit.\n\n**Use it for** cards, galleries and other sets of similar items. **Don't\nuse it for** a single column (use `oh-stack`) or items of varying width in\na row (use `oh-cluster`).\n\n**Columns:** `columns` is `1`–`4`, `auto-fit` (default) or `auto-fill`.\nAuto columns are at least `min-width` wide (any CSS length); `auto-fit`\nstretches the items to fill the row, `auto-fill` keeps empty tracks.\n**Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`\n(default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`).\n`align-items` is `start`, `center`, `end` or `stretch` (default).\n\n**Behaviour:** fixed columns respond to the viewport: up to\n`size.breakpoint.sm` they become one column; up to `size.breakpoint.md`,\n3 and 4 become 2; up to `size.breakpoint.lg`, 4 becomes 3.",
           "name": "OhGrid",
+          "slots": [
+            {
+              "description": "The grid items.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1404,173 +1565,13 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/oh-hero.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "OhHero",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "HeroVariant"
-              },
-              "default": "\"content\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "HeroSize"
-              },
-              "default": "\"lg\"",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "heading"
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "subtitle"
-            },
-            {
-              "kind": "field",
-              "name": "journeyName",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "journey-name"
-            },
-            {
-              "kind": "field",
-              "name": "currentStep",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "current-step"
-            },
-            {
-              "kind": "field",
-              "name": "totalSteps",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "total-steps"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "HeroVariant"
-              },
-              "default": "\"content\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "HeroSize"
-              },
-              "default": "\"lg\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "heading",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "heading"
-            },
-            {
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "subtitle"
-            },
-            {
-              "name": "journey-name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "journeyName"
-            },
-            {
-              "name": "current-step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "fieldName": "currentStep"
-            },
-            {
-              "name": "total-steps",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "fieldName": "totalSteps"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "oh-hero",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "OhHero",
-          "declaration": {
-            "name": "OhHero",
-            "module": "src/oh-hero.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "oh-hero",
-          "declaration": {
-            "name": "OhHero",
-            "module": "src/oh-hero.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/oh-icon.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.\n\n**Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).\n\n**Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.\n\n**Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.\n\n**Behaviour:** the icon takes the current text colour. `arrow-left`, `arrow-right`, `chevron-left` and `chevron-right` mirror in right-to-left text, so they keep pointing back and forward along the line. With `href` it renders as a link, with hover, active and focus-visible states; `target=\"_blank\"` adds `rel=\"noopener noreferrer\"`.\n\n**Accessibility:** without `label` the icon is decorative (`aria-hidden=\"true\"`). With `label` it's `role=\"img\"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).\n\n**Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.",
           "name": "OhIcon",
           "members": [
             {
@@ -1705,9 +1706,36 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A single-line text field that submits with a native form, with optional\ntyping suggestions.\n\n**Use it for** short free text: names, email addresses, search terms.\n**Don't use it for** several lines (use `oh-textarea`) or a choice from a\nfixed list (use `oh-select`, or `oh-radio-group` for a few options).\n`suggestions` offers values while still allowing any text.\n\n**Types:** `text` (default), `email`, `password`, `search`, `tel`, `url`.\nOne size. **States:** rest, hover, focus, error (set `error-text`),\ndisabled, required.\n\n**Behaviour:** form-associated: the value submits under `name`, `required`\nblocks submission (validity comes from the inner `<input>`), a form reset\nrestores the starting value, and a disabled `<fieldset>` disables it.\nFires `oh-input` as the text changes and `oh-change` when it's committed.\n`suggestions` renders a native `<datalist>`, so the browser handles its\nkeyboard and screen reader support. `autocomplete` is passed to the inner\n`<input>`.\n\n**Accessibility:** always set `label`: it's the field's name. The error\nshows after the label and before the field, with an icon, and is linked\nwith `aria-describedby` and `aria-invalid`; it's announced (`role=\"alert\"`)\nonly when it appears after first render. Helper text is linked the same\nway (it's hidden while an error shows). Focus is a solid inset ring.\nSet `autocomplete` for personal data (WCAG 1.3.5).\n\n**Look:** set by tokens — `input.base.borderWidth` (`stroke.control`) in\n`color.border.emphasis` (border), `shape.control` (corners),\n`typography.control.*` (type), `input.size.md.minHeight` (height),\n`elevation.offset.md` and `elevation.color.field` (inset shadow),\n`color.border.hover` (hover), `focus.ringColor` and\n`color.surface.highlight` (focus), `color.feedback.error`,\n`color.feedback.errorSubtle` and `elevation.color.error` (error),\n`color.surface.disabled`, `color.border.disabled` and\n`color.text.disabled` (disabled).",
           "name": "OhInput",
+          "cssParts": [
+            {
+              "description": "The visible label",
+              "name": "label"
+            },
+            {
+              "description": "The text field",
+              "name": "input"
+            },
+            {
+              "description": "The helper text, and the error message (which also has the error part)",
+              "name": "helper"
+            },
+            {
+              "description": "The error message",
+              "name": "error"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -1715,6 +1743,7 @@
                 "text": "InputType"
               },
               "default": "\"text\"",
+              "description": "The kind of text: text, email, password, search, tel or url",
               "attribute": "type"
             },
             {
@@ -1724,6 +1753,7 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "The text in the field",
               "attribute": "value"
             },
             {
@@ -1733,6 +1763,7 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "Example text shown while the field is empty. Not a replacement for the label",
               "attribute": "placeholder"
             },
             {
@@ -1742,6 +1773,7 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "The visible label. Always set one: it names the field",
               "attribute": "label"
             },
             {
@@ -1751,7 +1783,8 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "helpertext"
+              "description": "Help shown under the field and linked to it",
+              "attribute": "helper-text"
             },
             {
               "kind": "field",
@@ -1760,7 +1793,19 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errortext"
+              "description": "Error shown before the field and linked to it. Setting it puts the field in its error state",
+              "attribute": "error-text"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name the value is submitted under",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1769,9 +1814,31 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Must be filled in before the form submits",
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Not editable, and left out of the form's data",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "suggestions",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "Values offered while typing, shown by the browser as a list under the\nfield. They suggest, they don't restrict: any text is still allowed.\nSet it as a property (an array of strings) or, in HTML, as a JSON array:\nsuggestions='[\"Option one\",\"Option two\"]'. Browsers also offer the\nfield's autofill history, so set autocomplete=\"off\" to show only these.",
+              "attribute": "suggestions"
+            },
             {
               "kind": "field",
               "name": "autocomplete",
@@ -1788,17 +1855,70 @@
                 "text": "InputState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "form",
+              "description": "The form this field belongs to",
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "focus"
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "blur"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string | File | FormData | null"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Whenever the text changes: typing, or picking a suggestion. detail: { value, originalEvent }",
+              "name": "oh-input"
+            },
+            {
+              "description": "When the value is committed (on blur or Enter). detail: { value, originalEvent }",
+              "name": "oh-change"
             }
           ],
           "attributes": [
@@ -1808,6 +1928,7 @@
                 "text": "InputType"
               },
               "default": "\"text\"",
+              "description": "The kind of text: text, email, password, search, tel or url",
               "fieldName": "type"
             },
             {
@@ -1816,6 +1937,7 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "The text in the field",
               "fieldName": "value"
             },
             {
@@ -1824,6 +1946,7 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "Example text shown while the field is empty. Not a replacement for the label",
               "fieldName": "placeholder"
             },
             {
@@ -1832,32 +1955,63 @@
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "The visible label. Always set one: it names the field",
               "fieldName": "label"
             },
             {
-              "name": "helpertext",
+              "name": "helper-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "Help shown under the field and linked to it",
               "fieldName": "helperText"
             },
             {
-              "name": "errortext",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
+              "description": "Error shown before the field and linked to it. Setting it puts the field in its error state",
               "fieldName": "errorText"
             },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name the value is submitted under",
+              "fieldName": "name"
+            },
             {
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Must be filled in before the form submits",
               "fieldName": "required"
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Not editable, and left out of the form's data",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "suggestions",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "Values offered while typing, shown by the browser as a list under the\nfield. They suggest, they don't restrict: any text is still allowed.\nSet it as a property (an array of strings) or, in HTML, as a JSON array:\nsuggestions='[\"Option one\",\"Option two\"]'. Browsers also offer the\nfield's autofill history, so set autocomplete=\"off\" to show only these.",
+              "fieldName": "suggestions"
+            },
             {
               "name": "autocomplete",
               "type": {
@@ -1872,7 +2026,7 @@
                 "text": "InputState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -1909,8 +2063,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A text link, for use inside body copy or on its own as a call to action.\n\n**Use it for** navigating to another page or place. **Don't use it for**\nactions that don't navigate (use `oh-button` instead).\n\n**Variants:** `inline` (default) sits in running text; `standalone` is\nlarger and bolder for links on their own, and can show a trailing arrow\n(`arrow`). `inverse` is for links on accent surfaces.\n\n**Behaviour:** renders a native `<a>`, so Enter follows it and it takes\nfocus in tab order. On hover the underline retracts and the arrow nudges\nforward. Keyboard focus (`:focus-visible`) shows a solid underline and a\ntint; mouse focus doesn't. Transitions are cut short under\n`prefers-reduced-motion`. With `target=\"_blank\"` it adds an external icon,\nscreen-reader text \"(opens in new tab)\" and `rel=\"noopener noreferrer\"`\nwhen `rel` isn't set; the arrow is not shown on external links.\n\n**Accessibility:** the underline shows at rest and on focus, so links\ndon't rely on colour. Write link text that makes sense out of context.\n\n**Look:** set by tokens — `color.text.link` the colour (`color.text.onAccent`\nwhen `inverse`); `decoration.underlineThickness`, `decoration.underlineDash`\nand `decoration.underlinePeriod` the underline; `color.brand.primary`\n(`color.text.onAccent` when `inverse`) and\n`decoration.underlineFocusThickness` the focus underline; `focus.glowColor`\n(`link.inverse.focusBackground` when `inverse`) the focus tint;\n`typography.body.fontFamily`, plus `typography.body.lg.fontSize` and\n`typography.emphasis.fontWeight` for `standalone`; `motion.slow` and\n`motion.snappy` the transitions.",
           "name": "OhLink",
+          "slots": [
+            {
+              "description": "The link text.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2051,8 +2211,40 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A dialog that opens over the page and holds the user's attention until they close it or act on it.\n\n**Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).\n\n**Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.\n\n**Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).\n\n**Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.\n\n**Accessibility:** the panel is `role=\"dialog\"` with `aria-modal=\"true\"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible \"Close\" label.\n\n**Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.",
           "name": "OhModal",
+          "cssParts": [
+            {
+              "description": "The dialog panel.",
+              "name": "modal"
+            },
+            {
+              "description": "The header (heading and close button).",
+              "name": "header"
+            },
+            {
+              "description": "The close button (only when `dismissible`).",
+              "name": "close"
+            },
+            {
+              "description": "The scrolling body.",
+              "name": "body"
+            },
+            {
+              "description": "The footer.",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The dialog body.",
+              "name": ""
+            },
+            {
+              "description": "Actions, below the body.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2103,6 +2295,12 @@
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.",
+              "name": "oh-close"
+            }
+          ],
           "attributes": [
             {
               "name": "open",
@@ -2178,8 +2376,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.\n\n**Use it for** the main navigation at the top of every page. **Don't use\nit for** in-page sections (use `oh-tabs`) or a trail through the hierarchy\n(use `oh-breadcrumb`).\n\n**Parts:** the `logo` slot (a link to the home page), the default slot for\nthe bar's links (`oh-link`), and the `mobile` slot for the same links in the\ndrawer. `drawer-heading` names the drawer (defaults to \"Menu\").\n\n**Behaviour:** at and below the `size.breakpoint.md` width the links hide\nand an icon-only menu button (\"Open navigation menu\") opens an `oh-drawer`\nfrom the left, which traps focus and closes on Escape or its close button.\n\n**Accessibility:** the bar and the drawer each wrap their links in a\n`<nav>`; the drawer is a modal dialog. Give the logo link an accessible\nname (`alt` on its image, or text).\n\n**Look:** set by tokens — `color.surface.base` the background,\n`focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the\npadding and gaps, `stroke.divider` and `color.border.subtle` the dividers\nbetween drawer links. `--oh-navbar-logo-height` sets the logo height.",
           "name": "OhNavbar",
+          "cssProperties": [
+            {
+              "description": "Height of the slotted logo link or image",
+              "name": "--oh-navbar-logo-height"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for logo/brand element",
+              "name": "logo"
+            },
+            {
+              "description": "Default slot for navigation links",
+              "name": ""
+            },
+            {
+              "description": "The navigation links again, shown in the drawer",
+              "name": "mobile"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2236,8 +2454,22 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A bar that shows how much of a task is done, with an optional percentage and visible label.\n\n**Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).\n\n**Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.\n\n**Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.\n\n**Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default \"Progress\"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.\n\n**Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.",
           "name": "OhProgress",
+          "cssParts": [
+            {
+              "description": "The bar's track.",
+              "name": "track"
+            },
+            {
+              "description": "The filled part of the track.",
+              "name": "fill"
+            },
+            {
+              "description": "The percentage text.",
+              "name": "value"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2442,7 +2674,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A set of radio buttons under one label, where exactly one can be chosen.\n\n**Use it for** one choice from a few options that should all be visible,\nsuch as a plan or a delivery speed. **Don't use it for** a long list (use\n`oh-select`), several choices (use `oh-checkbox-group`) or an on/off\nsetting (use `oh-toggle` or `oh-checkbox`). Use it rather than separate\n`oh-radio` elements, which can't form a group.\n\n**Parts:** a `label` for the group and a list of `options`\n(`{ label, value }`). `value` is the chosen option's value. **States:**\neach option unchecked, checked, hover, active and focus; the group can be\n`required` and in error (set `error-text`).\n\n**Behaviour:** Tab moves into and out of the group; arrow keys move\nbetween options and choose them (the browser's native radio behaviour).\nEach change sets `value` and fires `oh-change`. The native radios sit in\nthe shadow root, so they don't submit with a native form: read `value` or\nlisten for `oh-change`. `required` sets `aria-required` and a marker on\nthe label but doesn't validate; set the error yourself.\n\n**Accessibility:** `role=\"radiogroup\"` labelled by `label`, so always set\none. The error shows after the label and before the options, with an\nicon; the group gets `aria-invalid` and `aria-describedby`, and the error\nis announced (`role=\"alert\"`) only when it appears after first render.\nFocus underlines the option's label.\n\n**Look:** set by tokens — the same as `oh-radio`: `stroke.control` in\n`color.border.emphasis` (border), `shape.pill` (circle),\n`elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (shadow),\n`lift.hoverSm` / `lift.pressSm` (movement on hover and press),\n`color.brand.primary` and `color.text.onBrand` (checked),\n`color.feedback.error` and `elevation.color.error` (error); `typography.control.*`\nfor the group label and option labels.",
           "name": "OhRadioGroup",
           "members": [
             {
@@ -2493,22 +2725,19 @@
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "errorMessage",
+              "name": "errorText",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errormessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "attribute": "error-text"
+            }
+          ],
+          "events": [
+            {
+              "description": "An option was chosen. detail: { value }",
+              "name": "oh-change"
             }
           ],
           "attributes": [
@@ -2553,20 +2782,13 @@
               "fieldName": "required"
             },
             {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "errormessage",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "errorMessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "fieldName": "errorText"
             }
           ],
           "superclass": {
@@ -2602,8 +2824,22 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A single radio button with its label.\n\n**Use it for** a one-off radio you manage yourself. **For a set of\nchoices, use `oh-radio-group`.** Each `oh-radio` keeps its native radio\ninside its own shadow root, so two of them with the same `name` don't form\na group: checking one doesn't uncheck the other, and arrow keys don't move\nbetween them. `oh-radio-group` renders the whole set in one place, with\narrow-key navigation and one label for the group. For an independent\non/off choice use `oh-checkbox`.\n\n**States:** unchecked, checked, hover, active, focus, error (set `error-text`).\n\n**Behaviour:** clicking the circle or label checks it. Checking sets\n`checked` and fires `oh-change`. The native radio sits in the shadow\nroot, so it doesn't submit with a native form.\n\n**Accessibility:** a real native radio, visually hidden, carries the role\nand state; the drawn circle is decoration. Always set `label`: it's the\nradio's name. Focus underlines the label. The error message shows under\nthe radio with an icon, sets `aria-invalid` and is linked with\n`aria-describedby`; it's announced (`role=\"alert\"`) only when it appears\nafter first render.\n\n**Look:** set by tokens — `stroke.control` in `color.border.emphasis`\n(border), `shape.pill` (circle), `typography.control.*` (label),\n`elevation.offset.*` and `elevation.color.secondary` (shadow), `lift.hoverSm` /\n`lift.pressSm` (movement on hover and press), `color.border.hover`\n(hover), `color.brand.primary` (and its hover and active tokens),\n`color.text.onBrand` and `elevation.color.primary` (checked),\n`color.feedback.error` and `elevation.color.error` (error).",
           "name": "OhRadio",
+          "cssParts": [
+            {
+              "description": "The drawn radio circle",
+              "name": "circle"
+            },
+            {
+              "description": "The label text",
+              "name": "label"
+            },
+            {
+              "description": "The error message",
+              "name": "error"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2644,22 +2880,13 @@
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "error",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "errorMessage",
+              "name": "errorText",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errormessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "attribute": "error-text"
             },
             {
               "kind": "field",
@@ -2668,11 +2895,17 @@
                 "text": "RadioState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "attribute": "force-state",
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "The radio was checked. detail: { checked, value }",
+              "name": "oh-change"
+            }
+          ],
           "attributes": [
             {
               "name": "checked",
@@ -2707,20 +2940,13 @@
               "fieldName": "value"
             },
             {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "error"
-            },
-            {
-              "name": "errormessage",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "errorMessage"
+              "description": "Error shown with the control and linked to it. Setting it puts the\ncontrol in its error state; clear it to leave that state.",
+              "fieldName": "errorText"
             },
             {
               "name": "force-state",
@@ -2728,7 +2954,7 @@
                 "text": "RadioState"
               },
               "default": "\"default\"",
-              "description": "Force a visual state (for documentation/Figma sync only)\nValues: 'hover' | 'focus'",
+              "description": "Force a visual state (for documentation only)\nValues: 'hover' | 'focus'",
               "fieldName": "forceState"
             }
           ],
@@ -2765,7 +2991,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A dropdown for choosing one option from a list.\n\n**Use it for** one choice from a list too long to show every option.\n**Don't use it for** a few options (use `oh-radio-group`, which shows them\nall), several choices (use `oh-checkbox-group`) or free text (use\n`oh-input` with `suggestions`).\n\n**Parts:** a trigger showing the selected option's label (or\n`placeholder`), and a list of `options` (`{ label, value }`). One size.\n**States:** rest, hover, active, focus, open, error (set `error-text`),\nrequired.\n\n**Behaviour:** click the trigger, or press Enter, Space or an arrow key,\nto open the list. Arrow keys, Home and End move the highlight, Enter or\nSpace selects, Escape and Tab close, and clicking outside closes. Typing\nletters jumps to a matching option (and selects it while the list is\nclosed). Selecting sets `value`, returns focus to the trigger and fires\n`oh-change`. It isn't form-associated: it doesn't submit with a native\nform, so read `value` or listen for `oh-change`. It has no `disabled`\nproperty.\n\n**Accessibility:** the trigger is a `combobox` controlling a `listbox`,\nwith `aria-activedescendant` for the highlighted option, so focus stays\non the trigger. Always set `label`: it names the trigger and the list.\nThe error shows after the label and before the trigger, with an icon, sets\n`aria-invalid` and is linked with `aria-describedby`; it's announced\n(`role=\"alert\"`) only when it appears after first render. Focus is a\nsolid underline on the trigger text.\n\n**Look:** set by tokens — `stroke.control` in `color.border.emphasis`\n(border), `shape.control` (trigger corners), `shape.container` (list\ncorners), `typography.control.*` (type), `elevation.offset.*` and\n`elevation.color.secondary` (shadow), `lift.hoverMd` / `lift.pressSm` (movement\non hover and press), `color.border.hover` (hover), `focus.ringColor` and\n`color.surface.highlight` (open), `color.surface.hover` and\n`color.brand.primary` (selected option), `color.feedback.error` and\n`elevation.color.error` (error).",
           "name": "OhSelect",
           "members": [
             {
@@ -2830,7 +3056,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "helpertext"
+              "attribute": "helper-text"
             },
             {
               "kind": "field",
@@ -2839,7 +3065,13 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "errortext"
+              "attribute": "error-text"
+            }
+          ],
+          "events": [
+            {
+              "description": "An option was selected. detail: { value }",
+              "name": "oh-change"
             }
           ],
           "attributes": [
@@ -2892,7 +3124,7 @@
               "fieldName": "required"
             },
             {
-              "name": "helpertext",
+              "name": "helper-text",
               "type": {
                 "text": "string"
               },
@@ -2900,7 +3132,7 @@
               "fieldName": "helperText"
             },
             {
-              "name": "errortext",
+              "name": "error-text",
               "type": {
                 "text": "string"
               },
@@ -2941,7 +3173,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A \"skip to content\" link that lets keyboard users jump past repeated content, such as navigation.\n\n**Use it for** the first focusable element on every page, pointing at the\nmain content. Add more for other landmarks (search results, footer) if\nuseful. **Don't use it for** in-page navigation that everyone sees (use\n`oh-link`).\n\n**Parts:** `href` is the target (defaults to `#main`); `text` is the label\n(defaults to \"Skip to main content\").\n\n**Behaviour:** hidden until it receives keyboard focus, then shown fixed at\nthe top-left of the viewport, above other content. Enter follows the link.\nTransitions are cut short under `prefers-reduced-motion`.\n\n**Accessibility:** screen readers can read it at all times. Put it first in\nthe page, and give the target an `id` and `tabindex=\"-1\"` so focus moves to\nit.\n\n**Look:** set by tokens — `color.surface.base`, `color.border.emphasis` and\n`color.text.link` at rest; `color.surface.raised`, `color.text.linkRaised`\nand `color.brand.primary` (border) on focus; `stroke.control` the border,\n`shape.control` the corners; `elevation.offset.lg` with `elevation.color.neutral`\n(`elevation.color.primary` on focus) the shadow; `typography.body.*` and\n`typography.label.base.fontWeight` the text; `spacing.*` the padding and\nposition; `motion.gentle`, `motion.quick` and `motion.snappy` the\ntransitions.",
           "name": "OhSkipLink",
           "members": [
             {
@@ -3014,8 +3246,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A vertical layout that spaces its children evenly, top to bottom.\n\n**Use it for** consistent vertical rhythm without margins on children.\n**Don't use it for** items in a row (use `oh-cluster`) or a grid of cards\n(use `oh-grid`).\n\n**Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`\n(default, `spacing.4`), `lg` (`spacing.6`), `xl` (`spacing.8`) or `2xl`\n(`spacing.12`). `align` sets horizontal alignment: `start`, `center`,\n`end` or `stretch` (default).",
           "name": "OhStack",
+          "slots": [
+            {
+              "description": "The items to stack.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -3089,28 +3327,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A set of tabs that switches between panels of related content in the same place.\n\n**Use it for** a few peer sections of content where only one needs to be\nseen at a time. **Don't use it for** navigating between pages (use links\nor `oh-navbar`), or for content people need to compare side by side.\n\n**Parts:** pass `items`, an array of `{ id, label, content? }`. A panel\nshows `content` as text, or else the light-DOM element with\n`slot=\"<id>\"`. `value` is the selected tab's `id` (defaults to the first).\n\n**States:** each tab is selected or not; unselected tabs show an underline\non hover.\n\n**Behaviour:** click selects a tab. Arrow keys move focus between tabs and\nwrap (Left/Right, swapped in right-to-left text, or Up/Down when\n`orientation=\"vertical\"`; orientation changes the keys only, not the\nlayout); Home/End jump to the first/last.\nEnter or Space selects the focused tab and moves focus to its panel.\nSelecting a different tab fires `oh-change`. Transitions are cut short\nunder `prefers-reduced-motion`.\n\n**Accessibility:** tablist/tab/tabpanel roles with `aria-selected`,\n`aria-controls` and `aria-labelledby`; one tab is in the tab order at a\ntime; inactive panels are `hidden`; the active panel is focusable. Keyboard\nfocus shows a solid underline on the tab label and an outline on the panel.\nKeep labels short.\n\n**Look:** set by tokens — `color.brand.primary` the unselected tabs and\ntheir hover underline (`decoration.underlineThickness`,\n`decoration.underlineDash`, `decoration.underlinePeriod`);\n`color.text.primary`, `color.surface.base` and `color.border.emphasis` the\nselected tab and panel; `stroke.control` the borders; `shape.control` the\ntab corners and `shape.container` the panel corners;\n`typography.body.*` and `typography.label.base.fontWeight` the text;\n`spacing.*` the padding; `motion.snappy` and `motion.relaxed` the\ntransitions.",
           "name": "OhTabs",
           "members": [
             {
               "kind": "field",
-              "name": "tabs",
+              "name": "items",
               "type": {
                 "text": "TabItem[]"
               },
               "default": "[]",
-              "description": "Array of tab items with id, label, and optional content",
-              "attribute": "tabs"
+              "description": "The tabs: `{ id, label, content? }`. In HTML, a JSON array",
+              "attribute": "items"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "ID of the currently selected tab",
-              "attribute": "selected",
+              "description": "The selected tab's `id`. Defaults to the first tab",
+              "attribute": "value",
               "reflects": true
             },
             {
@@ -3126,30 +3364,28 @@
           ],
           "events": [
             {
-              "name": "tab-change",
-              "type": {
-                "text": "CustomEvent"
-              }
+              "description": "When a different tab is selected. `detail: { value }`, the tab's `id`.",
+              "name": "oh-change"
             }
           ],
           "attributes": [
             {
-              "name": "tabs",
+              "name": "items",
               "type": {
                 "text": "TabItem[]"
               },
               "default": "[]",
-              "description": "Array of tab items with id, label, and optional content",
-              "fieldName": "tabs"
+              "description": "The tabs: `{ id, label, content? }`. In HTML, a JSON array",
+              "fieldName": "items"
             },
             {
-              "name": "selected",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "ID of the currently selected tab",
-              "fieldName": "selected"
+              "description": "The selected tab's `id`. Defaults to the first tab",
+              "fieldName": "value"
             },
             {
               "name": "orientation",
@@ -3194,7 +3430,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A multi-line text field that submits with a native form.",
+          "description": "A multi-line text field that submits with a native form.\n\n**Use it for** messages, comments, feedback: text that may run to several\nlines. **Don't use it for** a single line of text (use `oh-input`).\n\n**States:** rest, hover, focus, error (set `error-text`), disabled,\nrequired. `rows` sets the visible lines (default 4); people can drag it\ntaller. `maxlength` limits the length.\n\n**Behaviour:** form-associated. Give it a `name` and it submits with the\nform. `required` stops the form submitting while it's empty, with the\nbrowser's own message. A form reset restores its starting text, and a\ndisabled `<fieldset>` disables it. Fires `oh-input` on every keystroke and\n`oh-change` when the value is committed. Its line height is 1.5 times the\ntext size, rounded up to `grid.unit`, so long messages stay on the grid.\n\n**Accessibility:** always set `label`: it names the field. A placeholder\nisn't a label. Helper and error text are linked to the field with\n`aria-describedby`, so screen readers read them. Errors come before the\nfield, with an icon, set `aria-invalid`, and are announced only when they\nappear after the page has loaded. Focus is a solid inset ring. Use\n`autocomplete` when the field asks for something a browser can fill in,\nsuch as an address (WCAG 1.3.5).\n\n**Look:** set by tokens — `stroke.control` in `color.border.emphasis`\n(border), `shape.control` (corners), `typography.control.*` (type),\n`elevation.offset.md` and `elevation.color.field` (inset shadow),\n`color.border.hover` (hover), `focus.ringColor` and\n`color.surface.highlight` (focus), `color.feedback.error`,\n`color.feedback.errorSubtle` and `elevation.color.error` (error),\n`color.surface.disabled`, `color.border.disabled` and\n`color.text.disabled` (disabled).",
           "name": "OhTextarea",
           "cssParts": [
             {
@@ -3529,7 +3765,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A switch that turns a setting on or off.\n\n**Use it for** a setting that takes effect straight away, such as turning\nnotifications on. **Don't use it for** a choice that's only applied when a\nform is submitted, or one that must be agreed to (use `oh-checkbox`), or\na choice between more than two options (use `oh-radio-group`).\n\n**States:** off, on, hover, active, focus.\n\n**Behaviour:** clicking the switch or its label, or pressing Space or\nEnter while it's focused, flips `checked` and fires `oh-change` with\n`{ checked }`. `name` and `value` are stored but it isn't form-associated,\nso it doesn't submit with a native form: listen for `oh-change`. It has no\n`disabled` property. Under `prefers-reduced-motion` it doesn't animate.\n\n**Accessibility:** `role=\"switch\"` with `aria-checked`, in the tab order.\nSet `label` (a visible label, linked with `aria-labelledby`), or\n`accessible-label` when there's no visible label (not `aria-label`, which\nisn't forwarded into the shadow root). Focus is a solid outline in\n`focus.ringColor`.\n\n**Look:** set by tokens — `shape.pill` (track), `color.surface.raised` /\n`color.brand.primary` (track off / on), `color.surface.base`,\n`stroke.control` and `color.border.emphasis` (thumb),\n`elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (thumb\nshadow off / on), `lift.hoverSm` / `lift.pressSm` (movement on hover and\npress), `focus.ringColor` and `focus.glowColor` (focus),\n`typography.body.*` (label).",
           "name": "OhToggle",
           "members": [
             {
@@ -3586,7 +3822,8 @@
               "name": "oh-change",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "Fired when the toggle state changes. detail: { checked }"
             }
           ],
           "attributes": [