@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
package/dist/index.d.ts CHANGED
@@ -19,7 +19,6 @@ import "./oh-container.js";
19
19
  import "./oh-drawer.js";
20
20
  import "./oh-footer.js";
21
21
  import "./oh-grid.js";
22
- import "./oh-hero.js";
23
22
  import "./oh-icon.js";
24
23
  import "./oh-input.js";
25
24
  import "./oh-link.js";
@@ -40,7 +39,7 @@ export type { AccordionItem, AccordionVariant, HeadingLevel, } from "./oh-accord
40
39
  export { OhAlert } from "./oh-alert.js";
41
40
  export type { AlertVariant } from "./oh-alert.js";
42
41
  export { OhBadge } from "./oh-badge.js";
43
- export type { BadgeVariant, BadgeType } from "./oh-badge.js";
42
+ export type { BadgeVariant, BadgeAppearance } from "./oh-badge.js";
44
43
  export { OhBreadcrumb } from "./oh-breadcrumb.js";
45
44
  export type { BreadcrumbItem } from "./oh-breadcrumb.js";
46
45
  export { OhButton } from "./oh-button.js";
@@ -55,14 +54,9 @@ export type { ClusterGap, ClusterJustify, ClusterAlign } from "./oh-cluster.js";
55
54
  export { OhContainer } from "./oh-container.js";
56
55
  export type { ContainerSize } from "./oh-container.js";
57
56
  export { OhDrawer } from "./oh-drawer.js";
58
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
59
57
  export { OhFooter } from "./oh-footer.js";
60
58
  export { OhGrid } from "./oh-grid.js";
61
59
  export type { GridColumns, GridGap } from "./oh-grid.js";
62
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
63
- export { OhHero } from "./oh-hero.js";
64
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
65
- export type { HeroVariant, HeroSize } from "./oh-hero.js";
66
60
  export { OhIcon } from "./oh-icon.js";
67
61
  export type { IconName, IconSize } from "./oh-icon.js";
68
62
  export { OhInput } from "./oh-input.js";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAOxB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
package/dist/index.js CHANGED
@@ -22,7 +22,6 @@ import "./oh-container.js";
22
22
  import "./oh-drawer.js";
23
23
  import "./oh-footer.js";
24
24
  import "./oh-grid.js";
25
- import "./oh-hero.js";
26
25
  import "./oh-icon.js";
27
26
  import "./oh-input.js";
28
27
  import "./oh-link.js";
@@ -54,11 +53,8 @@ export { OhCheckboxGroup } from "./oh-checkbox-group.js";
54
53
  export { OhCluster } from "./oh-cluster.js";
55
54
  export { OhContainer } from "./oh-container.js";
56
55
  export { OhDrawer } from "./oh-drawer.js";
57
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
58
56
  export { OhFooter } from "./oh-footer.js";
59
57
  export { OhGrid } from "./oh-grid.js";
60
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
61
- export { OhHero } from "./oh-hero.js";
62
58
  export { OhIcon } from "./oh-icon.js";
63
59
  export { OhInput } from "./oh-input.js";
64
60
  export { OhLink } from "./oh-link.js";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,kEAAkE;AAClE,gFAAgF;AAChF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAExB,gFAAgF;AAChF,uEAAuE;AACvE,gFAAgF;AAEhF,OAAO;AACP,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,SAAS;AACT,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
@@ -6,35 +6,80 @@
6
6
  * DESIGN DECISIONS:
7
7
  * ─────────────────
8
8
  * 1. TWO VARIANTS
9
- * - Subtle: Minimal, blends with content, follows link styling rules
10
- * - Standout: Chunky border, shadow, lifts on hover
9
+ * - Subtle: inline with the content; the trigger follows the link rules
10
+ * (color.text.link, a decoration.underline* underline that clears on hover)
11
+ * - Standout: each item is a boxed surface (color.surface.raised,
12
+ * stroke.control, shape.container) with an elevation.offset.* shadow
13
+ * that moves by lift.hoverMd on hover
11
14
  *
12
15
  * 2. CONSISTENT ICON
13
- * - Chevron that rotates 90° when expanded
16
+ * - Chevron that rotates a quarter turn when expanded
14
17
  * - Same icon for both variants
15
18
  *
16
19
  * 3. ACCESSIBLE
17
- * - Button trigger with aria-expanded
18
- * - Content region with aria-hidden
20
+ * - Button trigger with aria-expanded, inside a heading at a set level
21
+ * - Content region with aria-hidden, and inert while collapsed so
22
+ * nothing inside it can take focus
19
23
  * - Keyboard support (Enter/Space)
20
24
  * - Focus state with underline
21
25
  *
22
- * @element oh-accordion
26
+ * 4. ONE ITEM IS FINE
27
+ * - A single item is a show/hide section ("Show as table"). Each
28
+ * item's hiddenText adds heading text only screen readers hear, so
29
+ * several "Show as table" headings on a page can be told apart
30
+ *
31
+ * 5. ANY CONTENT
32
+ * - An item's content is any markup in a child with slot="item-<index>"
33
+ * (item-0 for the first), such as a paragraph or a table
23
34
  */
24
- import { nothing } from "lit";
35
+ import { nothing, type PropertyValues } from "lit";
25
36
  import { OhElement } from "./base.js";
26
37
  export interface AccordionItem {
38
+ /** The visible heading */
27
39
  heading: string;
28
- content: string;
40
+ /**
41
+ * Extra heading text that only screen readers hear, added after the
42
+ * heading, e.g. "(sales per year)" for a "Show as table" heading
43
+ */
44
+ hiddenText?: string;
45
+ /** Starts open */
46
+ open?: boolean;
29
47
  }
30
48
  export type AccordionVariant = "subtle" | "standout";
31
49
  export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
50
+ /**
51
+ * Collapsible sections, each with a heading that shows and hides its content. Use one item for a single show/hide section.
52
+ *
53
+ * **Use it for** content readers scan by heading and open as needed (FAQs, details, a "Show as table" section). **Don't use it for** content most readers need (leave it visible); for switching between views of the same thing (use tabs); or for site navigation.
54
+ *
55
+ * **Parts:** `items` is an array of `{ heading, hiddenText?, open? }` (in HTML, a JSON array). Item N's content is any markup in a child with `slot="item-N"`, such as a paragraph or a table.
56
+ *
57
+ * **Variants:** `subtle` (default), inline with surrounding content, its trigger styled as a link; `standout`, each item a separate boxed surface, for when the sections are the page's main content.
58
+ *
59
+ * **States:** collapsed and expanded per item (any number can be open; `open` sets the starting state), plus hover and focus-visible on the trigger.
60
+ *
61
+ * **Behaviour:** each trigger is a `<button>` inside a heading at `heading-level` (default 3), so the items fit the page's outline. Click, Enter or Space toggles it. While collapsed, the panel is `aria-hidden` and `inert`, so nothing inside it takes focus. Motion is turned off under `prefers-reduced-motion`.
62
+ *
63
+ * **Accessibility:** the trigger has `aria-expanded` and `aria-controls`; the panel is a `region` labelled by its trigger. `hiddenText` adds heading text only screen readers hear, so several items with the same visible heading (e.g. "Show as table") can be told apart. Set `heading-level` to fit the headings around it.
64
+ *
65
+ * **Look:** set by tokens. `subtle`: the trigger uses `color.text.link` and an underline set by `decoration.underlineThickness`, `underlineDash` and `underlinePeriod`, which clears on hover; focus is a solid `color.brand.primary` underline; items are divided by `stroke.divider` in `color.border.subtle`. `standout`: each item uses `color.surface.raised`, a `stroke.control` border in `color.border.emphasis` (`color.brand.primary` when expanded), `shape.container` corners and an `elevation.offset.*` shadow in `elevation.color.neutral`, which moves by `lift.hoverMd` on hover. Type uses `typography.body.*`; motion uses `motion.*` tokens.
66
+ *
67
+ * @element oh-accordion
68
+ * @slot item-N - The content of the item at index N (item-0 is the first)
69
+ */
32
70
  export declare class OhAccordion extends OhElement {
33
71
  static styles: import("lit").CSSResult[];
72
+ /**
73
+ * The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.
74
+ * Each item's content is a child with slot="item-<index>".
75
+ */
34
76
  items: AccordionItem[];
77
+ /** subtle (inline) or standout (boxed) */
35
78
  variant: AccordionVariant;
79
+ /** The heading level of each item's trigger, to fit the page's outline */
36
80
  headingLevel: HeadingLevel;
37
81
  private _expandedItems;
82
+ willUpdate(changed: PropertyValues): void;
38
83
  private _toggleItem;
39
84
  private _isExpanded;
40
85
  render(): typeof nothing | import("lit").TemplateResult<1>;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-accordion.d.ts","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7C,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BA4QpB;IAGF,KAAK,EAAE,aAAa,EAAE,CAAM;IAG5B,OAAO,EAAE,gBAAgB,CAAY;IAGrC,YAAY,EAAE,YAAY,CAAK;IAG/B,OAAO,CAAC,cAAc,CAA0B;IAEhD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAInB,MAAM;CA2DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
1
+ {"version":3,"file":"oh-accordion.d.ts","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAyRpB;IAEF;;;OAGG;IAEH,KAAK,EAAE,aAAa,EAAE,CAAM;IAE5B,0CAA0C;IAE1C,OAAO,EAAE,gBAAgB,CAAY;IAErC,0EAA0E;IAE1E,YAAY,EAAE,YAAY,CAAK;IAG/B,OAAO,CAAC,cAAc,CAA0B;IAEhD,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAInB,MAAM;CAmEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
@@ -6,20 +6,31 @@
6
6
  * DESIGN DECISIONS:
7
7
  * ─────────────────
8
8
  * 1. TWO VARIANTS
9
- * - Subtle: Minimal, blends with content, follows link styling rules
10
- * - Standout: Chunky border, shadow, lifts on hover
9
+ * - Subtle: inline with the content; the trigger follows the link rules
10
+ * (color.text.link, a decoration.underline* underline that clears on hover)
11
+ * - Standout: each item is a boxed surface (color.surface.raised,
12
+ * stroke.control, shape.container) with an elevation.offset.* shadow
13
+ * that moves by lift.hoverMd on hover
11
14
  *
12
15
  * 2. CONSISTENT ICON
13
- * - Chevron that rotates 90° when expanded
16
+ * - Chevron that rotates a quarter turn when expanded
14
17
  * - Same icon for both variants
15
18
  *
16
19
  * 3. ACCESSIBLE
17
- * - Button trigger with aria-expanded
18
- * - Content region with aria-hidden
20
+ * - Button trigger with aria-expanded, inside a heading at a set level
21
+ * - Content region with aria-hidden, and inert while collapsed so
22
+ * nothing inside it can take focus
19
23
  * - Keyboard support (Enter/Space)
20
24
  * - Focus state with underline
21
25
  *
22
- * @element oh-accordion
26
+ * 4. ONE ITEM IS FINE
27
+ * - A single item is a show/hide section ("Show as table"). Each
28
+ * item's hiddenText adds heading text only screen readers hear, so
29
+ * several "Show as table" headings on a page can be told apart
30
+ *
31
+ * 5. ANY CONTENT
32
+ * - An item's content is any markup in a child with slot="item-<index>"
33
+ * (item-0 for the first), such as a paragraph or a table
23
34
  */
24
35
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
25
36
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -31,11 +42,37 @@ import { html, css, nothing } from "lit";
31
42
  import { unsafeStatic, html as staticHtml } from "lit/static-html.js";
32
43
  import { customElement, property, state } from "lit/decorators.js";
33
44
  import { OhElement, baseStyles } from "./base.js";
45
+ /**
46
+ * Collapsible sections, each with a heading that shows and hides its content. Use one item for a single show/hide section.
47
+ *
48
+ * **Use it for** content readers scan by heading and open as needed (FAQs, details, a "Show as table" section). **Don't use it for** content most readers need (leave it visible); for switching between views of the same thing (use tabs); or for site navigation.
49
+ *
50
+ * **Parts:** `items` is an array of `{ heading, hiddenText?, open? }` (in HTML, a JSON array). Item N's content is any markup in a child with `slot="item-N"`, such as a paragraph or a table.
51
+ *
52
+ * **Variants:** `subtle` (default), inline with surrounding content, its trigger styled as a link; `standout`, each item a separate boxed surface, for when the sections are the page's main content.
53
+ *
54
+ * **States:** collapsed and expanded per item (any number can be open; `open` sets the starting state), plus hover and focus-visible on the trigger.
55
+ *
56
+ * **Behaviour:** each trigger is a `<button>` inside a heading at `heading-level` (default 3), so the items fit the page's outline. Click, Enter or Space toggles it. While collapsed, the panel is `aria-hidden` and `inert`, so nothing inside it takes focus. Motion is turned off under `prefers-reduced-motion`.
57
+ *
58
+ * **Accessibility:** the trigger has `aria-expanded` and `aria-controls`; the panel is a `region` labelled by its trigger. `hiddenText` adds heading text only screen readers hear, so several items with the same visible heading (e.g. "Show as table") can be told apart. Set `heading-level` to fit the headings around it.
59
+ *
60
+ * **Look:** set by tokens. `subtle`: the trigger uses `color.text.link` and an underline set by `decoration.underlineThickness`, `underlineDash` and `underlinePeriod`, which clears on hover; focus is a solid `color.brand.primary` underline; items are divided by `stroke.divider` in `color.border.subtle`. `standout`: each item uses `color.surface.raised`, a `stroke.control` border in `color.border.emphasis` (`color.brand.primary` when expanded), `shape.container` corners and an `elevation.offset.*` shadow in `elevation.color.neutral`, which moves by `lift.hoverMd` on hover. Type uses `typography.body.*`; motion uses `motion.*` tokens.
61
+ *
62
+ * @element oh-accordion
63
+ * @slot item-N - The content of the item at index N (item-0 is the first)
64
+ */
34
65
  let OhAccordion = class OhAccordion extends OhElement {
35
66
  constructor() {
36
67
  super(...arguments);
68
+ /**
69
+ * The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.
70
+ * Each item's content is a child with slot="item-<index>".
71
+ */
37
72
  this.items = [];
73
+ /** subtle (inline) or standout (boxed) */
38
74
  this.variant = "subtle";
75
+ /** The heading level of each item's trigger, to fit the page's outline */
39
76
  this.headingLevel = 3;
40
77
  this._expandedItems = new Set();
41
78
  }
@@ -43,7 +80,7 @@ let OhAccordion = class OhAccordion extends OhElement {
43
80
  baseStyles,
44
81
  css `
45
82
  /* ═══════════════════════════════════════════════════════════════
46
- ORANGE HALO ACCORDION
83
+ ACCORDION
47
84
  Subtle (inline) • Standout (boxed) • Accessible
48
85
  ═══════════════════════════════════════════════════════════════ */
49
86
 
@@ -105,7 +142,7 @@ let OhAccordion = class OhAccordion extends OhElement {
105
142
  outline: none;
106
143
  }
107
144
 
108
- /* Text span with dashed underline — follows link rules */
145
+ /* Text span with the link underline (decoration.underline*) */
109
146
  .accordion--subtle .accordion-text {
110
147
  position: relative;
111
148
  padding-bottom: var(--oh-decoration-underline-thickness);
@@ -151,7 +188,7 @@ let OhAccordion = class OhAccordion extends OhElement {
151
188
  }
152
189
 
153
190
  /* ═══════════════════════════════════════════════════════════════
154
- STANDOUT VARIANT — Boxed, chunky, lifts on hover
191
+ STANDOUT VARIANT — Boxed; shadow moves by lift.hoverMd on hover
155
192
  ═══════════════════════════════════════════════════════════════ */
156
193
 
157
194
  .accordion--standout {
@@ -166,17 +203,17 @@ let OhAccordion = class OhAccordion extends OhElement {
166
203
 
167
204
  /* Base shadow and lift animation */
168
205
  box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
169
- 0 0 var(--oh-shadow-neutral);
206
+ 0 0 var(--oh-elevation-color-neutral);
170
207
  transition:
171
- transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
172
- 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);
173
210
  }
174
211
 
175
212
  /* Lift whole accordion only when trigger is hovered */
176
213
  .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
177
214
  transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
178
215
  box-shadow: var(--oh-elevation-offset-xl) var(--oh-elevation-offset-xl)
179
- 0 0 var(--oh-shadow-neutral-hover);
216
+ 0 0 var(--oh-elevation-color-neutral-hover);
180
217
  }
181
218
 
182
219
  .accordion--standout .accordion-item[data-expanded="true"] {
@@ -210,7 +247,7 @@ let OhAccordion = class OhAccordion extends OhElement {
210
247
  text-underline-offset: 3px;
211
248
  }
212
249
 
213
- /* Text span for standout — dashed underline appears on hover */
250
+ /* Text span for standout: the underline appears on hover */
214
251
  .accordion--standout .accordion-text {
215
252
  position: relative;
216
253
  padding-bottom: var(--oh-decoration-underline-thickness);
@@ -290,6 +327,19 @@ let OhAccordion = class OhAccordion extends OhElement {
290
327
  overflow: hidden;
291
328
  }
292
329
 
330
+ /* Heading text for screen readers only */
331
+ .visually-hidden {
332
+ position: absolute;
333
+ width: 1px;
334
+ height: 1px;
335
+ padding: 0;
336
+ margin: -1px;
337
+ overflow: hidden;
338
+ clip: rect(0, 0, 0, 0);
339
+ white-space: nowrap;
340
+ border: 0;
341
+ }
342
+
293
343
  /* ═══════════════════════════════════════════════════════════════
294
344
  REDUCED MOTION
295
345
  ═══════════════════════════════════════════════════════════════ */
@@ -308,6 +358,12 @@ let OhAccordion = class OhAccordion extends OhElement {
308
358
  }
309
359
  `,
310
360
  ]; }
361
+ willUpdate(changed) {
362
+ // New items start open or closed as each one says
363
+ if (changed.has("items")) {
364
+ this._expandedItems = new Set((this.items ?? []).flatMap((item, index) => (item.open ? [index] : [])));
365
+ }
366
+ }
311
367
  _toggleItem(index) {
312
368
  if (this._expandedItems.has(index)) {
313
369
  this._expandedItems.delete(index);
@@ -353,6 +409,11 @@ let OhAccordion = class OhAccordion extends OhElement {
353
409
  <path d="M6 4L10 8L6 12" />
354
410
  </svg>
355
411
  <span class="accordion-text">${item.heading}</span>
412
+ ${item.hiddenText
413
+ ? html `<span class="visually-hidden">
414
+ ${item.hiddenText}</span
415
+ >`
416
+ : nothing}
356
417
  </button>
357
418
  </${headingTag}>
358
419
  <div
@@ -361,11 +422,12 @@ let OhAccordion = class OhAccordion extends OhElement {
361
422
  role="region"
362
423
  aria-labelledby=${triggerId}
363
424
  aria-hidden=${!isExpanded}
425
+ ?inert=${!isExpanded}
364
426
  data-expanded=${isExpanded ? "true" : "false"}
365
427
  >
366
428
  <div class="accordion-panel-inner">
367
429
  <div class="accordion-content">
368
- ${item.content}
430
+ <slot name=${`item-${index}`}></slot>
369
431
  </div>
370
432
  </div>
371
433
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"oh-accordion.js","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"oh-accordion.js","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"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"}
@@ -1,13 +1,13 @@
1
1
  /**
2
2
  * oh-alert
3
3
  *
4
- * A dismissible alert for feedback messages.
5
- * Subtle backgrounds only, supports rich content including links.
4
+ * A message box for feedback, optionally dismissible, that can hold links.
6
5
  *
7
6
  * DESIGN DECISIONS:
8
7
  * ─────────────────
9
8
  * 1. SUBTLE ONLY
10
- * - Muted backgrounds, not overwhelming
9
+ * - Background is the variant's color.feedback.*Subtle token; border and
10
+ * icon use color.feedback.*; text stays color.text.primary
11
11
  * - Matches badge subtle variants
12
12
  *
13
13
  * 2. DISMISSIBLE
@@ -19,14 +19,32 @@
19
19
  * - Default slot for flexible content
20
20
  *
21
21
  * 4. ACCESSIBLE
22
- * - role="alert" for important messages
23
- * - Close button has accessible label
24
- * - Links within inherit appropriate styling
25
- *
26
- * @element oh-alert
22
+ * - role="alert" only when live is set (alerts added after first render)
23
+ * - Close button has a visible text label
24
+ * - Links within take the variant's feedback colour
27
25
  */
28
26
  import { OhElement } from "./base.js";
29
27
  export type AlertVariant = "success" | "error" | "warning" | "info";
28
+ /**
29
+ * A message box that tells the user about the result of an action or something that needs their attention.
30
+ *
31
+ * **Use it for** feedback on what just happened (saved, failed) or a notice about the page or account, near the content it's about. **Don't use it for** a short status label (use `oh-badge`); for a field's validation error (use the field's own error message); or for a message that must interrupt the user (use `oh-modal`).
32
+ *
33
+ * **Variants:** `info` (default), `success`, `warning`, `error`, each by its feedback role. Each has its own icon, so the meaning isn't carried by colour alone.
34
+ *
35
+ * **Behaviour:** with `dismissible`, a "Close" button follows the content; selecting it fires `oh-dismiss` and sets `hidden` on the alert. Content goes in the default slot and can include links.
36
+ *
37
+ * **Accessibility:** set `live` only for an alert added after the page has rendered (e.g. after submit); it adds `role="alert"` so screen readers announce it. Leave it off for alerts present on page load. Icons are `aria-hidden`; put the meaning in the text. Links show a solid outline in the current text colour on focus; the close button shows an underline.
38
+ *
39
+ * **Look:** set by tokens. Each variant uses `color.feedback.<variant>Subtle` for the background and `color.feedback.<variant>` for the border, icon and links; text is `color.text.primary`. `stroke.control` sets the border, `shape.container` the corners, `typography.body.*` the text, and `decoration.underlineThickness`, `underlineDash` and `underlinePeriod` the link underline. The close button uses `closeButton.backgroundHover`, `closeButton.shadowHover`, `elevation.offset.*`, `lift.*` and `shape.compact`.
40
+ *
41
+ * @element oh-alert
42
+ * @slot - The message. Can include links.
43
+ * @csspart alert - The alert box.
44
+ * @csspart content - The message wrapper.
45
+ * @csspart close - The close button (only when `dismissible`).
46
+ * @fires oh-dismiss - When the close button is selected, before the alert hides.
47
+ */
30
48
  export declare class OhAlert extends OhElement {
31
49
  static styles: import("lit").CSSResult[];
32
50
  variant: AlertVariant;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-alert.d.ts","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA0NpB;IAGF,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IAkEhB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"oh-alert.d.ts","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA0NpB;IAGF,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IAkEhB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
package/dist/oh-alert.js CHANGED
@@ -1,13 +1,13 @@
1
1
  /**
2
2
  * oh-alert
3
3
  *
4
- * A dismissible alert for feedback messages.
5
- * Subtle backgrounds only, supports rich content including links.
4
+ * A message box for feedback, optionally dismissible, that can hold links.
6
5
  *
7
6
  * DESIGN DECISIONS:
8
7
  * ─────────────────
9
8
  * 1. SUBTLE ONLY
10
- * - Muted backgrounds, not overwhelming
9
+ * - Background is the variant's color.feedback.*Subtle token; border and
10
+ * icon use color.feedback.*; text stays color.text.primary
11
11
  * - Matches badge subtle variants
12
12
  *
13
13
  * 2. DISMISSIBLE
@@ -19,11 +19,9 @@
19
19
  * - Default slot for flexible content
20
20
  *
21
21
  * 4. ACCESSIBLE
22
- * - role="alert" for important messages
23
- * - Close button has accessible label
24
- * - Links within inherit appropriate styling
25
- *
26
- * @element oh-alert
22
+ * - role="alert" only when live is set (alerts added after first render)
23
+ * - Close button has a visible text label
24
+ * - Links within take the variant's feedback colour
27
25
  */
28
26
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
29
27
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -34,6 +32,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
34
32
  import { html, css, nothing } from "lit";
35
33
  import { customElement, property } from "lit/decorators.js";
36
34
  import { OhElement, baseStyles } from "./base.js";
35
+ /**
36
+ * A message box that tells the user about the result of an action or something that needs their attention.
37
+ *
38
+ * **Use it for** feedback on what just happened (saved, failed) or a notice about the page or account, near the content it's about. **Don't use it for** a short status label (use `oh-badge`); for a field's validation error (use the field's own error message); or for a message that must interrupt the user (use `oh-modal`).
39
+ *
40
+ * **Variants:** `info` (default), `success`, `warning`, `error`, each by its feedback role. Each has its own icon, so the meaning isn't carried by colour alone.
41
+ *
42
+ * **Behaviour:** with `dismissible`, a "Close" button follows the content; selecting it fires `oh-dismiss` and sets `hidden` on the alert. Content goes in the default slot and can include links.
43
+ *
44
+ * **Accessibility:** set `live` only for an alert added after the page has rendered (e.g. after submit); it adds `role="alert"` so screen readers announce it. Leave it off for alerts present on page load. Icons are `aria-hidden`; put the meaning in the text. Links show a solid outline in the current text colour on focus; the close button shows an underline.
45
+ *
46
+ * **Look:** set by tokens. Each variant uses `color.feedback.<variant>Subtle` for the background and `color.feedback.<variant>` for the border, icon and links; text is `color.text.primary`. `stroke.control` sets the border, `shape.container` the corners, `typography.body.*` the text, and `decoration.underlineThickness`, `underlineDash` and `underlinePeriod` the link underline. The close button uses `closeButton.backgroundHover`, `closeButton.shadowHover`, `elevation.offset.*`, `lift.*` and `shape.compact`.
47
+ *
48
+ * @element oh-alert
49
+ * @slot - The message. Can include links.
50
+ * @csspart alert - The alert box.
51
+ * @csspart content - The message wrapper.
52
+ * @csspart close - The close button (only when `dismissible`).
53
+ * @fires oh-dismiss - When the close button is selected, before the alert hides.
54
+ */
37
55
  let OhAlert = class OhAlert extends OhElement {
38
56
  constructor() {
39
57
  super(...arguments);
@@ -49,7 +67,7 @@ let OhAlert = class OhAlert extends OhElement {
49
67
  baseStyles,
50
68
  css `
51
69
  /* ═══════════════════════════════════════════════════════════════
52
- ORANGE HALO ALERT
70
+ ALERT
53
71
  Subtle • Dismissible • Rich Content
54
72
  ═══════════════════════════════════════════════════════════════ */
55
73
 
@@ -70,7 +88,7 @@ let OhAlert = class OhAlert extends OhElement {
70
88
  padding: var(--oh-spacing-4);
71
89
  border-radius: var(--oh-shape-container);
72
90
 
73
- /* Chunky border like other components */
91
+ /* Border: stroke.control, like other components */
74
92
  border: var(--oh-stroke-control) solid;
75
93
  }
76
94
 
@@ -100,7 +118,7 @@ let OhAlert = class OhAlert extends OhElement {
100
118
  }
101
119
 
102
120
  /*
103
- * Links within alert - dashed underline with shrink animation
121
+ * Links within alert: the link underline (decoration.underline*), which shrinks on hover
104
122
  * Uses background-image approach which works with ::slotted()
105
123
  */
106
124
  .alert-content ::slotted(a) {
@@ -158,10 +176,10 @@ let OhAlert = class OhAlert extends OhElement {
158
176
  /* Use primary text color for contrast */
159
177
  color: var(--oh-color-text-primary);
160
178
 
161
- /* Chunky animation setup */
179
+ /* Hover and press movement come from lift.* and elevation.offset.* */
162
180
  transition:
163
- transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
164
- box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
181
+ transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
182
+ box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
165
183
  background-color var(--oh-motion-quick) ease;
166
184
  }
167
185
 
@@ -1 +1 @@
1
- {"version":3,"file":"oh-alert.js","sourceRoot":"","sources":["../src/oh-alert.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,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA8NL,YAAO,GAAiB,MAAM,CAAC;QAG/B,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;IA6Gf,CAAC;aApViB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuNF;KACF,AA1NqB,CA0NpB;IAeM,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;QACN,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACjC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,OAAO,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;UACtD,IAAI,CAAC,QAAQ,EAAE;;;;;;UAMf,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;;;;;;aAW/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAtHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC9B;AAxOF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqVnB"}
1
+ {"version":3,"file":"oh-alert.js","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;;;;;;;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;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA8NL,YAAO,GAAiB,MAAM,CAAC;QAG/B,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;IA6Gf,CAAC;aApViB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuNF;KACF,AA1NqB,CA0NpB;IAeM,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;QACN,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACjC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,OAAO,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;UACtD,IAAI,CAAC,QAAQ,EAAE;;;;;;UAMf,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;;;;;;aAW/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAtHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC9B;AAxOF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqVnB"}
@@ -1,33 +1,52 @@
1
1
  /**
2
2
  * oh-badge
3
3
  *
4
- * A flat, non-interactive badge for status indicators and labels.
5
- * Two styles per color: subtle (muted bg) and filled (strong bg).
4
+ * A non-interactive label for a status or category.
5
+ * Two types per variant: subtle and filled.
6
6
  *
7
7
  * DESIGN DECISIONS:
8
8
  * ─────────────────
9
- * 1. FLAT & NON-INTERACTIVE
10
- * - No shadows, no hover states
9
+ * 1. NON-INTERACTIVE
10
+ * - No shadow, no hover states, pointer-events off
11
11
  * - Pure informational element
12
12
  * - Not clickable
13
13
  *
14
- * 2. TWO INTENSITIES
15
- * - Subtle: muted background, darker text
16
- * - Filled: strong background, white/dark text
14
+ * 2. TWO TYPES
15
+ * - Subtle: the variant's *Subtle background token, its role colour as text
16
+ * - Filled: the role colour as background, its color.text.on* token as text
17
17
  *
18
18
  * 3. ACCESSIBLE CONTRAST
19
- * - All text meets WCAG AA (4.5:1)
20
- * - Filled variants use appropriate text color
21
- *
22
- * @element oh-badge
19
+ * - Every text/background pair is in contrast-pairs.json, so
20
+ * check:contrast checks it in every brand and mode
23
21
  */
24
22
  import { OhElement } from "./base.js";
25
23
  export type BadgeVariant = "success" | "error" | "warning" | "info" | "brand" | "accent";
26
- export type BadgeType = "subtle" | "filled";
24
+ export type BadgeAppearance = "subtle" | "filled";
25
+ /**
26
+ * A short, non-interactive label that shows the status or category of the thing next to it.
27
+ *
28
+ * **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`).
29
+ *
30
+ * **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.
31
+ *
32
+ * **Parts:** the default slot holds the text; the `icon` slot an optional leading icon, sized to the text.
33
+ *
34
+ * **Behaviour:** none. It doesn't take focus or respond to the pointer.
35
+ *
36
+ * **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`.
37
+ *
38
+ * **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.
39
+ *
40
+ * @element oh-badge
41
+ * @slot - The badge text.
42
+ * @slot icon - Optional leading icon.
43
+ * @csspart badge - The badge.
44
+ */
27
45
  export declare class OhBadge extends OhElement {
28
46
  static styles: import("lit").CSSResult[];
29
47
  variant: BadgeVariant;
30
- type: BadgeType;
48
+ /** `subtle` (default) for most badges; `filled`, the stronger appearance, for the one status that matters most */
49
+ appearance: BadgeAppearance;
31
50
  render(): import("lit").TemplateResult<1>;
32
51
  }
33
52
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"oh-badge.d.ts","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,QAAQ,CAAC;AACb,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgHpB;IAGF,OAAO,EAAE,YAAY,CAAW;IAGhC,IAAI,EAAE,SAAS,CAAY;IAE3B,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"oh-badge.d.ts","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,QAAQ,CAAC;AACb,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgHpB;IAGF,OAAO,EAAE,YAAY,CAAW;IAEhC,kHAAkH;IAElH,UAAU,EAAE,eAAe,CAAY;IAEvC,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}