@orange-halo/components 2.2.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/custom-elements.json +551 -314
  2. package/dist/index.d.ts +1 -7
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +0 -4
  5. package/dist/index.js.map +1 -1
  6. package/dist/oh-accordion.d.ts +53 -8
  7. package/dist/oh-accordion.d.ts.map +1 -1
  8. package/dist/oh-accordion.js +77 -15
  9. package/dist/oh-accordion.js.map +1 -1
  10. package/dist/oh-alert.d.ts +26 -8
  11. package/dist/oh-alert.d.ts.map +1 -1
  12. package/dist/oh-alert.js +32 -14
  13. package/dist/oh-alert.js.map +1 -1
  14. package/dist/oh-badge.d.ts +32 -13
  15. package/dist/oh-badge.d.ts.map +1 -1
  16. package/dist/oh-badge.js +35 -16
  17. package/dist/oh-badge.js.map +1 -1
  18. package/dist/oh-breadcrumb.d.ts +39 -12
  19. package/dist/oh-breadcrumb.d.ts.map +1 -1
  20. package/dist/oh-breadcrumb.js +39 -17
  21. package/dist/oh-breadcrumb.js.map +1 -1
  22. package/dist/oh-button.d.ts +49 -23
  23. package/dist/oh-button.d.ts.map +1 -1
  24. package/dist/oh-button.js +63 -44
  25. package/dist/oh-button.js.map +1 -1
  26. package/dist/oh-card.d.ts +47 -19
  27. package/dist/oh-card.d.ts.map +1 -1
  28. package/dist/oh-card.js +110 -82
  29. package/dist/oh-card.js.map +1 -1
  30. package/dist/oh-checkbox-group.d.ts +56 -12
  31. package/dist/oh-checkbox-group.d.ts.map +1 -1
  32. package/dist/oh-checkbox-group.figma.js +4 -6
  33. package/dist/oh-checkbox-group.figma.js.map +1 -1
  34. package/dist/oh-checkbox-group.js +86 -44
  35. package/dist/oh-checkbox-group.js.map +1 -1
  36. package/dist/oh-checkbox.d.ts +54 -17
  37. package/dist/oh-checkbox.d.ts.map +1 -1
  38. package/dist/oh-checkbox.js +85 -55
  39. package/dist/oh-checkbox.js.map +1 -1
  40. package/dist/oh-cluster.d.ts +19 -14
  41. package/dist/oh-cluster.d.ts.map +1 -1
  42. package/dist/oh-cluster.js +19 -19
  43. package/dist/oh-cluster.js.map +1 -1
  44. package/dist/oh-container.d.ts +19 -16
  45. package/dist/oh-container.d.ts.map +1 -1
  46. package/dist/oh-container.js +21 -23
  47. package/dist/oh-container.js.map +1 -1
  48. package/dist/oh-drawer.d.ts +28 -11
  49. package/dist/oh-drawer.d.ts.map +1 -1
  50. package/dist/oh-drawer.js +31 -14
  51. package/dist/oh-drawer.js.map +1 -1
  52. package/dist/oh-footer.d.ts +37 -18
  53. package/dist/oh-footer.d.ts.map +1 -1
  54. package/dist/oh-footer.js +38 -19
  55. package/dist/oh-footer.js.map +1 -1
  56. package/dist/oh-grid.d.ts +27 -14
  57. package/dist/oh-grid.d.ts.map +1 -1
  58. package/dist/oh-grid.js +27 -19
  59. package/dist/oh-grid.js.map +1 -1
  60. package/dist/oh-icon.d.ts +21 -5
  61. package/dist/oh-icon.d.ts.map +1 -1
  62. package/dist/oh-icon.js +21 -5
  63. package/dist/oh-icon.js.map +1 -1
  64. package/dist/oh-input.d.ts +104 -20
  65. package/dist/oh-input.d.ts.map +1 -1
  66. package/dist/oh-input.figma.js +2 -2
  67. package/dist/oh-input.figma.js.map +1 -1
  68. package/dist/oh-input.js +205 -66
  69. package/dist/oh-input.js.map +1 -1
  70. package/dist/oh-link.d.ts +42 -19
  71. package/dist/oh-link.d.ts.map +1 -1
  72. package/dist/oh-link.js +47 -29
  73. package/dist/oh-link.js.map +1 -1
  74. package/dist/oh-modal.d.ts +29 -6
  75. package/dist/oh-modal.d.ts.map +1 -1
  76. package/dist/oh-modal.js +37 -16
  77. package/dist/oh-modal.js.map +1 -1
  78. package/dist/oh-navbar.d.ts +42 -19
  79. package/dist/oh-navbar.d.ts.map +1 -1
  80. package/dist/oh-navbar.js +42 -19
  81. package/dist/oh-navbar.js.map +1 -1
  82. package/dist/oh-progress.d.ts +26 -7
  83. package/dist/oh-progress.d.ts.map +1 -1
  84. package/dist/oh-progress.js +31 -12
  85. package/dist/oh-progress.js.map +1 -1
  86. package/dist/oh-radio-group.d.ts +55 -13
  87. package/dist/oh-radio-group.d.ts.map +1 -1
  88. package/dist/oh-radio-group.figma.js +2 -2
  89. package/dist/oh-radio-group.figma.js.map +1 -1
  90. package/dist/oh-radio-group.js +83 -43
  91. package/dist/oh-radio-group.js.map +1 -1
  92. package/dist/oh-radio.d.ts +55 -17
  93. package/dist/oh-radio.d.ts.map +1 -1
  94. package/dist/oh-radio.js +87 -56
  95. package/dist/oh-radio.js.map +1 -1
  96. package/dist/oh-select.d.ts +58 -16
  97. package/dist/oh-select.d.ts.map +1 -1
  98. package/dist/oh-select.js +70 -33
  99. package/dist/oh-select.js.map +1 -1
  100. package/dist/oh-skip-link.d.ts +33 -15
  101. package/dist/oh-skip-link.d.ts.map +1 -1
  102. package/dist/oh-skip-link.js +38 -25
  103. package/dist/oh-skip-link.js.map +1 -1
  104. package/dist/oh-stack.d.ts +17 -14
  105. package/dist/oh-stack.d.ts.map +1 -1
  106. package/dist/oh-stack.js +18 -20
  107. package/dist/oh-stack.js.map +1 -1
  108. package/dist/oh-tabs.d.ts +55 -30
  109. package/dist/oh-tabs.d.ts.map +1 -1
  110. package/dist/oh-tabs.js +80 -65
  111. package/dist/oh-tabs.js.map +1 -1
  112. package/dist/oh-textarea.d.ts +37 -6
  113. package/dist/oh-textarea.d.ts.map +1 -1
  114. package/dist/oh-textarea.js +40 -9
  115. package/dist/oh-textarea.js.map +1 -1
  116. package/dist/oh-toggle.d.ts +45 -12
  117. package/dist/oh-toggle.d.ts.map +1 -1
  118. package/dist/oh-toggle.js +64 -29
  119. package/dist/oh-toggle.js.map +1 -1
  120. package/package.json +3 -7
  121. package/dist/oh-hero.d.ts +0 -33
  122. package/dist/oh-hero.d.ts.map +0 -1
  123. package/dist/oh-hero.js +0 -248
  124. package/dist/oh-hero.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QAkNL,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAEX;;;WAGG;QAEH,cAAS,GAAG,EAAE,CAAC;QAEf;;;WAGG;QAEH,eAAU,GAAkB,SAAS,CAAC;QAQtC;;;;WAIG;QAEK,mBAAc,GAAG,KAAK,CAAC;QAEvB,aAAQ,GAAG,qBAAqB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;IA8DpF,CAAC;aAtTiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2MF;KACF,AA9MqB,CA8MpB;IA4BM,aAAa,CAAC,KAAY;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC;IAYD,OAAO,CAAC,OAAuB;QAC7B,8DAA8D;QAC9D,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,UAAU,CAAC,OAAuB;QAChC,IAAI,IAAI,CAAC,UAAU,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,IAAI,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAExE,OAAO,IAAI,CAAA;;8CAE+B,OAAO;;;;iBAIpC,OAAO;mBACL,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;uBACR,IAAI,CAAC,OAAO;2BACR,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;+BAC7B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBACjD,IAAI,CAAC,aAAa;;;6CAGK,IAAI,CAAC,KAAK;;UAE7C,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;qBAEK,IAAI,CAAC,QAAQ;;;uBAGX,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;kBAc5C,IAAI,CAAC,SAAS;;aAEnB;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AApGD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAOX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CACrC;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAC9B;AAc9B;IADP,KAAK,EAAE;kDACuB;AAvPpB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAuTtB"}
@@ -1,27 +1,32 @@
1
1
  /**
2
2
  * oh-cluster
3
3
  *
4
- * Horizontal grouping with wrap and gap.
5
- * Perfect for button groups, tags, navigation items.
6
- *
7
4
  * DESIGN DECISIONS:
8
5
  * ─────────────────
9
- * 1. FLEX WRAP BY DEFAULT
10
- * - Items wrap to next line when needed
11
- * - Consistent gaps in both directions
12
- *
13
- * 2. JUSTIFY OPTIONS
14
- * - start, center, end, between, around
15
- *
16
- * 3. ALIGNMENT OPTIONS
17
- * - start, center, end, baseline
18
- *
19
- * @element oh-cluster
6
+ * 1. A wrapping flex row (unless `nowrap`); `gap` maps named steps to
7
+ * `spacing.*` tokens, the same in both directions.
8
+ * 2. Justify: start, center, end, between, around.
9
+ * 3. Align: start, center (default), end, baseline.
20
10
  */
21
11
  import { OhElement } from "./base.js";
22
12
  export type ClusterGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
23
13
  export type ClusterJustify = "start" | "center" | "end" | "between" | "around";
24
14
  export type ClusterAlign = "start" | "center" | "end" | "baseline";
15
+ /**
16
+ * A horizontal group of items that wraps onto new lines when space runs out.
17
+ *
18
+ * **Use it for** button groups, tags and rows of links. **Don't use it for**
19
+ * vertical lists (use `oh-stack`) or equal-width columns (use `oh-grid`).
20
+ *
21
+ * **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
22
+ * (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`), between
23
+ * items and between rows. `justify` is `start` (default), `center`, `end`,
24
+ * `between` or `around`; `align` is `start`, `center` (default), `end` or
25
+ * `baseline`. `nowrap` keeps everything on one line.
26
+ *
27
+ * @element oh-cluster
28
+ * @slot - The items to group.
29
+ */
25
30
  export declare class OhCluster extends OhElement {
26
31
  static styles: import("lit").CSSResult[];
27
32
  gap: ClusterGap;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-cluster.d.ts","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;AAEnE,qBACa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,4BAkFpB;IAGF,GAAG,EAAE,UAAU,CAAQ;IAGvB,OAAO,EAAE,cAAc,CAAW;IAGlC,KAAK,EAAE,YAAY,CAAY;IAG/B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
1
+ {"version":3,"file":"oh-cluster.d.ts","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;AAEnE;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,4BA6EpB;IAGF,GAAG,EAAE,UAAU,CAAQ;IAGvB,OAAO,EAAE,cAAc,CAAW;IAGlC,KAAK,EAAE,YAAY,CAAY;IAG/B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
@@ -1,22 +1,12 @@
1
1
  /**
2
2
  * oh-cluster
3
3
  *
4
- * Horizontal grouping with wrap and gap.
5
- * Perfect for button groups, tags, navigation items.
6
- *
7
4
  * DESIGN DECISIONS:
8
5
  * ─────────────────
9
- * 1. FLEX WRAP BY DEFAULT
10
- * - Items wrap to next line when needed
11
- * - Consistent gaps in both directions
12
- *
13
- * 2. JUSTIFY OPTIONS
14
- * - start, center, end, between, around
15
- *
16
- * 3. ALIGNMENT OPTIONS
17
- * - start, center, end, baseline
18
- *
19
- * @element oh-cluster
6
+ * 1. A wrapping flex row (unless `nowrap`); `gap` maps named steps to
7
+ * `spacing.*` tokens, the same in both directions.
8
+ * 2. Justify: start, center, end, between, around.
9
+ * 3. Align: start, center (default), end, baseline.
20
10
  */
21
11
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
22
12
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -27,6 +17,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
27
17
  import { html, css } from "lit";
28
18
  import { customElement, property } from "lit/decorators.js";
29
19
  import { OhElement, baseStyles } from "./base.js";
20
+ /**
21
+ * A horizontal group of items that wraps onto new lines when space runs out.
22
+ *
23
+ * **Use it for** button groups, tags and rows of links. **Don't use it for**
24
+ * vertical lists (use `oh-stack`) or equal-width columns (use `oh-grid`).
25
+ *
26
+ * **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
27
+ * (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`), between
28
+ * items and between rows. `justify` is `start` (default), `center`, `end`,
29
+ * `between` or `around`; `align` is `start`, `center` (default), `end` or
30
+ * `baseline`. `nowrap` keeps everything on one line.
31
+ *
32
+ * @element oh-cluster
33
+ * @slot - The items to group.
34
+ */
30
35
  let OhCluster = class OhCluster extends OhElement {
31
36
  constructor() {
32
37
  super(...arguments);
@@ -38,11 +43,6 @@ let OhCluster = class OhCluster extends OhElement {
38
43
  static { this.styles = [
39
44
  baseStyles,
40
45
  css `
41
- /* ═══════════════════════════════════════════════════════════════
42
- ORANGE HALO CLUSTER
43
- Horizontal grouping • Flex wrap • Consistent gaps
44
- ═══════════════════════════════════════════════════════════════ */
45
-
46
46
  :host {
47
47
  display: flex;
48
48
  flex-wrap: wrap;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-cluster.js","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAO3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAsFL,QAAG,GAAe,IAAI,CAAC;QAGvB,YAAO,GAAmB,OAAO,CAAC;QAGlC,UAAK,GAAiB,QAAQ,CAAC;QAG/B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAnGiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;KACF,AAlFqB,CAkFpB;IAcF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAbD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACnB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACR;AAGlC;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;yCAC5B;AA/FJ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoGrB"}
1
+ {"version":3,"file":"oh-cluster.js","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMlD;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAiFL,QAAG,GAAe,IAAI,CAAC;QAGvB,YAAO,GAAmB,OAAO,CAAC;QAGlC,UAAK,GAAiB,QAAQ,CAAC;QAG/B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aA9FiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0EF;KACF,AA7EqB,CA6EpB;IAcF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAbD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACnB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACR;AAGlC;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;yCAC5B;AA1FJ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+FrB"}
@@ -1,29 +1,32 @@
1
1
  /**
2
2
  * oh-container
3
3
  *
4
- * Max-width wrapper with centered content.
5
- * Used to constrain content width and provide consistent horizontal padding.
6
- *
7
4
  * DESIGN DECISIONS:
8
5
  * ─────────────────
9
- * 1. RESPONSIVE MAX-WIDTHS (layout.container.*)
10
- * - sm: tight, focused content
11
- * - md: articles, forms
12
- * - lg: standard pages
13
- * - xl: wide layouts
14
- * - full: 100% (edge-to-edge)
6
+ * 1. Max-widths come only from `layout.container.*` (sm, md, lg, xl);
7
+ * `full` is edge to edge with no padding.
8
+ * 2. Horizontal padding from `spacing.*`, stepping up at the
9
+ * `size.breakpoint.sm` and `size.breakpoint.lg` widths.
10
+ * 3. Centred with auto margins.
11
+ */
12
+ import { OhElement } from "./base.js";
13
+ export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
14
+ /**
15
+ * A centred wrapper that limits content to a maximum width and adds side padding.
16
+ *
17
+ * **Use it for** the outer width of a page or section. **Don't use it for**
18
+ * spacing between items (use `oh-stack`, `oh-cluster` or `oh-grid`).
15
19
  *
16
- * 2. CONSISTENT PADDING
17
- * - Uses spacing tokens for horizontal padding
18
- * - Responsive padding on smaller screens
20
+ * **Sizes:** `size` picks the max-width: `sm`, `md`, `lg` (default) and `xl`
21
+ * use `layout.container.sm` to `layout.container.xl`; `full` is the full
22
+ * width with no side padding. `center` centres the text.
19
23
  *
20
- * 3. CENTERED BY DEFAULT
21
- * - margin: 0 auto for horizontal centering
24
+ * **Behaviour:** side padding is `spacing.4`, rising to `spacing.6` from the
25
+ * `size.breakpoint.sm` width and `spacing.8` from `size.breakpoint.lg`.
22
26
  *
23
27
  * @element oh-container
28
+ * @slot - The content to contain.
24
29
  */
25
- import { OhElement } from "./base.js";
26
- export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
27
30
  export declare class OhContainer extends OhElement {
28
31
  static styles: import("lit").CSSResult[];
29
32
  size: ContainerSize;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BA6DpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
1
+ {"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAwDpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
@@ -1,26 +1,13 @@
1
1
  /**
2
2
  * oh-container
3
3
  *
4
- * Max-width wrapper with centered content.
5
- * Used to constrain content width and provide consistent horizontal padding.
6
- *
7
4
  * DESIGN DECISIONS:
8
5
  * ─────────────────
9
- * 1. RESPONSIVE MAX-WIDTHS (layout.container.*)
10
- * - sm: tight, focused content
11
- * - md: articles, forms
12
- * - lg: standard pages
13
- * - xl: wide layouts
14
- * - full: 100% (edge-to-edge)
15
- *
16
- * 2. CONSISTENT PADDING
17
- * - Uses spacing tokens for horizontal padding
18
- * - Responsive padding on smaller screens
19
- *
20
- * 3. CENTERED BY DEFAULT
21
- * - margin: 0 auto for horizontal centering
22
- *
23
- * @element oh-container
6
+ * 1. Max-widths come only from `layout.container.*` (sm, md, lg, xl);
7
+ * `full` is edge to edge with no padding.
8
+ * 2. Horizontal padding from `spacing.*`, stepping up at the
9
+ * `size.breakpoint.sm` and `size.breakpoint.lg` widths.
10
+ * 3. Centred with auto margins.
24
11
  */
25
12
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
26
13
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -31,6 +18,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
31
18
  import { html, css } from "lit";
32
19
  import { customElement, property } from "lit/decorators.js";
33
20
  import { OhElement, baseStyles } from "./base.js";
21
+ /**
22
+ * A centred wrapper that limits content to a maximum width and adds side padding.
23
+ *
24
+ * **Use it for** the outer width of a page or section. **Don't use it for**
25
+ * spacing between items (use `oh-stack`, `oh-cluster` or `oh-grid`).
26
+ *
27
+ * **Sizes:** `size` picks the max-width: `sm`, `md`, `lg` (default) and `xl`
28
+ * use `layout.container.sm` to `layout.container.xl`; `full` is the full
29
+ * width with no side padding. `center` centres the text.
30
+ *
31
+ * **Behaviour:** side padding is `spacing.4`, rising to `spacing.6` from the
32
+ * `size.breakpoint.sm` width and `spacing.8` from `size.breakpoint.lg`.
33
+ *
34
+ * @element oh-container
35
+ * @slot - The content to contain.
36
+ */
34
37
  let OhContainer = class OhContainer extends OhElement {
35
38
  constructor() {
36
39
  super(...arguments);
@@ -40,11 +43,6 @@ let OhContainer = class OhContainer extends OhElement {
40
43
  static { this.styles = [
41
44
  baseStyles,
42
45
  css `
43
- /* ═══════════════════════════════════════════════════════════════
44
- ORANGE HALO CONTAINER
45
- Max-width wrapper • Centered content • Responsive padding
46
- ═══════════════════════════════════════════════════════════════ */
47
-
48
46
  :host {
49
47
  display: block;
50
48
  width: 100%;
@@ -1 +1 @@
1
- {"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAK3C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QAiEL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAxEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AApEJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyEvB"}
1
+ {"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QA4DL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAnEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,AAxDqB,CAwDpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AA/DJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB"}
@@ -7,31 +7,48 @@
7
7
  * ─────────────────
8
8
  * 1. POSITIONING
9
9
  * - Slides in from left or right
10
- * - Full height, configurable width
11
- * - Overlays content with warm backdrop
10
+ * - Full height, width set by --oh-drawer-width
11
+ * - Overlays content with a color.surface.overlay backdrop
12
12
  *
13
- * 2. STYLING
14
- * - Chunky border on the edge
15
- * - Warm surface background
16
- * - Smooth slide animation
13
+ * 2. LOOK FROM TOKENS
14
+ * - Panel: color.surface.base
15
+ * - Shadow: elevation.strong (left); an elevation.offset.lg offset in
16
+ * color.border.strong (right)
17
+ * - Slide: motion.relaxed with motion.easeGentle, off under reduced motion
17
18
  *
18
19
  * 3. ACCESSIBILITY
19
20
  * - Focus trap when open (focus guards at each end of the panel)
20
21
  * - Escape key closes
21
22
  * - aria-modal and role="dialog"
22
23
  * - Returns focus to trigger on close
24
+ * - inert while closed, and hidden once it has slid away
25
+ */
26
+ import { OhElement } from "./base.js";
27
+ import "./oh-button.js";
28
+ import "./oh-icon.js";
29
+ /**
30
+ * A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
31
+ *
32
+ * **Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).
33
+ *
34
+ * **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
35
+ *
36
+ * **Positions:** `left` (default) or `right`.
37
+ *
38
+ * **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
39
+ *
40
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
41
+ *
42
+ * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
23
43
  *
24
44
  * @element oh-drawer
25
45
  *
26
46
  * @slot - Default slot for drawer content
27
47
  *
28
- * @fires oh-close - When the drawer is closed
48
+ * @fires oh-close - When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself.
29
49
  *
30
- * @cssprop --oh-drawer-width - Width of the drawer (default: 280px)
50
+ * @cssprop --oh-drawer-width - Width of the drawer. It never fills the whole viewport width.
31
51
  */
32
- import { OhElement } from "./base.js";
33
- import "./oh-button.js";
34
- import "./oh-icon.js";
35
52
  export declare class OhDrawer extends OhElement {
36
53
  static styles: import("lit").CSSResult[];
37
54
  /** Whether the drawer is open */
@@ -1 +1 @@
1
- {"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAqHpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb,6BAA6B;IAE7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAU;IAEpC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAqHpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb,6BAA6B;IAE7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAU;IAEpC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/oh-drawer.js CHANGED
@@ -7,27 +7,21 @@
7
7
  * ─────────────────
8
8
  * 1. POSITIONING
9
9
  * - Slides in from left or right
10
- * - Full height, configurable width
11
- * - Overlays content with warm backdrop
10
+ * - Full height, width set by --oh-drawer-width
11
+ * - Overlays content with a color.surface.overlay backdrop
12
12
  *
13
- * 2. STYLING
14
- * - Chunky border on the edge
15
- * - Warm surface background
16
- * - Smooth slide animation
13
+ * 2. LOOK FROM TOKENS
14
+ * - Panel: color.surface.base
15
+ * - Shadow: elevation.strong (left); an elevation.offset.lg offset in
16
+ * color.border.strong (right)
17
+ * - Slide: motion.relaxed with motion.easeGentle, off under reduced motion
17
18
  *
18
19
  * 3. ACCESSIBILITY
19
20
  * - Focus trap when open (focus guards at each end of the panel)
20
21
  * - Escape key closes
21
22
  * - aria-modal and role="dialog"
22
23
  * - Returns focus to trigger on close
23
- *
24
- * @element oh-drawer
25
- *
26
- * @slot - Default slot for drawer content
27
- *
28
- * @fires oh-close - When the drawer is closed
29
- *
30
- * @cssprop --oh-drawer-width - Width of the drawer (default: 280px)
24
+ * - inert while closed, and hidden once it has slid away
31
25
  */
32
26
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
33
27
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -41,6 +35,29 @@ import { OhElement, baseStyles } from "./base.js";
41
35
  import { getFocusableElementsDeep } from "@orange-halo/utils";
42
36
  import "./oh-button.js";
43
37
  import "./oh-icon.js";
38
+ /**
39
+ * A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
40
+ *
41
+ * **Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).
42
+ *
43
+ * **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
44
+ *
45
+ * **Positions:** `left` (default) or `right`.
46
+ *
47
+ * **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
48
+ *
49
+ * **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
50
+ *
51
+ * **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
52
+ *
53
+ * @element oh-drawer
54
+ *
55
+ * @slot - Default slot for drawer content
56
+ *
57
+ * @fires oh-close - When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself.
58
+ *
59
+ * @cssprop --oh-drawer-width - Width of the drawer. It never fills the whole viewport width.
60
+ */
44
61
  let OhDrawer = class OhDrawer extends OhElement {
45
62
  constructor() {
46
63
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"oh-drawer.js","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"oh-drawer.js","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"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"}
@@ -1,24 +1,48 @@
1
1
  /**
2
2
  * oh-footer
3
3
  *
4
- * A footer component with logo, multi-column links, and social icons.
5
- *
6
4
  * DESIGN DECISIONS:
7
5
  * ─────────────────
8
6
  * 1. LAYOUT
9
- * - Multi-column grid layout
10
- * - Logo and social on left
11
- * - Link columns on right
7
+ * - A four-column oh-grid inside an oh-container (size lg): the logo,
8
+ * copyright and social icons first, then a column per slotted oh-stack
9
+ * - At and below `size.breakpoint.md` the first column spans the full width
10
+ *
11
+ * 2. LOOK FROM TOKENS
12
+ * - `color.accent.default` background, `color.text.onAccent` text; use
13
+ * `inverse` links and icons inside it
14
+ *
15
+ * 3. CORE, NOT A BRAND PATTERN
16
+ * - Every site needs a footer, and its shape (logo, copyright, social,
17
+ * link columns) isn't specific to one brand, so it stays in the core
18
+ */
19
+ import { OhElement } from "./base.js";
20
+ import "./oh-container.js";
21
+ import "./oh-grid.js";
22
+ import "./oh-stack.js";
23
+ import "./oh-cluster.js";
24
+ /**
25
+ * A site footer with a logo, copyright line, social links and columns of links.
26
+ *
27
+ * **Use it for** the footer at the bottom of every page. **Don't use it for**
28
+ * the main navigation (use `oh-navbar`).
29
+ *
30
+ * **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
31
+ * the `social` slot for `oh-icon` links (with `inverse`); and the default
32
+ * slot, where each `oh-stack` becomes a column (start it with a heading, then
33
+ * `oh-link`s with `inverse`).
12
34
  *
13
- * 2. STYLING
14
- * - Accent blue background (dark)
15
- * - White/inverse text and links
16
- * - Generous padding
35
+ * **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
36
+ * `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
37
+ * column spans the full width.
17
38
  *
18
- * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
19
- * it from @orange-halo/brand-orange-halo; importing it from components is
20
- * deprecated and stops working in components 3.0, when this file moves to
21
- * the brand package (brand plan phase 8).
39
+ * **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
40
+ * each social icon a `label`, and the column headings a level that fits the
41
+ * page's outline.
42
+ *
43
+ * **Look:** set by tokens — `color.accent.default` the background,
44
+ * `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
45
+ * the vertical padding.
22
46
  *
23
47
  * @element oh-footer
24
48
  *
@@ -26,11 +50,6 @@
26
50
  * @slot social - Slot for social media icons
27
51
  * @slot - Default slot for link columns (use oh-stack for each column)
28
52
  */
29
- import { OhElement } from "./base.js";
30
- import "./oh-container.js";
31
- import "./oh-grid.js";
32
- import "./oh-stack.js";
33
- import "./oh-cluster.js";
34
53
  export declare class OhFooter extends OhElement {
35
54
  static styles: import("lit").CSSResult[];
36
55
  /** Copyright text */
@@ -1 +1 @@
1
- {"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/oh-footer.js CHANGED
@@ -1,30 +1,20 @@
1
1
  /**
2
2
  * oh-footer
3
3
  *
4
- * A footer component with logo, multi-column links, and social icons.
5
- *
6
4
  * DESIGN DECISIONS:
7
5
  * ─────────────────
8
6
  * 1. LAYOUT
9
- * - Multi-column grid layout
10
- * - Logo and social on left
11
- * - Link columns on right
12
- *
13
- * 2. STYLING
14
- * - Accent blue background (dark)
15
- * - White/inverse text and links
16
- * - Generous padding
7
+ * - A four-column oh-grid inside an oh-container (size lg): the logo,
8
+ * copyright and social icons first, then a column per slotted oh-stack
9
+ * - At and below `size.breakpoint.md` the first column spans the full width
17
10
  *
18
- * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
19
- * it from @orange-halo/brand-orange-halo; importing it from components is
20
- * deprecated and stops working in components 3.0, when this file moves to
21
- * the brand package (brand plan phase 8).
11
+ * 2. LOOK FROM TOKENS
12
+ * - `color.accent.default` background, `color.text.onAccent` text; use
13
+ * `inverse` links and icons inside it
22
14
  *
23
- * @element oh-footer
24
- *
25
- * @slot logo - Slot for logo element
26
- * @slot social - Slot for social media icons
27
- * @slot - Default slot for link columns (use oh-stack for each column)
15
+ * 3. CORE, NOT A BRAND PATTERN
16
+ * - Every site needs a footer, and its shape (logo, copyright, social,
17
+ * link columns) isn't specific to one brand, so it stays in the core
28
18
  */
29
19
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
30
20
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -39,6 +29,35 @@ import "./oh-container.js";
39
29
  import "./oh-grid.js";
40
30
  import "./oh-stack.js";
41
31
  import "./oh-cluster.js";
32
+ /**
33
+ * A site footer with a logo, copyright line, social links and columns of links.
34
+ *
35
+ * **Use it for** the footer at the bottom of every page. **Don't use it for**
36
+ * the main navigation (use `oh-navbar`).
37
+ *
38
+ * **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
39
+ * the `social` slot for `oh-icon` links (with `inverse`); and the default
40
+ * slot, where each `oh-stack` becomes a column (start it with a heading, then
41
+ * `oh-link`s with `inverse`).
42
+ *
43
+ * **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
44
+ * `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
45
+ * column spans the full width.
46
+ *
47
+ * **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
48
+ * each social icon a `label`, and the column headings a level that fits the
49
+ * page's outline.
50
+ *
51
+ * **Look:** set by tokens — `color.accent.default` the background,
52
+ * `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
53
+ * the vertical padding.
54
+ *
55
+ * @element oh-footer
56
+ *
57
+ * @slot logo - Slot for logo element
58
+ * @slot social - Slot for social media icons
59
+ * @slot - Default slot for link columns (use oh-stack for each column)
60
+ */
42
61
  let OhFooter = class OhFooter extends OhElement {
43
62
  constructor() {
44
63
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}
1
+ {"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}