@orange-halo/components 2.0.0 → 2.1.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 (49) hide show
  1. package/custom-elements.json +3182 -73
  2. package/dist/index.d.ts +6 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +4 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/oh-accordion.js +17 -17
  7. package/dist/oh-alert.js +12 -12
  8. package/dist/oh-breadcrumb.js +12 -12
  9. package/dist/oh-button.d.ts +1 -1
  10. package/dist/oh-button.js +34 -34
  11. package/dist/oh-card.d.ts.map +1 -1
  12. package/dist/oh-card.js +17 -45
  13. package/dist/oh-card.js.map +1 -1
  14. package/dist/oh-checkbox-group.figma.js +1 -1
  15. package/dist/oh-checkbox-group.figma.js.map +1 -1
  16. package/dist/oh-checkbox-group.js +13 -13
  17. package/dist/oh-checkbox.d.ts +2 -2
  18. package/dist/oh-checkbox.js +19 -19
  19. package/dist/oh-drawer.js +1 -1
  20. package/dist/oh-footer.d.ts +5 -0
  21. package/dist/oh-footer.d.ts.map +1 -1
  22. package/dist/oh-footer.js +5 -0
  23. package/dist/oh-footer.js.map +1 -1
  24. package/dist/oh-hero.d.ts +5 -0
  25. package/dist/oh-hero.d.ts.map +1 -1
  26. package/dist/oh-hero.js +5 -0
  27. package/dist/oh-hero.js.map +1 -1
  28. package/dist/oh-icon.js +3 -3
  29. package/dist/oh-input.d.ts +2 -2
  30. package/dist/oh-input.figma.js +2 -2
  31. package/dist/oh-input.figma.js.map +1 -1
  32. package/dist/oh-input.js +5 -5
  33. package/dist/oh-link.js +23 -23
  34. package/dist/oh-modal.d.ts +2 -2
  35. package/dist/oh-modal.js +10 -10
  36. package/dist/oh-navbar.js +1 -1
  37. package/dist/oh-progress.js +2 -2
  38. package/dist/oh-radio-group.js +13 -13
  39. package/dist/oh-radio.d.ts +1 -1
  40. package/dist/oh-radio.js +18 -18
  41. package/dist/oh-select.d.ts +2 -2
  42. package/dist/oh-select.d.ts.map +1 -1
  43. package/dist/oh-select.js +17 -12
  44. package/dist/oh-select.js.map +1 -1
  45. package/dist/oh-skip-link.js +3 -3
  46. package/dist/oh-tabs.js +9 -9
  47. package/dist/oh-toggle.js +11 -11
  48. package/dist/styles/typography.js +4 -4
  49. package/package.json +11 -4
package/dist/index.d.ts CHANGED
@@ -26,6 +26,7 @@ import "./oh-link.js";
26
26
  import "./oh-modal.js";
27
27
  import "./oh-navbar.js";
28
28
  import "./oh-progress.js";
29
+ import "./oh-radio.js";
29
30
  import "./oh-radio-group.js";
30
31
  import "./oh-select.js";
31
32
  import "./oh-skip-link.js";
@@ -53,10 +54,13 @@ export type { ClusterGap, ClusterJustify, ClusterAlign } from "./oh-cluster.js";
53
54
  export { OhContainer } from "./oh-container.js";
54
55
  export type { ContainerSize } from "./oh-container.js";
55
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. */
56
58
  export { OhFooter } from "./oh-footer.js";
57
59
  export { OhGrid } from "./oh-grid.js";
58
60
  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. */
59
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. */
60
64
  export type { HeroVariant, HeroSize } from "./oh-hero.js";
61
65
  export { OhIcon } from "./oh-icon.js";
62
66
  export type { IconName, IconSize } from "./oh-icon.js";
@@ -69,6 +73,8 @@ export type { ModalSize } from "./oh-modal.js";
69
73
  export { OhNavbar } from "./oh-navbar.js";
70
74
  export { OhProgress } from "./oh-progress.js";
71
75
  export type { ProgressVariant, ProgressSize } from "./oh-progress.js";
76
+ export { OhRadio } from "./oh-radio.js";
77
+ export type { RadioState } from "./oh-radio.js";
72
78
  export { OhRadioGroup } from "./oh-radio-group.js";
73
79
  export type { RadioOption } from "./oh-radio-group.js";
74
80
  export { OhSelect } from "./oh-select.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":"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"}
package/dist/index.js CHANGED
@@ -29,6 +29,7 @@ import "./oh-link.js";
29
29
  import "./oh-modal.js";
30
30
  import "./oh-navbar.js";
31
31
  import "./oh-progress.js";
32
+ import "./oh-radio.js";
32
33
  import "./oh-radio-group.js";
33
34
  import "./oh-select.js";
34
35
  import "./oh-skip-link.js";
@@ -52,8 +53,10 @@ export { OhCheckboxGroup } from "./oh-checkbox-group.js";
52
53
  export { OhCluster } from "./oh-cluster.js";
53
54
  export { OhContainer } from "./oh-container.js";
54
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. */
55
57
  export { OhFooter } from "./oh-footer.js";
56
58
  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. */
57
60
  export { OhHero } from "./oh-hero.js";
58
61
  export { OhIcon } from "./oh-icon.js";
59
62
  export { OhInput } from "./oh-input.js";
@@ -61,6 +64,7 @@ export { OhLink } from "./oh-link.js";
61
64
  export { OhModal } from "./oh-modal.js";
62
65
  export { OhNavbar } from "./oh-navbar.js";
63
66
  export { OhProgress } from "./oh-progress.js";
67
+ export { OhRadio } from "./oh-radio.js";
64
68
  export { OhRadioGroup } from "./oh-radio-group.js";
65
69
  export { OhSelect } from "./oh-select.js";
66
70
  export { OhSkipLink } from "./oh-skip-link.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,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,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,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,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,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"}
@@ -68,7 +68,7 @@ let OhAccordion = class OhAccordion extends OhElement {
68
68
  }
69
69
 
70
70
  .accordion--subtle .accordion-item {
71
- border-bottom: 1px solid var(--oh-color-border-subtle);
71
+ border-bottom: var(--oh-stroke-divider) solid var(--oh-color-border-subtle);
72
72
  }
73
73
 
74
74
  .accordion--subtle .accordion-item:last-child {
@@ -107,7 +107,7 @@ let OhAccordion = class OhAccordion extends OhElement {
107
107
  /* Text span with dashed underline — follows link rules */
108
108
  .accordion--subtle .accordion-text {
109
109
  position: relative;
110
- padding-bottom: 2px;
110
+ padding-bottom: var(--oh-decoration-underline-thickness);
111
111
  }
112
112
 
113
113
  .accordion--subtle .accordion-text::after {
@@ -116,13 +116,13 @@ let OhAccordion = class OhAccordion extends OhElement {
116
116
  left: 0;
117
117
  bottom: 0;
118
118
  width: 100%;
119
- height: 2px;
119
+ height: var(--oh-decoration-underline-thickness);
120
120
  background-image: repeating-linear-gradient(
121
121
  to right,
122
122
  var(--oh-color-text-link) 0,
123
- var(--oh-color-text-link) 4px,
124
- transparent 4px,
125
- transparent 8px
123
+ var(--oh-color-text-link) var(--oh-decoration-underline-dash),
124
+ transparent var(--oh-decoration-underline-dash),
125
+ transparent var(--oh-decoration-underline-period)
126
126
  );
127
127
  background-size: 100% 100%;
128
128
  background-repeat: no-repeat;
@@ -137,7 +137,7 @@ let OhAccordion = class OhAccordion extends OhElement {
137
137
  .accordion--subtle .accordion-trigger:focus-visible .accordion-text::after {
138
138
  background-image: none;
139
139
  background-color: var(--oh-color-brand-primary);
140
- height: 2px;
140
+ height: var(--oh-decoration-underline-thickness);
141
141
  transform: scaleX(1);
142
142
  }
143
143
 
@@ -156,12 +156,12 @@ let OhAccordion = class OhAccordion extends OhElement {
156
156
 
157
157
  .accordion--standout .accordion-item {
158
158
  background-color: var(--oh-color-surface-raised);
159
- border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
159
+ border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
160
160
  border-radius: var(--oh-shape-container);
161
161
  overflow: hidden;
162
162
 
163
163
  /* Base shadow and lift animation */
164
- box-shadow: 3px 3px 0 0 rgba(107, 93, 77, 0.15);
164
+ box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-neutral);
165
165
  transition:
166
166
  transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
167
167
  box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful);
@@ -169,8 +169,8 @@ let OhAccordion = class OhAccordion extends OhElement {
169
169
 
170
170
  /* Lift whole accordion only when trigger is hovered */
171
171
  .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
172
- transform: translate(-2px, -2px);
173
- box-shadow: 5px 5px 0 0 rgba(107, 93, 77, 0.2);
172
+ 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);
174
174
  }
175
175
 
176
176
  .accordion--standout .accordion-item[data-expanded="true"] {
@@ -207,7 +207,7 @@ let OhAccordion = class OhAccordion extends OhElement {
207
207
  /* Text span for standout — dashed underline appears on hover */
208
208
  .accordion--standout .accordion-text {
209
209
  position: relative;
210
- padding-bottom: 2px;
210
+ padding-bottom: var(--oh-decoration-underline-thickness);
211
211
  }
212
212
 
213
213
  .accordion--standout .accordion-text::after {
@@ -216,13 +216,13 @@ let OhAccordion = class OhAccordion extends OhElement {
216
216
  left: 0;
217
217
  bottom: 0;
218
218
  width: 100%;
219
- height: 2px;
219
+ height: var(--oh-decoration-underline-thickness);
220
220
  background-image: repeating-linear-gradient(
221
221
  to right,
222
222
  var(--oh-color-text-primary) 0,
223
- var(--oh-color-text-primary) 4px,
224
- transparent 4px,
225
- transparent 8px
223
+ var(--oh-color-text-primary) var(--oh-decoration-underline-dash),
224
+ transparent var(--oh-decoration-underline-dash),
225
+ transparent var(--oh-decoration-underline-period)
226
226
  );
227
227
  background-size: 100% 100%;
228
228
  background-repeat: no-repeat;
@@ -238,7 +238,7 @@ let OhAccordion = class OhAccordion extends OhElement {
238
238
  .accordion--standout .accordion-content {
239
239
  padding: var(--oh-spacing-4);
240
240
  color: var(--oh-color-text-primary);
241
- border-top: 1px solid var(--oh-color-border-subtle);
241
+ border-top: var(--oh-stroke-divider) solid var(--oh-color-border-subtle);
242
242
  }
243
243
 
244
244
  /* ═══════════════════════════════════════════════════════════════
package/dist/oh-alert.js CHANGED
@@ -71,7 +71,7 @@ let OhAlert = class OhAlert extends OhElement {
71
71
  border-radius: var(--oh-shape-container);
72
72
 
73
73
  /* Chunky border like other components */
74
- border: var(--oh-input-base-border-width) solid;
74
+ border: var(--oh-stroke-control) solid;
75
75
  }
76
76
 
77
77
  /* ═══════════════════════════════════════════════════════════════
@@ -109,19 +109,19 @@ let OhAlert = class OhAlert extends OhElement {
109
109
  background-image: repeating-linear-gradient(
110
110
  to right,
111
111
  currentColor 0,
112
- currentColor 4px,
113
- transparent 4px,
114
- transparent 8px
112
+ currentColor var(--oh-decoration-underline-dash),
113
+ transparent var(--oh-decoration-underline-dash),
114
+ transparent var(--oh-decoration-underline-period)
115
115
  );
116
- background-size: 100% 2px;
116
+ background-size: 100% var(--oh-decoration-underline-thickness);
117
117
  background-position: 0 100%;
118
118
  background-repeat: no-repeat;
119
- padding-bottom: 2px;
119
+ padding-bottom: var(--oh-decoration-underline-thickness);
120
120
  transition: background-size var(--oh-motion-slow) ease;
121
121
  }
122
122
 
123
123
  .alert-content ::slotted(a:hover) {
124
- background-size: 0% 2px;
124
+ background-size: 0% var(--oh-decoration-underline-thickness);
125
125
  background-position: 100% 100%;
126
126
  }
127
127
 
@@ -130,7 +130,7 @@ let OhAlert = class OhAlert extends OhElement {
130
130
  outline-offset: 2px;
131
131
  border-radius: 2px;
132
132
  background-image: linear-gradient(currentColor, currentColor);
133
- background-size: 100% 2px;
133
+ background-size: 100% var(--oh-decoration-underline-thickness);
134
134
  }
135
135
 
136
136
  /* ═══════════════════════════════════════════════════════════════
@@ -167,13 +167,13 @@ let OhAlert = class OhAlert extends OhElement {
167
167
 
168
168
  .alert-close:hover {
169
169
  background-color: var(--oh-close-button-background-hover);
170
- transform: translate(-2px, -2px);
171
- box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
170
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
171
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-close-button-shadow-hover);
172
172
  }
173
173
 
174
174
  .alert-close:active {
175
- transform: translate(1px, 1px);
176
- box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15);
175
+ transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
176
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-close-button-shadow-hover);
177
177
  }
178
178
 
179
179
  .alert-close:focus-visible {
@@ -87,7 +87,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
87
87
  display: inline-block;
88
88
  color: var(--oh-color-text-link);
89
89
  text-decoration: none;
90
- padding-bottom: 2px;
90
+ padding-bottom: var(--oh-decoration-underline-thickness);
91
91
  }
92
92
 
93
93
  .breadcrumb-link::after {
@@ -96,13 +96,13 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
96
96
  left: 0;
97
97
  bottom: 0;
98
98
  width: 100%;
99
- height: 2px;
99
+ height: var(--oh-decoration-underline-thickness);
100
100
  background-image: repeating-linear-gradient(
101
101
  to right,
102
102
  var(--oh-color-text-link) 0,
103
- var(--oh-color-text-link) 4px,
104
- transparent 4px,
105
- transparent 8px
103
+ var(--oh-color-text-link) var(--oh-decoration-underline-dash),
104
+ transparent var(--oh-decoration-underline-dash),
105
+ transparent var(--oh-decoration-underline-period)
106
106
  );
107
107
  background-size: 100% 100%;
108
108
  background-repeat: no-repeat;
@@ -125,7 +125,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
125
125
  .breadcrumb-link:focus-visible::after {
126
126
  background-image: none;
127
127
  background-color: var(--oh-color-brand-primary);
128
- height: 2px;
128
+ height: var(--oh-decoration-underline-thickness);
129
129
  transform: scaleX(1);
130
130
  }
131
131
 
@@ -153,7 +153,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
153
153
  gap: var(--oh-spacing-1);
154
154
  color: var(--oh-color-text-link);
155
155
  text-decoration: none;
156
- padding-bottom: 2px;
156
+ padding-bottom: var(--oh-decoration-underline-thickness);
157
157
  }
158
158
 
159
159
  .back-link::after {
@@ -162,13 +162,13 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
162
162
  left: 0;
163
163
  bottom: 0;
164
164
  width: 100%;
165
- height: 2px;
165
+ height: var(--oh-decoration-underline-thickness);
166
166
  background-image: repeating-linear-gradient(
167
167
  to right,
168
168
  var(--oh-color-text-link) 0,
169
- var(--oh-color-text-link) 4px,
170
- transparent 4px,
171
- transparent 8px
169
+ var(--oh-color-text-link) var(--oh-decoration-underline-dash),
170
+ transparent var(--oh-decoration-underline-dash),
171
+ transparent var(--oh-decoration-underline-period)
172
172
  );
173
173
  background-size: 100% 100%;
174
174
  background-repeat: no-repeat;
@@ -191,7 +191,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
191
191
  .back-link:focus-visible::after {
192
192
  background-image: none;
193
193
  background-color: var(--oh-color-brand-primary);
194
- height: 2px;
194
+ height: var(--oh-decoration-underline-thickness);
195
195
  transform: scaleX(1);
196
196
  }
197
197
 
@@ -7,7 +7,7 @@
7
7
  * DESIGN DECISIONS:
8
8
  * ─────────────────
9
9
  * 1. CHUNKY & CONFIDENT
10
- * - Thick border (2px) that feels illustrative
10
+ * - Thick border (stroke.control) that feels illustrative
11
11
  * - Solid fills, no subtle gradients
12
12
  * - Generous padding, substantial presence
13
13
  *
package/dist/oh-button.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * DESIGN DECISIONS:
8
8
  * ─────────────────
9
9
  * 1. CHUNKY & CONFIDENT
10
- * - Thick border (2px) that feels illustrative
10
+ * - Thick border (stroke.control) that feels illustrative
11
11
  * - Solid fills, no subtle gradients
12
12
  * - Generous padding, substantial presence
13
13
  *
@@ -107,21 +107,21 @@ let OhButton = class OhButton extends OhElement {
107
107
  color: var(--oh-button-variant-primary-color);
108
108
 
109
109
  /* Light offset shadow: makes button pop forward */
110
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
110
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
111
111
  }
112
112
 
113
113
  .button--primary:hover {
114
114
  background-color: var(--oh-button-variant-primary-background-hover);
115
115
  border-color: var(--oh-button-variant-primary-background-hover);
116
- transform: translate(-2px, -2px);
117
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-primary-shadow-color);
116
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
117
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-primary-shadow-color);
118
118
  }
119
119
 
120
120
  .button--primary:active {
121
121
  background-color: var(--oh-button-variant-primary-background-active);
122
122
  border-color: var(--oh-button-variant-primary-background-active);
123
- transform: translate(2px, 2px);
124
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-primary-shadow-color);
123
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
124
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-primary-shadow-color);
125
125
  }
126
126
 
127
127
  /* ═══════════════════════════════════════════════════════════════
@@ -134,19 +134,19 @@ let OhButton = class OhButton extends OhElement {
134
134
  border-color: var(--oh-button-variant-secondary-border-color);
135
135
  color: var(--oh-button-variant-secondary-color);
136
136
 
137
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
137
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
138
138
  }
139
139
 
140
140
  .button--secondary:hover {
141
141
  background-color: var(--oh-button-variant-secondary-background-hover);
142
- transform: translate(-2px, -2px);
143
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-secondary-shadow-color);
142
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
143
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-secondary-shadow-color);
144
144
  }
145
145
 
146
146
  .button--secondary:active {
147
147
  background-color: var(--oh-button-variant-secondary-background-active);
148
- transform: translate(2px, 2px);
149
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-secondary-shadow-color);
148
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
149
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-secondary-shadow-color);
150
150
  }
151
151
 
152
152
  /* ═══════════════════════════════════════════════════════════════
@@ -160,21 +160,21 @@ let OhButton = class OhButton extends OhElement {
160
160
  border-color: var(--oh-button-variant-accent-border-color);
161
161
  color: var(--oh-button-variant-accent-color);
162
162
 
163
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
163
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
164
164
  }
165
165
 
166
166
  .button--accent:hover {
167
167
  background-color: var(--oh-button-variant-accent-background-hover);
168
168
  border-color: var(--oh-button-variant-accent-background-hover);
169
- transform: translate(-2px, -2px);
170
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-accent-shadow-color);
169
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
170
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-accent-shadow-color);
171
171
  }
172
172
 
173
173
  .button--accent:active {
174
174
  background-color: var(--oh-button-variant-accent-background-active);
175
175
  border-color: var(--oh-button-variant-accent-background-active);
176
- transform: translate(2px, 2px);
177
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-accent-shadow-color);
176
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
177
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-accent-shadow-color);
178
178
  }
179
179
 
180
180
  /* ═══════════════════════════════════════════════════════════════
@@ -189,15 +189,15 @@ let OhButton = class OhButton extends OhElement {
189
189
  }
190
190
 
191
191
  .button--primary:focus-visible {
192
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
192
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
193
193
  }
194
194
 
195
195
  .button--secondary:focus-visible {
196
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
196
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
197
197
  }
198
198
 
199
199
  .button--accent:focus-visible {
200
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
200
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
201
201
  }
202
202
 
203
203
  /* ═══════════════════════════════════════════════════════════════
@@ -350,16 +350,16 @@ let OhButton = class OhButton extends OhElement {
350
350
  :host([force-state="hover"]) .button--primary {
351
351
  background-color: var(--oh-button-variant-primary-background-hover);
352
352
  border-color: var(--oh-button-variant-primary-background-hover);
353
- transform: translate(-2px, -2px);
354
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-primary-shadow-color);
353
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
354
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-primary-shadow-color);
355
355
  }
356
356
 
357
357
  /* Primary - Forced Active */
358
358
  :host([force-state="active"]) .button--primary {
359
359
  background-color: var(--oh-button-variant-primary-background-active);
360
360
  border-color: var(--oh-button-variant-primary-background-active);
361
- transform: translate(2px, 2px);
362
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-primary-shadow-color);
361
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
362
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-primary-shadow-color);
363
363
  }
364
364
 
365
365
  /* Primary - Forced Focus */
@@ -367,21 +367,21 @@ let OhButton = class OhButton extends OhElement {
367
367
  outline: none;
368
368
  text-decoration: underline;
369
369
  text-underline-offset: var(--oh-spacing-1);
370
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-primary-shadow-color);
370
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
371
371
  }
372
372
 
373
373
  /* Secondary - Forced Hover */
374
374
  :host([force-state="hover"]) .button--secondary {
375
375
  background-color: var(--oh-button-variant-secondary-background-hover);
376
- transform: translate(-2px, -2px);
377
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-secondary-shadow-color);
376
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
377
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-secondary-shadow-color);
378
378
  }
379
379
 
380
380
  /* Secondary - Forced Active */
381
381
  :host([force-state="active"]) .button--secondary {
382
382
  background-color: var(--oh-button-variant-secondary-background-active);
383
- transform: translate(2px, 2px);
384
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-secondary-shadow-color);
383
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
384
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-secondary-shadow-color);
385
385
  }
386
386
 
387
387
  /* Secondary - Forced Focus */
@@ -389,23 +389,23 @@ let OhButton = class OhButton extends OhElement {
389
389
  outline: none;
390
390
  text-decoration: underline;
391
391
  text-underline-offset: var(--oh-spacing-1);
392
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-secondary-shadow-color);
392
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
393
393
  }
394
394
 
395
395
  /* Accent - Forced Hover */
396
396
  :host([force-state="hover"]) .button--accent {
397
397
  background-color: var(--oh-button-variant-accent-background-hover);
398
398
  border-color: var(--oh-button-variant-accent-background-hover);
399
- transform: translate(-2px, -2px);
400
- box-shadow: 6px 6px 0 0 var(--oh-button-variant-accent-shadow-color);
399
+ transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
400
+ box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-button-variant-accent-shadow-color);
401
401
  }
402
402
 
403
403
  /* Accent - Forced Active */
404
404
  :host([force-state="active"]) .button--accent {
405
405
  background-color: var(--oh-button-variant-accent-background-active);
406
406
  border-color: var(--oh-button-variant-accent-background-active);
407
- transform: translate(2px, 2px);
408
- box-shadow: 1px 1px 0 0 var(--oh-button-variant-accent-shadow-color);
407
+ transform: translate(var(--oh-lift-press-md), var(--oh-lift-press-md));
408
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-button-variant-accent-shadow-color);
409
409
  }
410
410
 
411
411
  /* Accent - Forced Focus */
@@ -413,7 +413,7 @@ let OhButton = class OhButton extends OhElement {
413
413
  outline: none;
414
414
  text-decoration: underline;
415
415
  text-underline-offset: var(--oh-spacing-1);
416
- box-shadow: 4px 4px 0 0 var(--oh-button-variant-accent-shadow-color);
416
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
417
417
  }
418
418
  `,
419
419
  ]; }
@@ -1 +1 @@
1
- {"version":3,"file":"oh-card.d.ts","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAiPpB;IAGF,OAAO,EAAE,WAAW,CAAY;IAGhC,WAAW,UAAS;IAGpB,OAAO,EAAE,WAAW,CAAQ;IAE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IAOtB,MAAM;CA+BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
1
+ {"version":3,"file":"oh-card.d.ts","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAqNpB;IAGF,OAAO,EAAE,WAAW,CAAY;IAGhC,WAAW,UAAS;IAGpB,OAAO,EAAE,WAAW,CAAQ;IAE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IAOtB,MAAM;CA+BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}