@wovenui/components 0.0.0-stage → 1.0.0

package/dist/components.json

@@ -0,0 +1,4204 @@
+{
+  "components": [
+    {
+      "name": "accordion",
+      "root": "wu-accordion",
+      "summary": "Stacked disclosure panels built on native `details`, in one bordered group.",
+      "notes": [
+        "The same `name` on several `details` makes the group exclusive, one open at a time. Leave it out to allow several open."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-accordion\">\n  <details class=\"wu-accordion-item\" name=\"faq\" open>\n    <summary class=\"wu-accordion-trigger\">What is included?</summary>\n    <div class=\"wu-accordion-body\">Every plan includes support.</div>\n  </details>\n  <details class=\"wu-accordion-item\" name=\"faq\">\n    <summary class=\"wu-accordion-trigger\">Can I cancel?</summary>\n    <div class=\"wu-accordion-body\">Yes, at any time.</div>\n  </details>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-accordion animated\">\n  <details class=\"wu-accordion-item\">\n    <summary class=\"wu-accordion-trigger\">Shipping</summary>\n    <div class=\"wu-accordion-body\">Orders ship in two days.</div>\n  </details>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "The chevron turns and the panel height glides when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-accordion-item"
+          ],
+          "description": "A `details` element holding one trigger and one body",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-accordion-trigger"
+          ],
+          "description": "The `summary` that opens and closes the item, with a chevron",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-accordion-body"
+          ],
+          "description": "The panel content shown when the item is open",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "open"
+          ],
+          "description": "The chevron points up and the body is shown",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "alert",
+      "root": "wu-alert",
+      "summary": "Inline message with a shape marker, a title, optional actions and a dismiss button.",
+      "notes": [
+        "Meaning is carried by the `wu-alert-title` text, such as \"Error\" or \"Saved\"; the marker shape repeats it.",
+        "Use `role=\"alert\"` for urgent messages and `role=\"status\"` for the rest. The close button is markup only; the app removes the alert."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-alert success\" role=\"status\">\n  <strong class=\"wu-alert-title\">Saved</strong>\n  <p>Your changes are live.</p>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-alert danger\" role=\"alert\">\n  <strong class=\"wu-alert-title\">Payment failed</strong>\n  <p>Check the card details and try again.</p>\n  <div class=\"wu-alert-actions\">\n    <button class=\"wu-btn danger\" type=\"button\">Retry</button>\n    <button class=\"wu-btn\" type=\"button\">Cancel</button>\n  </div>\n  <button class=\"wu-alert-close\" type=\"button\" aria-label=\"Dismiss\"></button>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand",
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "Role color for border, fill, marker and title; `success`, `warning` and `danger` also change the marker shape",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-alert-title"
+          ],
+          "description": "Bold title line that names the message",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-alert-actions"
+          ],
+          "description": "Row of buttons under the text",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-alert-close"
+          ],
+          "description": "Dismiss button in the end corner, last child of the alert",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "autocomplete",
+      "root": "wu-autocomplete",
+      "summary": "Combobox that filters a list of options as the user types.",
+      "notes": [
+        "The kit script filters the options, handles the keyboard and sets `aria-expanded`, `aria-activedescendant`, `aria-selected` and `hidden`."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "input"
+      ],
+      "js": {
+        "mode": "required",
+        "exports": [
+          "initAutocomplete"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-autocomplete\">\n  <label for=\"city\">City</label>\n  <input class=\"wu-input\" id=\"city\" type=\"text\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"false\" aria-controls=\"city-list\" autocomplete=\"off\">\n  <ul class=\"wu-autocomplete-list\" id=\"city-list\" role=\"listbox\" aria-label=\"Cities\" hidden>\n    <li class=\"wu-autocomplete-option\" id=\"city-1\" role=\"option\">Amsterdam</li>\n    <li class=\"wu-autocomplete-option\" id=\"city-2\" role=\"option\">Berlin</li>\n    <li class=\"wu-autocomplete-option\" id=\"city-3\" role=\"option\" aria-disabled=\"true\">Closed city</li>\n  </ul>\n  <p class=\"wu-autocomplete-empty\" hidden>No matches</p>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "The popup fades and slides in when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-autocomplete-list"
+          ],
+          "description": "Popup `ul` that holds the options",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-autocomplete-option"
+          ],
+          "description": "One selectable `li` option",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-autocomplete-empty"
+          ],
+          "description": "Message shown when no option matches",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-autocomplete--MaxHeight"
+          ],
+          "description": "Maximum height of the option list before it scrolls",
+          "since": "1.0.0",
+          "default": "16rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "aria-selected=\"true\""
+          ],
+          "description": "The active option: selected fill and a start bar",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-disabled=\"true\""
+          ],
+          "description": "Half opacity and a not-allowed cursor",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "hidden"
+          ],
+          "description": "An option filtered out is not displayed",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "avatar-group",
+      "root": "wu-avatar-group",
+      "summary": "Overlapping stack of avatars with a ring between them.",
+      "notes": [
+        "Put the overflow count, such as \"+3\", in a last `wu-avatar` as real text."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "avatar"
+      ],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-avatar-group\" role=\"group\" aria-label=\"Members\">\n  <span class=\"wu-avatar blue\" role=\"img\" aria-label=\"Ana Lopez\">AL</span>\n  <span class=\"wu-avatar green\" role=\"img\" aria-label=\"Ben Kim\">BK</span>\n  <span class=\"wu-avatar\" role=\"img\" aria-label=\"3 more members\">+3</span>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-avatar-group animated\" role=\"group\" aria-label=\"Team\">\n  <span class=\"wu-avatar purple\" role=\"img\" aria-label=\"Cy Ray\">CR</span>\n  <span class=\"wu-avatar pink\" role=\"img\" aria-label=\"Di Eze\">DE</span>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "On hover or focus within, the stack fans out into a row when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "avatar",
+      "root": "wu-avatar",
+      "summary": "Round or square badge for a person or product, with initials, an image or an svg, and an optional status dot.",
+      "notes": [
+        "Label it with `aria-label` or the image `alt`, status included.",
+        "`--wu-avatar--Size` overrides every size."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-avatar\" role=\"img\" aria-label=\"Ana Lopez\">AL</span>\n<span class=\"wu-avatar sm blue\" role=\"img\" aria-label=\"Ben Kim\">BK</span>\n<span class=\"wu-avatar lg purple\" role=\"img\" aria-label=\"Cy Ray\">CR</span>"
+        },
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-avatar green\" data-status=\"online\" role=\"img\" aria-label=\"Di Eze, online\">DE</span>\n<span class=\"wu-avatar tile\"><img src=\"https://wovenui.com/images/logo.svg\" alt=\"WovenUI\"></span>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Small or large size; the default is medium",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "tile"
+          ],
+          "description": "Square with rounded corners, for company and product logos",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "gray",
+            "red",
+            "blue",
+            "green",
+            "yellow",
+            "purple",
+            "pink"
+          ],
+          "description": "Tinted fill and text in that hue",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-avatar--Size"
+          ],
+          "description": "Width and height; initials scale with it",
+          "since": "1.0.0",
+          "default": "var(--wu-space-10)"
+        },
+        {
+          "names": [
+            "--wu-avatar--RingColor"
+          ],
+          "description": "Color of the ring around the status dot, shared with avatar group and corner badge",
+          "since": "1.0.0",
+          "default": "var(--wu-bg-surface)"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "data-status=\"online\""
+          ],
+          "description": "Solid dot at the end corner",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "data-status=\"away\""
+          ],
+          "description": "Half-filled dot",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "data-status=\"busy\""
+          ],
+          "description": "Filled dot with a bar",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "data-status=\"offline\""
+          ],
+          "description": "Hollow ring",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "badge",
+      "root": "wu-badge",
+      "summary": "Small pill for counts and short labels, tinted by default and solid for emphasis.",
+      "notes": [],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-badge\">Draft</span>\n<span class=\"wu-badge success\">Paid</span>\n<span class=\"wu-badge danger solid\">3</span>"
+        },
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-badge-host\">\n  <button class=\"wu-btn\" type=\"button\" aria-label=\"Inbox, 3 unread\">Inbox</button>\n  <span class=\"wu-badge corner danger solid\">3</span>\n</span>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand",
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "Role color: tinted fill, border and text; solid fill with `solid`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "solid"
+          ],
+          "description": "Solid fill for stronger emphasis, gray without a role",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "corner"
+          ],
+          "description": "Pins the badge to the top inline-end corner of a `wu-badge-host`",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-badge-host"
+          ],
+          "description": "Wrapper that a corner badge pins to",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-badge--Offset"
+          ],
+          "description": "How far a corner badge sits outside the host corner",
+          "since": "1.0.0",
+          "default": "50%"
+        },
+        {
+          "names": [
+            "--wu-avatar--RingColor"
+          ],
+          "description": "Color of the ring around a corner badge, shared with avatar",
+          "since": "1.0.0",
+          "default": "var(--wu-bg-surface)"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":empty"
+          ],
+          "description": "A corner badge with no content is hidden",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "breadcrumb",
+      "root": "wu-breadcrumb",
+      "summary": "Trail of links that shows where the page sits in the site.",
+      "notes": [
+        "Wrap an ordered list in a `nav` with an `aria-label`, and mark the last item with `aria-current=\"page\"`."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<nav class=\"wu-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"wu-breadcrumb-list\">\n    <li class=\"wu-breadcrumb-item\"><a class=\"wu-breadcrumb-link\" href=\"/\">Home</a></li>\n    <li class=\"wu-breadcrumb-item\"><a class=\"wu-breadcrumb-link\" href=\"/projects/\">Projects</a></li>\n    <li class=\"wu-breadcrumb-item\"><span aria-current=\"page\">Website</span></li>\n  </ol>\n</nav>"
+        },
+        {
+          "lang": "html",
+          "code": "<nav class=\"wu-breadcrumb slash sm\" aria-label=\"Breadcrumb\">\n  <ol class=\"wu-breadcrumb-list\">\n    <li class=\"wu-breadcrumb-item\"><a class=\"wu-breadcrumb-link\" href=\"/\">Home</a></li>\n    <li class=\"wu-breadcrumb-item\"><span aria-current=\"page\">Docs</span></li>\n  </ol>\n</nav>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "slash"
+          ],
+          "description": "A slash separator instead of the chevron",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Smaller font size",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-breadcrumb-list"
+          ],
+          "description": "The `ol` that lays the items out and wraps them",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-breadcrumb-item"
+          ],
+          "description": "One `li` in the trail, with a separator before it",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-breadcrumb-link"
+          ],
+          "description": "Underlined link to a parent page",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-current=\"page\""
+          ],
+          "description": "The current page: regular text weight and color, no underline",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "btn-group",
+      "root": "wu-btn-group",
+      "summary": "Joins buttons into one segmented control, as a split button, a toggle set or a radio set.",
+      "notes": [
+        "Split divider: use `brand`, `danger` or `quiet` on both buttons of a pair. Checkable: use `role=\"group\"` with checkboxes or `role=\"radiogroup\"` with radios.",
+        "The checked label takes the `aria-pressed` look; arrow keys are native for radios. `animated` on a button gives it the press from `wu-btn`."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "button"
+      ],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-btn-group\">\n  <button class=\"wu-btn brand\" type=\"button\">Save</button>\n  <button class=\"wu-btn brand caret\" type=\"button\" popovertarget=\"more-save\" aria-label=\"More save options\"></button>\n</div>\n<div id=\"more-save\" popover>Save as draft</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-btn-group\" role=\"radiogroup\" aria-label=\"Align\">\n  <label class=\"wu-btn\"><input type=\"radio\" name=\"align\" class=\"sr-only\" checked> Left</label>\n  <label class=\"wu-btn\"><input type=\"radio\" name=\"align\" class=\"sr-only\"> Right</label>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-btn-group vertical\" role=\"group\" aria-label=\"View\">\n  <button class=\"wu-btn\" type=\"button\" aria-pressed=\"true\">List</button>\n  <button class=\"wu-btn\" type=\"button\" aria-pressed=\"false\">Grid</button>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "vertical"
+          ],
+          "description": "Stacks the buttons in a column",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "brand",
+            "danger",
+            "quiet"
+          ],
+          "description": "On two neighbor buttons: a divider line between them, for split buttons",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-pressed=\"true\""
+          ],
+          "description": "Toggle on: selected tint and an inner ring; a checked input inside the label does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "button",
+      "root": "wu-btn",
+      "summary": "Buttons for actions, in roles and sizes, with a caret for menus and split buttons.",
+      "notes": [
+        "A `button` element is the default; an `a` element with `wu-btn` looks the same for navigation.",
+        "Inside a `wu-field-group sm` or `lg`, a button without its own size takes the group size."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\">Cancel</button>\n<button class=\"wu-btn brand\" type=\"button\">Save</button>\n<button class=\"wu-btn danger subtle sm\" type=\"button\">Delete</button>"
+        },
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn icon round\" type=\"button\" aria-label=\"Settings\">\n  <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"4\" /></svg>\n</button>\n<button class=\"wu-btn brand\" type=\"button\" aria-busy=\"true\">Saving</button>"
+        },
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn caret\" type=\"button\" popovertarget=\"actions\">Actions</button>\n<div id=\"actions\" popover>Menu content</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand"
+          ],
+          "description": "Solid brand fill for the main action",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "danger"
+          ],
+          "description": "Solid danger fill for destructive actions",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "subtle"
+          ],
+          "description": "With `brand` or `danger`: tinted fill and border, solid on hover",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "quiet"
+          ],
+          "description": "No border or fill until hover",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "link"
+          ],
+          "description": "Looks like a link, no padding, keeps the control height",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "round"
+          ],
+          "description": "Pill shape; a circle when the button is empty or holds only an svg",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "icon"
+          ],
+          "description": "Square button for one svg and no text; give it an `aria-label`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "caret"
+          ],
+          "description": "Adds a caret after the label; an empty caret button with an `aria-label` is a narrow caret-only button for split buttons",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Small or large control height and font size",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Spring press scale when the user allows motion; `wu-animated` on an ancestor or `wu-btn-group animated` does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-btn--CaretSize"
+          ],
+          "description": "Size of the caret",
+          "since": "1.0.0",
+          "default": "0.4em"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "disabled",
+            "aria-disabled=\"true\""
+          ],
+          "description": "Half opacity, no pointer events",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-busy=\"true\""
+          ],
+          "description": "Loading: blocks pointer clicks and keeps full opacity",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":popover-open"
+          ],
+          "description": "The caret turns while the popover right after the button is open",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "card",
+      "root": "wu-card",
+      "summary": "Bordered surface that groups a header, a body and a footer.",
+      "notes": [
+        "Put one real link, usually in the title, on `wu-card-link` to make the whole card clickable. Other controls stay clickable above it."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-card\">\n  <div class=\"wu-card-header\"><h3 class=\"wu-card-title\">Plan</h3></div>\n  <div class=\"wu-card-body\">Everything you need to start.</div>\n  <div class=\"wu-card-footer\"><button class=\"wu-btn brand\" type=\"button\">Choose</button></div>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-card\">\n  <div class=\"wu-card-body\">\n    <h3 class=\"wu-card-title\"><a class=\"wu-card-link\" href=\"/docs/\">Read the docs</a></h3>\n    <p>Guides for every component.</p>\n  </div>\n</div>"
+        }
+      ],
+      "modifiers": [],
+      "parts": [
+        {
+          "names": [
+            "wu-card-header"
+          ],
+          "description": "Top row for a title and actions, with a bottom border",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-card-title"
+          ],
+          "description": "Heading inside the header or body",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-card-body"
+          ],
+          "description": "Main content; it grows so footers line up across a row of cards",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-card-footer"
+          ],
+          "description": "Bottom row for actions, aligned to the end, with a top border",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-card-link"
+          ],
+          "description": "Link stretched over the whole card",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-card--Padding"
+          ],
+          "description": "Padding of the header, body and footer",
+          "since": "1.0.0",
+          "default": "var(--wu-space-5)"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "checkbox",
+      "root": "wu-checkbox",
+      "summary": "Custom checkbox with a label, a check mark and an indeterminate dash.",
+      "notes": [
+        "The box is 1em, so it follows the root type size. The `wu-checkbox-input` part also works alone with an `aria-label`.",
+        "Inside a `wu-field-group sm` or `lg`, a checkbox without its own size takes the group size."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-checkbox\">\n  <input type=\"checkbox\" class=\"wu-checkbox-input\" name=\"terms\" checked>\n  <span class=\"wu-checkbox-label\">I accept the terms</span>\n</label>"
+        },
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-checkbox sm\">\n  <input type=\"checkbox\" class=\"wu-checkbox-input\" name=\"news\" disabled>\n  <span class=\"wu-checkbox-label\">Send the newsletter</span>\n</label>\n<input type=\"checkbox\" class=\"wu-checkbox-input\" name=\"all\" aria-label=\"Select all\">"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Small or large font size, and so box size",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-checkbox-input"
+          ],
+          "description": "The `input` drawn as a box",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-checkbox-label"
+          ],
+          "description": "Label text next to the box",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "checked"
+          ],
+          "description": "Brand fill with a check mark",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "indeterminate"
+          ],
+          "description": "Brand fill with a dash",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Half opacity and a not-allowed cursor",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\""
+          ],
+          "description": "Danger edge that stays on hover and when checked",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "code-block",
+      "root": "wu-code-block",
+      "summary": "Scrollable block for code, with edge shadows when the content overflows.",
+      "notes": [
+        "Use `pre` with `code` inside, and add `tabindex=\"0\"` and an `aria-label` so keyboard users can scroll it.",
+        "For line numbers, wrap each line in a `wu-code-block-line` span. The numbers are not copied or read aloud."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<pre class=\"wu-code-block\" tabindex=\"0\" aria-label=\"Install command\"><code>pnpm add @wovenui/components</code></pre>"
+        },
+        {
+          "lang": "html",
+          "code": "<pre class=\"wu-code-block\" tabindex=\"0\" aria-label=\"Example\"><code><span class=\"wu-code-block-line\">const a = 1;</span>\n<span class=\"wu-code-block-line\">const b = 2;</span></code></pre>"
+        }
+      ],
+      "modifiers": [],
+      "parts": [
+        {
+          "names": [
+            "wu-code-block-line"
+          ],
+          "description": "Inline span for one line, with an optional line number",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-code-block--Background"
+          ],
+          "description": "Background of the block and of its scroll shadow covers",
+          "since": "1.0.0",
+          "default": "var(--wu-bg-alternate)"
+        },
+        {
+          "names": [
+            "--wu-code-block--FontFamily"
+          ],
+          "description": "Font family; the default is a system monospace stack",
+          "since": "1.0.0",
+          "default": "ui-monospace"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":focus-visible"
+          ],
+          "description": "Focus ring, for the scrollable block",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "confirm-modal",
+      "root": "wu-confirm-modal",
+      "summary": "Dialog that asks the user to confirm or cancel an action, with a title, a message and two buttons.",
+      "notes": [
+        "Builds on `wu-modal` for open, close, backdrop and motion, and on `wu-btn` for the actions. Use `role=\"alertdialog\"`.",
+        "The subject is optional and names the object. `danger` gives the message full weight; the confirming button takes `wu-btn danger`. `dialog.returnValue` holds the value of the button that closed it."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "modal",
+        "button"
+      ],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\" commandfor=\"c1\" command=\"show-modal\">Delete</button>\n<dialog class=\"wu-modal wu-confirm-modal danger\" id=\"c1\" role=\"alertdialog\" aria-labelledby=\"c1-title\" aria-describedby=\"c1-subject c1-message\">\n  <h2 class=\"wu-confirm-modal-title\" id=\"c1-title\">Delete project?</h2>\n  <p class=\"wu-confirm-modal-subject\" id=\"c1-subject\">Website redesign</p>\n  <p class=\"wu-confirm-modal-message\" id=\"c1-message\">This cannot be undone.</p>\n  <form class=\"wu-confirm-modal-actions\" method=\"dialog\">\n    <button class=\"wu-btn\" value=\"cancel\" autofocus>Cancel</button>\n    <button class=\"wu-btn danger\" value=\"confirm\">Delete</button>\n  </form>\n</dialog>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "danger"
+          ],
+          "description": "Message at full contrast and body size, for destructive actions",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-confirm-modal-title"
+          ],
+          "description": "Heading that names the question",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-confirm-modal-subject"
+          ],
+          "description": "Optional line that names the object the action applies to",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-confirm-modal-message"
+          ],
+          "description": "Supporting text about the consequence",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-confirm-modal-actions"
+          ],
+          "description": "Form that holds the buttons, aligned to the end",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-confirm-modal--Width"
+          ],
+          "description": "Width of the dialog",
+          "since": "1.0.0",
+          "default": "26rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "data-table",
+      "root": "wu-data-table",
+      "summary": "Sortable table: click a header to sort rows by text or number.",
+      "notes": [
+        "Add it to a `wu-table`; the sort button and arrows come from the table component, and the kit script sorts the first `tbody` and sets `aria-sort`. A `data-sort-value` on a cell wins over its text.",
+        "The script adds a `wu-data-table-status` live region after the table and announces each sort there."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "table"
+      ],
+      "js": {
+        "mode": "required",
+        "exports": [
+          "initDataTable"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<table class=\"wu-table wu-data-table\">\n  <thead>\n    <tr>\n      <th scope=\"col\" aria-sort=\"ascending\"><button class=\"wu-table-sort\" type=\"button\">Name</button></th>\n      <th scope=\"col\" class=\"wu-table-num\"><button class=\"wu-table-sort\" type=\"button\">Amount</button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr><td>Ada</td><td class=\"wu-table-num\" data-sort-value=\"1200\">$1,200</td></tr>\n    <tr><td>Grace</td><td class=\"wu-table-num\" data-sort-value=\"950\">$950</td></tr>\n  </tbody>\n</table>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Rows glide to their new place when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-data-table-status"
+          ],
+          "description": "Visually hidden live region added by the script to announce each sort",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-data-table-row"
+          ],
+          "description": "View transition class, not an HTML class, set on body rows while they move; target `::view-transition-group(*.wu-data-table-row)` to restyle the glide",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-sort=\"ascending\""
+          ],
+          "description": "Header cell sorted ascending, set by the script",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-sort=\"descending\""
+          ],
+          "description": "Header cell sorted descending, set by the script",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-busy=\"true\""
+          ],
+          "description": "Set while rows move: progress cursor, and the row animation runs",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "desc-list",
+      "root": "wu-desc-list",
+      "summary": "Description list of terms and values, plain, divided, bordered or in columns.",
+      "notes": [
+        "Use a `dl`; wrap each pair in a `div` for divided, bordered and column layouts."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<dl class=\"wu-desc-list horizontal divided\">\n  <div><dt>Name</dt><dd>Ada Lovelace</dd></div>\n  <div><dt>Role</dt><dd>Engineer</dd></div>\n</dl>"
+        },
+        {
+          "lang": "html",
+          "code": "<dl class=\"wu-desc-list bordered\">\n  <div><dt>Plan</dt><dd>Team</dd></div>\n  <div><dt>Seats</dt><dd>12</dd></div>\n</dl>"
+        },
+        {
+          "lang": "html",
+          "code": "<dl class=\"wu-desc-list columns\">\n  <div><dt>City</dt><dd>Berlin</dd></div>\n  <div><dt>Country</dt><dd>Germany</dd></div>\n  <div><dt>Timezone</dt><dd>CET</dd></div>\n</dl>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "horizontal"
+          ],
+          "description": "Terms in a column beside their descriptions",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "divided"
+          ],
+          "description": "Lines between the `div` pairs",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "bordered"
+          ],
+          "description": "Table look: lines around every cell, terms on the alternate background",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "columns"
+          ],
+          "description": "Several pairs per row; with `bordered`, each pair is a term cell beside its description",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-desc-list--TermWidth"
+          ],
+          "description": "Width of the term column in `horizontal` and `bordered`",
+          "since": "1.0.0",
+          "default": "fit-content(40%)"
+        },
+        {
+          "names": [
+            "--wu-desc-list--Columns"
+          ],
+          "description": "Most pairs per row in `columns`",
+          "since": "1.0.0",
+          "default": "3"
+        },
+        {
+          "names": [
+            "--wu-desc-list--ColumnWidth"
+          ],
+          "description": "Narrowest a pair gets in `columns` before a row holds fewer",
+          "since": "1.0.0",
+          "default": "10rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "divider",
+      "root": "wu-divider",
+      "summary": "Horizontal or vertical separator line, optionally with a text label between two lines.",
+      "notes": [
+        "Use an `hr` element. `aria-orientation=\"vertical\"` turns it into a vertical line between inline items. With content, the text is read and the lines are decoration."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<hr class=\"wu-divider\">\n<hr class=\"wu-divider dashed\">"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-divider\">or</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<span>Edit</span><hr class=\"wu-divider\" aria-orientation=\"vertical\"><span>Share</span>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "dashed"
+          ],
+          "description": "Dashed line, also on the lines beside a label",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-orientation=\"vertical\""
+          ],
+          "description": "Vertical line that stretches to the row height",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":not(:empty)"
+          ],
+          "description": "With content: the text sits between two lines",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "dot",
+      "root": "wu-dot",
+      "summary": "Small status dot for use next to status text, tinted by role.",
+      "notes": [
+        "Add `aria-hidden=\"true\"` and put the meaning in the text beside it. `success`, `warning` and `danger` also change the shape (check, triangle, octagon), so color is never the only signal.",
+        "A corner dot pins to a `wu-badge-host`, the same wrapper a corner badge uses, and reads `--wu-badge--Offset` and `--wu-avatar--RingColor` from the badge and avatar."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-dot success\" aria-hidden=\"true\"></span> Online"
+        },
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-dot danger animated\" aria-hidden=\"true\"></span> Live"
+        },
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-badge-host\">\n  <button class=\"wu-btn\" type=\"button\" aria-label=\"Inbox, new messages\">Inbox</button>\n  <span class=\"wu-dot corner brand\" aria-hidden=\"true\"></span>\n</span>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand",
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "Role color; success, warning and danger also change the shape",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "corner"
+          ],
+          "description": "Pins the dot to the top inline-end corner of a `wu-badge-host`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Fading ring for live status when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-dot--Size"
+          ],
+          "description": "Width and height of the dot",
+          "since": "1.0.0",
+          "default": "var(--wu-space-2)"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "drawer",
+      "root": "wu-drawer",
+      "summary": "Side panel on the native `dialog` element, docked to the inline end, the inline start or the bottom.",
+      "notes": [
+        "Opens with invoker commands (`commandfor` and `command`), no script. With `show-modal` the page does not scroll while it is open; the page keeps its scrollbar gutter so it does not shift. `show` opens it non-modal and leaves the page alone.",
+        "Docks to the inline end by default; `inline-start` or `bottom` moves it. Right-to-left pages mirror the slide."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\" commandfor=\"d1\" command=\"show-modal\">Filters</button>\n<dialog class=\"wu-drawer\" id=\"d1\" aria-labelledby=\"d1-title\" closedby=\"any\">\n  <header class=\"wu-drawer-header\">\n    <h2 class=\"wu-drawer-title\" id=\"d1-title\">Filters</h2>\n    <button class=\"wu-drawer-close\" type=\"button\" commandfor=\"d1\" command=\"close\" aria-label=\"Close\"></button>\n  </header>\n  <div class=\"wu-drawer-body\">Content</div>\n  <form class=\"wu-drawer-footer\" method=\"dialog\">\n    <button class=\"wu-btn brand\">Apply</button>\n  </form>\n</dialog>"
+        },
+        {
+          "lang": "html",
+          "code": "<dialog class=\"wu-drawer bottom animated\" id=\"d2\" aria-label=\"Details\" closedby=\"any\">\n  <div class=\"wu-drawer-body\">Content</div>\n</dialog>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "inline-start"
+          ],
+          "description": "Docks to the inline start instead of the inline end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "bottom"
+          ],
+          "description": "Docks to the bottom edge with rounded top corners, up to `--wu-drawer--MaxHeight`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Slides in from its edge and fades the backdrop when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-drawer-header"
+          ],
+          "description": "Top row with the title and close button",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-drawer-title"
+          ],
+          "description": "Heading in the header",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-drawer-body"
+          ],
+          "description": "Scrolling content area that fills the drawer",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-drawer-footer"
+          ],
+          "description": "Bottom row for actions, aligned to the inline end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-drawer-close"
+          ],
+          "description": "Close button drawn by the shared close style; give it an `aria-label`",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-drawer--Width"
+          ],
+          "description": "Drawer width when docked to a side",
+          "since": "1.0.0",
+          "default": "24rem"
+        },
+        {
+          "names": [
+            "--wu-drawer--MaxHeight"
+          ],
+          "description": "Maximum height of a bottom drawer",
+          "since": "1.0.0",
+          "default": "75dvh"
+        },
+        {
+          "names": [
+            "--wu-drawer--Backdrop"
+          ],
+          "description": "Color behind a modal drawer",
+          "since": "1.0.0",
+          "default": "50% black, 70% in dark themes"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "open"
+          ],
+          "description": "Shown as a flex column so the body scrolls between header and footer",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":modal"
+          ],
+          "description": "Locks page scroll while the drawer is open with `show-modal`",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "dropdown",
+      "root": "wu-dropdown",
+      "summary": "Menu of links and buttons in a native popover, anchored under its trigger.",
+      "notes": [
+        "A button with `popovertarget` opens it; `commandfor` with `command=\"toggle-popover\"` works as the trigger too. Esc and a click outside close it. `popovertargetaction=\"hide\"` on a button item closes the menu after its click handler runs.",
+        "Opens under the trigger where anchor positioning exists and flips when there is no room; elsewhere it is centered in the viewport. Engines without implicit anchors need `anchor-name` on the trigger and `position-anchor` on the menu, with the same name.",
+        "`inline-end` aligns the menu's inline end with the trigger's, as for the caret of a split button."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn caret\" type=\"button\" popovertarget=\"menu1\">Actions</button>\n<div class=\"wu-dropdown\" id=\"menu1\" popover>\n  <a class=\"wu-dropdown-item\" href=\"/edit\">Edit</a>\n  <button class=\"wu-dropdown-item\" type=\"button\" popovertarget=\"menu1\" popovertargetaction=\"hide\">Duplicate</button>\n  <hr class=\"wu-dropdown-separator\">\n  <button class=\"wu-dropdown-item danger\" type=\"button\" popovertarget=\"menu1\" popovertargetaction=\"hide\">Delete</button>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "inline-end"
+          ],
+          "description": "Aligns the menu's inline end with the trigger's inline end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "danger"
+          ],
+          "description": "On an item: danger text and a danger hover tint",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Fades and slides in and out when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-dropdown-item"
+          ],
+          "description": "Link or button row in the menu; an `svg` child is sized as an icon",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-dropdown-separator"
+          ],
+          "description": "Line between groups of items; use an `hr`",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-dropdown--MinWidth"
+          ],
+          "description": "Minimum menu width",
+          "since": "1.0.0",
+          "default": "10rem"
+        },
+        {
+          "names": [
+            "--wu-dropdown--MaxHeight"
+          ],
+          "description": "Maximum menu height before it scrolls",
+          "since": "1.0.0",
+          "default": "20rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "disabled",
+            "aria-disabled=\"true\""
+          ],
+          "description": "On an item: half opacity, no pointer events",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":popover-open"
+          ],
+          "description": "A plain trigger button right before the menu takes a hover look while it is open",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "empty-state",
+      "root": "wu-empty-state",
+      "summary": "Centered message for a view with no content or a finished result, with an icon, title, text and actions.",
+      "notes": [
+        "The icon slot holds the app's own icon; left empty, it draws a calm empty-box shape. Result roles tint the slot, and an empty slot draws the alert's marker shape.",
+        "The title text carries the meaning (\"Payment received\"); the shape repeats it."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-empty-state\">\n  <span class=\"wu-empty-state-icon\" aria-hidden=\"true\"></span>\n  <h3 class=\"wu-empty-state-title\">No projects yet</h3>\n  <p class=\"wu-empty-state-text\">Create a project to get started.</p>\n  <div class=\"wu-empty-state-actions\">\n    <button class=\"wu-btn brand\" type=\"button\">New project</button>\n  </div>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-empty-state success sm dashed\">\n  <span class=\"wu-empty-state-icon\" aria-hidden=\"true\"></span>\n  <h3 class=\"wu-empty-state-title\">Payment received</h3>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "dashed"
+          ],
+          "description": "Dashed border and radius around the whole state",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Compact size for use inside a card, panel or table",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "success",
+            "warning",
+            "danger",
+            "info"
+          ],
+          "description": "Result: tints the icon slot; an empty slot draws the marker shape",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-empty-state-icon"
+          ],
+          "description": "Round icon slot; empty, it draws a shape",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-empty-state-title"
+          ],
+          "description": "Heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-empty-state-text"
+          ],
+          "description": "Supporting text, limited to a readable width",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-empty-state-actions"
+          ],
+          "description": "Centered row for buttons",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            ":empty"
+          ],
+          "description": "An empty icon slot draws the empty-box or marker shape",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "field-group",
+      "root": "wu-field-group",
+      "summary": "Group of fields in a `fieldset`, stacked by default or side by side.",
+      "notes": [
+        "Use a `fieldset` with a `legend` of class `wu-field-group-legend`. A `sm` or `lg` on the group sizes the inputs, affixes and buttons inside it that have no size of their own; that rule lives in the input and button partials."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<fieldset class=\"wu-field-group\">\n  <legend class=\"wu-field-group-legend\">Contact</legend>\n  <div class=\"wu-field\">\n    <label class=\"wu-field-label\" for=\"g-name\">Name</label>\n    <input class=\"wu-input\" id=\"g-name\" type=\"text\">\n  </div>\n  <div class=\"wu-field\">\n    <label class=\"wu-field-label\" for=\"g-mail\">Email</label>\n    <input class=\"wu-input\" id=\"g-mail\" type=\"email\">\n  </div>\n</fieldset>"
+        },
+        {
+          "lang": "html",
+          "code": "<fieldset class=\"wu-field-group horizontal\">\n  <legend class=\"wu-field-group-legend\">Dates</legend>\n  <div class=\"wu-field\">\n    <label class=\"wu-field-label\" for=\"g-from\">From</label>\n    <input class=\"wu-input\" id=\"g-from\" type=\"date\">\n  </div>\n  <div class=\"wu-field\">\n    <label class=\"wu-field-label\" for=\"g-to\">To</label>\n    <input class=\"wu-input\" id=\"g-to\" type=\"date\">\n  </div>\n</fieldset>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "horizontal"
+          ],
+          "description": "Fields side by side, wrapping when narrower than `--wu-field-group--MinWidth`",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-field-group-legend"
+          ],
+          "description": "Group title",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-field-group--MinWidth"
+          ],
+          "description": "Width at which a field in a horizontal group wraps",
+          "since": "1.0.0",
+          "default": "12rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "field-message",
+      "root": "wu-field-message",
+      "summary": "Hint, error or success text under a form control, with a marker shape for each role.",
+      "notes": [
+        "Link it from the control with `aria-describedby`. The words carry the meaning (\"Error: ...\"); the role adds color and a marker shape: `error` a larger octagon with an exclamation mark, `success` a check, `info` a small circle.",
+        "Inside a `wu-field`, an `error` message stays hidden until the control is invalid."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<p class=\"wu-field-message\" id=\"hint\">Use your work email.</p>\n<p class=\"wu-field-message error\" id=\"err\">Error: enter a valid email.</p>\n<p class=\"wu-field-message success\" id=\"ok\">Email confirmed.</p>\n<p class=\"wu-field-message info\" id=\"note\">We never share it.</p>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "error",
+            "success",
+            "info"
+          ],
+          "description": "Role color and marker shape; error is also medium weight",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "field",
+      "root": "wu-field",
+      "summary": "Form field that stacks a label, a control and its messages, with a required marker and a floating label option.",
+      "notes": [
+        "The required marker comes from `required` or `aria-required=\"true\"` on the control. An `error` message is hidden until the control is invalid. Its id joins `aria-describedby` only while it shows: server-rendered with `aria-invalid=\"true\"`, or added by your script. Leave it out otherwise, so a hidden error is never announced; for `:user-invalid` the browser's own validation message speaks on submit.",
+        "`floating` needs `placeholder=\" \"` on the input and is not used with `horizontal`. `horizontal` puts the label beside the control from the `sm` breakpoint up."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-field\">\n  <label class=\"wu-field-label\" for=\"f1\">Email</label>\n  <input class=\"wu-input\" id=\"f1\" type=\"email\" required aria-describedby=\"f1-hint\">\n  <p class=\"wu-field-message\" id=\"f1-hint\">Hint</p>\n  <p class=\"wu-field-message error\" id=\"f1-error\">Error: enter a valid email.</p>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-field floating animated\">\n  <label class=\"wu-field-label\" for=\"f2\">Name</label>\n  <input class=\"wu-input\" id=\"f2\" type=\"text\" placeholder=\" \">\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "horizontal"
+          ],
+          "description": "Label beside the control from `sm` up, in a column of `--wu-field--LabelWidth`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "error"
+          ],
+          "description": "On a `wu-field-message` inside the field: hidden until the control is invalid",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "floating"
+          ],
+          "description": "Label inside the input, moved up on focus or once filled",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "On a floating field: the label slides when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-field-label"
+          ],
+          "description": "Label above the control",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-field--LabelWidth"
+          ],
+          "description": "Label column width in a horizontal field",
+          "since": "1.0.0",
+          "default": "10rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":required",
+            "aria-required=\"true\""
+          ],
+          "description": "On the control: adds a required marker to the label",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "On the control: shows the `error` message",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "form-actions",
+      "root": "wu-form-actions",
+      "summary": "Footer row for form buttons, start-aligned by default.",
+      "notes": [
+        "`wu-form-actions-end` inside the row pushes a set of buttons to the inline end."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-form-actions divided\">\n  <button class=\"wu-btn brand\" type=\"submit\">Save</button>\n  <button class=\"wu-btn\" type=\"reset\">Reset</button>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-form-actions\">\n  <button class=\"wu-btn danger subtle\" type=\"button\">Delete</button>\n  <div class=\"wu-form-actions-end\">\n    <button class=\"wu-btn\" type=\"button\">Cancel</button>\n    <button class=\"wu-btn brand\" type=\"submit\">Save</button>\n  </div>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "trailing"
+          ],
+          "description": "Aligns the buttons to the inline end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "centered"
+          ],
+          "description": "Centers the buttons",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "divided"
+          ],
+          "description": "Line and padding above the row",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-form-actions-end"
+          ],
+          "description": "Set of buttons pushed to the inline end of the row",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "info-row",
+      "root": "wu-info-row",
+      "summary": "One label and value pair, with a line between adjacent rows.",
+      "notes": [
+        "Works as a `div` with `dt` and `dd` inside a `dl`."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-info-row\">\n  <span class=\"wu-info-row-label\">Tax</span>\n  <span class=\"wu-info-row-value\">$9.60</span>\n</div>\n<div class=\"wu-info-row total\">\n  <span class=\"wu-info-row-label\">Total</span>\n  <span class=\"wu-info-row-value\">$129.60</span>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "total"
+          ],
+          "description": "Strong line above, regular label text and a larger value",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-info-row-label"
+          ],
+          "description": "Muted label",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-info-row-value"
+          ],
+          "description": "Value, end-aligned with tabular numbers",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "input-group",
+      "root": "wu-input-group",
+      "summary": "Joined row of text addons, an input and buttons that share one border and radius.",
+      "notes": [
+        "Size the children (`wu-input sm`, `wu-btn sm`); addons stretch to the row height. Default buttons take the field border; `brand`, `danger`, `quiet` and `link` buttons keep their own look. The hovered, focused or invalid control rises above its neighbors."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-input-group\">\n  <span class=\"wu-input-group-text\">https://</span>\n  <input class=\"wu-input\" type=\"text\" aria-label=\"Website\" placeholder=\"example.com\">\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-input-group\">\n  <input class=\"wu-input sm\" type=\"search\" aria-label=\"Search\" placeholder=\"Search\">\n  <button class=\"wu-btn brand sm\" type=\"button\">Search</button>\n</div>"
+        }
+      ],
+      "modifiers": [],
+      "parts": [
+        {
+          "names": [
+            "wu-input-group-text"
+          ],
+          "description": "Text addon with the alternate background; an `svg` child is sized as an icon",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "input",
+      "root": "wu-input",
+      "summary": "Text input in three sizes, with disabled, read-only and invalid looks, plus prefix, suffix and a clear button inside the field border.",
+      "notes": [
+        "Core base already sets the border, background, hover, focus ring, invalid border, disabled look, placeholder color, padding and the md height; the kit adds the radius, type size and sizes.",
+        "`wu-input-affix` draws the box and the input inside goes bare. Prefix and suffix sit on the inline start and end, so they swap in right-to-left pages. A `wu-select` can replace the input. `sm` and `lg` go on the wrapper. `wu-input-clear` is started by the kit script: it shows while the field has text, clears it and refocuses."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "optional",
+        "exports": [
+          "initInputClear"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<input class=\"wu-input\" type=\"text\" aria-label=\"Name\" placeholder=\"Name\">\n<input class=\"wu-input sm\" type=\"text\" aria-label=\"Code\" value=\"A-12\" readonly>\n<input class=\"wu-input lg\" type=\"email\" aria-label=\"Email\" aria-invalid=\"true\">"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-input-affix\">\n  <span class=\"wu-input-prefix\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"6\" /></svg></span>\n  <input class=\"wu-input\" type=\"search\" aria-label=\"Search\">\n  <button class=\"wu-input-clear\" type=\"button\" aria-label=\"Clear\" hidden></button>\n  <span class=\"wu-input-suffix\">USD</span>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Small or large control height, padding and font size; also on `wu-input-affix`, and taken from a `wu-field-group sm` or `lg` when the control has no size",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-input-affix"
+          ],
+          "description": "Wrapper that draws the field box around a bare input or select, with a prefix, suffix and clear button",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-input-prefix"
+          ],
+          "description": "Content before the input, such as an icon or currency symbol",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-input-suffix"
+          ],
+          "description": "Content after the input, such as a unit",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-input-clear"
+          ],
+          "description": "Clear button inside the affix; an empty button shows a multiplication sign; give it an `aria-label`",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Not-allowed cursor; an affix with a disabled control dims",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "readonly"
+          ],
+          "description": "Alternate background",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "Danger border doubled to 2px, so the change is not color alone",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "list",
+      "root": "wu-list",
+      "summary": "Vertical list of rows with a title, text and room for leading or trailing content.",
+      "notes": [
+        "Use a `ul` or `ol`; add `role=\"list\"` to keep list semantics without markers. `wu-list-body` grows between leading and trailing content such as an avatar, badge or button."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<ul class=\"wu-list divided\" role=\"list\">\n  <li class=\"wu-list-item\">\n    <div class=\"wu-list-body\">\n      <p class=\"wu-list-title\">Ada Lovelace</p>\n      <p class=\"wu-list-text\">Engineer</p>\n    </div>\n    <span class=\"wu-badge success\">Active</span>\n  </li>\n  <li class=\"wu-list-item\">\n    <div class=\"wu-list-body\">\n      <p class=\"wu-list-title\">Grace Hopper</p>\n    </div>\n  </li>\n</ul>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "divided"
+          ],
+          "description": "Line between rows",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Tighter row padding",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-list-item"
+          ],
+          "description": "Row, a flex container",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-list-body"
+          ],
+          "description": "Column that grows between leading and trailing content",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-list-title"
+          ],
+          "description": "Row title, medium weight",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-list-text"
+          ],
+          "description": "Muted supporting text",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "modal",
+      "root": "wu-modal",
+      "summary": "Dialog built on the native `dialog` element, with header, body and footer.",
+      "notes": [
+        "Esc closes it, and `closedby=\"any\"` adds click outside where supported. `showModal()` and the `command` attribute lock page scroll; `show()` opens it non-modal and leaves the page alone.",
+        "The body scrolls on its own when the content is taller than the dialog."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\" commandfor=\"m1\" command=\"show-modal\">Open</button>\n<dialog class=\"wu-modal\" id=\"m1\" aria-labelledby=\"m1-title\" closedby=\"any\">\n  <header class=\"wu-modal-header\">\n    <h2 class=\"wu-modal-title\" id=\"m1-title\">Title</h2>\n    <button class=\"wu-modal-close\" type=\"button\" commandfor=\"m1\" command=\"close\" aria-label=\"Close\"></button>\n  </header>\n  <div class=\"wu-modal-body\">Content</div>\n  <form class=\"wu-modal-footer\" method=\"dialog\">\n    <button class=\"wu-btn\">Cancel</button>\n    <button class=\"wu-btn brand\" value=\"confirm\">Save</button>\n  </form>\n</dialog>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Narrow (24rem) or wide (48rem) dialog; the default is 32rem",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Fades and scales the dialog in and out and fades the backdrop when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-modal-header"
+          ],
+          "description": "Top row for the title and close button",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-modal-title"
+          ],
+          "description": "Dialog heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-modal-close"
+          ],
+          "description": "Close button drawn with the shared close icon; give it an `aria-label`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-modal-body"
+          ],
+          "description": "Scrolling content area",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-modal-footer"
+          ],
+          "description": "Bottom row for actions, aligned to the inline end",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-modal--Width"
+          ],
+          "description": "Dialog width",
+          "since": "1.0.0",
+          "default": "32rem"
+        },
+        {
+          "names": [
+            "--wu-modal--MaxHeight"
+          ],
+          "description": "Largest dialog height before the body scrolls",
+          "since": "1.0.0",
+          "default": "calc(100dvh - 4rem)"
+        },
+        {
+          "names": [
+            "--wu-modal--Backdrop"
+          ],
+          "description": "Backdrop color",
+          "since": "1.0.0",
+          "default": "50% black, 70% in dark themes"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "open"
+          ],
+          "description": "Displays the dialog as a flex column",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "page-header",
+      "root": "wu-page-header",
+      "summary": "Page title row with an optional description, breadcrumb and action buttons.",
+      "notes": [
+        "Actions line up with the title and wrap below it on narrow screens. A direct `wu-breadcrumb` child takes its own full-width row above the title."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<header class=\"wu-page-header divided\">\n  <nav class=\"wu-breadcrumb\" aria-label=\"Breadcrumb\">\n    <ol>\n      <li><a href=\"/projects\">Projects</a></li>\n      <li aria-current=\"page\">Apollo</li>\n    </ol>\n  </nav>\n  <div class=\"wu-page-header-main\">\n    <h1 class=\"wu-page-header-title\">Apollo</h1>\n    <p class=\"wu-page-header-text\">Launch plan and open tasks.</p>\n  </div>\n  <div class=\"wu-page-header-actions\">\n    <button class=\"wu-btn\" type=\"button\">Share</button>\n    <button class=\"wu-btn brand\" type=\"button\">New task</button>\n  </div>\n</header>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "divided"
+          ],
+          "description": "Adds a bottom border and padding under the header",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-page-header-main"
+          ],
+          "description": "Column that holds the title and description",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-page-header-title"
+          ],
+          "description": "Page heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-page-header-text"
+          ],
+          "description": "Muted description under the title",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-page-header-actions"
+          ],
+          "description": "Row of buttons, centered on the title first line",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "pagination",
+      "root": "wu-pagination",
+      "summary": "Page navigation made of button links, with optional total count and page size select.",
+      "notes": [
+        "Use a `nav` with an `aria-label`, and give an arrow-only previous or next link an `aria-label`. Mark the current link with `aria-current=\"page\"`.",
+        "Put a `wu-pagination-total` and a `wu-pagination-size` label holding a `wu-select` beside the list."
+      ],
+      "since": "1.0.0",
+      "needs": [
+        "button"
+      ],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<nav class=\"wu-pagination\" aria-label=\"Pagination\">\n  <ul class=\"wu-pagination-list\">\n    <li><a class=\"wu-btn wu-pagination-prev\" href=\"/orders?page=1\" aria-label=\"Previous page\"></a></li>\n    <li><a class=\"wu-btn\" href=\"/orders?page=1\">1</a></li>\n    <li><a class=\"wu-btn\" href=\"/orders?page=2\" aria-current=\"page\">2</a></li>\n    <li><span class=\"wu-pagination-ellipsis\">&hellip;</span></li>\n    <li><a class=\"wu-btn\" href=\"/orders?page=9\">9</a></li>\n    <li><a class=\"wu-btn wu-pagination-next\" href=\"/orders?page=3\" aria-label=\"Next page\"></a></li>\n  </ul>\n  <span class=\"wu-pagination-total\">Showing 11 to 20 of 86</span>\n</nav>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger buttons and ellipsis",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-pagination-list"
+          ],
+          "description": "List that holds the page links",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-pagination-ellipsis"
+          ],
+          "description": "Gap marker between page numbers",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-pagination-prev"
+          ],
+          "description": "On a link: draws a back arrow that follows the reading direction",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-pagination-next"
+          ],
+          "description": "On a link: draws a forward arrow that follows the reading direction",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-pagination-total"
+          ],
+          "description": "Muted total count text",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-pagination-size"
+          ],
+          "description": "Label that holds a `wu-select` for the page size",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-current=\"page\""
+          ],
+          "description": "The current page: solid brand fill",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "panel",
+      "root": "wu-panel",
+      "summary": "Flat bordered region for grouped settings or data.",
+      "notes": [
+        "The card is the raised surface; the panel stays flat with a border."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<section class=\"wu-panel\">\n  <header class=\"wu-panel-header\">\n    <h2 class=\"wu-panel-title\">Notifications</h2>\n    <button class=\"wu-btn sm\" type=\"button\">Edit</button>\n  </header>\n  <div class=\"wu-panel-body\">Email me about new comments.</div>\n  <footer class=\"wu-panel-footer\">\n    <button class=\"wu-btn brand\" type=\"button\">Save</button>\n  </footer>\n</section>"
+        }
+      ],
+      "modifiers": [],
+      "parts": [
+        {
+          "names": [
+            "wu-panel-header"
+          ],
+          "description": "Top row with a tinted background and bottom border",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-panel-title"
+          ],
+          "description": "Panel heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-panel-body"
+          ],
+          "description": "Content area",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-panel-footer"
+          ],
+          "description": "Bottom row for actions, aligned to the inline end",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-panel--Padding"
+          ],
+          "description": "Inline padding of the header and footer, and padding of the body",
+          "since": "1.0.0",
+          "default": "1rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "popover",
+      "root": "wu-popover",
+      "summary": "Small floating panel built on the native `popover` attribute.",
+      "notes": [
+        "Esc and click outside close it. `commandfor` with `command=\"toggle-popover\"` works as the trigger too.",
+        "Opens under its trigger where anchor positioning exists, and flips when there is no room. Elsewhere it is centered in the viewport. It has no arrow.",
+        "Placement follows the popover own direction, so it is right in an RTL section of an LTR page."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\" popovertarget=\"p1\">Details</button>\n<div class=\"wu-popover\" id=\"p1\" popover>\n  <h3 class=\"wu-popover-title\">Title</h3>\n  <p>Short content.</p>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<button class=\"wu-btn\" type=\"button\" popovertarget=\"p2\">Delete</button>\n<div class=\"wu-popover\" id=\"p2\" popover>\n  <p>Delete this item?</p>\n  <div class=\"wu-popover-actions\">\n    <button class=\"wu-btn sm\" type=\"button\" popovertarget=\"p2\" popovertargetaction=\"hide\">Cancel</button>\n    <button class=\"wu-btn danger sm\" type=\"button\" popovertarget=\"p2\" popovertargetaction=\"hide\">Delete</button>\n  </div>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Fades and scales the popover in and out, growing away from the trigger, when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-popover-title"
+          ],
+          "description": "Popover heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-popover-actions"
+          ],
+          "description": "Button row at the inline end, for an inline confirm",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-popover--MaxWidth"
+          ],
+          "description": "Largest popover width",
+          "since": "1.0.0",
+          "default": "20rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":popover-open"
+          ],
+          "description": "Fully visible during the animated transition",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "progress-circle",
+      "root": "wu-progress-circle",
+      "summary": "Circular progress ring that shows a percentage.",
+      "notes": [
+        "It is not a native element, so name the role and value: `role=\"progressbar\"` with `aria-label`, `aria-valuenow`, `aria-valuemin` and `aria-valuemax`.",
+        "The value is a percentage from 0 to 100, set with `--wu-progress-circle--Value`. The ring color is `currentcolor`, so roles and `color` set it."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-progress-circle\" role=\"progressbar\" aria-label=\"Upload\" aria-valuenow=\"72\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"--wu-progress-circle--Value: 72\">\n  <span class=\"wu-progress-circle-label\">72%</span>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-progress-circle success lg animated\" role=\"progressbar\" aria-label=\"Storage\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"--wu-progress-circle--Value: 40\">\n  <span class=\"wu-progress-circle-label\">40%</span>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "Role color for the ring",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller (2.5rem) or larger (6rem) ring with a thinner or thicker band",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "The ring eases to each new value when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-progress-circle-label"
+          ],
+          "description": "Text centered in the ring",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-progress-circle--Value"
+          ],
+          "description": "Percentage from 0 to 100; a registered property, so it can transition",
+          "since": "1.0.0",
+          "default": "0"
+        },
+        {
+          "names": [
+            "--wu-progress-circle--Size"
+          ],
+          "description": "Width and height of the ring",
+          "since": "1.0.0",
+          "default": "4rem"
+        },
+        {
+          "names": [
+            "--wu-progress-circle--Thickness"
+          ],
+          "description": "Width of the ring band",
+          "since": "1.0.0",
+          "default": "0.5rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "progress",
+      "root": "wu-progress",
+      "summary": "Horizontal progress bar on the native `progress` element.",
+      "notes": [
+        "Without a `value` attribute it is indeterminate and shows a sliding segment. Label it with a `label` element or `aria-label`.",
+        "The fill uses `currentcolor`, so roles and `color` set it."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-progress-label\" for=\"upload\"><span>Uploading</span><span>72%</span></label>\n<progress class=\"wu-progress\" id=\"upload\" value=\"72\" max=\"100\"></progress>"
+        },
+        {
+          "lang": "html",
+          "code": "<progress class=\"wu-progress success sm\" value=\"40\" max=\"100\" aria-label=\"Storage used\"></progress>\n<progress class=\"wu-progress lg\" aria-label=\"Loading\"></progress>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "Role color for the fill",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Thinner (0.25rem) or thicker (0.75rem) bar",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-progress-label"
+          ],
+          "description": "Row above the bar for a title and a value",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-progress--Height"
+          ],
+          "description": "Bar height",
+          "since": "1.0.0",
+          "default": "0.5rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":indeterminate"
+          ],
+          "description": "No value: a segment slides across the track",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "radio",
+      "root": "wu-radio",
+      "summary": "Radio button with a label, drawn from the native input.",
+      "notes": [
+        "The circle is `1em`, so it follows the root type size. The `wu-radio-input` part also works alone with an `aria-label`.",
+        "Inside a `wu-field-group sm` or `lg`, a radio without its own size takes the group size."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-radio\">\n  <input type=\"radio\" class=\"wu-radio-input\" name=\"plan\" value=\"free\" checked>\n  <span class=\"wu-radio-label\">Free</span>\n</label>\n<label class=\"wu-radio\">\n  <input type=\"radio\" class=\"wu-radio-input\" name=\"plan\" value=\"pro\">\n  <span class=\"wu-radio-label\">Pro</span>\n</label>"
+        },
+        {
+          "lang": "html",
+          "code": "<input type=\"radio\" class=\"wu-radio-input\" name=\"size\" value=\"m\" aria-label=\"Medium\">"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger text and circle",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-radio-input"
+          ],
+          "description": "The native radio input, drawn as a circle with a dot",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-radio-label"
+          ],
+          "description": "Label text beside the circle",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Half opacity, no pointer events",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "Two pixel danger edge that stays on hover and when checked",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":checked"
+          ],
+          "description": "Brand fill with a dot",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "segmented",
+      "root": "wu-segmented",
+      "summary": "Radio group shown as connected segments, one selected at a time.",
+      "notes": [
+        "Arrow keys move the choice natively, and segments share the width equally. A `div` with `role=\"radiogroup\"` and an `aria-label` works instead of a `fieldset`.",
+        "Type follows the button: `xs`, `sm` and `md` for `sm`, default and `lg`. The animated thumb supports up to six label segments."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<fieldset class=\"wu-segmented\">\n  <legend class=\"sr-only\">View</legend>\n  <label class=\"wu-segmented-item\"><input type=\"radio\" name=\"view\" class=\"wu-segmented-input\" value=\"day\" checked> Day</label>\n  <label class=\"wu-segmented-item\"><input type=\"radio\" name=\"view\" class=\"wu-segmented-input\" value=\"week\"> Week</label>\n  <label class=\"wu-segmented-item\"><input type=\"radio\" name=\"view\" class=\"wu-segmented-input\" value=\"month\"> Month</label>\n</fieldset>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger control height and font size",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "One thumb slides to the checked segment with a spring when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-segmented-item"
+          ],
+          "description": "One segment: the label that wraps a radio input",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-segmented-input"
+          ],
+          "description": "The radio input, visually hidden but focusable and announced",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            ":checked"
+          ],
+          "description": "The selected segment has a raised surface, an edge and a shadow",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Half opacity on that segment",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "select",
+      "root": "wu-select",
+      "summary": "Native `select` with the kit input look and a drawn arrow.",
+      "notes": [
+        "Core base already sets the border, background, hover, focus ring, invalid border, disabled look, padding and the default height. List boxes (`multiple` or `size`) keep their natural height and have no arrow.",
+        "Where `appearance: base-select` is supported, the picker matches the kit; other browsers keep the native list.",
+        "Inside a `wu-field-group sm` or `lg`, a select without its own size takes the group size."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<select class=\"wu-select\" name=\"country\" aria-label=\"Country\">\n  <option>Pakistan</option>\n  <option>United Arab Emirates</option>\n</select>"
+        },
+        {
+          "lang": "html",
+          "code": "<select class=\"wu-select sm\" name=\"sort\" aria-label=\"Sort by\" aria-invalid=\"true\">\n  <option>Newest</option>\n  <option>Oldest</option>\n</select>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger control height and padding",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-select--ArrowColor"
+          ],
+          "description": "Color of the arrow",
+          "since": "1.0.0",
+          "default": "var(--wu-text-muted)"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Not-allowed cursor on top of core disabled look",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "Danger edge doubled to two pixels, so the change is not color alone",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "sidebar",
+      "root": "wu-sidebar",
+      "summary": "Vertical navigation with sections, link lists and collapsible groups.",
+      "notes": [
+        "Use a `nav` with an `aria-label`, and mark the current link with `aria-current=\"page\"`. A collapsible group is a `details` with the `wu-sidebar-group` class and a `summary` with `wu-sidebar-toggle`; the toggle may also be a `button` with `aria-expanded`.",
+        "On narrow screens put the sidebar in a `dialog` with `wu-drawer inline-start`, where it fills the drawer.",
+        "Icon rail: add `collapsed`; each link holds an `svg` and a `wu-sidebar-label`, shown as a tooltip on hover or focus."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<nav class=\"wu-sidebar\" aria-label=\"Main\">\n  <div class=\"wu-sidebar-section\">\n    <h2 class=\"wu-sidebar-heading\">Workspace</h2>\n    <ul class=\"wu-sidebar-list\">\n      <li><a class=\"wu-sidebar-link\" href=\"/dashboard\" aria-current=\"page\">Dashboard</a></li>\n      <li>\n        <details class=\"wu-sidebar-group\" open>\n          <summary class=\"wu-sidebar-toggle\">Projects</summary>\n          <ul class=\"wu-sidebar-list\">\n            <li><a class=\"wu-sidebar-link\" href=\"/projects/apollo\">Apollo</a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </div>\n  <div class=\"wu-sidebar-footer\">Signed in as Sam</div>\n</nav>"
+        },
+        {
+          "lang": "html",
+          "code": "<nav class=\"wu-sidebar collapsed pinned\" aria-label=\"Main\">\n  <ul class=\"wu-sidebar-list\">\n    <li>\n      <a class=\"wu-sidebar-link\" href=\"/settings\">\n        <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"4\" /></svg>\n        <span class=\"wu-sidebar-label\">Settings</span>\n      </a>\n    </li>\n  </ul>\n</nav>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "pinned"
+          ],
+          "description": "Sticks beside scrolling content and scrolls on its own",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "collapsed"
+          ],
+          "description": "Icon rail: labels and headings are visually hidden, and a label shows as a tooltip on hover or focus",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Animates the width, the chevron and the opening of groups when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-sidebar-header"
+          ],
+          "description": "Top row for a logo or title",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-footer"
+          ],
+          "description": "Bottom row, pushed to the end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-section"
+          ],
+          "description": "Group of a heading and a list",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-heading"
+          ],
+          "description": "Small muted section heading",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-list"
+          ],
+          "description": "Vertical list of links; nested inside a group it is indented",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-group"
+          ],
+          "description": "A `details` element that collapses a nested list",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-toggle"
+          ],
+          "description": "Row that opens or closes a group, with a chevron",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-link"
+          ],
+          "description": "Navigation link row",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-sidebar-label"
+          ],
+          "description": "Text label of a link; hidden and shown as a tooltip when collapsed",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-sidebar--Width"
+          ],
+          "description": "Sidebar width",
+          "since": "1.0.0",
+          "default": "16rem"
+        },
+        {
+          "names": [
+            "--wu-sidebar--CollapsedWidth"
+          ],
+          "description": "Width of the icon rail",
+          "since": "1.0.0",
+          "default": "calc(1em + 3rem)"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "aria-current=\"page\""
+          ],
+          "description": "The current link: tinted fill and a bar at the inline start",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "open",
+            "aria-expanded=\"true\""
+          ],
+          "description": "The chevron points down",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "skeleton",
+      "root": "wu-skeleton",
+      "summary": "Placeholder shapes shown while content loads.",
+      "notes": [
+        "Placeholders are decorative: add `aria-hidden=\"true\"` to each skeleton and `aria-busy=\"true\"` to the region being loaded, plus visible or hidden Loading text. Remove both when the content arrives.",
+        "The default shape is a block. Adjacent `text` skeletons stack with a gap, and a last `text` line is shorter."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div aria-busy=\"true\">\n  <span class=\"sr-only\">Loading</span>\n  <div class=\"wu-skeleton circle animated\" aria-hidden=\"true\"></div>\n  <div class=\"wu-skeleton text animated\" aria-hidden=\"true\"></div>\n  <div class=\"wu-skeleton text animated\" aria-hidden=\"true\"></div>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-skeleton\" aria-hidden=\"true\" style=\"--wu-skeleton--Height: 8rem\"></div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "text"
+          ],
+          "description": "One line of text: height of `1em`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "circle"
+          ],
+          "description": "Round shape for an avatar",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Shimmer sweep, staggered across siblings where supported, when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-skeleton--Width"
+          ],
+          "description": "Width; a last `text` line defaults to 60%",
+          "since": "1.0.0",
+          "default": "100%"
+        },
+        {
+          "names": [
+            "--wu-skeleton--Height"
+          ],
+          "description": "Height; `text` defaults to 1em",
+          "since": "1.0.0",
+          "default": "6rem"
+        },
+        {
+          "names": [
+            "--wu-skeleton--Size"
+          ],
+          "description": "Width and height of a `circle`",
+          "since": "1.0.0",
+          "default": "2.5rem"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "spinner",
+      "root": "wu-spinner",
+      "summary": "Loading ring in the current text color, with an overlay for busy regions.",
+      "notes": [
+        "Pair it with `role=\"status\"` and hidden text, or use `aria-hidden=\"true\"` next to visible text. Reduced motion is handled by core reset.",
+        "The overlay covers its parent, dims the content and centers a spinner with optional text. The parent becomes the positioning box unless it already has a position."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-spinner\" role=\"status\"><span class=\"sr-only\">Loading</span></span>\n<button class=\"wu-btn\" type=\"button\" aria-busy=\"true\"><span class=\"wu-spinner sm\" aria-hidden=\"true\"></span> Saving</button>"
+        },
+        {
+          "lang": "html",
+          "code": "<div aria-busy=\"true\">\n  <div inert>Orders table</div>\n  <div class=\"wu-spinner-overlay\"><span class=\"wu-spinner\" aria-hidden=\"true\"></span><span>Loading orders</span></div>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller (1rem) or larger (2rem, thicker band) ring",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-spinner-overlay"
+          ],
+          "description": "Layer that covers a busy region and centers a spinner with text",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-spinner--Size"
+          ],
+          "description": "Width and height of the ring",
+          "since": "1.0.0",
+          "default": "1.25rem"
+        },
+        {
+          "names": [
+            "--wu-spinner-overlay--Background"
+          ],
+          "description": "Overlay background",
+          "since": "1.0.0",
+          "default": "85% surface"
+        }
+      ],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "stat",
+      "root": "wu-stat",
+      "summary": "One figure with a label, a large value in tabular figures and an optional change line.",
+      "notes": [
+        "Keep the signed number as text in the change line; the arrow and the color repeat it, they never replace it."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-stat\">\n  <span class=\"wu-stat-label\">Active users</span>\n  <span class=\"wu-stat-value\">1,284</span>\n  <span class=\"wu-stat-delta success\" data-trend=\"up\">+12% from last month</span>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-stat lg\">\n  <span class=\"wu-stat-label\">Open tickets</span>\n  <span class=\"wu-stat-value\">37</span>\n  <span class=\"wu-stat-delta\" data-trend=\"down\">-5 this week</span>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger value",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "success",
+            "danger"
+          ],
+          "description": "On the change line: success or danger text color",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-stat-label"
+          ],
+          "description": "Muted label",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-stat-value"
+          ],
+          "description": "Large value",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-stat-delta"
+          ],
+          "description": "Change line, muted by default",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "data-trend=\"up\"",
+            "data-trend=\"down\""
+          ],
+          "description": "On the change line: draws an up or down arrow",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "table",
+      "root": "wu-table",
+      "summary": "Data table with sticky header and columns, selection, expandable rows, truncated cells, a summary row and striped styles.",
+      "notes": [
+        "Put a wide table in a `wu-table-scroll` region with `tabindex=\"0\"`, `role=\"region\"` and an `aria-label`; it shows scroll shadows on the sides with more content. Sticky columns need that region.",
+        "The select-all checkbox and expandable rows need the kit script; everything else is CSS. Sorting the rows and updating `aria-sort` is up to your script.",
+        "A truncated cell takes the full text in core's `data-tooltip` and `tabindex=\"0\"`. `aria-selected` on a row is valid only in a `role=\"grid\"` table."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "optional",
+        "exports": [
+          "initTable"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-table-scroll\" tabindex=\"0\" role=\"region\" aria-label=\"Invoices\">\n  <table class=\"wu-table striped hover\">\n    <caption>Open invoices</caption>\n    <thead>\n      <tr>\n        <th scope=\"col\">Invoice</th>\n        <th scope=\"col\" class=\"wu-table-num\">Amount</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr><th scope=\"row\">INV-1042</th><td class=\"wu-table-num\">$1,200.00</td></tr>\n      <tr><th scope=\"row\">INV-1043</th><td class=\"wu-table-num\">$340.00</td></tr>\n    </tbody>\n    <tfoot><tr><th scope=\"row\">Total</th><td class=\"wu-table-num\">$1,540.00</td></tr></tfoot>\n  </table>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<table class=\"wu-table\">\n  <thead>\n    <tr>\n      <th scope=\"col\" class=\"wu-table-select\"><input type=\"checkbox\" class=\"wu-checkbox-input\" aria-label=\"Select all rows\"></th>\n      <th scope=\"col\" aria-sort=\"ascending\"><button class=\"wu-table-sort\" type=\"button\">Name</button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td class=\"wu-table-select\"><input type=\"checkbox\" class=\"wu-checkbox-input\" aria-label=\"Select Ana Lopez\"></td>\n      <th scope=\"row\"><button class=\"wu-table-expand\" type=\"button\" aria-expanded=\"false\" aria-label=\"Details for Ana Lopez\"></button> Ana Lopez</th>\n    </tr>\n    <tr class=\"wu-table-detail\" hidden><td colspan=\"2\">Owner since 2021</td></tr>\n  </tbody>\n</table>"
+        },
+        {
+          "lang": "html",
+          "code": "<table class=\"wu-table\">\n  <tbody>\n    <tr><td class=\"wu-table-truncate\" tabindex=\"0\" data-tooltip=\"Typo on the billing page\"><span>Typo on the billing page</span></td></tr>\n  </tbody>\n</table>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Tighter cell padding",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "striped"
+          ],
+          "description": "Tint on every second body row",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "hover"
+          ],
+          "description": "Tint on the row under the pointer",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "bordered"
+          ],
+          "description": "Outer border with rounded corners and borders between cells",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sticky-header"
+          ],
+          "description": "Header cells stick to the top of the page, or of the scroll region when `--wu-table--MaxHeight` is set",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sticky-start",
+            "sticky-end"
+          ],
+          "description": "First or last column sticks inside a `wu-table-scroll` region, with an edge shadow on the scrolling side",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Spring turn of the expand chevron when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-table-scroll"
+          ],
+          "description": "Scroll region for a wide table, with scroll shadows",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-num"
+          ],
+          "description": "Cell with end-aligned numbers in tabular figures",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-select"
+          ],
+          "description": "Cell of a checkbox column, as narrow as its checkbox",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-truncate"
+          ],
+          "description": "Cell whose text child stays on one line with an ellipsis",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-sort"
+          ],
+          "description": "Button in a header cell that shows sort arrows",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-expand"
+          ],
+          "description": "Button with `aria-expanded` that shows or hides the detail row",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-table-detail"
+          ],
+          "description": "Row after an expandable row, with the alternate background",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-table--Background"
+          ],
+          "description": "Background that scroll shadows and sticky cells blend into",
+          "since": "1.0.0",
+          "default": "var(--wu-bg-surface)"
+        },
+        {
+          "names": [
+            "--wu-table--MaxHeight"
+          ],
+          "description": "Maximum height of the scroll region, so the header can stick inside it",
+          "since": "1.0.0",
+          "default": "none"
+        },
+        {
+          "names": [
+            "--wu-table--TruncateWidth"
+          ],
+          "description": "Maximum width of a truncated cell text",
+          "since": "1.0.0",
+          "default": "16rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "aria-sort=\"ascending\"",
+            "aria-sort=\"descending\""
+          ],
+          "description": "On a header cell: one arrow on the sort button and regular text color",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-expanded=\"true\""
+          ],
+          "description": "On an expand button: the chevron points down",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-selected=\"true\""
+          ],
+          "description": "On a row: selected tint and a bar at the start of the first cell; a checked `wu-table-select` box does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "tabs",
+      "root": "wu-tabs",
+      "summary": "Tabs that show one panel at a time, following the WAI-ARIA tabs pattern, in line, card, boxed and vertical styles.",
+      "notes": [
+        "The kit script adds arrow keys, Home and End, switches the panels and fills in roles, ids, `aria-controls`, `aria-labelledby` and `tabindex` when they are missing. Without it the first panel shows.",
+        "In `vertical` tabs the script sets `aria-orientation=\"vertical\"` on the list; without the script, add it yourself."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "required",
+        "exports": [
+          "initTabs"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-tabs\">\n  <div class=\"wu-tabs-list\" role=\"tablist\" aria-label=\"Account\">\n    <button class=\"wu-tabs-tab\" type=\"button\" role=\"tab\" id=\"tab-profile\" aria-controls=\"panel-profile\" aria-selected=\"true\">Profile</button>\n    <button class=\"wu-tabs-tab\" type=\"button\" role=\"tab\" id=\"tab-billing\" aria-controls=\"panel-billing\" aria-selected=\"false\" tabindex=\"-1\">Billing</button>\n  </div>\n  <div class=\"wu-tabs-panel\" role=\"tabpanel\" id=\"panel-profile\" aria-labelledby=\"tab-profile\" tabindex=\"0\">Profile settings</div>\n  <div class=\"wu-tabs-panel\" role=\"tabpanel\" id=\"panel-billing\" aria-labelledby=\"tab-billing\" tabindex=\"0\" hidden>Billing settings</div>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-tabs vertical boxed\">\n  <div class=\"wu-tabs-list\" role=\"tablist\" aria-label=\"Settings\" aria-orientation=\"vertical\">\n    <button class=\"wu-tabs-tab\" type=\"button\" role=\"tab\" id=\"tab-general\" aria-controls=\"panel-general\" aria-selected=\"true\">General</button>\n    <button class=\"wu-tabs-tab\" type=\"button\" role=\"tab\" id=\"tab-team\" aria-controls=\"panel-team\" aria-selected=\"false\" tabindex=\"-1\" disabled>Team</button>\n  </div>\n  <div class=\"wu-tabs-panel\" role=\"tabpanel\" id=\"panel-general\" aria-labelledby=\"tab-general\" tabindex=\"0\">General settings</div>\n  <div class=\"wu-tabs-panel\" role=\"tabpanel\" id=\"panel-team\" aria-labelledby=\"tab-team\" tabindex=\"0\" hidden>Team settings</div>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "card"
+          ],
+          "description": "Joined tab boxes; the selected tab opens into the panel",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "boxed"
+          ],
+          "description": "Tabs and panels inside one bordered box",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "vertical"
+          ],
+          "description": "Tab list at the inline start, selected bar on its inline end edge",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Selected bar grows from the center and the panel fades in when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-tabs-list"
+          ],
+          "description": "Row of tabs; scrolls sideways and fades the edge with more tabs",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-tabs-tab"
+          ],
+          "description": "One tab button; a direct child `svg` is sized to `1em`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-tabs-panel"
+          ],
+          "description": "Content shown for the selected tab",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-selected=\"true\""
+          ],
+          "description": "On a tab: regular text color and a brand bar",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "disabled",
+            "aria-disabled=\"true\""
+          ],
+          "description": "On a tab: half opacity and a not-allowed cursor",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "tag",
+      "root": "wu-tag",
+      "summary": "Label for a category or a filter, in seven hues, as plain text, a link or a button.",
+      "notes": [
+        "A link or button tag gets a pointer, a hover color and the focus ring. `aria-pressed` on a button tag makes a checkable filter chip; toggling the attribute is up to your script.",
+        "A direct child `svg` is sized to `1em`. The remove button needs an `aria-label` that names the tag."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-tag\">Design</span>\n<span class=\"wu-tag blue\">Frontend</span>"
+        },
+        {
+          "lang": "html",
+          "code": "<div role=\"group\" aria-label=\"Filter by topic\">\n  <button class=\"wu-tag\" type=\"button\" aria-pressed=\"true\">Design</button>\n  <button class=\"wu-tag\" type=\"button\" aria-pressed=\"false\">Research</button>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<span class=\"wu-tag purple\">Research <button class=\"wu-tag-remove\" type=\"button\" aria-label=\"Remove Research\"></button></span>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "gray",
+            "red",
+            "blue",
+            "green",
+            "yellow",
+            "purple",
+            "pink"
+          ],
+          "description": "Hue color: subtle background, hue border and hue text",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-tag-remove"
+          ],
+          "description": "Remove button inside the tag, its cross drawn in CSS",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-pressed=\"true\""
+          ],
+          "description": "On a button tag: brand tint, ring and a check mark",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "text",
+      "root": "wu-text",
+      "summary": "Body text on any element, with relaxed leading and space between paragraphs in a row.",
+      "notes": [],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<p class=\"wu-text lg\">A lead paragraph introduces the page.</p>\n<p class=\"wu-text\">Body text follows with relaxed leading.</p>\n<p class=\"wu-text sm muted\">Small, muted text for notes and fine print.</p>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Small size",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "lg"
+          ],
+          "description": "Large size, for a lead paragraph",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "muted"
+          ],
+          "description": "Muted color",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "textarea",
+      "root": "wu-textarea",
+      "summary": "Multi-line field with a bounded height that grows with the content, where the browser supports it.",
+      "notes": [
+        "Core base already styles a `textarea` like an input (border, focus ring, invalid border, disabled). The kit adds the radius, the type size and a height between three and twelve lines.",
+        "Growth uses `field-sizing: content`, and `rows` is ignored there."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-field\">\n  <label class=\"wu-field-label\" for=\"textarea-notes\">Notes</label>\n  <textarea class=\"wu-textarea\" id=\"textarea-notes\">Type more lines to see the field grow.</textarea>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<textarea class=\"wu-textarea\" aria-label=\"Short note\" style=\"--wu-textarea--MinHeight: 2.5rem; --wu-textarea--MaxHeight: 6rem\">One line to start.</textarea>"
+        }
+      ],
+      "modifiers": [],
+      "parts": [],
+      "variables": [
+        {
+          "names": [
+            "--wu-textarea--MinHeight"
+          ],
+          "description": "Minimum height",
+          "since": "1.0.0",
+          "default": "3 lines plus padding and border"
+        },
+        {
+          "names": [
+            "--wu-textarea--MaxHeight"
+          ],
+          "description": "Maximum height",
+          "since": "1.0.0",
+          "default": "12 lines plus padding and border"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            ":disabled"
+          ],
+          "description": "Not-allowed cursor and no resize",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "readonly"
+          ],
+          "description": "Alternate background",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "Danger border doubled to 2px, so the change is not color alone",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "timeline",
+      "root": "wu-timeline",
+      "summary": "Ordered list of events with markers and a rail, role colors and a progress mode.",
+      "notes": [
+        "Role words on an item color its marker; `success`, `warning` and `danger` also change the marker shape, so color is not the only cue.",
+        "With `aria-current=\"step\"` on one item the list becomes a progress rail: earlier items filled, the current one ringed, later ones hollow. Say \"completed\" in the item text too."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<ol class=\"wu-timeline\">\n  <li class=\"wu-timeline-item success\">\n    <p class=\"wu-timeline-title\">Order shipped</p>\n    <time class=\"wu-timeline-time\" datetime=\"2026-03-02\">2 March</time>\n    <p class=\"wu-timeline-text\">Handed to the carrier.</p>\n  </li>\n  <li class=\"wu-timeline-item danger\">\n    <p class=\"wu-timeline-title\">Payment failed</p>\n    <time class=\"wu-timeline-time\" datetime=\"2026-03-01\">1 March</time>\n  </li>\n</ol>"
+        },
+        {
+          "lang": "html",
+          "code": "<ol class=\"wu-timeline\">\n  <li class=\"wu-timeline-item\"><p class=\"wu-timeline-title\">Cart (completed)</p></li>\n  <li class=\"wu-timeline-item\" aria-current=\"step\"><p class=\"wu-timeline-title\">Payment</p></li>\n  <li class=\"wu-timeline-item\"><p class=\"wu-timeline-title\">Confirmation</p></li>\n</ol>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand",
+            "info"
+          ],
+          "description": "On an item: marker color",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "On an item: marker color and a check, triangle or octagon shape",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Each rail segment draws once as it scrolls into view when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-timeline-item"
+          ],
+          "description": "One event: a marker, a rail to the next item and the content",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-timeline-title"
+          ],
+          "description": "Event title in medium weight",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-timeline-time"
+          ],
+          "description": "Muted time or date line",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-timeline-text"
+          ],
+          "description": "Muted description",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-current=\"step\""
+          ],
+          "description": "On an item: the current step, ringed; earlier items fill and later ones turn hollow",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "title",
+      "root": "wu-title",
+      "summary": "Visual heading size on any element, in four steps.",
+      "notes": [
+        "Pick the heading level for the document outline and the size for the look."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<h2 class=\"wu-title xl\">Extra large title</h2>\n<h2 class=\"wu-title\">Default title</h2>"
+        },
+        {
+          "lang": "html",
+          "code": "<h3 class=\"wu-title lg\">An h3 with the large size</h3>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Large size, one step below the default",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "lg"
+          ],
+          "description": "2xl size",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "xl"
+          ],
+          "description": "3xl size",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "toast",
+      "root": "wu-toast",
+      "summary": "Short notification in a corner of the viewport, shown in a polite live region.",
+      "notes": [
+        "The region sits at the bottom end corner by default and scrolls when the toasts are taller than the viewport. The title text carries the meaning, not the color.",
+        "`toast(\"Saved\")` from the kit script adds a toast, and the region when the page has none. It closes the toast after a delay, pauses on hover and focus, keeps at most three open and skips a repeat of an open message.",
+        "Create the region at page load; a region added together with its first toast may not be announced."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "required",
+        "exports": [
+          "toast",
+          "dismiss"
+        ]
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<section class=\"wu-toast-region animated\" aria-live=\"polite\" aria-label=\"Notifications\">\n  <div class=\"wu-toast success\">\n    <p class=\"wu-toast-title\">Saved</p>\n    <p>Your changes are live.</p>\n    <button class=\"wu-toast-close\" type=\"button\" aria-label=\"Close\"></button>\n  </div>\n</section>"
+        },
+        {
+          "lang": "html",
+          "code": "<section class=\"wu-toast-region top-end\" aria-live=\"polite\" aria-label=\"Notifications\"></section>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "brand",
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "description": "On a toast: role color on the start edge and the title",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "top-start",
+            "top-end",
+            "bottom-start"
+          ],
+          "description": "On the region: moves it to another corner; the default is the bottom end corner",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "On the region: toasts slide in, fade out and stack behind the newest, fanning out on hover or focus; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-toast-region"
+          ],
+          "description": "Fixed live region that holds the toasts; hidden when empty",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-toast-title"
+          ],
+          "description": "Toast title in semibold weight",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-toast-close"
+          ],
+          "description": "Close button with `aria-label`, its cross drawn in CSS",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [
+        {
+          "names": [
+            "--wu-toast--Width"
+          ],
+          "description": "Width of the toasts in the region",
+          "since": "1.0.0",
+          "default": "22rem"
+        }
+      ],
+      "states": [
+        {
+          "names": [
+            "hidden"
+          ],
+          "description": "On a toast: removed from layout, after a fade out with `animated`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            ":empty"
+          ],
+          "description": "A region with no toasts is hidden",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "toggle",
+      "root": "wu-toggle",
+      "summary": "On and off switch built on a native checkbox with `role=\"switch\"`.",
+      "notes": [
+        "The track is 2.25em by 1.25em with a 1em thumb, so it follows the root type size and the `sm` and `lg` steps."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-toggle\">\n  <input class=\"wu-toggle-input\" type=\"checkbox\" role=\"switch\" checked>\n  <span class=\"wu-toggle-label\">Email notifications</span>\n</label>"
+        },
+        {
+          "lang": "html",
+          "code": "<label class=\"wu-toggle lg animated\">\n  <input class=\"wu-toggle-input\" type=\"checkbox\" role=\"switch\" aria-invalid=\"true\">\n  <span class=\"wu-toggle-label\">Accept the terms</span>\n</label>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "sm",
+            "lg"
+          ],
+          "description": "Smaller or larger switch and label",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "animated"
+          ],
+          "description": "Spring thumb when the user allows motion; `wu-animated` on an ancestor does the same",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-toggle-input"
+          ],
+          "description": "The checkbox: track and thumb",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-toggle-label"
+          ],
+          "description": "Label text beside the switch",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            ":checked"
+          ],
+          "description": "Brand track and the thumb moved to the end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "disabled"
+          ],
+          "description": "Half opacity and a not-allowed cursor",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "aria-invalid=\"true\"",
+            ":user-invalid"
+          ],
+          "description": "Danger outline",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    },
+    {
+      "name": "toolbar",
+      "root": "wu-toolbar",
+      "summary": "Wrapping row of controls, with groups, separators, an end group and a boxed variant.",
+      "notes": [
+        "A toolbar holds controls of one height, so it lines up by itself. Status displays such as tags and badges go outside the row.",
+        "`role=\"toolbar\"` promises arrow-key focus, so add it only with a script that provides it; otherwise use a plain `div`."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-toolbar\">\n  <div class=\"wu-toolbar-group\">\n    <button class=\"wu-btn sm\" type=\"button\">Bold</button>\n    <button class=\"wu-btn sm\" type=\"button\">Italic</button>\n  </div>\n  <span class=\"wu-toolbar-separator\" aria-hidden=\"true\"></span>\n  <div class=\"wu-toolbar-end\">\n    <button class=\"wu-btn brand sm\" type=\"button\">Publish</button>\n  </div>\n</div>"
+        },
+        {
+          "lang": "html",
+          "code": "<div class=\"wu-toolbar boxed\">\n  <span class=\"wu-text sm\">3 selected</span>\n  <button class=\"wu-btn sm\" type=\"button\">Archive</button>\n</div>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "boxed"
+          ],
+          "description": "Border, padding and the alternate background",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "sm"
+          ],
+          "description": "Smaller gap",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-toolbar-group"
+          ],
+          "description": "Controls that stay together",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-toolbar-separator"
+          ],
+          "description": "Vertical line between groups",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-toolbar-end"
+          ],
+          "description": "Pushes itself and what follows to the end",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [],
+      "changed": []
+    },
+    {
+      "name": "topbar",
+      "root": "wu-topbar",
+      "summary": "Application header with a brand, a scrolling nav, an end group, a pinned variant and a page progress line.",
+      "notes": [
+        "`wu-topbar-nav` works on the `nav` itself or on the `ul` inside it. When space runs out the nav scrolls first, then the brand truncates.",
+        "The bar stays in the flow; add `pinned` to stick it to the top. The progress line is decoration, so mark it `aria-hidden=\"true\"`; it fills as the page scrolls and stays hidden when reduced motion is set."
+      ],
+      "since": "1.0.0",
+      "needs": [],
+      "js": {
+        "mode": "none",
+        "exports": []
+      },
+      "examples": [
+        {
+          "lang": "html",
+          "code": "<header class=\"wu-topbar pinned\">\n  <a class=\"wu-topbar-brand\" href=\"/\">Acme</a>\n  <nav aria-label=\"Main\">\n    <ul class=\"wu-topbar-nav\">\n      <li><a class=\"wu-topbar-link\" href=\"/dashboard\" aria-current=\"page\">Dashboard</a></li>\n      <li><a class=\"wu-topbar-link\" href=\"/billing\">Billing</a></li>\n    </ul>\n  </nav>\n  <div class=\"wu-topbar-end\">\n    <button class=\"wu-btn sm\" type=\"button\">Sign out</button>\n  </div>\n  <div class=\"wu-topbar-progress\" aria-hidden=\"true\"></div>\n</header>"
+        },
+        {
+          "lang": "html",
+          "code": "<header class=\"wu-topbar\">\n  <a class=\"wu-topbar-brand\" href=\"/\">Acme</a>\n  <nav class=\"wu-topbar-nav\" aria-label=\"Main\">\n    <a class=\"wu-topbar-link\" href=\"/billing\" aria-current=\"page\">Billing</a>\n    <a class=\"wu-topbar-link\" href=\"/team\">Team</a>\n  </nav>\n</header>"
+        }
+      ],
+      "modifiers": [
+        {
+          "names": [
+            "pinned"
+          ],
+          "description": "Sticks to the top of its scroll container, with a shadow once stuck",
+          "since": "1.0.0"
+        }
+      ],
+      "parts": [
+        {
+          "names": [
+            "wu-topbar-brand"
+          ],
+          "description": "Brand link or text; truncates last",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-topbar-nav"
+          ],
+          "description": "Nav, or its list, that takes the free space and scrolls sideways",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-topbar-link"
+          ],
+          "description": "Nav link; a direct child `svg` is sized to `1em`",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-topbar-end"
+          ],
+          "description": "Group pushed to the inline end",
+          "since": "1.0.0"
+        },
+        {
+          "names": [
+            "wu-topbar-progress"
+          ],
+          "description": "Line along the bottom edge that fills as the page scrolls",
+          "since": "1.0.0"
+        }
+      ],
+      "variables": [],
+      "states": [
+        {
+          "names": [
+            "aria-current=\"page\""
+          ],
+          "description": "On a link: current page, brand underline",
+          "since": "1.0.0"
+        }
+      ],
+      "changed": []
+    }
+  ],
+  "undocumented": []
+}