@orange-halo/components 2.2.0 → 3.0.0

package/dist/oh-badge.js

@@ -1,25 +1,23 @@
 /**
  * oh-badge
  *
- * A flat, non-interactive badge for status indicators and labels.
- * Two styles per color: subtle (muted bg) and filled (strong bg).
+ * A non-interactive label for a status or category.
+ * Two types per variant: subtle and filled.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. FLAT & NON-INTERACTIVE
- *    - No shadows, no hover states
+ * 1. NON-INTERACTIVE
+ *    - No shadow, no hover states, pointer-events off
  *    - Pure informational element
  *    - Not clickable
  *
- * 2. TWO INTENSITIES
- *    - Subtle: muted background, darker text
- *    - Filled: strong background, white/dark text
+ * 2. TWO TYPES
+ *    - Subtle: the variant's *Subtle background token, its role colour as text
+ *    - Filled: the role colour as background, its color.text.on* token as text
  *
  * 3. ACCESSIBLE CONTRAST
- *    - All text meets WCAG AA (4.5:1)
- *    - Filled variants use appropriate text color
- *
- * @element oh-badge
+ *    - Every text/background pair is in contrast-pairs.json, so
+ *      check:contrast checks it in every brand and mode
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -30,18 +28,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A short, non-interactive label that shows the status or category of the thing next to it.
+ *
+ * **Use it for** a status ("Delivered", "Pending"), a count or a tag next to the item it describes. **Don't use it for** anything the user can select (use `oh-button` or a link); or for a message with more than a word or two (use `oh-alert`).
+ *
+ * **Variants:** `brand` (default) and `accent` for categories; `success`, `warning`, `error` and `info` for status. **Appearance:** `subtle` (default), for most badges; `filled`, the stronger appearance, for the one status that matters most.
+ *
+ * **Parts:** the default slot holds the text; the `icon` slot an optional leading icon, sized to the text.
+ *
+ * **Behaviour:** none. It doesn't take focus or respond to the pointer.
+ *
+ * **Accessibility:** the badge is plain text to screen readers, so the text must make sense on its own (say "Pending", don't rely on the colour). Mark a decorative icon `aria-hidden`.
+ *
+ * **Look:** set by tokens. Subtle uses the variant's `color.feedback.<variant>Subtle`, `color.brand.primarySubtle` or `color.accent.subtle` background with the role colour as text; filled uses the role colour (`color.feedback.<variant>`, `color.brand.primary`, `color.accent.default`) as background with `color.text.on<Role>` as text. `shape.compact` sets the corners; `typography.body.*`, `typography.label.base.fontWeight` and `typography.control.letterSpacing` the text.
+ *
+ * @element oh-badge
+ * @slot - The badge text.
+ * @slot icon - Optional leading icon.
+ * @csspart badge - The badge.
+ */
 let OhBadge = class OhBadge extends OhElement {
     constructor() {
         super(...arguments);
         this.variant = "brand";
-        this.type = "subtle";
+        /** `subtle` (default) for most badges; `filled`, the stronger appearance, for the one status that matters most */
+        this.appearance = "subtle";
     }
     static { this.styles = [
         baseStyles,
         css `
       /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO BADGE
-         Flat • Non-interactive • Informational
+         BADGE
+         Non-interactive • Informational
          ═══════════════════════════════════════════════════════════════ */
 
       :host {
@@ -153,7 +172,7 @@ let OhBadge = class OhBadge extends OhElement {
         const classes = this.classMap({
             badge: true,
             [`badge--${this.variant}`]: true,
-            [`badge--${this.type}`]: true,
+            [`badge--${this.appearance}`]: true,
         });
         return html `
       <span class=${classes} part="badge">
@@ -168,7 +187,7 @@ __decorate([
 ], OhBadge.prototype, "variant", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], OhBadge.prototype, "type", void 0);
+], OhBadge.prototype, "appearance", void 0);
 OhBadge = __decorate([
     customElement("oh-badge")
 ], OhBadge);

package/dist/oh-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-badge.js","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAY3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAoHL,YAAO,GAAiB,OAAO,CAAC;QAGhC,SAAI,GAAc,QAAQ,CAAC;IAgB7B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;KACF,AAhHqB,CAgHpB;IAQF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;;KAItB,CAAC;IACJ,CAAC;;AAlBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACf;AAvHhB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuInB"}
+{"version":3,"file":"oh-badge.js","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAoHL,YAAO,GAAiB,OAAO,CAAC;QAEhC,kHAAkH;QAElH,eAAU,GAAoB,QAAQ,CAAC;IAgBzC,CAAC;aAvIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;KACF,AAhHqB,CAgHpB;IASF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;;KAItB,CAAC;IACJ,CAAC;;AAnBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACV;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACH;AAxH5B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAwInB"}

package/dist/oh-breadcrumb.d.ts

@@ -1,24 +1,20 @@
 /**
  * oh-breadcrumb
  *
- * Accessible breadcrumb navigation with responsive collapse.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SEMANTIC STRUCTURE
- *    - <nav> with aria-label="Breadcrumb"
- *    - <ol> for ordered list semantics
- *    - aria-current="page" on last item
+ *    - <nav aria-label="Breadcrumb"> around an <ol>
+ *    - aria-current="page" on the last item, which is not a link
+ *    - Separators are aria-hidden
  *
- * 2. REUSES EXISTING STYLES
- *    - Link styles match oh-link (dashed underline, shrink animation)
- *    - Typography and spacing from tokens
+ * 2. LINKS MIRROR oh-link INLINE
+ *    - Same underline tokens and hover/focus behaviour, written locally
+ *      so the trail is one component
  *
  * 3. RESPONSIVE
- *    - Desktop: Full breadcrumb trail
- *    - Mobile (<640px): Collapses to "← Back to [parent]"
- *
- * @element oh-breadcrumb
+ *    - Wide viewports: the full trail
+ *    - Below `size.breakpoint.sm`: a single "Back to [parent]" link
  */
 import { nothing } from "lit";
 import { OhElement } from "./base.js";
@@ -26,6 +22,37 @@ export interface BreadcrumbItem {
     label: string;
     href?: string;
 }
+/**
+ * A breadcrumb trail showing where the current page sits in the site's hierarchy.
+ *
+ * **Use it for** pages two or more levels deep in a hierarchy. **Don't use it
+ * for** a site's main navigation (use `oh-navbar`) or for steps in a process.
+ *
+ * **Parts:** pass `items`, an array of `{ label, href }`, from the top level
+ * down. The last item is the current page and is shown as text, not a link.
+ *
+ * **Behaviour:** below the `size.breakpoint.sm` width the trail collapses to a
+ * single "Back to [parent]" link to the second-to-last item; with one item,
+ * nothing shows there. Link underlines retract on hover; keyboard focus
+ * (`:focus-visible`) shows a solid underline and a background tint.
+ * Transitions are cut short under `prefers-reduced-motion`. Renders nothing
+ * when `items` is empty.
+ *
+ * **Accessibility:** renders `<nav aria-label="Breadcrumb">` with an ordered
+ * list, `aria-current="page"` on the last item and `aria-hidden` separators.
+ * Use one breadcrumb per page.
+ *
+ * **Look:** set by tokens — `color.text.link` the links,
+ * `decoration.underlineThickness`, `decoration.underlineDash` and
+ * `decoration.underlinePeriod` their underline; `color.brand.primary` the
+ * focus underline and `color.surface.hover` the focus tint;
+ * `color.text.primary` and `typography.label.base.fontWeight` the current
+ * page; `color.text.secondary` the separators; `typography.body.*` the text;
+ * `spacing.*` the gaps; `motion.relaxed` and `motion.easeGentle` the
+ * transitions.
+ *
+ * @element oh-breadcrumb
+ */
 export declare class OhBreadcrumb extends OhElement {
     static styles: import("lit").CSSResult[];
     items: BreadcrumbItem[];

package/dist/oh-breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-breadcrumb.d.ts","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BAgMpB;IAGF,KAAK,EAAE,cAAc,EAAE,CAAM;IAE7B,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"oh-breadcrumb.d.ts","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BA2LpB;IAGF,KAAK,EAAE,cAAc,EAAE,CAAM;IAE7B,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/oh-breadcrumb.js

@@ -1,24 +1,20 @@
 /**
  * oh-breadcrumb
  *
- * Accessible breadcrumb navigation with responsive collapse.
- *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SEMANTIC STRUCTURE
- *    - <nav> with aria-label="Breadcrumb"
- *    - <ol> for ordered list semantics
- *    - aria-current="page" on last item
+ *    - <nav aria-label="Breadcrumb"> around an <ol>
+ *    - aria-current="page" on the last item, which is not a link
+ *    - Separators are aria-hidden
  *
- * 2. REUSES EXISTING STYLES
- *    - Link styles match oh-link (dashed underline, shrink animation)
- *    - Typography and spacing from tokens
+ * 2. LINKS MIRROR oh-link INLINE
+ *    - Same underline tokens and hover/focus behaviour, written locally
+ *      so the trail is one component
  *
  * 3. RESPONSIVE
- *    - Desktop: Full breadcrumb trail
- *    - Mobile (<640px): Collapses to "← Back to [parent]"
- *
- * @element oh-breadcrumb
+ *    - Wide viewports: the full trail
+ *    - Below `size.breakpoint.sm`: a single "Back to [parent]" link
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -29,6 +25,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A breadcrumb trail showing where the current page sits in the site's hierarchy.
+ *
+ * **Use it for** pages two or more levels deep in a hierarchy. **Don't use it
+ * for** a site's main navigation (use `oh-navbar`) or for steps in a process.
+ *
+ * **Parts:** pass `items`, an array of `{ label, href }`, from the top level
+ * down. The last item is the current page and is shown as text, not a link.
+ *
+ * **Behaviour:** below the `size.breakpoint.sm` width the trail collapses to a
+ * single "Back to [parent]" link to the second-to-last item; with one item,
+ * nothing shows there. Link underlines retract on hover; keyboard focus
+ * (`:focus-visible`) shows a solid underline and a background tint.
+ * Transitions are cut short under `prefers-reduced-motion`. Renders nothing
+ * when `items` is empty.
+ *
+ * **Accessibility:** renders `<nav aria-label="Breadcrumb">` with an ordered
+ * list, `aria-current="page"` on the last item and `aria-hidden` separators.
+ * Use one breadcrumb per page.
+ *
+ * **Look:** set by tokens — `color.text.link` the links,
+ * `decoration.underlineThickness`, `decoration.underlineDash` and
+ * `decoration.underlinePeriod` their underline; `color.brand.primary` the
+ * focus underline and `color.surface.hover` the focus tint;
+ * `color.text.primary` and `typography.label.base.fontWeight` the current
+ * page; `color.text.secondary` the separators; `typography.body.*` the text;
+ * `spacing.*` the gaps; `motion.relaxed` and `motion.easeGentle` the
+ * transitions.
+ *
+ * @element oh-breadcrumb
+ */
 let OhBreadcrumb = class OhBreadcrumb extends OhElement {
     constructor() {
         super(...arguments);
@@ -37,11 +64,6 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO BREADCRUMB
-         Semantic • Responsive • Accessible
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: block;
         font-family: var(--oh-typography-body-font-family);

package/dist/oh-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-breadcrumb.js","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQ3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,SAAS;IAApC;;QAoML,UAAK,GAAqB,EAAE,CAAC;IAgE/B,CAAC;aAnQiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6LF;KACF,AAhMqB,CAgMpB;IAKF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,UAAU,GACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnE,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEpD,OAAO,IAAI,CAAA;;kBAEL,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA;yBACC,IAAI,CAAC,KAAK;sBACb;gBACJ,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,IAAI,IAAI,GAAG;yBAClD,IAAI,CAAC,KAAK;sBACb;kBACJ,aAAa;gBACb,CAAC,CAAC,IAAI,CAAA;;sBAEF;gBACJ,CAAC,CAAC,OAAO;;aAEd,CAAC;QACJ,CAAC,CAAC;;;;UAIF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;4CAE4B,UAAU,CAAC,IAAI,IAAI,GAAG;;;;;;;;;;;;;;;kCAehC,UAAU,CAAC,KAAK;;;aAGrC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACG;AApMlB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoQxB"}
+{"version":3,"file":"oh-breadcrumb.js","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAOlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,SAAS;IAApC;;QA+LL,UAAK,GAAqB,EAAE,CAAC;IAgE/B,CAAC;aA9PiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwLF;KACF,AA3LqB,CA2LpB;IAKF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,UAAU,GACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnE,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEpD,OAAO,IAAI,CAAA;;kBAEL,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA;yBACC,IAAI,CAAC,KAAK;sBACb;gBACJ,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,IAAI,IAAI,GAAG;yBAClD,IAAI,CAAC,KAAK;sBACb;kBACJ,aAAa;gBACb,CAAC,CAAC,IAAI,CAAA;;sBAEF;gBACJ,CAAC,CAAC,OAAO;;aAEd,CAAC;QACJ,CAAC,CAAC;;;;UAIF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;4CAE4B,UAAU,CAAC,IAAI,IAAI,GAAG;;;;;;;;;;;;;;;kCAehC,UAAU,CAAC,KAAK;;;aAGrC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACG;AA/LlB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA+PxB"}

package/dist/oh-button.d.ts

@@ -1,37 +1,63 @@
 /**
  * oh-button
  *
- * A chunky, confident button with playful personality.
- * Inspired by hand-crafted, illustrative UI — not corporate SaaS.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & CONFIDENT
- *    - Thick border (stroke.control) that feels illustrative
- *    - Solid fills, no subtle gradients
- *    - Generous padding, substantial presence
+ * 1. Renders a native <button>, or an <a> when `href` is set, inside the
+ *    shadow root, so keyboard and screen reader behaviour come from the
+ *    platform. `accessible-label` is forwarded to it (an aria-label on the
+ *    host isn't).
+ * 2. Look comes from button.* component tokens: button.base.borderWidth
+ *    (stroke.control), button.base.borderRadius (shape.control),
+ *    button.variant.<variant>.* for fills, text, border and shadow colour,
+ *    button.size.<size>.* for type, padding and height.
+ * 3. Hover and active move the button by lift.hoverMd / lift.pressMd and set
+ *    the shadow offset to elevation.offset.2xl / elevation.offset.xs (rest is
+ *    elevation.offset.lg).
+ * 4. Focus is a solid underline on the label (an underline the button draws
+ *    itself for icon-only and loading buttons, whose text is hidden).
+ * 5. Loading uses aria-disabled + aria-busy, not disabled, so focus stays on
+ *    the button.
+ */
+import { OhElement } from "./base.js";
+export type ButtonVariant = "primary" | "secondary" | "accent";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonState = "default" | "hover" | "active" | "focus";
+/**
+ * A button that starts an action, or a link styled as a button when `href` is set.
  *
- * 2. OFFSET SHADOW (STICKER EFFECT)
- *    - Shadow offset to bottom-right
- *    - Feels like a physical sticker or stamp
- *    - Not a generic centered drop shadow
+ * **Use it for** actions: submitting, saving, opening a dialog, confirming.
+ * **Don't use it for** links inside running text (use `oh-link`).
  *
- * 3. PLAYFUL INTERACTIONS
- *    - Hover: slight upward lift + shadow grows
- *    - Active: pressed down, shadow shrinks (stamp effect)
- *    - Focus: warm glow + accessible underline
+ * **Variants:** `primary` for the main action, `secondary` for the others,
+ * `accent` for an action that takes the accent colour role. **Sizes:** `sm`, `md` (default), `lg`.
+ * **States:** rest, hover, active, focus and `loading`.
  *
- * 4. HAND-CRAFTED FEEL
- *    - Bold, defined edges
- *    - Confident color choices
- *    - Personality over polish
+ * **Behaviour:** fires `oh-click` when the inner `<button>` is clicked, except
+ * while `loading`. `loading` shows a spinner, keeps the label for screen
+ * readers, sets `aria-busy` and `aria-disabled` and ignores clicks, while the
+ * button stays focusable. With `href` it renders an `<a>` (and
+ * `target="_blank"` adds `rel="noopener noreferrer"`); link buttons don't fire
+ * `oh-click`. It has no `disabled` property and doesn't submit a form by
+ * itself: handle `oh-click`. Under `prefers-reduced-motion` it doesn't move.
+ *
+ * **Accessibility:** focus shows a solid underline on the label. An
+ * `icon-only` button has no visible text, so always set `accessible-label`
+ * (not `aria-label`, which isn't forwarded into the shadow root).
+ *
+ * **Look:** set by tokens — `stroke.control` (border width), `shape.control`
+ * (corners), `typography.control.*` (type), `button.variant.<variant>.*`
+ * (background, text, border and shadow colour per state), `button.size.<size>.*`
+ * (font size, padding, minimum height), `elevation.offset.*` (shadow offset)
+ * and `lift.hoverMd` / `lift.pressMd` (movement on hover and press).
  *
  * @element oh-button
+ * @fires oh-click - The button was clicked (not while loading). `detail.originalEvent` is the click.
+ * @slot - The label.
+ * @slot icon-left - An icon before the label.
+ * @slot icon-right - An icon after the label.
+ * @csspart button - The inner `<button>` or `<a>`.
  */
-import { OhElement } from "./base.js";
-export type ButtonVariant = "primary" | "secondary" | "accent";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonState = "default" | "hover" | "active" | "focus";
 export declare class OhButton extends OhElement {
     static styles: import("lit").CSSResult[];
     variant: ButtonVariant;

package/dist/oh-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA8YpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAuYpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-button.js

@@ -1,32 +1,23 @@
 /**
  * oh-button
  *
- * A chunky, confident button with playful personality.
- * Inspired by hand-crafted, illustrative UI — not corporate SaaS.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & CONFIDENT
- *    - Thick border (stroke.control) that feels illustrative
- *    - Solid fills, no subtle gradients
- *    - Generous padding, substantial presence
- *
- * 2. OFFSET SHADOW (STICKER EFFECT)
- *    - Shadow offset to bottom-right
- *    - Feels like a physical sticker or stamp
- *    - Not a generic centered drop shadow
- *
- * 3. PLAYFUL INTERACTIONS
- *    - Hover: slight upward lift + shadow grows
- *    - Active: pressed down, shadow shrinks (stamp effect)
- *    - Focus: warm glow + accessible underline
- *
- * 4. HAND-CRAFTED FEEL
- *    - Bold, defined edges
- *    - Confident color choices
- *    - Personality over polish
- *
- * @element oh-button
+ * 1. Renders a native <button>, or an <a> when `href` is set, inside the
+ *    shadow root, so keyboard and screen reader behaviour come from the
+ *    platform. `accessible-label` is forwarded to it (an aria-label on the
+ *    host isn't).
+ * 2. Look comes from button.* component tokens: button.base.borderWidth
+ *    (stroke.control), button.base.borderRadius (shape.control),
+ *    button.variant.<variant>.* for fills, text, border and shadow colour,
+ *    button.size.<size>.* for type, padding and height.
+ * 3. Hover and active move the button by lift.hoverMd / lift.pressMd and set
+ *    the shadow offset to elevation.offset.2xl / elevation.offset.xs (rest is
+ *    elevation.offset.lg).
+ * 4. Focus is a solid underline on the label (an underline the button draws
+ *    itself for icon-only and loading buttons, whose text is hidden).
+ * 5. Loading uses aria-disabled + aria-busy, not disabled, so focus stays on
+ *    the button.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -37,6 +28,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A button that starts an action, or a link styled as a button when `href` is set.
+ *
+ * **Use it for** actions: submitting, saving, opening a dialog, confirming.
+ * **Don't use it for** links inside running text (use `oh-link`).
+ *
+ * **Variants:** `primary` for the main action, `secondary` for the others,
+ * `accent` for an action that takes the accent colour role. **Sizes:** `sm`, `md` (default), `lg`.
+ * **States:** rest, hover, active, focus and `loading`.
+ *
+ * **Behaviour:** fires `oh-click` when the inner `<button>` is clicked, except
+ * while `loading`. `loading` shows a spinner, keeps the label for screen
+ * readers, sets `aria-busy` and `aria-disabled` and ignores clicks, while the
+ * button stays focusable. With `href` it renders an `<a>` (and
+ * `target="_blank"` adds `rel="noopener noreferrer"`); link buttons don't fire
+ * `oh-click`. It has no `disabled` property and doesn't submit a form by
+ * itself: handle `oh-click`. Under `prefers-reduced-motion` it doesn't move.
+ *
+ * **Accessibility:** focus shows a solid underline on the label. An
+ * `icon-only` button has no visible text, so always set `accessible-label`
+ * (not `aria-label`, which isn't forwarded into the shadow root).
+ *
+ * **Look:** set by tokens — `stroke.control` (border width), `shape.control`
+ * (corners), `typography.control.*` (type), `button.variant.<variant>.*`
+ * (background, text, border and shadow colour per state), `button.size.<size>.*`
+ * (font size, padding, minimum height), `elevation.offset.*` (shadow offset)
+ * and `lift.hoverMd` / `lift.pressMd` (movement on hover and press).
+ *
+ * @element oh-button
+ * @fires oh-click - The button was clicked (not while loading). `detail.originalEvent` is the click.
+ * @slot - The label.
+ * @slot icon-left - An icon before the label.
+ * @slot icon-right - An icon after the label.
+ * @csspart button - The inner `<button>` or `<a>`.
+ */
 let OhButton = class OhButton extends OhElement {
     constructor() {
         super(...arguments);
@@ -53,17 +79,12 @@ let OhButton = class OhButton extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO BUTTON
-         Chunky • Playful • Confident • Hand-crafted
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: inline-block;
       }
 
       .button {
-        /* Typography: friendly, not shouty */
+        /* Typography: button.base.* (from typography.control.*) */
         font-family: var(--oh-button-base-font-family);
         font-weight: var(--oh-button-base-font-weight);
         letter-spacing: var(--oh-button-base-letter-spacing);
@@ -75,10 +96,10 @@ let OhButton = class OhButton extends OhElement {
         justify-content: center;
         gap: var(--oh-spacing-2);
 
-        /* Shape: chunky rounded corners, not pills */
+        /* Corners: button.base.borderRadius (shape.control) */
         border-radius: var(--oh-button-base-border-radius);
 
-        /* Thick illustrative border */
+        /* Border width: button.base.borderWidth (stroke.control) */
         border: var(--oh-button-base-border-width) solid;
 
         /* Remove default button styles */
@@ -87,18 +108,16 @@ let OhButton = class OhButton extends OhElement {
         -moz-appearance: none;
         appearance: none;
 
-        /* Smooth but snappy transitions */
+        /* Transitions: motion.snappy / motion.quick */
         transition:
-          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
-          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
           background-color var(--oh-motion-quick) ease;
       }
 
       /* ═══════════════════════════════════════════════════════════════
          PRIMARY VARIANT
-         Signature orange — bold and warm
-         Filled button: color + shadow define shape (no visible border)
-         Contrast: white on brand primary = 5.0:1 ✓ (WCAG AA)
+         Filled: button.variant.primary.* (border matches the fill)
          ═══════════════════════════════════════════════════════════════ */
 
       .button--primary {
@@ -106,7 +125,7 @@ let OhButton = class OhButton extends OhElement {
         border-color: var(--oh-button-variant-primary-border-color);
         color: var(--oh-button-variant-primary-color);
 
-        /* Light offset shadow: makes button pop forward */
+        /* Offset shadow: elevation.offset.lg at rest */
         box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
           0 0 var(--oh-button-variant-primary-shadow-color);
       }
@@ -130,7 +149,8 @@ let OhButton = class OhButton extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          SECONDARY VARIANT
-         Light button: NEEDS visible border for definition
+         button.variant.secondary.*: its border (borderColor) defines the
+         button's edge against the page, so it must stay visible
          ═══════════════════════════════════════════════════════════════ */
 
       .button--secondary {
@@ -159,8 +179,7 @@ let OhButton = class OhButton extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          ACCENT VARIANT
-         Calm blue — modern counterbalance to warm orange
-         Filled button: color + shadow define shape (no visible border)
+         Filled: button.variant.accent.* (border matches the fill)
          ═══════════════════════════════════════════════════════════════ */
 
       .button--accent {
@@ -217,8 +236,8 @@ let OhButton = class OhButton extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          SIZE VARIANTS
-         Minimum 16px (1rem) for WCAG readability
-         Values: button.size.* tokens
+         Values: button.size.* tokens. Font sizes come from
+         typography.control.fontSize.*, never below font.size.base
          ═══════════════════════════════════════════════════════════════ */
 
       .button--sm {

package/dist/oh-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-button.js","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-button.js","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"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"}