@orange-halo/components 2.1.0 → 2.2.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 (88) hide show
  1. package/custom-elements.json +369 -0
  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 +3 -1
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +2 -0
  8. package/dist/index.js.map +1 -1
  9. package/dist/oh-accordion.d.ts.map +1 -1
  10. package/dist/oh-accordion.js +24 -16
  11. package/dist/oh-accordion.js.map +1 -1
  12. package/dist/oh-alert.d.ts.map +1 -1
  13. package/dist/oh-alert.js +64 -22
  14. package/dist/oh-alert.js.map +1 -1
  15. package/dist/oh-badge.d.ts.map +1 -1
  16. package/dist/oh-badge.js +3 -3
  17. package/dist/oh-badge.js.map +1 -1
  18. package/dist/oh-breadcrumb.d.ts.map +1 -1
  19. package/dist/oh-breadcrumb.js +27 -8
  20. package/dist/oh-breadcrumb.js.map +1 -1
  21. package/dist/oh-button.d.ts.map +1 -1
  22. package/dist/oh-button.figma.js +1 -3
  23. package/dist/oh-button.figma.js.map +1 -1
  24. package/dist/oh-button.js +70 -38
  25. package/dist/oh-button.js.map +1 -1
  26. package/dist/oh-card.d.ts.map +1 -1
  27. package/dist/oh-card.js +42 -23
  28. package/dist/oh-card.js.map +1 -1
  29. package/dist/oh-checkbox-group.d.ts.map +1 -1
  30. package/dist/oh-checkbox-group.js +41 -18
  31. package/dist/oh-checkbox-group.js.map +1 -1
  32. package/dist/oh-checkbox.d.ts.map +1 -1
  33. package/dist/oh-checkbox.js +47 -20
  34. package/dist/oh-checkbox.js.map +1 -1
  35. package/dist/oh-drawer.d.ts.map +1 -1
  36. package/dist/oh-drawer.js +21 -10
  37. package/dist/oh-drawer.js.map +1 -1
  38. package/dist/oh-grid.d.ts.map +1 -1
  39. package/dist/oh-grid.js +1 -2
  40. package/dist/oh-grid.js.map +1 -1
  41. package/dist/oh-hero.d.ts.map +1 -1
  42. package/dist/oh-hero.js +3 -1
  43. package/dist/oh-hero.js.map +1 -1
  44. package/dist/oh-icon.d.ts.map +1 -1
  45. package/dist/oh-icon.js +6 -4
  46. package/dist/oh-icon.js.map +1 -1
  47. package/dist/oh-input.d.ts +9 -4
  48. package/dist/oh-input.d.ts.map +1 -1
  49. package/dist/oh-input.js +35 -18
  50. package/dist/oh-input.js.map +1 -1
  51. package/dist/oh-link.d.ts.map +1 -1
  52. package/dist/oh-link.js +36 -9
  53. package/dist/oh-link.js.map +1 -1
  54. package/dist/oh-modal.d.ts +6 -0
  55. package/dist/oh-modal.d.ts.map +1 -1
  56. package/dist/oh-modal.js +54 -24
  57. package/dist/oh-modal.js.map +1 -1
  58. package/dist/oh-navbar.d.ts.map +1 -1
  59. package/dist/oh-navbar.js +2 -1
  60. package/dist/oh-navbar.js.map +1 -1
  61. package/dist/oh-progress.d.ts.map +1 -1
  62. package/dist/oh-progress.js +4 -2
  63. package/dist/oh-progress.js.map +1 -1
  64. package/dist/oh-radio-group.d.ts.map +1 -1
  65. package/dist/oh-radio-group.js +53 -22
  66. package/dist/oh-radio-group.js.map +1 -1
  67. package/dist/oh-radio.d.ts.map +1 -1
  68. package/dist/oh-radio.js +49 -21
  69. package/dist/oh-radio.js.map +1 -1
  70. package/dist/oh-select.d.ts +1 -0
  71. package/dist/oh-select.d.ts.map +1 -1
  72. package/dist/oh-select.js +77 -42
  73. package/dist/oh-select.js.map +1 -1
  74. package/dist/oh-skip-link.d.ts.map +1 -1
  75. package/dist/oh-skip-link.js +7 -9
  76. package/dist/oh-skip-link.js.map +1 -1
  77. package/dist/oh-tabs.d.ts.map +1 -1
  78. package/dist/oh-tabs.js +25 -16
  79. package/dist/oh-tabs.js.map +1 -1
  80. package/dist/oh-textarea.d.ts +98 -0
  81. package/dist/oh-textarea.d.ts.map +1 -0
  82. package/dist/oh-textarea.js +370 -0
  83. package/dist/oh-textarea.js.map +1 -0
  84. package/dist/oh-toggle.d.ts.map +1 -1
  85. package/dist/oh-toggle.js +26 -11
  86. package/dist/oh-toggle.js.map +1 -1
  87. package/dist/styles/typography.js +1 -1
  88. package/package.json +7 -3
package/dist/oh-alert.js CHANGED
@@ -65,11 +65,11 @@ let OhAlert = class OhAlert extends OhElement {
65
65
  display: flex;
66
66
  align-items: flex-start;
67
67
  gap: var(--oh-spacing-3);
68
-
68
+
69
69
  /* Shape */
70
70
  padding: var(--oh-spacing-4);
71
71
  border-radius: var(--oh-shape-container);
72
-
72
+
73
73
  /* Chunky border like other components */
74
74
  border: var(--oh-stroke-control) solid;
75
75
  }
@@ -92,7 +92,7 @@ let OhAlert = class OhAlert extends OhElement {
92
92
  .alert-content {
93
93
  flex: 1;
94
94
  min-width: 0;
95
-
95
+
96
96
  /* Typography */
97
97
  font-family: var(--oh-typography-body-font-family);
98
98
  font-size: var(--oh-typography-body-base-font-size);
@@ -142,24 +142,24 @@ let OhAlert = class OhAlert extends OhElement {
142
142
  display: flex;
143
143
  align-items: center;
144
144
  gap: var(--oh-spacing-1);
145
-
145
+
146
146
  padding: var(--oh-spacing-1) var(--oh-spacing-2);
147
147
  margin: -0.25rem -0.5rem -0.25rem 0;
148
-
148
+
149
149
  font-family: var(--oh-typography-body-font-family);
150
150
  font-size: var(--oh-typography-body-base-font-size);
151
151
  font-weight: var(--oh-typography-label-base-font-weight);
152
-
152
+
153
153
  background: transparent;
154
154
  border: none;
155
155
  border-radius: var(--oh-shape-compact);
156
156
  cursor: pointer;
157
-
157
+
158
158
  /* Use primary text color for contrast */
159
159
  color: var(--oh-color-text-primary);
160
-
160
+
161
161
  /* Chunky animation setup */
162
- transition:
162
+ transition:
163
163
  transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
164
164
  box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
165
165
  background-color var(--oh-motion-quick) ease;
@@ -168,12 +168,14 @@ let OhAlert = class OhAlert extends OhElement {
168
168
  .alert-close:hover {
169
169
  background-color: var(--oh-close-button-background-hover);
170
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);
171
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
172
+ 0 0 var(--oh-close-button-shadow-hover);
172
173
  }
173
174
 
174
175
  .alert-close:active {
175
176
  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
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
178
+ 0 0 var(--oh-close-button-shadow-hover);
177
179
  }
178
180
 
179
181
  .alert-close:focus-visible {
@@ -270,27 +272,63 @@ let OhAlert = class OhAlert extends OhElement {
270
272
  switch (this.variant) {
271
273
  case "success":
272
274
  return html `
273
- <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
274
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
275
+ <svg
276
+ class="alert-icon"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ >
281
+ <path
282
+ fill-rule="evenodd"
283
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
284
+ clip-rule="evenodd"
285
+ />
275
286
  </svg>
276
287
  `;
277
288
  case "error":
278
289
  return html `
279
- <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
280
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
290
+ <svg
291
+ class="alert-icon"
292
+ viewBox="0 0 20 20"
293
+ fill="currentColor"
294
+ aria-hidden="true"
295
+ >
296
+ <path
297
+ fill-rule="evenodd"
298
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
299
+ clip-rule="evenodd"
300
+ />
281
301
  </svg>
282
302
  `;
283
303
  case "warning":
284
304
  return html `
285
- <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
286
- <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
305
+ <svg
306
+ class="alert-icon"
307
+ viewBox="0 0 20 20"
308
+ fill="currentColor"
309
+ aria-hidden="true"
310
+ >
311
+ <path
312
+ fill-rule="evenodd"
313
+ d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
314
+ clip-rule="evenodd"
315
+ />
287
316
  </svg>
288
317
  `;
289
318
  case "info":
290
319
  default:
291
320
  return html `
292
- <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
293
- <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
321
+ <svg
322
+ class="alert-icon"
323
+ viewBox="0 0 20 20"
324
+ fill="currentColor"
325
+ aria-hidden="true"
326
+ >
327
+ <path
328
+ fill-rule="evenodd"
329
+ d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
330
+ clip-rule="evenodd"
331
+ />
294
332
  </svg>
295
333
  `;
296
334
  }
@@ -303,11 +341,11 @@ let OhAlert = class OhAlert extends OhElement {
303
341
  return html `
304
342
  <div class=${classes} role=${this.live ? "alert" : nothing} part="alert">
305
343
  ${this._getIcon()}
306
-
344
+
307
345
  <div class="alert-content" part="content">
308
346
  <slot></slot>
309
347
  </div>
310
-
348
+
311
349
  ${this.dismissible
312
350
  ? html `
313
351
  <button
@@ -318,7 +356,11 @@ let OhAlert = class OhAlert extends OhElement {
318
356
  >
319
357
  <span>Close</span>
320
358
  <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
321
- <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
359
+ <path
360
+ fill-rule="evenodd"
361
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
362
+ clip-rule="evenodd"
363
+ />
322
364
  </svg>
323
365
  </button>
324
366
  `
package/dist/oh-alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-alert.js","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAK3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA4NL,YAAO,GAAiB,MAAM,CAAC;QAG/B,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;IAqEf,CAAC;aA1SiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqNF;KACF,AAxNqB,CAwNpB;IAeM,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;;;;SAIV,CAAC;QACN,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACjC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,OAAO,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;UACtD,IAAI,CAAC,QAAQ,EAAE;;;;;;UAMf,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;;aAO/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA9ED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC9B;AAtOF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA2SnB"}
1
+ {"version":3,"file":"oh-alert.js","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAK3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA8NL,YAAO,GAAiB,MAAM,CAAC;QAG/B,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;IA6Gf,CAAC;aApViB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuNF;KACF,AA1NqB,CA0NpB;IAeM,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;YACJ,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;;;;;;;;;;;;;SAaV,CAAC;QACN,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACjC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,OAAO,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;UACtD,IAAI,CAAC,QAAQ,EAAE;;;;;;UAMf,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;;;;;;aAW/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAtHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC9B;AAxOF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqVnB"}
package/dist/oh-badge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-badge.d.ts","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgHpB;IAGF,OAAO,EAAE,YAAY,CAAW;IAGhC,IAAI,EAAE,SAAS,CAAY;IAE3B,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"oh-badge.d.ts","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,QAAQ,CAAC;AACb,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgHpB;IAGF,OAAO,EAAE,YAAY,CAAW;IAGhC,IAAI,EAAE,SAAS,CAAY;IAE3B,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
package/dist/oh-badge.js CHANGED
@@ -52,18 +52,18 @@ let OhBadge = class OhBadge extends OhElement {
52
52
  display: inline-flex;
53
53
  align-items: center;
54
54
  gap: var(--oh-spacing-1);
55
-
55
+
56
56
  /* Typography */
57
57
  font-family: var(--oh-typography-body-font-family);
58
58
  font-size: var(--oh-typography-body-base-font-size);
59
59
  font-weight: var(--oh-typography-label-base-font-weight);
60
60
  line-height: var(--oh-typography-heading-h1-line-height);
61
61
  letter-spacing: var(--oh-typography-control-letter-spacing);
62
-
62
+
63
63
  /* Shape */
64
64
  padding: var(--oh-spacing-1) var(--oh-spacing-2-5);
65
65
  border-radius: var(--oh-shape-compact);
66
-
66
+
67
67
  /* No interaction */
68
68
  pointer-events: none;
69
69
  user-select: none;
package/dist/oh-badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-badge.js","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;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;AAM3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAoHL,YAAO,GAAiB,OAAO,CAAC;QAGhC,SAAI,GAAc,QAAQ,CAAC;IAgB7B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;KACF,AAhHqB,CAgHpB;IAQF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;;KAItB,CAAC;IACJ,CAAC;;AAlBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACf;AAvHhB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuInB"}
1
+ {"version":3,"file":"oh-badge.js","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;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;AAY3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAoHL,YAAO,GAAiB,OAAO,CAAC;QAGhC,SAAI,GAAc,QAAQ,CAAC;IAgB7B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;KACF,AAhHqB,CAgHpB;IAQF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;;KAItB,CAAC;IACJ,CAAC;;AAlBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACf;AAvHhB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuInB"}
package/dist/oh-breadcrumb.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-breadcrumb.d.ts","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BA8LpB;IAGF,KAAK,EAAE,cAAc,EAAE,CAAM;IAE7B,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
1
+ {"version":3,"file":"oh-breadcrumb.d.ts","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BAgMpB;IAGF,KAAK,EAAE,cAAc,EAAE,CAAM;IAE7B,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
package/dist/oh-breadcrumb.js CHANGED
@@ -91,7 +91,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
91
91
  }
92
92
 
93
93
  .breadcrumb-link::after {
94
- content: '';
94
+ content: "";
95
95
  position: absolute;
96
96
  left: 0;
97
97
  bottom: 0;
@@ -107,7 +107,8 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
107
107
  background-size: 100% 100%;
108
108
  background-repeat: no-repeat;
109
109
  transform-origin: right;
110
- transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
110
+ transition: transform var(--oh-motion-relaxed)
111
+ var(--oh-motion-ease-gentle);
111
112
  }
112
113
 
113
114
  .breadcrumb-link:hover::after {
@@ -157,7 +158,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
157
158
  }
158
159
 
159
160
  .back-link::after {
160
- content: '';
161
+ content: "";
161
162
  position: absolute;
162
163
  left: 0;
163
164
  bottom: 0;
@@ -173,7 +174,8 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
173
174
  background-size: 100% 100%;
174
175
  background-repeat: no-repeat;
175
176
  transform-origin: right;
176
- transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
177
+ transition: transform var(--oh-motion-relaxed)
178
+ var(--oh-motion-ease-gentle);
177
179
  }
178
180
 
179
181
  .back-link:hover::after {
@@ -240,10 +242,16 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
240
242
  return html `
241
243
  <li class="breadcrumb-item">
242
244
  ${isLast
243
- ? html `<span class="breadcrumb-current" aria-current="page">${item.label}</span>`
244
- : html `<a class="breadcrumb-link" href=${item.href || "#"}>${item.label}</a>`}
245
+ ? html `<span class="breadcrumb-current" aria-current="page"
246
+ >${item.label}</span
247
+ >`
248
+ : html `<a class="breadcrumb-link" href=${item.href || "#"}
249
+ >${item.label}</a
250
+ >`}
245
251
  ${showSeparator
246
- ? html `<span class="breadcrumb-separator" aria-hidden="true">/</span>`
252
+ ? html `<span class="breadcrumb-separator" aria-hidden="true"
253
+ >/</span
254
+ >`
247
255
  : nothing}
248
256
  </li>
249
257
  `;
@@ -255,7 +263,18 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
255
263
  ? html `
256
264
  <div class="breadcrumb-back">
257
265
  <a class="back-link" href=${parentItem.href || "#"}>
258
- <svg class="back-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
266
+ <svg
267
+ class="back-arrow"
268
+ width="16"
269
+ height="16"
270
+ viewBox="0 0 16 16"
271
+ fill="none"
272
+ stroke="currentColor"
273
+ stroke-width="2"
274
+ stroke-linecap="round"
275
+ stroke-linejoin="round"
276
+ aria-hidden="true"
277
+ >
259
278
  <path d="M10 12L6 8L10 4" />
260
279
  </svg>
261
280
  <span>Back to ${parentItem.label}</span>
package/dist/oh-breadcrumb.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-breadcrumb.js","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQ3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,SAAS;IAApC;;QAkML,UAAK,GAAqB,EAAE,CAAC;IA8C/B,CAAC;aA/OiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2LF;KACF,AA9LqB,CA8LpB;IAKF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpF,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEpD,OAAO,IAAI,CAAA;;kBAEL,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA,wDAAwD,IAAI,CAAC,KAAK,SAAS;gBACjF,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,MAAM;kBAC7E,aAAa;gBACb,CAAC,CAAC,IAAI,CAAA,gEAAgE;gBACtE,CAAC,CAAC,OAAO;;aAEd,CAAC;QACJ,CAAC,CAAC;;;;UAIF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;4CAE4B,UAAU,CAAC,IAAI,IAAI,GAAG;;;;kCAIhC,UAAU,CAAC,KAAK;;;aAGrC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA7CD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACG;AAlMlB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgPxB"}
1
+ {"version":3,"file":"oh-breadcrumb.js","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQ3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,SAAS;IAApC;;QAoML,UAAK,GAAqB,EAAE,CAAC;IAgE/B,CAAC;aAnQiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6LF;KACF,AAhMqB,CAgMpB;IAKF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,UAAU,GACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnE,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEpD,OAAO,IAAI,CAAA;;kBAEL,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA;yBACC,IAAI,CAAC,KAAK;sBACb;gBACJ,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,IAAI,IAAI,GAAG;yBAClD,IAAI,CAAC,KAAK;sBACb;kBACJ,aAAa;gBACb,CAAC,CAAC,IAAI,CAAA;;sBAEF;gBACJ,CAAC,CAAC,OAAO;;aAEd,CAAC;QACJ,CAAC,CAAC;;;;UAIF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;4CAE4B,UAAU,CAAC,IAAI,IAAI,GAAG;;;;;;;;;;;;;;;kCAehC,UAAU,CAAC,KAAK;;;aAGrC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACG;AApMlB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoQxB"}
package/dist/oh-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA8WpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA8YpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/oh-button.figma.js CHANGED
@@ -12,9 +12,7 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
12
12
  label: figma.string("Label"),
13
13
  },
14
14
  example: (props) => html `
15
- <oh-button variant="${props.variant}">
16
- ${props.label}
17
- </oh-button>
15
+ <oh-button variant="${props.variant}"> ${props.label} </oh-button>
18
16
  `,
19
17
  });
20
18
  //# sourceMappingURL=oh-button.figma.js.map
package/dist/oh-button.figma.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oh-button.figma.js","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;GAEG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;4BACA,KAAK,CAAC,OAAO;UAC/B,KAAK,CAAC,KAAK;;KAEhB;CACF,CACF,CAAC"}
1
+ {"version":3,"file":"oh-button.figma.js","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;GAEG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;4BACA,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,KAAK;KACrD;CACF,CACF,CAAC"}
package/dist/oh-button.js CHANGED
@@ -68,27 +68,27 @@ let OhButton = class OhButton extends OhElement {
68
68
  font-weight: var(--oh-button-base-font-weight);
69
69
  letter-spacing: var(--oh-button-base-letter-spacing);
70
70
  text-decoration: none;
71
-
71
+
72
72
  /* Layout */
73
73
  display: inline-flex;
74
74
  align-items: center;
75
75
  justify-content: center;
76
76
  gap: var(--oh-spacing-2);
77
-
77
+
78
78
  /* Shape: chunky rounded corners, not pills */
79
79
  border-radius: var(--oh-button-base-border-radius);
80
-
80
+
81
81
  /* Thick illustrative border */
82
82
  border: var(--oh-button-base-border-width) solid;
83
-
83
+
84
84
  /* Remove default button styles */
85
85
  cursor: pointer;
86
86
  -webkit-appearance: none;
87
87
  -moz-appearance: none;
88
88
  appearance: none;
89
-
89
+
90
90
  /* Smooth but snappy transitions */
91
- transition:
91
+ transition:
92
92
  transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
93
93
  box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
94
94
  background-color var(--oh-motion-quick) ease;
@@ -105,23 +105,27 @@ let OhButton = class OhButton extends OhElement {
105
105
  background-color: var(--oh-button-variant-primary-background);
106
106
  border-color: var(--oh-button-variant-primary-border-color);
107
107
  color: var(--oh-button-variant-primary-color);
108
-
108
+
109
109
  /* Light offset shadow: makes button pop forward */
110
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
110
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
111
+ 0 0 var(--oh-button-variant-primary-shadow-color);
111
112
  }
112
113
 
113
114
  .button--primary:hover {
114
115
  background-color: var(--oh-button-variant-primary-background-hover);
115
116
  border-color: var(--oh-button-variant-primary-background-hover);
116
117
  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
+ box-shadow: var(--oh-elevation-offset-2xl)
119
+ var(--oh-elevation-offset-2xl) 0 0
120
+ var(--oh-button-variant-primary-shadow-color);
118
121
  }
119
122
 
120
123
  .button--primary:active {
121
124
  background-color: var(--oh-button-variant-primary-background-active);
122
125
  border-color: var(--oh-button-variant-primary-background-active);
123
126
  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);
127
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
128
+ 0 0 var(--oh-button-variant-primary-shadow-color);
125
129
  }
126
130
 
127
131
  /* ═══════════════════════════════════════════════════════════════
@@ -133,20 +137,24 @@ let OhButton = class OhButton extends OhElement {
133
137
  background-color: var(--oh-button-variant-secondary-background);
134
138
  border-color: var(--oh-button-variant-secondary-border-color);
135
139
  color: var(--oh-button-variant-secondary-color);
136
-
137
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
140
+
141
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
142
+ 0 0 var(--oh-button-variant-secondary-shadow-color);
138
143
  }
139
144
 
140
145
  .button--secondary:hover {
141
146
  background-color: var(--oh-button-variant-secondary-background-hover);
142
147
  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);
148
+ box-shadow: var(--oh-elevation-offset-2xl)
149
+ var(--oh-elevation-offset-2xl) 0 0
150
+ var(--oh-button-variant-secondary-shadow-color);
144
151
  }
145
152
 
146
153
  .button--secondary:active {
147
154
  background-color: var(--oh-button-variant-secondary-background-active);
148
155
  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);
156
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
157
+ 0 0 var(--oh-button-variant-secondary-shadow-color);
150
158
  }
151
159
 
152
160
  /* ═══════════════════════════════════════════════════════════════
@@ -159,22 +167,26 @@ let OhButton = class OhButton extends OhElement {
159
167
  background-color: var(--oh-button-variant-accent-background);
160
168
  border-color: var(--oh-button-variant-accent-border-color);
161
169
  color: var(--oh-button-variant-accent-color);
162
-
163
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
170
+
171
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
172
+ 0 0 var(--oh-button-variant-accent-shadow-color);
164
173
  }
165
174
 
166
175
  .button--accent:hover {
167
176
  background-color: var(--oh-button-variant-accent-background-hover);
168
177
  border-color: var(--oh-button-variant-accent-background-hover);
169
178
  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);
179
+ box-shadow: var(--oh-elevation-offset-2xl)
180
+ var(--oh-elevation-offset-2xl) 0 0
181
+ var(--oh-button-variant-accent-shadow-color);
171
182
  }
172
183
 
173
184
  .button--accent:active {
174
185
  background-color: var(--oh-button-variant-accent-background-active);
175
186
  border-color: var(--oh-button-variant-accent-background-active);
176
187
  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);
188
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
189
+ 0 0 var(--oh-button-variant-accent-shadow-color);
178
190
  }
179
191
 
180
192
  /* ═══════════════════════════════════════════════════════════════
@@ -189,15 +201,18 @@ let OhButton = class OhButton extends OhElement {
189
201
  }
190
202
 
191
203
  .button--primary:focus-visible {
192
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
204
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
205
+ 0 0 var(--oh-button-variant-primary-shadow-color);
193
206
  }
194
207
 
195
208
  .button--secondary:focus-visible {
196
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
209
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
210
+ 0 0 var(--oh-button-variant-secondary-shadow-color);
197
211
  }
198
212
 
199
213
  .button--accent:focus-visible {
200
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
214
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
215
+ 0 0 var(--oh-button-variant-accent-shadow-color);
201
216
  }
202
217
 
203
218
  /* ═══════════════════════════════════════════════════════════════
@@ -208,21 +223,24 @@ let OhButton = class OhButton extends OhElement {
208
223
 
209
224
  .button--sm {
210
225
  font-size: var(--oh-button-size-sm-font-size);
211
- padding: var(--oh-button-size-sm-padding-y) var(--oh-button-size-sm-padding-x);
226
+ padding: var(--oh-button-size-sm-padding-y)
227
+ var(--oh-button-size-sm-padding-x);
212
228
  min-height: var(--oh-button-size-sm-min-height);
213
229
  gap: var(--oh-button-size-sm-gap);
214
230
  }
215
231
 
216
232
  .button--md {
217
233
  font-size: var(--oh-button-size-md-font-size);
218
- padding: var(--oh-button-size-md-padding-y) var(--oh-button-size-md-padding-x);
234
+ padding: var(--oh-button-size-md-padding-y)
235
+ var(--oh-button-size-md-padding-x);
219
236
  min-height: var(--oh-button-size-md-min-height);
220
237
  gap: var(--oh-button-size-md-gap);
221
238
  }
222
239
 
223
240
  .button--lg {
224
241
  font-size: var(--oh-button-size-lg-font-size);
225
- padding: var(--oh-button-size-lg-padding-y) var(--oh-button-size-lg-padding-x);
242
+ padding: var(--oh-button-size-lg-padding-y)
243
+ var(--oh-button-size-lg-padding-x);
226
244
  min-height: var(--oh-button-size-lg-min-height);
227
245
  gap: var(--oh-button-size-lg-gap);
228
246
  }
@@ -268,7 +286,7 @@ let OhButton = class OhButton extends OhElement {
268
286
 
269
287
  :host([icon-only]) .button::after,
270
288
  .button--loading::after {
271
- content: '';
289
+ content: "";
272
290
  position: absolute;
273
291
  bottom: 4px;
274
292
  left: 50%;
@@ -308,7 +326,9 @@ let OhButton = class OhButton extends OhElement {
308
326
  }
309
327
 
310
328
  @keyframes spin {
311
- to { transform: rotate(360deg); }
329
+ to {
330
+ transform: rotate(360deg);
331
+ }
312
332
  }
313
333
 
314
334
  .visually-hidden {
@@ -331,7 +351,7 @@ let OhButton = class OhButton extends OhElement {
331
351
  .button {
332
352
  transition-duration: 0.01ms !important;
333
353
  }
334
-
354
+
335
355
  .button:hover,
336
356
  .button:active {
337
357
  transform: none !important;
@@ -351,7 +371,9 @@ let OhButton = class OhButton extends OhElement {
351
371
  background-color: var(--oh-button-variant-primary-background-hover);
352
372
  border-color: var(--oh-button-variant-primary-background-hover);
353
373
  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);
374
+ box-shadow: var(--oh-elevation-offset-2xl)
375
+ var(--oh-elevation-offset-2xl) 0 0
376
+ var(--oh-button-variant-primary-shadow-color);
355
377
  }
356
378
 
357
379
  /* Primary - Forced Active */
@@ -359,7 +381,8 @@ let OhButton = class OhButton extends OhElement {
359
381
  background-color: var(--oh-button-variant-primary-background-active);
360
382
  border-color: var(--oh-button-variant-primary-background-active);
361
383
  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);
384
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
385
+ 0 0 var(--oh-button-variant-primary-shadow-color);
363
386
  }
364
387
 
365
388
  /* Primary - Forced Focus */
@@ -367,21 +390,25 @@ let OhButton = class OhButton extends OhElement {
367
390
  outline: none;
368
391
  text-decoration: underline;
369
392
  text-underline-offset: var(--oh-spacing-1);
370
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-primary-shadow-color);
393
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
394
+ 0 0 var(--oh-button-variant-primary-shadow-color);
371
395
  }
372
396
 
373
397
  /* Secondary - Forced Hover */
374
398
  :host([force-state="hover"]) .button--secondary {
375
399
  background-color: var(--oh-button-variant-secondary-background-hover);
376
400
  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);
401
+ box-shadow: var(--oh-elevation-offset-2xl)
402
+ var(--oh-elevation-offset-2xl) 0 0
403
+ var(--oh-button-variant-secondary-shadow-color);
378
404
  }
379
405
 
380
406
  /* Secondary - Forced Active */
381
407
  :host([force-state="active"]) .button--secondary {
382
408
  background-color: var(--oh-button-variant-secondary-background-active);
383
409
  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);
410
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
411
+ 0 0 var(--oh-button-variant-secondary-shadow-color);
385
412
  }
386
413
 
387
414
  /* Secondary - Forced Focus */
@@ -389,7 +416,8 @@ let OhButton = class OhButton extends OhElement {
389
416
  outline: none;
390
417
  text-decoration: underline;
391
418
  text-underline-offset: var(--oh-spacing-1);
392
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-secondary-shadow-color);
419
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
420
+ 0 0 var(--oh-button-variant-secondary-shadow-color);
393
421
  }
394
422
 
395
423
  /* Accent - Forced Hover */
@@ -397,7 +425,9 @@ let OhButton = class OhButton extends OhElement {
397
425
  background-color: var(--oh-button-variant-accent-background-hover);
398
426
  border-color: var(--oh-button-variant-accent-background-hover);
399
427
  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);
428
+ box-shadow: var(--oh-elevation-offset-2xl)
429
+ var(--oh-elevation-offset-2xl) 0 0
430
+ var(--oh-button-variant-accent-shadow-color);
401
431
  }
402
432
 
403
433
  /* Accent - Forced Active */
@@ -405,7 +435,8 @@ let OhButton = class OhButton extends OhElement {
405
435
  background-color: var(--oh-button-variant-accent-background-active);
406
436
  border-color: var(--oh-button-variant-accent-background-active);
407
437
  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);
438
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
439
+ 0 0 var(--oh-button-variant-accent-shadow-color);
409
440
  }
410
441
 
411
442
  /* Accent - Forced Focus */
@@ -413,7 +444,8 @@ let OhButton = class OhButton extends OhElement {
413
444
  outline: none;
414
445
  text-decoration: underline;
415
446
  text-underline-offset: var(--oh-spacing-1);
416
- box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-button-variant-accent-shadow-color);
447
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
448
+ 0 0 var(--oh-button-variant-accent-shadow-color);
417
449
  }
418
450
  `,
419
451
  ]; }
@@ -427,12 +459,12 @@ let OhButton = class OhButton extends OhElement {
427
459
  }
428
460
  /** Focus the internal button/anchor element */
429
461
  focus(options) {
430
- const inner = this.shadowRoot?.querySelector('.button');
462
+ const inner = this.shadowRoot?.querySelector(".button");
431
463
  inner?.focus(options);
432
464
  }
433
465
  /** Blur the internal button/anchor element */
434
466
  blur() {
435
- const inner = this.shadowRoot?.querySelector('.button');
467
+ const inner = this.shadowRoot?.querySelector(".button");
436
468
  inner?.blur();
437
469
  }
438
470
  render() {