@orange-halo/components 2.2.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/custom-elements.json +551 -314
  2. package/dist/index.d.ts +1 -7
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +0 -4
  5. package/dist/index.js.map +1 -1
  6. package/dist/oh-accordion.d.ts +53 -8
  7. package/dist/oh-accordion.d.ts.map +1 -1
  8. package/dist/oh-accordion.js +77 -15
  9. package/dist/oh-accordion.js.map +1 -1
  10. package/dist/oh-alert.d.ts +26 -8
  11. package/dist/oh-alert.d.ts.map +1 -1
  12. package/dist/oh-alert.js +32 -14
  13. package/dist/oh-alert.js.map +1 -1
  14. package/dist/oh-badge.d.ts +32 -13
  15. package/dist/oh-badge.d.ts.map +1 -1
  16. package/dist/oh-badge.js +35 -16
  17. package/dist/oh-badge.js.map +1 -1
  18. package/dist/oh-breadcrumb.d.ts +39 -12
  19. package/dist/oh-breadcrumb.d.ts.map +1 -1
  20. package/dist/oh-breadcrumb.js +39 -17
  21. package/dist/oh-breadcrumb.js.map +1 -1
  22. package/dist/oh-button.d.ts +49 -23
  23. package/dist/oh-button.d.ts.map +1 -1
  24. package/dist/oh-button.js +63 -44
  25. package/dist/oh-button.js.map +1 -1
  26. package/dist/oh-card.d.ts +47 -19
  27. package/dist/oh-card.d.ts.map +1 -1
  28. package/dist/oh-card.js +110 -82
  29. package/dist/oh-card.js.map +1 -1
  30. package/dist/oh-checkbox-group.d.ts +56 -12
  31. package/dist/oh-checkbox-group.d.ts.map +1 -1
  32. package/dist/oh-checkbox-group.figma.js +4 -6
  33. package/dist/oh-checkbox-group.figma.js.map +1 -1
  34. package/dist/oh-checkbox-group.js +86 -44
  35. package/dist/oh-checkbox-group.js.map +1 -1
  36. package/dist/oh-checkbox.d.ts +54 -17
  37. package/dist/oh-checkbox.d.ts.map +1 -1
  38. package/dist/oh-checkbox.js +85 -55
  39. package/dist/oh-checkbox.js.map +1 -1
  40. package/dist/oh-cluster.d.ts +19 -14
  41. package/dist/oh-cluster.d.ts.map +1 -1
  42. package/dist/oh-cluster.js +19 -19
  43. package/dist/oh-cluster.js.map +1 -1
  44. package/dist/oh-container.d.ts +19 -16
  45. package/dist/oh-container.d.ts.map +1 -1
  46. package/dist/oh-container.js +21 -23
  47. package/dist/oh-container.js.map +1 -1
  48. package/dist/oh-drawer.d.ts +28 -11
  49. package/dist/oh-drawer.d.ts.map +1 -1
  50. package/dist/oh-drawer.js +31 -14
  51. package/dist/oh-drawer.js.map +1 -1
  52. package/dist/oh-footer.d.ts +37 -18
  53. package/dist/oh-footer.d.ts.map +1 -1
  54. package/dist/oh-footer.js +38 -19
  55. package/dist/oh-footer.js.map +1 -1
  56. package/dist/oh-grid.d.ts +27 -14
  57. package/dist/oh-grid.d.ts.map +1 -1
  58. package/dist/oh-grid.js +27 -19
  59. package/dist/oh-grid.js.map +1 -1
  60. package/dist/oh-icon.d.ts +21 -5
  61. package/dist/oh-icon.d.ts.map +1 -1
  62. package/dist/oh-icon.js +21 -5
  63. package/dist/oh-icon.js.map +1 -1
  64. package/dist/oh-input.d.ts +104 -20
  65. package/dist/oh-input.d.ts.map +1 -1
  66. package/dist/oh-input.figma.js +2 -2
  67. package/dist/oh-input.figma.js.map +1 -1
  68. package/dist/oh-input.js +205 -66
  69. package/dist/oh-input.js.map +1 -1
  70. package/dist/oh-link.d.ts +42 -19
  71. package/dist/oh-link.d.ts.map +1 -1
  72. package/dist/oh-link.js +47 -29
  73. package/dist/oh-link.js.map +1 -1
  74. package/dist/oh-modal.d.ts +29 -6
  75. package/dist/oh-modal.d.ts.map +1 -1
  76. package/dist/oh-modal.js +37 -16
  77. package/dist/oh-modal.js.map +1 -1
  78. package/dist/oh-navbar.d.ts +42 -19
  79. package/dist/oh-navbar.d.ts.map +1 -1
  80. package/dist/oh-navbar.js +42 -19
  81. package/dist/oh-navbar.js.map +1 -1
  82. package/dist/oh-progress.d.ts +26 -7
  83. package/dist/oh-progress.d.ts.map +1 -1
  84. package/dist/oh-progress.js +31 -12
  85. package/dist/oh-progress.js.map +1 -1
  86. package/dist/oh-radio-group.d.ts +55 -13
  87. package/dist/oh-radio-group.d.ts.map +1 -1
  88. package/dist/oh-radio-group.figma.js +2 -2
  89. package/dist/oh-radio-group.figma.js.map +1 -1
  90. package/dist/oh-radio-group.js +83 -43
  91. package/dist/oh-radio-group.js.map +1 -1
  92. package/dist/oh-radio.d.ts +55 -17
  93. package/dist/oh-radio.d.ts.map +1 -1
  94. package/dist/oh-radio.js +87 -56
  95. package/dist/oh-radio.js.map +1 -1
  96. package/dist/oh-select.d.ts +58 -16
  97. package/dist/oh-select.d.ts.map +1 -1
  98. package/dist/oh-select.js +70 -33
  99. package/dist/oh-select.js.map +1 -1
  100. package/dist/oh-skip-link.d.ts +33 -15
  101. package/dist/oh-skip-link.d.ts.map +1 -1
  102. package/dist/oh-skip-link.js +38 -25
  103. package/dist/oh-skip-link.js.map +1 -1
  104. package/dist/oh-stack.d.ts +17 -14
  105. package/dist/oh-stack.d.ts.map +1 -1
  106. package/dist/oh-stack.js +18 -20
  107. package/dist/oh-stack.js.map +1 -1
  108. package/dist/oh-tabs.d.ts +55 -30
  109. package/dist/oh-tabs.d.ts.map +1 -1
  110. package/dist/oh-tabs.js +80 -65
  111. package/dist/oh-tabs.js.map +1 -1
  112. package/dist/oh-textarea.d.ts +37 -6
  113. package/dist/oh-textarea.d.ts.map +1 -1
  114. package/dist/oh-textarea.js +40 -9
  115. package/dist/oh-textarea.js.map +1 -1
  116. package/dist/oh-toggle.d.ts +45 -12
  117. package/dist/oh-toggle.d.ts.map +1 -1
  118. package/dist/oh-toggle.js +64 -29
  119. package/dist/oh-toggle.js.map +1 -1
  120. package/package.json +3 -7
  121. package/dist/oh-hero.d.ts +0 -33
  122. package/dist/oh-hero.d.ts.map +0 -1
  123. package/dist/oh-hero.js +0 -248
  124. package/dist/oh-hero.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;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;AAK3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA2SL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IA2DlB,CAAC;aApXiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoSF;KACF,AAvSqB,CAuSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAE3E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;uEAgBuD;YAC7D,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;aAaH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAzED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AA1TL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAqXlB"}
1
+ {"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;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;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAsSL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IA2DlB,CAAC;aA/WiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+RF;KACF,AAlSqB,CAkSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAE3E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;uEAgBuD;YAC7D,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;aAaH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAzED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AArTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgXlB"}
@@ -1,14 +1,14 @@
1
1
  /**
2
2
  * oh-modal
3
3
  *
4
- * A chunky, accessible modal dialog with focus trapping.
4
+ * An accessible modal dialog with focus trapping.
5
5
  *
6
6
  * DESIGN DECISIONS:
7
7
  * ─────────────────
8
- * 1. CHUNKY & LIFTED
8
+ * 1. LOOK FROM TOKENS
9
9
  * - stroke.control border like other components
10
- * - Offset shadow (elevation.offset.2xl) — feels like a lifted surface
11
- * - Warm backdrop, not pure black
10
+ * - Offset shadow: elevation.offset.2xl in elevation.color.overlay
11
+ * - Backdrop: modal.overlay
12
12
  *
13
13
  * 2. ACCESSIBLE
14
14
  * - Focus trap when open (focus guards at each end of the dialog)
@@ -20,11 +20,34 @@
20
20
  * - Optional heading
21
21
  * - Scrollable body content
22
22
  * - Optional footer slot for actions
23
- *
24
- * @element oh-modal
25
23
  */
26
24
  import { OhElement } from "./base.js";
27
25
  export type ModalSize = "sm" | "md" | "lg";
26
+ /**
27
+ * A dialog that opens over the page and holds the user's attention until they close it or act on it.
28
+ *
29
+ * **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
30
+ *
31
+ * **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
32
+ *
33
+ * **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
34
+ *
35
+ * **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
36
+ *
37
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
38
+ *
39
+ * **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
40
+ *
41
+ * @element oh-modal
42
+ * @slot - The dialog body.
43
+ * @slot footer - Actions, below the body.
44
+ * @csspart modal - The dialog panel.
45
+ * @csspart header - The header (heading and close button).
46
+ * @csspart close - The close button (only when `dismissible`).
47
+ * @csspart body - The scrolling body.
48
+ * @csspart footer - The footer.
49
+ * @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
50
+ */
28
51
  export declare class OhModal extends OhElement {
29
52
  static styles: import("lit").CSSResult[];
30
53
  open: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgPpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAEb;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAG1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAyBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAS7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAqFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA8OpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAEb;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAG1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAyBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAS7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAqFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
package/dist/oh-modal.js CHANGED
@@ -1,14 +1,14 @@
1
1
  /**
2
2
  * oh-modal
3
3
  *
4
- * A chunky, accessible modal dialog with focus trapping.
4
+ * An accessible modal dialog with focus trapping.
5
5
  *
6
6
  * DESIGN DECISIONS:
7
7
  * ─────────────────
8
- * 1. CHUNKY & LIFTED
8
+ * 1. LOOK FROM TOKENS
9
9
  * - stroke.control border like other components
10
- * - Offset shadow (elevation.offset.2xl) — feels like a lifted surface
11
- * - Warm backdrop, not pure black
10
+ * - Offset shadow: elevation.offset.2xl in elevation.color.overlay
11
+ * - Backdrop: modal.overlay
12
12
  *
13
13
  * 2. ACCESSIBLE
14
14
  * - Focus trap when open (focus guards at each end of the dialog)
@@ -20,8 +20,6 @@
20
20
  * - Optional heading
21
21
  * - Scrollable body content
22
22
  * - Optional footer slot for actions
23
- *
24
- * @element oh-modal
25
23
  */
26
24
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
27
25
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -33,6 +31,31 @@ import { html, css, nothing } from "lit";
33
31
  import { customElement, property, query, state } from "lit/decorators.js";
34
32
  import { OhElement, baseStyles } from "./base.js";
35
33
  import { getFocusableElementsDeep } from "@orange-halo/utils";
34
+ /**
35
+ * A dialog that opens over the page and holds the user's attention until they close it or act on it.
36
+ *
37
+ * **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
38
+ *
39
+ * **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
40
+ *
41
+ * **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
42
+ *
43
+ * **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
44
+ *
45
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
46
+ *
47
+ * **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
48
+ *
49
+ * @element oh-modal
50
+ * @slot - The dialog body.
51
+ * @slot footer - Actions, below the body.
52
+ * @csspart modal - The dialog panel.
53
+ * @csspart header - The header (heading and close button).
54
+ * @csspart close - The close button (only when `dismissible`).
55
+ * @csspart body - The scrolling body.
56
+ * @csspart footer - The footer.
57
+ * @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
58
+ */
36
59
  let OhModal = class OhModal extends OhElement {
37
60
  constructor() {
38
61
  super(...arguments);
@@ -46,8 +69,8 @@ let OhModal = class OhModal extends OhElement {
46
69
  baseStyles,
47
70
  css `
48
71
  /* ═══════════════════════════════════════════════════════════════
49
- ORANGE HALO MODAL
50
- Chunky • Lifted • Accessible
72
+ MODAL
73
+ Focus-trapped • Accessible
51
74
  ═══════════════════════════════════════════════════════════════ */
52
75
 
53
76
  :host {
@@ -63,7 +86,7 @@ let OhModal = class OhModal extends OhElement {
63
86
  inset: 0;
64
87
  z-index: 1000;
65
88
 
66
- /* Warm semi-transparent overlay */
89
+ /* Overlay: modal.overlay */
67
90
  background-color: var(--oh-modal-overlay);
68
91
 
69
92
  /* Flexbox centering */
@@ -101,22 +124,20 @@ let OhModal = class OhModal extends OhElement {
101
124
  max-height: calc(100vh - var(--oh-spacing-8));
102
125
  max-width: 100%;
103
126
 
104
- /* Warm surface */
105
127
  background-color: var(--oh-color-surface-base);
106
128
 
107
- /* Chunky border */
108
129
  border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
109
130
  border-radius: var(--oh-shape-container);
110
131
 
111
- /* Offset shadow — lifted surface */
132
+ /* Offset shadow: elevation.offset.2xl */
112
133
  box-shadow: var(--oh-elevation-offset-2xl)
113
- var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-overlay);
134
+ var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-overlay);
114
135
 
115
136
  /* Animation */
116
137
  transform: scale(0.95) translateY(10px);
117
138
  opacity: 0;
118
139
  transition:
119
- transform var(--oh-motion-gentle) var(--oh-motion-ease-playful),
140
+ transform var(--oh-motion-gentle) var(--oh-motion-ease-emphasized),
120
141
  opacity var(--oh-motion-gentle) ease;
121
142
  }
122
143
 
@@ -184,8 +205,8 @@ let OhModal = class OhModal extends OhElement {
184
205
  color: var(--oh-color-text-primary);
185
206
 
186
207
  transition:
187
- transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
188
- box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
208
+ transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
209
+ box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
189
210
  background-color var(--oh-motion-quick) ease;
190
211
  }
191
212
 
@@ -1 +1 @@
1
- {"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"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"}
@@ -1,30 +1,21 @@
1
1
  /**
2
2
  * oh-navbar
3
3
  *
4
- * A responsive navigation bar component with logo, links, and mobile drawer.
5
- *
6
4
  * DESIGN DECISIONS:
7
5
  * ─────────────────
8
6
  * 1. LAYOUT
9
- * - Logo on the left
10
- * - Navigation links on the right (desktop)
11
- * - Hamburger menu on mobile triggers drawer
12
- *
13
- * 2. STYLING
14
- * - Surface base background
15
- * - Chunky bottom border
16
- * - Links use oh-link styling
17
- *
18
- * 3. RESPONSIVE
19
- * - Desktop: horizontal links
20
- * - Mobile (< 768px): hamburger + drawer
21
- *
22
- * @element oh-navbar
7
+ * - Logo on the left, links pushed to the right, inside an
8
+ * oh-container (size lg)
9
+ * - At and below `size.breakpoint.md` the links hide and a menu button
10
+ * opens an oh-drawer from the left
23
11
  *
24
- * @slot logo - Slot for logo/brand element
25
- * @slot - Default slot for navigation links
12
+ * 2. DRAWER LINKS ARE A SEPARATE SLOT
13
+ * - The drawer lives outside the bar, so links for it are passed again
14
+ * in the `mobile` slot
26
15
  *
27
- * @cssprop --oh-navbar-breakpoint - Mobile breakpoint (default: 768px)
16
+ * 3. LOOK FROM TOKENS
17
+ * - `color.surface.base` background, a shadow in `focus.glowColor`,
18
+ * `stroke.divider` / `color.border.subtle` between drawer links
28
19
  */
29
20
  import { OhElement } from "./base.js";
30
21
  import "./oh-container.js";
@@ -32,6 +23,38 @@ import "./oh-cluster.js";
32
23
  import "./oh-drawer.js";
33
24
  import "./oh-button.js";
34
25
  import "./oh-icon.js";
26
+ /**
27
+ * A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.
28
+ *
29
+ * **Use it for** the main navigation at the top of every page. **Don't use
30
+ * it for** in-page sections (use `oh-tabs`) or a trail through the hierarchy
31
+ * (use `oh-breadcrumb`).
32
+ *
33
+ * **Parts:** the `logo` slot (a link to the home page), the default slot for
34
+ * the bar's links (`oh-link`), and the `mobile` slot for the same links in the
35
+ * drawer. `drawer-heading` names the drawer (defaults to "Menu").
36
+ *
37
+ * **Behaviour:** at and below the `size.breakpoint.md` width the links hide
38
+ * and an icon-only menu button ("Open navigation menu") opens an `oh-drawer`
39
+ * from the left, which traps focus and closes on Escape or its close button.
40
+ *
41
+ * **Accessibility:** the bar and the drawer each wrap their links in a
42
+ * `<nav>`; the drawer is a modal dialog. Give the logo link an accessible
43
+ * name (`alt` on its image, or text).
44
+ *
45
+ * **Look:** set by tokens — `color.surface.base` the background,
46
+ * `focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the
47
+ * padding and gaps, `stroke.divider` and `color.border.subtle` the dividers
48
+ * between drawer links. `--oh-navbar-logo-height` sets the logo height.
49
+ *
50
+ * @element oh-navbar
51
+ *
52
+ * @slot logo - Slot for logo/brand element
53
+ * @slot - Default slot for navigation links
54
+ * @slot mobile - The navigation links again, shown in the drawer
55
+ *
56
+ * @cssprop --oh-navbar-logo-height - Height of the slotted logo link or image
57
+ */
35
58
  export declare class OhNavbar extends OhElement {
36
59
  static styles: import("lit").CSSResult[];
37
60
  /** Heading shown in the mobile drawer */
@@ -1 +1 @@
1
- {"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/oh-navbar.js CHANGED
@@ -1,30 +1,21 @@
1
1
  /**
2
2
  * oh-navbar
3
3
  *
4
- * A responsive navigation bar component with logo, links, and mobile drawer.
5
- *
6
4
  * DESIGN DECISIONS:
7
5
  * ─────────────────
8
6
  * 1. LAYOUT
9
- * - Logo on the left
10
- * - Navigation links on the right (desktop)
11
- * - Hamburger menu on mobile triggers drawer
12
- *
13
- * 2. STYLING
14
- * - Surface base background
15
- * - Chunky bottom border
16
- * - Links use oh-link styling
17
- *
18
- * 3. RESPONSIVE
19
- * - Desktop: horizontal links
20
- * - Mobile (< 768px): hamburger + drawer
21
- *
22
- * @element oh-navbar
7
+ * - Logo on the left, links pushed to the right, inside an
8
+ * oh-container (size lg)
9
+ * - At and below `size.breakpoint.md` the links hide and a menu button
10
+ * opens an oh-drawer from the left
23
11
  *
24
- * @slot logo - Slot for logo/brand element
25
- * @slot - Default slot for navigation links
12
+ * 2. DRAWER LINKS ARE A SEPARATE SLOT
13
+ * - The drawer lives outside the bar, so links for it are passed again
14
+ * in the `mobile` slot
26
15
  *
27
- * @cssprop --oh-navbar-breakpoint - Mobile breakpoint (default: 768px)
16
+ * 3. LOOK FROM TOKENS
17
+ * - `color.surface.base` background, a shadow in `focus.glowColor`,
18
+ * `stroke.divider` / `color.border.subtle` between drawer links
28
19
  */
29
20
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
30
21
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -40,6 +31,38 @@ import "./oh-cluster.js";
40
31
  import "./oh-drawer.js";
41
32
  import "./oh-button.js";
42
33
  import "./oh-icon.js";
34
+ /**
35
+ * A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.
36
+ *
37
+ * **Use it for** the main navigation at the top of every page. **Don't use
38
+ * it for** in-page sections (use `oh-tabs`) or a trail through the hierarchy
39
+ * (use `oh-breadcrumb`).
40
+ *
41
+ * **Parts:** the `logo` slot (a link to the home page), the default slot for
42
+ * the bar's links (`oh-link`), and the `mobile` slot for the same links in the
43
+ * drawer. `drawer-heading` names the drawer (defaults to "Menu").
44
+ *
45
+ * **Behaviour:** at and below the `size.breakpoint.md` width the links hide
46
+ * and an icon-only menu button ("Open navigation menu") opens an `oh-drawer`
47
+ * from the left, which traps focus and closes on Escape or its close button.
48
+ *
49
+ * **Accessibility:** the bar and the drawer each wrap their links in a
50
+ * `<nav>`; the drawer is a modal dialog. Give the logo link an accessible
51
+ * name (`alt` on its image, or text).
52
+ *
53
+ * **Look:** set by tokens — `color.surface.base` the background,
54
+ * `focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the
55
+ * padding and gaps, `stroke.divider` and `color.border.subtle` the dividers
56
+ * between drawer links. `--oh-navbar-logo-height` sets the logo height.
57
+ *
58
+ * @element oh-navbar
59
+ *
60
+ * @slot logo - Slot for logo/brand element
61
+ * @slot - Default slot for navigation links
62
+ * @slot mobile - The navigation links again, shown in the drawer
63
+ *
64
+ * @cssprop --oh-navbar-logo-height - Height of the slotted logo link or image
65
+ */
43
66
  let OhNavbar = class OhNavbar extends OhElement {
44
67
  constructor() {
45
68
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA8EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA3EqB,CA2EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAnFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuIpB"}
1
+ {"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA8EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA3EqB,CA2EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAnFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuIpB"}
@@ -9,23 +9,42 @@
9
9
  * 1. FULLY ACCESSIBLE
10
10
  * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
11
11
  * - aria-label for screen reader context
12
- * - Percentage announced to screen readers
12
+ * - The visible percentage is aria-hidden; screen readers get the value
13
+ * from the progressbar's aria-value* attributes
13
14
  *
14
15
  * 2. VISUAL + NUMERIC
15
16
  * - Bar shows progress visually
16
17
  * - Percentage text for precise feedback
17
18
  * - Text can be hidden if needed
18
19
  *
19
- * 3. ORANGE HALO STYLING
20
- * - Chunky track with soft corners
21
- * - Warm fill colors
22
- * - Gentle animation on value change
23
- *
24
- * @element oh-progress
20
+ * 3. LOOK FROM TOKENS
21
+ * - Track: color.surface.inset, stroke.control, shape.pill and
22
+ * progress.track.insetShadow; fill: the variant's role colour
23
+ * - Inverse uses progress.inverse.*, one fill for every variant, so the
24
+ * fill keeps 3:1 against the track (a pair in contrast-pairs.json)
25
+ * - Width change animates over motion.relaxed, off under reduced motion
25
26
  */
26
27
  import { OhElement } from "./base.js";
27
28
  export type ProgressVariant = "brand" | "success" | "info" | "warning" | "error";
28
29
  export type ProgressSize = "sm" | "md" | "lg";
30
+ /**
31
+ * A bar that shows how much of a task is done, with an optional percentage and visible label.
32
+ *
33
+ * **Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).
34
+ *
35
+ * **Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.
36
+ *
37
+ * **Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.
38
+ *
39
+ * **Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default "Progress"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.
40
+ *
41
+ * **Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.
42
+ *
43
+ * @element oh-progress
44
+ * @csspart track - The bar's track.
45
+ * @csspart fill - The filled part of the track.
46
+ * @csspart value - The percentage text.
47
+ */
29
48
  export declare class OhProgress extends OhElement {
30
49
  static styles: import("lit").CSSResult[];
31
50
  /** Current progress value (0-100 by default, or 0-max) */
@@ -1 +1 @@
1
- {"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgKpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgKpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
@@ -9,19 +9,20 @@
9
9
  * 1. FULLY ACCESSIBLE
10
10
  * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
11
11
  * - aria-label for screen reader context
12
- * - Percentage announced to screen readers
12
+ * - The visible percentage is aria-hidden; screen readers get the value
13
+ * from the progressbar's aria-value* attributes
13
14
  *
14
15
  * 2. VISUAL + NUMERIC
15
16
  * - Bar shows progress visually
16
17
  * - Percentage text for precise feedback
17
18
  * - Text can be hidden if needed
18
19
  *
19
- * 3. ORANGE HALO STYLING
20
- * - Chunky track with soft corners
21
- * - Warm fill colors
22
- * - Gentle animation on value change
23
- *
24
- * @element oh-progress
20
+ * 3. LOOK FROM TOKENS
21
+ * - Track: color.surface.inset, stroke.control, shape.pill and
22
+ * progress.track.insetShadow; fill: the variant's role colour
23
+ * - Inverse uses progress.inverse.*, one fill for every variant, so the
24
+ * fill keeps 3:1 against the track (a pair in contrast-pairs.json)
25
+ * - Width change animates over motion.relaxed, off under reduced motion
25
26
  */
26
27
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
27
28
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -32,6 +33,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
32
33
  import { html, css } from "lit";
33
34
  import { customElement, property } from "lit/decorators.js";
34
35
  import { OhElement, baseStyles } from "./base.js";
36
+ /**
37
+ * A bar that shows how much of a task is done, with an optional percentage and visible label.
38
+ *
39
+ * **Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).
40
+ *
41
+ * **Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.
42
+ *
43
+ * **Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.
44
+ *
45
+ * **Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default "Progress"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.
46
+ *
47
+ * **Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.
48
+ *
49
+ * @element oh-progress
50
+ * @csspart track - The bar's track.
51
+ * @csspart fill - The filled part of the track.
52
+ * @csspart value - The percentage text.
53
+ */
35
54
  let OhProgress = class OhProgress extends OhElement {
36
55
  constructor() {
37
56
  super(...arguments);
@@ -56,8 +75,8 @@ let OhProgress = class OhProgress extends OhElement {
56
75
  baseStyles,
57
76
  css `
58
77
  /* ═══════════════════════════════════════════════════════════════
59
- ORANGE HALO PROGRESS BAR
60
- Accessible • Visual + Numeric • Warm styling
78
+ PROGRESS BAR
79
+ Accessible • Visual + Numeric
61
80
  ═══════════════════════════════════════════════════════════════ */
62
81
 
63
82
  :host {
@@ -195,9 +214,9 @@ let OhProgress = class OhProgress extends OhElement {
195
214
  color: var(--oh-color-text-on-brand);
196
215
  }
197
216
 
198
- /* Inverse fill — one solid cream fill for every variant, so the bar
199
- keeps 3:1+ contrast against the track on brand/accent backgrounds
200
- (the old honey/pastel fills were 1.6–1.9:1). */
217
+ /* Inverse fill — one progress.inverse.fill for every variant, so the
218
+ bar keeps 3:1 contrast against the track on brand/accent backgrounds
219
+ (per-variant fills failed; the pair is in contrast-pairs.json). */
201
220
  :host([inverse]) .progress__fill {
202
221
  background-color: var(--oh-progress-inverse-fill);
203
222
  }
@@ -1 +1 @@
1
- {"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"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"}