@orange-halo/components 2.1.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 (130) hide show
  1. package/custom-elements.json +968 -362
  2. package/dist/base.d.ts.map +1 -1
  3. package/dist/base.js +1 -2
  4. package/dist/base.js.map +1 -1
  5. package/dist/index.d.ts +4 -8
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +2 -4
  8. package/dist/index.js.map +1 -1
  9. package/dist/oh-accordion.d.ts +53 -8
  10. package/dist/oh-accordion.d.ts.map +1 -1
  11. package/dist/oh-accordion.js +99 -29
  12. package/dist/oh-accordion.js.map +1 -1
  13. package/dist/oh-alert.d.ts +26 -8
  14. package/dist/oh-alert.d.ts.map +1 -1
  15. package/dist/oh-alert.js +96 -36
  16. package/dist/oh-alert.js.map +1 -1
  17. package/dist/oh-badge.d.ts +32 -13
  18. package/dist/oh-badge.d.ts.map +1 -1
  19. package/dist/oh-badge.js +38 -19
  20. package/dist/oh-badge.js.map +1 -1
  21. package/dist/oh-breadcrumb.d.ts +39 -12
  22. package/dist/oh-breadcrumb.d.ts.map +1 -1
  23. package/dist/oh-breadcrumb.js +66 -25
  24. package/dist/oh-breadcrumb.js.map +1 -1
  25. package/dist/oh-button.d.ts +49 -23
  26. package/dist/oh-button.d.ts.map +1 -1
  27. package/dist/oh-button.figma.js +1 -3
  28. package/dist/oh-button.figma.js.map +1 -1
  29. package/dist/oh-button.js +133 -82
  30. package/dist/oh-button.js.map +1 -1
  31. package/dist/oh-card.d.ts +47 -19
  32. package/dist/oh-card.d.ts.map +1 -1
  33. package/dist/oh-card.js +143 -96
  34. package/dist/oh-card.js.map +1 -1
  35. package/dist/oh-checkbox-group.d.ts +56 -12
  36. package/dist/oh-checkbox-group.d.ts.map +1 -1
  37. package/dist/oh-checkbox-group.figma.js +4 -6
  38. package/dist/oh-checkbox-group.figma.js.map +1 -1
  39. package/dist/oh-checkbox-group.js +114 -49
  40. package/dist/oh-checkbox-group.js.map +1 -1
  41. package/dist/oh-checkbox.d.ts +54 -17
  42. package/dist/oh-checkbox.d.ts.map +1 -1
  43. package/dist/oh-checkbox.js +117 -60
  44. package/dist/oh-checkbox.js.map +1 -1
  45. package/dist/oh-cluster.d.ts +19 -14
  46. package/dist/oh-cluster.d.ts.map +1 -1
  47. package/dist/oh-cluster.js +19 -19
  48. package/dist/oh-cluster.js.map +1 -1
  49. package/dist/oh-container.d.ts +19 -16
  50. package/dist/oh-container.d.ts.map +1 -1
  51. package/dist/oh-container.js +21 -23
  52. package/dist/oh-container.js.map +1 -1
  53. package/dist/oh-drawer.d.ts +28 -11
  54. package/dist/oh-drawer.d.ts.map +1 -1
  55. package/dist/oh-drawer.js +52 -24
  56. package/dist/oh-drawer.js.map +1 -1
  57. package/dist/oh-footer.d.ts +37 -18
  58. package/dist/oh-footer.d.ts.map +1 -1
  59. package/dist/oh-footer.js +38 -19
  60. package/dist/oh-footer.js.map +1 -1
  61. package/dist/oh-grid.d.ts +27 -14
  62. package/dist/oh-grid.d.ts.map +1 -1
  63. package/dist/oh-grid.js +28 -21
  64. package/dist/oh-grid.js.map +1 -1
  65. package/dist/oh-icon.d.ts +21 -5
  66. package/dist/oh-icon.d.ts.map +1 -1
  67. package/dist/oh-icon.js +27 -9
  68. package/dist/oh-icon.js.map +1 -1
  69. package/dist/oh-input.d.ts +110 -21
  70. package/dist/oh-input.d.ts.map +1 -1
  71. package/dist/oh-input.figma.js +2 -2
  72. package/dist/oh-input.figma.js.map +1 -1
  73. package/dist/oh-input.js +227 -71
  74. package/dist/oh-input.js.map +1 -1
  75. package/dist/oh-link.d.ts +42 -19
  76. package/dist/oh-link.d.ts.map +1 -1
  77. package/dist/oh-link.js +83 -38
  78. package/dist/oh-link.js.map +1 -1
  79. package/dist/oh-modal.d.ts +35 -6
  80. package/dist/oh-modal.d.ts.map +1 -1
  81. package/dist/oh-modal.js +90 -39
  82. package/dist/oh-modal.js.map +1 -1
  83. package/dist/oh-navbar.d.ts +42 -19
  84. package/dist/oh-navbar.d.ts.map +1 -1
  85. package/dist/oh-navbar.js +44 -20
  86. package/dist/oh-navbar.js.map +1 -1
  87. package/dist/oh-progress.d.ts +26 -7
  88. package/dist/oh-progress.d.ts.map +1 -1
  89. package/dist/oh-progress.js +35 -14
  90. package/dist/oh-progress.js.map +1 -1
  91. package/dist/oh-radio-group.d.ts +55 -13
  92. package/dist/oh-radio-group.d.ts.map +1 -1
  93. package/dist/oh-radio-group.figma.js +2 -2
  94. package/dist/oh-radio-group.figma.js.map +1 -1
  95. package/dist/oh-radio-group.js +122 -51
  96. package/dist/oh-radio-group.js.map +1 -1
  97. package/dist/oh-radio.d.ts +55 -17
  98. package/dist/oh-radio.d.ts.map +1 -1
  99. package/dist/oh-radio.js +120 -61
  100. package/dist/oh-radio.js.map +1 -1
  101. package/dist/oh-select.d.ts +59 -16
  102. package/dist/oh-select.d.ts.map +1 -1
  103. package/dist/oh-select.js +141 -69
  104. package/dist/oh-select.js.map +1 -1
  105. package/dist/oh-skip-link.d.ts +33 -15
  106. package/dist/oh-skip-link.d.ts.map +1 -1
  107. package/dist/oh-skip-link.js +43 -32
  108. package/dist/oh-skip-link.js.map +1 -1
  109. package/dist/oh-stack.d.ts +17 -14
  110. package/dist/oh-stack.d.ts.map +1 -1
  111. package/dist/oh-stack.js +18 -20
  112. package/dist/oh-stack.js.map +1 -1
  113. package/dist/oh-tabs.d.ts +55 -30
  114. package/dist/oh-tabs.d.ts.map +1 -1
  115. package/dist/oh-tabs.js +100 -76
  116. package/dist/oh-tabs.js.map +1 -1
  117. package/dist/oh-textarea.d.ts +129 -0
  118. package/dist/oh-textarea.d.ts.map +1 -0
  119. package/dist/oh-textarea.js +401 -0
  120. package/dist/oh-textarea.js.map +1 -0
  121. package/dist/oh-toggle.d.ts +45 -12
  122. package/dist/oh-toggle.d.ts.map +1 -1
  123. package/dist/oh-toggle.js +84 -34
  124. package/dist/oh-toggle.js.map +1 -1
  125. package/dist/styles/typography.js +1 -1
  126. package/package.json +7 -7
  127. package/dist/oh-hero.d.ts +0 -33
  128. package/dist/oh-hero.d.ts.map +0 -1
  129. package/dist/oh-hero.js +0 -246
  130. package/dist/oh-hero.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAkCxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IACH,MAAM,CAAC,MAAM,cAAgB;IAE7B;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC3C,OAAO;IAWV;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAM7D"}
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAiCxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IACH,MAAM,CAAC,MAAM,cAAgB;IAE7B;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC3C,OAAO;IAWV;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAM7D"}
package/dist/base.js CHANGED
@@ -22,8 +22,7 @@ export const baseStyles = css `
22
22
 
23
23
  /* Focus ring for keyboard navigation */
24
24
  :host(:focus-visible) {
25
- outline: var(--oh-focus-ring-width) solid
26
- var(--oh-focus-ring-color);
25
+ outline: var(--oh-focus-ring-width) solid var(--oh-focus-ring-color);
27
26
  outline-offset: var(--oh-focus-ring-offset);
28
27
  }
29
28
 
package/dist/base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IACvC;;OAEG;aACI,WAAM,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B;;OAEG;IACO,IAAI,CACZ,SAAiB,EACjB,MAAU,EACV,OAA4C;QAE5C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,8BAA8B;YAC9C,UAAU,EAAE,IAAI;YAChB,GAAG,OAAO;YACV,MAAM;SACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACO,QAAQ,CAAC,OAAgC;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;aAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC;aAC5B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;aACnB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC"}
1
+ {"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IACvC;;OAEG;aACI,WAAM,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B;;OAEG;IACO,IAAI,CACZ,SAAiB,EACjB,MAAU,EACV,OAA4C;QAE5C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,8BAA8B;YAC9C,UAAU,EAAE,IAAI;YAChB,GAAG,OAAO;YACV,MAAM;SACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACO,QAAQ,CAAC,OAAgC;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;aAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC;aAC5B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;aACnB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC"}
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";
@@ -32,14 +31,15 @@ import "./oh-select.js";
32
31
  import "./oh-skip-link.js";
33
32
  import "./oh-stack.js";
34
33
  import "./oh-tabs.js";
34
+ import "./oh-textarea.js";
35
35
  import "./oh-toggle.js";
36
36
  export { OhElement, baseStyles } from "./base.js";
37
37
  export { OhAccordion } from "./oh-accordion.js";
38
- export type { AccordionItem, AccordionVariant, HeadingLevel } from "./oh-accordion.js";
38
+ export type { AccordionItem, AccordionVariant, HeadingLevel, } from "./oh-accordion.js";
39
39
  export { OhAlert } from "./oh-alert.js";
40
40
  export type { AlertVariant } from "./oh-alert.js";
41
41
  export { OhBadge } from "./oh-badge.js";
42
- export type { BadgeVariant, BadgeType } from "./oh-badge.js";
42
+ export type { BadgeVariant, BadgeAppearance } from "./oh-badge.js";
43
43
  export { OhBreadcrumb } from "./oh-breadcrumb.js";
44
44
  export type { BreadcrumbItem } from "./oh-breadcrumb.js";
45
45
  export { OhButton } from "./oh-button.js";
@@ -54,14 +54,9 @@ export type { ClusterGap, ClusterJustify, ClusterAlign } from "./oh-cluster.js";
54
54
  export { OhContainer } from "./oh-container.js";
55
55
  export type { ContainerSize } from "./oh-container.js";
56
56
  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
57
  export { OhFooter } from "./oh-footer.js";
59
58
  export { OhGrid } from "./oh-grid.js";
60
59
  export type { GridColumns, GridGap } from "./oh-grid.js";
61
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
62
- export { OhHero } from "./oh-hero.js";
63
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
64
- export type { HeroVariant, HeroSize } from "./oh-hero.js";
65
60
  export { OhIcon } from "./oh-icon.js";
66
61
  export type { IconName, IconSize } from "./oh-icon.js";
67
62
  export { OhInput } from "./oh-input.js";
@@ -84,6 +79,7 @@ export { OhStack } from "./oh-stack.js";
84
79
  export type { StackGap, StackAlign } from "./oh-stack.js";
85
80
  export { OhTabs } from "./oh-tabs.js";
86
81
  export type { TabItem } from "./oh-tabs.js";
82
+ export { OhTextarea } from "./oh-textarea.js";
87
83
  export { OhToggle } from "./oh-toggle.js";
88
84
  export { typographyStyles, typographyCSS } from "./styles/typography.js";
89
85
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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,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,gBAAgB,CAAC;AAOxB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEvF,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,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,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,6HAA6H;AAC7H,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,6HAA6H;AAC7H,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,6HAA6H;AAC7H,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE1D,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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
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";
@@ -35,6 +34,7 @@ import "./oh-select.js";
35
34
  import "./oh-skip-link.js";
36
35
  import "./oh-stack.js";
37
36
  import "./oh-tabs.js";
37
+ import "./oh-textarea.js";
38
38
  import "./oh-toggle.js";
39
39
  // =============================================================================
40
40
  // EXPORTS - For TypeScript users who want to extend or type components
@@ -53,11 +53,8 @@ export { OhCheckboxGroup } from "./oh-checkbox-group.js";
53
53
  export { OhCluster } from "./oh-cluster.js";
54
54
  export { OhContainer } from "./oh-container.js";
55
55
  export { OhDrawer } from "./oh-drawer.js";
56
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
57
56
  export { OhFooter } from "./oh-footer.js";
58
57
  export { OhGrid } from "./oh-grid.js";
59
- /** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
60
- export { OhHero } from "./oh-hero.js";
61
58
  export { OhIcon } from "./oh-icon.js";
62
59
  export { OhInput } from "./oh-input.js";
63
60
  export { OhLink } from "./oh-link.js";
@@ -70,6 +67,7 @@ export { OhSelect } from "./oh-select.js";
70
67
  export { OhSkipLink } from "./oh-skip-link.js";
71
68
  export { OhStack } from "./oh-stack.js";
72
69
  export { OhTabs } from "./oh-tabs.js";
70
+ export { OhTextarea } from "./oh-textarea.js";
73
71
  export { OhToggle } from "./oh-toggle.js";
74
72
  // Styles
75
73
  export { typographyStyles, typographyCSS } from "./styles/typography.js";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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,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,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;AAGhD,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,6HAA6H;AAC7H,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,6HAA6H;AAC7H,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAItC,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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,SAAS;AACT,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
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,4BAoQpB;IAGF,KAAK,EAAE,aAAa,EAAE,CAAM;IAG5B,OAAO,EAAE,gBAAgB,CAAY;IAIrC,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
 
@@ -68,7 +105,8 @@ let OhAccordion = class OhAccordion extends OhElement {
68
105
  }
69
106
 
70
107
  .accordion--subtle .accordion-item {
71
- border-bottom: var(--oh-stroke-divider) solid var(--oh-color-border-subtle);
108
+ border-bottom: var(--oh-stroke-divider) solid
109
+ var(--oh-color-border-subtle);
72
110
  }
73
111
 
74
112
  .accordion--subtle .accordion-item:last-child {
@@ -88,12 +126,12 @@ let OhAccordion = class OhAccordion extends OhElement {
88
126
  gap: var(--oh-spacing-2);
89
127
  width: 100%;
90
128
  padding: var(--oh-spacing-3) 0;
91
-
129
+
92
130
  background: transparent;
93
131
  border: none;
94
132
  cursor: pointer;
95
133
  text-align: left;
96
-
134
+
97
135
  font-family: var(--oh-typography-body-font-family);
98
136
  font-size: var(--oh-typography-body-base-font-size);
99
137
  font-weight: var(--oh-typography-label-base-font-weight);
@@ -104,14 +142,14 @@ let OhAccordion = class OhAccordion extends OhElement {
104
142
  outline: none;
105
143
  }
106
144
 
107
- /* Text span with dashed underline — follows link rules */
145
+ /* Text span with the link underline (decoration.underline*) */
108
146
  .accordion--subtle .accordion-text {
109
147
  position: relative;
110
148
  padding-bottom: var(--oh-decoration-underline-thickness);
111
149
  }
112
150
 
113
151
  .accordion--subtle .accordion-text::after {
114
- content: '';
152
+ content: "";
115
153
  position: absolute;
116
154
  left: 0;
117
155
  bottom: 0;
@@ -127,14 +165,17 @@ let OhAccordion = class OhAccordion extends OhElement {
127
165
  background-size: 100% 100%;
128
166
  background-repeat: no-repeat;
129
167
  transform-origin: right;
130
- transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
168
+ transition: transform var(--oh-motion-relaxed)
169
+ var(--oh-motion-ease-gentle);
131
170
  }
132
171
 
133
172
  .accordion--subtle .accordion-trigger:hover .accordion-text::after {
134
173
  transform: scaleX(0);
135
174
  }
136
175
 
137
- .accordion--subtle .accordion-trigger:focus-visible .accordion-text::after {
176
+ .accordion--subtle
177
+ .accordion-trigger:focus-visible
178
+ .accordion-text::after {
138
179
  background-image: none;
139
180
  background-color: var(--oh-color-brand-primary);
140
181
  height: var(--oh-decoration-underline-thickness);
@@ -147,7 +188,7 @@ let OhAccordion = class OhAccordion extends OhElement {
147
188
  }
148
189
 
149
190
  /* ═══════════════════════════════════════════════════════════════
150
- STANDOUT VARIANT — Boxed, chunky, lifts on hover
191
+ STANDOUT VARIANT — Boxed; shadow moves by lift.hoverMd on hover
151
192
  ═══════════════════════════════════════════════════════════════ */
152
193
 
153
194
  .accordion--standout {
@@ -159,18 +200,20 @@ let OhAccordion = class OhAccordion extends OhElement {
159
200
  border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
160
201
  border-radius: var(--oh-shape-container);
161
202
  overflow: hidden;
162
-
203
+
163
204
  /* Base shadow and lift animation */
164
- box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-neutral);
165
- transition:
166
- transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
167
- box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful);
205
+ box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
206
+ 0 0 var(--oh-elevation-color-neutral);
207
+ transition:
208
+ transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
209
+ box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized);
168
210
  }
169
211
 
170
212
  /* Lift whole accordion only when trigger is hovered */
171
213
  .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
172
214
  transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
173
- box-shadow: var(--oh-elevation-offset-xl) var(--oh-elevation-offset-xl) 0 0 var(--oh-shadow-neutral-hover);
215
+ box-shadow: var(--oh-elevation-offset-xl) var(--oh-elevation-offset-xl)
216
+ 0 0 var(--oh-elevation-color-neutral-hover);
174
217
  }
175
218
 
176
219
  .accordion--standout .accordion-item[data-expanded="true"] {
@@ -183,12 +226,12 @@ let OhAccordion = class OhAccordion extends OhElement {
183
226
  gap: var(--oh-spacing-3);
184
227
  width: 100%;
185
228
  padding: var(--oh-spacing-4);
186
-
229
+
187
230
  background: transparent;
188
231
  border: none;
189
232
  cursor: pointer;
190
233
  text-align: left;
191
-
234
+
192
235
  font-family: var(--oh-typography-body-font-family);
193
236
  font-size: var(--oh-typography-body-base-font-size);
194
237
  font-weight: var(--oh-typography-control-font-weight);
@@ -204,14 +247,14 @@ let OhAccordion = class OhAccordion extends OhElement {
204
247
  text-underline-offset: 3px;
205
248
  }
206
249
 
207
- /* Text span for standout — dashed underline appears on hover */
250
+ /* Text span for standout: the underline appears on hover */
208
251
  .accordion--standout .accordion-text {
209
252
  position: relative;
210
253
  padding-bottom: var(--oh-decoration-underline-thickness);
211
254
  }
212
255
 
213
256
  .accordion--standout .accordion-text::after {
214
- content: '';
257
+ content: "";
215
258
  position: absolute;
216
259
  left: 0;
217
260
  bottom: 0;
@@ -228,7 +271,8 @@ let OhAccordion = class OhAccordion extends OhElement {
228
271
  background-repeat: no-repeat;
229
272
  transform-origin: left;
230
273
  transform: scaleX(0);
231
- transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
274
+ transition: transform var(--oh-motion-relaxed)
275
+ var(--oh-motion-ease-gentle);
232
276
  }
233
277
 
234
278
  .accordion--standout .accordion-trigger:hover .accordion-text::after {
@@ -249,7 +293,8 @@ let OhAccordion = class OhAccordion extends OhElement {
249
293
  flex-shrink: 0;
250
294
  width: 1rem;
251
295
  height: 1rem;
252
- transition: transform var(--oh-motion-gentle) var(--oh-motion-ease-gentle);
296
+ transition: transform var(--oh-motion-gentle)
297
+ var(--oh-motion-ease-gentle);
253
298
  }
254
299
 
255
300
  .accordion--subtle .accordion-icon {
@@ -282,6 +327,19 @@ let OhAccordion = class OhAccordion extends OhElement {
282
327
  overflow: hidden;
283
328
  }
284
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
+
285
343
  /* ═══════════════════════════════════════════════════════════════
286
344
  REDUCED MOTION
287
345
  ═══════════════════════════════════════════════════════════════ */
@@ -293,13 +351,19 @@ let OhAccordion = class OhAccordion extends OhElement {
293
351
  .accordion--subtle .accordion-text::after {
294
352
  transition-duration: 0.01ms !important;
295
353
  }
296
-
354
+
297
355
  .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
298
356
  transform: none !important;
299
357
  }
300
358
  }
301
359
  `,
302
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
+ }
303
367
  _toggleItem(index) {
304
368
  if (this._expandedItems.has(index)) {
305
369
  this._expandedItems.delete(index);
@@ -345,6 +409,11 @@ let OhAccordion = class OhAccordion extends OhElement {
345
409
  <path d="M6 4L10 8L6 12" />
346
410
  </svg>
347
411
  <span class="accordion-text">${item.heading}</span>
412
+ ${item.hiddenText
413
+ ? html `<span class="visually-hidden">
414
+ ${item.hiddenText}</span
415
+ >`
416
+ : nothing}
348
417
  </button>
349
418
  </${headingTag}>
350
419
  <div
@@ -353,11 +422,12 @@ let OhAccordion = class OhAccordion extends OhElement {
353
422
  role="region"
354
423
  aria-labelledby=${triggerId}
355
424
  aria-hidden=${!isExpanded}
425
+ ?inert=${!isExpanded}
356
426
  data-expanded=${isExpanded ? "true" : "false"}
357
427
  >
358
428
  <div class="accordion-panel-inner">
359
429
  <div class="accordion-content">
360
- ${item.content}
430
+ <slot name=${`item-${index}`}></slot>
361
431
  </div>
362
432
  </div>
363
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,4BAwNpB;IAGF,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IA8BhB,MAAM;CAgCP;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"}