@orange-halo/components 1.0.0 → 2.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.
- package/dist/base.js +3 -3
- package/dist/oh-accordion.js +17 -17
- package/dist/oh-alert.js +15 -15
- package/dist/oh-badge.js +11 -11
- package/dist/oh-breadcrumb.js +8 -8
- package/dist/oh-button.d.ts +6 -0
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.js +105 -76
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.js +28 -28
- package/dist/oh-checkbox-group.d.ts +8 -0
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.js +27 -13
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts +9 -0
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +25 -9
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-container.d.ts +5 -5
- package/dist/oh-container.js +15 -15
- package/dist/oh-drawer.d.ts +7 -2
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +52 -25
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-footer.js +4 -4
- package/dist/oh-hero.d.ts.map +1 -1
- package/dist/oh-hero.js +50 -51
- package/dist/oh-hero.js.map +1 -1
- package/dist/oh-icon.js +6 -6
- package/dist/oh-input.d.ts +9 -1
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.js +45 -33
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts +1 -1
- package/dist/oh-link.js +15 -15
- package/dist/oh-modal.d.ts +8 -2
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +68 -65
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +3 -4
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +20 -34
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts +8 -0
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.js +27 -13
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts +9 -0
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +26 -10
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +8 -0
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +34 -20
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +13 -12
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-tabs.js +6 -6
- package/dist/oh-toggle.d.ts +5 -2
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +7 -9
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +46 -46
- package/package.json +7 -3
package/dist/oh-modal.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - Warm backdrop, not pure black
|
|
12
12
|
*
|
|
13
13
|
* 2. ACCESSIBLE
|
|
14
|
-
* - Focus trap when open
|
|
14
|
+
* - Focus trap when open (focus guards at each end of the dialog)
|
|
15
15
|
* - Escape key closes (when dismissible)
|
|
16
16
|
* - Focus returns to trigger on close
|
|
17
17
|
* - role="dialog" + aria-modal="true"
|
|
@@ -32,6 +32,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
32
32
|
import { html, css, nothing } from "lit";
|
|
33
33
|
import { customElement, property, query, state } from "lit/decorators.js";
|
|
34
34
|
import { OhElement, baseStyles } from "./base.js";
|
|
35
|
+
import { getFocusableElementsDeep } from "@orange-halo/utils";
|
|
35
36
|
let OhModal = class OhModal extends OhElement {
|
|
36
37
|
constructor() {
|
|
37
38
|
super(...arguments);
|
|
@@ -63,7 +64,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
63
64
|
z-index: 1000;
|
|
64
65
|
|
|
65
66
|
/* Warm semi-transparent overlay */
|
|
66
|
-
background-color:
|
|
67
|
+
background-color: var(--oh-modal-overlay);
|
|
67
68
|
|
|
68
69
|
/* Flexbox centering */
|
|
69
70
|
display: flex;
|
|
@@ -71,17 +72,22 @@ let OhModal = class OhModal extends OhElement {
|
|
|
71
72
|
justify-content: center;
|
|
72
73
|
padding: var(--oh-spacing-4);
|
|
73
74
|
|
|
74
|
-
/* Animation */
|
|
75
|
+
/* Animation. Closing: fade, then hide once the fade ends. */
|
|
75
76
|
opacity: 0;
|
|
76
77
|
visibility: hidden;
|
|
77
|
-
transition:
|
|
78
|
-
opacity var(--oh-motion-gentle
|
|
79
|
-
visibility var(--oh-motion-gentle
|
|
78
|
+
transition:
|
|
79
|
+
opacity var(--oh-motion-gentle) ease,
|
|
80
|
+
visibility 0s linear var(--oh-motion-gentle);
|
|
80
81
|
}
|
|
81
82
|
|
|
83
|
+
/* Opening: visible at once, so focus can move into the dialog on the
|
|
84
|
+
next frame (a hidden element can't take focus). */
|
|
82
85
|
.backdrop--open {
|
|
83
86
|
opacity: 1;
|
|
84
87
|
visibility: visible;
|
|
88
|
+
transition:
|
|
89
|
+
opacity var(--oh-motion-gentle) ease,
|
|
90
|
+
visibility 0s;
|
|
85
91
|
}
|
|
86
92
|
|
|
87
93
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -99,8 +105,8 @@ let OhModal = class OhModal extends OhElement {
|
|
|
99
105
|
background-color: var(--oh-color-surface-base);
|
|
100
106
|
|
|
101
107
|
/* Chunky border */
|
|
102
|
-
border: var(--oh-input-base-border-width
|
|
103
|
-
border-radius: var(--oh-
|
|
108
|
+
border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
|
|
109
|
+
border-radius: var(--oh-shape-container);
|
|
104
110
|
|
|
105
111
|
/* Offset shadow — lifted surface */
|
|
106
112
|
box-shadow: 6px 6px 0 0 rgba(107, 93, 77, 0.25);
|
|
@@ -109,8 +115,8 @@ let OhModal = class OhModal extends OhElement {
|
|
|
109
115
|
transform: scale(0.95) translateY(10px);
|
|
110
116
|
opacity: 0;
|
|
111
117
|
transition:
|
|
112
|
-
transform var(--oh-motion-gentle
|
|
113
|
-
opacity var(--oh-motion-gentle
|
|
118
|
+
transform var(--oh-motion-gentle) var(--oh-motion-ease-playful),
|
|
119
|
+
opacity var(--oh-motion-gentle) ease;
|
|
114
120
|
}
|
|
115
121
|
|
|
116
122
|
.backdrop--open .modal {
|
|
@@ -141,16 +147,16 @@ let OhModal = class OhModal extends OhElement {
|
|
|
141
147
|
justify-content: space-between;
|
|
142
148
|
gap: var(--oh-spacing-4);
|
|
143
149
|
padding: var(--oh-spacing-4) var(--oh-spacing-5);
|
|
144
|
-
border-bottom: var(--oh-input-base-border-width
|
|
150
|
+
border-bottom: var(--oh-input-base-border-width) solid var(--oh-color-border-subtle);
|
|
145
151
|
}
|
|
146
152
|
|
|
147
153
|
.modal-title {
|
|
148
154
|
margin: 0;
|
|
149
|
-
font-family: var(--oh-font-family
|
|
150
|
-
font-size: var(--oh-font-size
|
|
151
|
-
font-weight: var(--oh-font-weight
|
|
155
|
+
font-family: var(--oh-typography-body-font-family);
|
|
156
|
+
font-size: var(--oh-typography-heading-h4-font-size);
|
|
157
|
+
font-weight: var(--oh-typography-heading-h4-font-weight);
|
|
152
158
|
color: var(--oh-color-text-primary);
|
|
153
|
-
line-height: var(--oh-
|
|
159
|
+
line-height: var(--oh-typography-heading-h1-line-height);
|
|
154
160
|
}
|
|
155
161
|
|
|
156
162
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -165,24 +171,24 @@ let OhModal = class OhModal extends OhElement {
|
|
|
165
171
|
|
|
166
172
|
padding: var(--oh-spacing-1) var(--oh-spacing-2);
|
|
167
173
|
|
|
168
|
-
font-family: var(--oh-font-family
|
|
169
|
-
font-size: var(--oh-font-size
|
|
170
|
-
font-weight: var(--oh-font-weight
|
|
174
|
+
font-family: var(--oh-typography-body-font-family);
|
|
175
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
176
|
+
font-weight: var(--oh-typography-label-base-font-weight);
|
|
171
177
|
|
|
172
178
|
background: transparent;
|
|
173
179
|
border: none;
|
|
174
|
-
border-radius: var(--oh-
|
|
180
|
+
border-radius: var(--oh-shape-compact);
|
|
175
181
|
cursor: pointer;
|
|
176
182
|
color: var(--oh-color-text-primary);
|
|
177
183
|
|
|
178
184
|
transition:
|
|
179
|
-
transform var(--oh-motion-snappy
|
|
180
|
-
box-shadow var(--oh-motion-snappy
|
|
181
|
-
background-color var(--oh-motion-quick
|
|
185
|
+
transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
186
|
+
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
187
|
+
background-color var(--oh-motion-quick) ease;
|
|
182
188
|
}
|
|
183
189
|
|
|
184
190
|
.modal-close:hover {
|
|
185
|
-
background-color:
|
|
191
|
+
background-color: var(--oh-close-button-background-hover);
|
|
186
192
|
transform: translate(-2px, -2px);
|
|
187
193
|
box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
|
|
188
194
|
}
|
|
@@ -212,9 +218,9 @@ let OhModal = class OhModal extends OhElement {
|
|
|
212
218
|
overflow-y: auto;
|
|
213
219
|
padding: var(--oh-spacing-5);
|
|
214
220
|
|
|
215
|
-
font-family: var(--oh-font-family
|
|
216
|
-
font-size: var(--oh-font-size
|
|
217
|
-
line-height: var(--oh-
|
|
221
|
+
font-family: var(--oh-typography-body-font-family);
|
|
222
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
223
|
+
line-height: var(--oh-typography-body-base-line-height);
|
|
218
224
|
color: var(--oh-color-text-primary);
|
|
219
225
|
}
|
|
220
226
|
|
|
@@ -228,7 +234,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
228
234
|
justify-content: flex-start;
|
|
229
235
|
gap: var(--oh-spacing-6);
|
|
230
236
|
padding: var(--oh-spacing-4) var(--oh-spacing-5);
|
|
231
|
-
border-top: var(--oh-input-base-border-width
|
|
237
|
+
border-top: var(--oh-input-base-border-width) solid var(--oh-color-border-subtle);
|
|
232
238
|
}
|
|
233
239
|
|
|
234
240
|
/* Hide footer if empty */
|
|
@@ -243,6 +249,15 @@ let OhModal = class OhModal extends OhElement {
|
|
|
243
249
|
gap: var(--oh-spacing-6);
|
|
244
250
|
}
|
|
245
251
|
|
|
252
|
+
/* Focus guards: focusable but never seen; focus moves on at once. */
|
|
253
|
+
.focus-guard {
|
|
254
|
+
position: absolute;
|
|
255
|
+
width: 1px;
|
|
256
|
+
height: 1px;
|
|
257
|
+
overflow: hidden;
|
|
258
|
+
clip-path: inset(50%);
|
|
259
|
+
}
|
|
260
|
+
|
|
246
261
|
/* ═══════════════════════════════════════════════════════════════
|
|
247
262
|
REDUCED MOTION
|
|
248
263
|
═══════════════════════════════════════════════════════════════ */
|
|
@@ -253,7 +268,11 @@ let OhModal = class OhModal extends OhElement {
|
|
|
253
268
|
.modal-close {
|
|
254
269
|
transition-duration: 0.01ms !important;
|
|
255
270
|
}
|
|
256
|
-
|
|
271
|
+
|
|
272
|
+
.backdrop {
|
|
273
|
+
transition-delay: 0s !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
257
276
|
.modal {
|
|
258
277
|
transform: none !important;
|
|
259
278
|
}
|
|
@@ -275,8 +294,13 @@ let OhModal = class OhModal extends OhElement {
|
|
|
275
294
|
}
|
|
276
295
|
}
|
|
277
296
|
_onOpen() {
|
|
278
|
-
// Store the currently focused element
|
|
279
|
-
|
|
297
|
+
// Store the currently focused element, following focus into shadow
|
|
298
|
+
// roots: a trigger inside another component is reported as its host,
|
|
299
|
+
// which can't take focus back.
|
|
300
|
+
let active = document.activeElement;
|
|
301
|
+
while (active?.shadowRoot?.activeElement)
|
|
302
|
+
active = active.shadowRoot.activeElement;
|
|
303
|
+
this._previousActiveElement = active;
|
|
280
304
|
// Prevent body scroll
|
|
281
305
|
document.body.style.overflow = "hidden";
|
|
282
306
|
// Add keyboard listener
|
|
@@ -307,43 +331,20 @@ let OhModal = class OhModal extends OhElement {
|
|
|
307
331
|
this._requestClose();
|
|
308
332
|
return;
|
|
309
333
|
}
|
|
310
|
-
if (event.key === "Tab") {
|
|
311
|
-
this._trapFocus(event);
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
_trapFocus(event) {
|
|
315
|
-
const focusableElements = this._getFocusableElements();
|
|
316
|
-
if (focusableElements.length === 0)
|
|
317
|
-
return;
|
|
318
|
-
const firstElement = focusableElements[0];
|
|
319
|
-
const lastElement = focusableElements[focusableElements.length - 1];
|
|
320
|
-
if (event.shiftKey) {
|
|
321
|
-
// Shift + Tab
|
|
322
|
-
if (document.activeElement === firstElement) {
|
|
323
|
-
event.preventDefault();
|
|
324
|
-
lastElement.focus();
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
else {
|
|
328
|
-
// Tab
|
|
329
|
-
if (document.activeElement === lastElement) {
|
|
330
|
-
event.preventDefault();
|
|
331
|
-
firstElement.focus();
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
334
|
}
|
|
335
|
+
/** Focusable elements in the dialog, in tab order, excluding the guards. */
|
|
335
336
|
_getFocusableElements() {
|
|
336
|
-
const
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
const
|
|
346
|
-
|
|
337
|
+
const dialog = this.renderRoot.querySelector(".modal");
|
|
338
|
+
return dialog ? getFocusableElementsDeep(dialog).filter((el) => !el.classList.contains("focus-guard")) : [];
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* Focus guards: Tab past the last control lands on the end guard, which
|
|
342
|
+
* wraps to the first; Shift+Tab before the first wraps to the last. This
|
|
343
|
+
* holds however the browser orders Tab (Safari skips links by default).
|
|
344
|
+
*/
|
|
345
|
+
_focusEdge(edge) {
|
|
346
|
+
const items = this._getFocusableElements();
|
|
347
|
+
(edge === "first" ? items[0] : items[items.length - 1])?.focus();
|
|
347
348
|
}
|
|
348
349
|
_focusFirstElement() {
|
|
349
350
|
const focusableElements = this._getFocusableElements();
|
|
@@ -388,6 +389,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
388
389
|
aria-labelledby=${labelId || nothing}
|
|
389
390
|
part="modal"
|
|
390
391
|
>
|
|
392
|
+
<span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("last")}></span>
|
|
391
393
|
${this.heading || this.dismissible
|
|
392
394
|
? html `
|
|
393
395
|
<header class="modal-header" part="header">
|
|
@@ -420,6 +422,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
420
422
|
<footer class="modal-footer" part="footer">
|
|
421
423
|
<slot name="footer"></slot>
|
|
422
424
|
</footer>
|
|
425
|
+
<span class="focus-guard" tabindex="0" @focus=${() => this._focusEdge("first")}></span>
|
|
423
426
|
</div>
|
|
424
427
|
</div>
|
|
425
428
|
`;
|
package/dist/oh-modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-navbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA0EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/oh-navbar.js
CHANGED
|
@@ -53,10 +53,9 @@ let OhNavbar = class OhNavbar extends OhElement {
|
|
|
53
53
|
:host {
|
|
54
54
|
display: block;
|
|
55
55
|
background-color: var(--oh-color-surface-base);
|
|
56
|
-
border-bottom: var(--oh-border-width-md) solid var(--oh-color-border-default);
|
|
57
56
|
box-shadow: 0 2px 8px var(--oh-focus-glow-color);
|
|
58
|
-
font-family: var(--oh-font-family
|
|
59
|
-
font-size: var(--oh-font-size
|
|
57
|
+
font-family: var(--oh-typography-body-font-family);
|
|
58
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
.navbar {
|
|
@@ -149,7 +148,7 @@ let OhNavbar = class OhNavbar extends OhElement {
|
|
|
149
148
|
variant="primary"
|
|
150
149
|
size="sm"
|
|
151
150
|
icon-only
|
|
152
|
-
|
|
151
|
+
accessible-label="Open navigation menu"
|
|
153
152
|
@click=${this._openDrawer}
|
|
154
153
|
>
|
|
155
154
|
<oh-icon name="menu"></oh-icon>
|
package/dist/oh-navbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;
|
|
1
|
+
{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA6EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aArIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AA1EqB,CA0EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAlFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsIpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACjF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACjF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BA8JpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/dist/oh-progress.js
CHANGED
|
@@ -69,7 +69,7 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
69
69
|
display: flex;
|
|
70
70
|
align-items: center;
|
|
71
71
|
gap: var(--oh-spacing-3);
|
|
72
|
-
font-family: var(--oh-font-family
|
|
72
|
+
font-family: var(--oh-typography-body-font-family);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -79,8 +79,8 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
79
79
|
.progress__track {
|
|
80
80
|
flex: 1;
|
|
81
81
|
background-color: var(--oh-color-surface-inset);
|
|
82
|
-
border: var(--oh-border-width-chunky
|
|
83
|
-
border-radius: var(--oh-
|
|
82
|
+
border: var(--oh-border-width-chunky) solid var(--oh-color-border-default);
|
|
83
|
+
border-radius: var(--oh-shape-pill);
|
|
84
84
|
overflow: hidden;
|
|
85
85
|
box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.06);
|
|
86
86
|
}
|
|
@@ -104,8 +104,8 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
104
104
|
|
|
105
105
|
.progress__fill {
|
|
106
106
|
height: 100%;
|
|
107
|
-
border-radius: var(--oh-
|
|
108
|
-
transition: width var(--oh-motion-relaxed
|
|
107
|
+
border-radius: var(--oh-shape-pill);
|
|
108
|
+
transition: width var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
|
|
109
109
|
min-width: 0;
|
|
110
110
|
}
|
|
111
111
|
|
|
@@ -135,8 +135,8 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
135
135
|
═══════════════════════════════════════════════════════════════ */
|
|
136
136
|
|
|
137
137
|
.progress__value {
|
|
138
|
-
font-size: var(--oh-font-size
|
|
139
|
-
font-weight: var(--oh-font-weight
|
|
138
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
139
|
+
font-weight: var(--oh-typography-label-base-font-weight);
|
|
140
140
|
color: var(--oh-color-text-primary);
|
|
141
141
|
min-width: 3.5ch;
|
|
142
142
|
text-align: right;
|
|
@@ -144,11 +144,11 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
.progress--sm .progress__value {
|
|
147
|
-
font-size: var(--oh-font-size
|
|
147
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
.progress--lg .progress__value {
|
|
151
|
-
font-size: var(--oh-font-size
|
|
151
|
+
font-size: var(--oh-typography-body-lg-font-size);
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
/* Hide value text when showValue is false */
|
|
@@ -169,8 +169,8 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
169
169
|
═══════════════════════════════════════════════════════════════ */
|
|
170
170
|
|
|
171
171
|
.progress__label {
|
|
172
|
-
font-size: var(--oh-font-size
|
|
173
|
-
font-weight: var(--oh-font-weight
|
|
172
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
173
|
+
font-weight: var(--oh-typography-label-base-font-weight);
|
|
174
174
|
color: var(--oh-color-text-primary);
|
|
175
175
|
margin-bottom: var(--oh-spacing-2);
|
|
176
176
|
}
|
|
@@ -180,38 +180,24 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
180
180
|
═══════════════════════════════════════════════════════════════ */
|
|
181
181
|
|
|
182
182
|
:host([inverse]) .progress__track {
|
|
183
|
-
background-color:
|
|
184
|
-
border-color:
|
|
183
|
+
background-color: var(--oh-progress-inverse-track-background);
|
|
184
|
+
border-color: var(--oh-progress-inverse-track-border);
|
|
185
185
|
box-shadow: none;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
:host([inverse]) .progress__value {
|
|
189
|
-
color: var(--oh-color-
|
|
189
|
+
color: var(--oh-color-text-on-brand);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
:host([inverse]) .progress__label {
|
|
193
|
-
color: var(--oh-color-
|
|
193
|
+
color: var(--oh-color-text-on-brand);
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
-
/* Inverse fill
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
:host([inverse]) .progress--success .progress__fill {
|
|
202
|
-
background-color: #6FCF97;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
:host([inverse]) .progress--info .progress__fill {
|
|
206
|
-
background-color: #6FB3CF;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
:host([inverse]) .progress--warning .progress__fill {
|
|
210
|
-
background-color: var(--oh-color-honey, #E8A838);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
:host([inverse]) .progress--error .progress__fill {
|
|
214
|
-
background-color: #EB8989;
|
|
196
|
+
/* Inverse fill — one solid cream fill for every variant, so the bar
|
|
197
|
+
keeps 3:1+ contrast against the track on brand/accent backgrounds
|
|
198
|
+
(the old honey/pastel fills were 1.6–1.9:1). */
|
|
199
|
+
:host([inverse]) .progress__fill {
|
|
200
|
+
background-color: var(--oh-progress-inverse-fill);
|
|
215
201
|
}
|
|
216
202
|
|
|
217
203
|
/* ═══════════════════════════════════════════════════════════════
|
package/dist/oh-progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;;;;;;;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,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;
|
|
1
|
+
{"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-radio-group.d.ts
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
*
|
|
15
15
|
* @element oh-radio-group
|
|
16
16
|
*/
|
|
17
|
+
import { type PropertyValues } from "lit";
|
|
17
18
|
import { OhElement } from "./base.js";
|
|
18
19
|
export interface RadioOption {
|
|
19
20
|
label: string;
|
|
@@ -33,6 +34,13 @@ export declare class OhRadioGroup extends OhElement {
|
|
|
33
34
|
private _handleChange;
|
|
34
35
|
private _handleFocus;
|
|
35
36
|
private _handleBlur;
|
|
37
|
+
/**
|
|
38
|
+
* Errors that appear after first render (e.g. on submit) are announced via
|
|
39
|
+
* role="alert". Errors present on page load are only linked with
|
|
40
|
+
* aria-describedby, so they aren't read out unprompted.
|
|
41
|
+
*/
|
|
42
|
+
private _announceError;
|
|
43
|
+
willUpdate(changed: PropertyValues): void;
|
|
36
44
|
render(): import("lit").TemplateResult<1>;
|
|
37
45
|
}
|
|
38
46
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-radio-group.d.ts","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;
|
|
1
|
+
{"version":3,"file":"oh-radio-group.d.ts","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BA4LpB;IAGF,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAGlB,OAAO,CAAC,QAAQ,CAAkE;IAGlF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
package/dist/oh-radio-group.js
CHANGED
|
@@ -35,6 +35,12 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
35
35
|
this.errorMessage = "";
|
|
36
36
|
this._labelId = `radio-group-label-${Math.random().toString(36).substr(2, 9)}`;
|
|
37
37
|
this._focusedValue = null;
|
|
38
|
+
/**
|
|
39
|
+
* Errors that appear after first render (e.g. on submit) are announced via
|
|
40
|
+
* role="alert". Errors present on page load are only linked with
|
|
41
|
+
* aria-describedby, so they aren't read out unprompted.
|
|
42
|
+
*/
|
|
43
|
+
this._announceError = false;
|
|
38
44
|
}
|
|
39
45
|
static { this.styles = [
|
|
40
46
|
baseStyles,
|
|
@@ -54,9 +60,9 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
54
60
|
═══════════════════════════════════════════════════════════════ */
|
|
55
61
|
|
|
56
62
|
.group-label {
|
|
57
|
-
font-family: var(--oh-font-family
|
|
58
|
-
font-size: var(--oh-font-size-
|
|
59
|
-
font-weight: var(--oh-font-weight
|
|
63
|
+
font-family: var(--oh-typography-control-font-family);
|
|
64
|
+
font-size: var(--oh-typography-control-font-size-sm);
|
|
65
|
+
font-weight: var(--oh-typography-control-font-weight);
|
|
60
66
|
color: var(--oh-color-text-primary);
|
|
61
67
|
margin-bottom: var(--oh-spacing-2);
|
|
62
68
|
display: block;
|
|
@@ -97,7 +103,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
97
103
|
height: 24px;
|
|
98
104
|
flex-shrink: 0;
|
|
99
105
|
border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
|
|
100
|
-
border-radius: var(--oh-
|
|
106
|
+
border-radius: var(--oh-shape-pill);
|
|
101
107
|
background-color: var(--oh-color-surface-base);
|
|
102
108
|
box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
|
|
103
109
|
transition:
|
|
@@ -115,15 +121,15 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
115
121
|
width: 10px;
|
|
116
122
|
height: 10px;
|
|
117
123
|
background-color: var(--oh-color-text-on-brand);
|
|
118
|
-
border-radius: var(--oh-
|
|
124
|
+
border-radius: var(--oh-shape-pill);
|
|
119
125
|
transform: translate(-50%, -50%) scale(0);
|
|
120
126
|
transition: transform var(--oh-motion-snappy) var(--oh-motion-ease-playful);
|
|
121
127
|
}
|
|
122
128
|
|
|
123
129
|
.option-label {
|
|
124
|
-
font-family: var(--oh-font-family
|
|
125
|
-
font-size: var(--oh-font-size-
|
|
126
|
-
line-height: var(--oh-
|
|
130
|
+
font-family: var(--oh-typography-control-font-family);
|
|
131
|
+
font-size: var(--oh-typography-control-font-size-md);
|
|
132
|
+
line-height: var(--oh-typography-body-base-line-height);
|
|
127
133
|
color: var(--oh-color-text-primary);
|
|
128
134
|
user-select: none;
|
|
129
135
|
}
|
|
@@ -201,16 +207,16 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
201
207
|
display: flex;
|
|
202
208
|
align-items: center;
|
|
203
209
|
gap: var(--oh-spacing-2);
|
|
204
|
-
font-family: var(--oh-font-family
|
|
205
|
-
font-size: var(--oh-font-size
|
|
210
|
+
font-family: var(--oh-typography-body-font-family);
|
|
211
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
206
212
|
color: var(--oh-color-feedback-error);
|
|
207
213
|
margin-bottom: var(--oh-spacing-2);
|
|
208
214
|
}
|
|
209
215
|
|
|
210
216
|
.error-icon {
|
|
211
217
|
flex-shrink: 0;
|
|
212
|
-
width: var(--oh-font-size
|
|
213
|
-
height: var(--oh-font-size
|
|
218
|
+
width: var(--oh-typography-body-lg-font-size);
|
|
219
|
+
height: var(--oh-typography-body-lg-font-size);
|
|
214
220
|
}
|
|
215
221
|
|
|
216
222
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -236,6 +242,11 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
236
242
|
_handleBlur() {
|
|
237
243
|
this._focusedValue = null;
|
|
238
244
|
}
|
|
245
|
+
willUpdate(changed) {
|
|
246
|
+
if (this.hasUpdated && (changed.has("error") || changed.has("errorMessage"))) {
|
|
247
|
+
this._announceError = !!(this.error && this.errorMessage);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
239
250
|
render() {
|
|
240
251
|
return html `
|
|
241
252
|
<div>
|
|
@@ -252,7 +263,7 @@ let OhRadioGroup = class OhRadioGroup extends OhElement {
|
|
|
252
263
|
|
|
253
264
|
${this.error && this.errorMessage
|
|
254
265
|
? html `
|
|
255
|
-
<div id="error-msg" class="error-message" role
|
|
266
|
+
<div id="error-msg" class="error-message" role=${this._announceError ? "alert" : nothing}>
|
|
256
267
|
<svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
257
268
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
|
258
269
|
</svg>
|
|
@@ -317,6 +328,9 @@ __decorate([
|
|
|
317
328
|
__decorate([
|
|
318
329
|
state()
|
|
319
330
|
], OhRadioGroup.prototype, "_focusedValue", void 0);
|
|
331
|
+
__decorate([
|
|
332
|
+
state()
|
|
333
|
+
], OhRadioGroup.prototype, "_announceError", void 0);
|
|
320
334
|
OhRadioGroup = __decorate([
|
|
321
335
|
customElement("oh-radio-group")
|
|
322
336
|
], OhRadioGroup);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-radio-group.js","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"oh-radio-group.js","sourceRoot":"","sources":["../src/oh-radio-group.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-radio.d.ts
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
*
|
|
25
25
|
* @element oh-radio
|
|
26
26
|
*/
|
|
27
|
+
import { type PropertyValues } from "lit";
|
|
27
28
|
import { OhElement } from "./base.js";
|
|
28
29
|
export type RadioState = "default" | "hover" | "focus";
|
|
29
30
|
export declare class OhRadio extends OhElement {
|
|
@@ -40,6 +41,14 @@ export declare class OhRadio extends OhElement {
|
|
|
40
41
|
*/
|
|
41
42
|
forceState: RadioState;
|
|
42
43
|
private _handleChange;
|
|
44
|
+
/**
|
|
45
|
+
* Errors that appear after first render (e.g. on submit) are announced via
|
|
46
|
+
* role="alert". Errors present on page load are only linked with
|
|
47
|
+
* aria-describedby, so they aren't read out unprompted.
|
|
48
|
+
*/
|
|
49
|
+
private _announceError;
|
|
50
|
+
private _errorId;
|
|
51
|
+
willUpdate(changed: PropertyValues): void;
|
|
43
52
|
render(): import("lit").TemplateResult<1>;
|
|
44
53
|
}
|
|
45
54
|
declare global {
|