@orange-halo/components 1.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.
- package/custom-elements.json +3182 -73
- package/dist/base.js +3 -3
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.js +33 -33
- package/dist/oh-alert.js +26 -26
- package/dist/oh-badge.js +11 -11
- package/dist/oh-breadcrumb.js +20 -20
- package/dist/oh-button.d.ts +7 -1
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.js +118 -89
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +38 -66
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts +8 -0
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.figma.js +1 -1
- package/dist/oh-checkbox-group.figma.js.map +1 -1
- package/dist/oh-checkbox-group.js +40 -26
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts +11 -2
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +44 -28
- 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.d.ts +5 -0
- package/dist/oh-footer.d.ts.map +1 -1
- package/dist/oh-footer.js +9 -4
- package/dist/oh-footer.js.map +1 -1
- package/dist/oh-hero.d.ts +5 -0
- package/dist/oh-hero.d.ts.map +1 -1
- package/dist/oh-hero.js +55 -51
- package/dist/oh-hero.js.map +1 -1
- package/dist/oh-icon.js +9 -9
- package/dist/oh-input.d.ts +11 -3
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.figma.js +2 -2
- package/dist/oh-input.figma.js.map +1 -1
- package/dist/oh-input.js +49 -37
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts +1 -1
- package/dist/oh-link.js +35 -35
- package/dist/oh-modal.d.ts +10 -4
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +75 -72
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +4 -5
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +21 -35
- 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 +40 -26
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts +10 -1
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +44 -28
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +10 -2
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +51 -32
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +15 -14
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-tabs.js +15 -15
- package/dist/oh-toggle.d.ts +5 -2
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +18 -20
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +50 -50
- package/package.json +15 -4
package/dist/oh-select.js
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
* DESIGN DECISIONS:
|
|
8
8
|
* ─────────────────
|
|
9
9
|
* 1. CHUNKY & TACTILE
|
|
10
|
-
* - Thick
|
|
10
|
+
* - Thick border (stroke.control)
|
|
11
11
|
* - Offset shadow (sticker effect like button)
|
|
12
|
-
* -
|
|
12
|
+
* - shape.control corners
|
|
13
13
|
* - Solid warm fills
|
|
14
14
|
*
|
|
15
15
|
* 2. DROPDOWN PANEL
|
|
@@ -60,6 +60,12 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
60
60
|
this._close_dropdown();
|
|
61
61
|
}
|
|
62
62
|
};
|
|
63
|
+
/**
|
|
64
|
+
* Errors that appear after first render (e.g. on submit) are announced via
|
|
65
|
+
* role="alert". Errors present on page load are only linked with
|
|
66
|
+
* aria-describedby, so they aren't read out unprompted.
|
|
67
|
+
*/
|
|
68
|
+
this._announceError = false;
|
|
63
69
|
}
|
|
64
70
|
static { this.styles = [
|
|
65
71
|
baseStyles,
|
|
@@ -82,11 +88,11 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
82
88
|
|
|
83
89
|
/* ─── Label ─── */
|
|
84
90
|
.label {
|
|
85
|
-
font-family: var(--oh-font-family
|
|
86
|
-
font-size: var(--oh-font-size-
|
|
87
|
-
font-weight: var(--oh-font-weight
|
|
91
|
+
font-family: var(--oh-typography-control-font-family);
|
|
92
|
+
font-size: var(--oh-typography-control-font-size-sm);
|
|
93
|
+
font-weight: var(--oh-typography-control-font-weight);
|
|
88
94
|
color: var(--oh-color-text-primary);
|
|
89
|
-
letter-spacing: var(--oh-
|
|
95
|
+
letter-spacing: var(--oh-typography-control-letter-spacing);
|
|
90
96
|
}
|
|
91
97
|
|
|
92
98
|
.label--required::after {
|
|
@@ -108,15 +114,15 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
108
114
|
min-height: var(--oh-input-size-md-min-height);
|
|
109
115
|
padding: var(--oh-spacing-3) var(--oh-spacing-4);
|
|
110
116
|
|
|
111
|
-
font-family: var(--oh-font-family
|
|
112
|
-
font-size: var(--oh-font-size-
|
|
117
|
+
font-family: var(--oh-typography-control-font-family);
|
|
118
|
+
font-size: var(--oh-typography-control-font-size-md);
|
|
113
119
|
color: var(--oh-color-text-primary);
|
|
114
120
|
text-align: left;
|
|
115
121
|
|
|
116
122
|
background-color: var(--oh-color-surface-base);
|
|
117
|
-
border: var(--oh-
|
|
118
|
-
border-radius: var(--oh-
|
|
119
|
-
box-shadow:
|
|
123
|
+
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
124
|
+
border-radius: var(--oh-shape-control);
|
|
125
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-secondary);
|
|
120
126
|
|
|
121
127
|
cursor: pointer;
|
|
122
128
|
-webkit-appearance: none;
|
|
@@ -135,6 +141,11 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
135
141
|
overflow: hidden;
|
|
136
142
|
text-overflow: ellipsis;
|
|
137
143
|
white-space: nowrap;
|
|
144
|
+
/* Room inside the clip for the focus underline, which overflow: hidden
|
|
145
|
+
cut off when a brand's line height is tight. The negative margin
|
|
146
|
+
keeps the layout the same. */
|
|
147
|
+
padding-block-end: var(--oh-spacing-2);
|
|
148
|
+
margin-block-end: calc(-1 * var(--oh-spacing-2));
|
|
138
149
|
}
|
|
139
150
|
|
|
140
151
|
.trigger__text--placeholder {
|
|
@@ -156,18 +167,18 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
156
167
|
/* ─── Trigger States ─── */
|
|
157
168
|
.trigger:hover {
|
|
158
169
|
border-color: var(--oh-color-border-hover);
|
|
159
|
-
transform: translate(-
|
|
160
|
-
box-shadow:
|
|
170
|
+
transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
|
|
171
|
+
box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
|
|
161
172
|
}
|
|
162
173
|
|
|
163
174
|
.trigger:active {
|
|
164
|
-
transform: translate(
|
|
165
|
-
box-shadow:
|
|
175
|
+
transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
|
|
176
|
+
box-shadow: var(--oh-elevation-offset-sm) var(--oh-elevation-offset-sm) 0 0 var(--oh-shadow-secondary);
|
|
166
177
|
}
|
|
167
178
|
|
|
168
179
|
.trigger--open {
|
|
169
|
-
border-color: var(--oh-
|
|
170
|
-
background-color: var(--oh-color-surface-
|
|
180
|
+
border-color: var(--oh-focus-ring-color);
|
|
181
|
+
background-color: var(--oh-color-surface-highlight);
|
|
171
182
|
}
|
|
172
183
|
|
|
173
184
|
/* Focus: underline trigger text (accessible indicator, like button) */
|
|
@@ -198,10 +209,10 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
198
209
|
z-index: var(--oh-z-index-dropdown);
|
|
199
210
|
margin-top: var(--oh-spacing-1);
|
|
200
211
|
|
|
201
|
-
background-color: var(--oh-color-surface-
|
|
202
|
-
border: var(--oh-
|
|
203
|
-
border-radius: var(--oh-
|
|
204
|
-
box-shadow:
|
|
212
|
+
background-color: var(--oh-color-surface-highlight);
|
|
213
|
+
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
214
|
+
border-radius: var(--oh-shape-container);
|
|
215
|
+
box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
|
|
205
216
|
|
|
206
217
|
max-height: 0;
|
|
207
218
|
overflow: hidden;
|
|
@@ -234,8 +245,8 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
234
245
|
gap: var(--oh-spacing-3);
|
|
235
246
|
padding: var(--oh-spacing-3) var(--oh-spacing-4);
|
|
236
247
|
|
|
237
|
-
font-family: var(--oh-font-family
|
|
238
|
-
font-size: var(--oh-font-size-
|
|
248
|
+
font-family: var(--oh-typography-control-font-family);
|
|
249
|
+
font-size: var(--oh-typography-control-font-size-md);
|
|
239
250
|
color: var(--oh-color-text-primary);
|
|
240
251
|
|
|
241
252
|
cursor: pointer;
|
|
@@ -255,7 +266,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
255
266
|
|
|
256
267
|
.option--selected {
|
|
257
268
|
background-color: var(--oh-color-surface-hover);
|
|
258
|
-
font-weight: var(--oh-font-weight
|
|
269
|
+
font-weight: var(--oh-typography-emphasis-font-weight);
|
|
259
270
|
}
|
|
260
271
|
|
|
261
272
|
.option--selected::before {
|
|
@@ -263,7 +274,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
263
274
|
width: 8px;
|
|
264
275
|
height: 8px;
|
|
265
276
|
background-color: var(--oh-color-brand-primary);
|
|
266
|
-
border-radius: var(--oh-
|
|
277
|
+
border-radius: var(--oh-shape-pill);
|
|
267
278
|
flex-shrink: 0;
|
|
268
279
|
}
|
|
269
280
|
|
|
@@ -273,17 +284,17 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
273
284
|
|
|
274
285
|
.trigger--error {
|
|
275
286
|
border-color: var(--oh-color-feedback-error);
|
|
276
|
-
box-shadow:
|
|
287
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-error);
|
|
277
288
|
}
|
|
278
289
|
|
|
279
290
|
.trigger--error:hover {
|
|
280
291
|
border-color: var(--oh-color-feedback-error-hover);
|
|
281
|
-
box-shadow:
|
|
292
|
+
box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-error);
|
|
282
293
|
}
|
|
283
294
|
|
|
284
295
|
.helper {
|
|
285
|
-
font-family: var(--oh-font-family
|
|
286
|
-
font-size: var(--oh-font-size
|
|
296
|
+
font-family: var(--oh-typography-body-font-family);
|
|
297
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
287
298
|
color: var(--oh-color-text-secondary);
|
|
288
299
|
}
|
|
289
300
|
|
|
@@ -291,8 +302,8 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
291
302
|
display: flex;
|
|
292
303
|
align-items: center;
|
|
293
304
|
gap: var(--oh-spacing-2);
|
|
294
|
-
font-family: var(--oh-font-family
|
|
295
|
-
font-size: var(--oh-font-size
|
|
305
|
+
font-family: var(--oh-typography-body-font-family);
|
|
306
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
296
307
|
color: var(--oh-color-feedback-error);
|
|
297
308
|
margin-bottom: var(--oh-spacing-2);
|
|
298
309
|
}
|
|
@@ -489,6 +500,11 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
489
500
|
super.disconnectedCallback();
|
|
490
501
|
document.removeEventListener('click', this._handleClickOutside);
|
|
491
502
|
}
|
|
503
|
+
willUpdate(changed) {
|
|
504
|
+
if (this.hasUpdated && (changed.has("errorText"))) {
|
|
505
|
+
this._announceError = !!this.errorText;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
492
508
|
render() {
|
|
493
509
|
const hasError = !!this.errorText;
|
|
494
510
|
const selectedLabel = this._selectedOption?.label;
|
|
@@ -515,7 +531,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
515
531
|
|
|
516
532
|
${hasError
|
|
517
533
|
? html `
|
|
518
|
-
<div id=${this._errorId} class="error-message" role
|
|
534
|
+
<div id=${this._errorId} class="error-message" role=${this._announceError ? "alert" : nothing}>
|
|
519
535
|
<svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
520
536
|
<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" />
|
|
521
537
|
</svg>
|
|
@@ -631,6 +647,9 @@ __decorate([
|
|
|
631
647
|
__decorate([
|
|
632
648
|
query(".dropdown")
|
|
633
649
|
], OhSelect.prototype, "_listbox", void 0);
|
|
650
|
+
__decorate([
|
|
651
|
+
state()
|
|
652
|
+
], OhSelect.prototype, "_announceError", void 0);
|
|
634
653
|
OhSelect = __decorate([
|
|
635
654
|
customElement("oh-select")
|
|
636
655
|
], OhSelect);
|
package/dist/oh-select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-select.js","sourceRoot":"","sources":["../src/oh-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"oh-select.js","sourceRoot":"","sources":["../src/oh-select.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-skip-link.d.ts","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-skip-link.d.ts","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAmFpB;IAGF,IAAI,SAAW;IAGf,IAAI,SAA0B;IAE9B,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
|
package/dist/oh-skip-link.js
CHANGED
|
@@ -62,30 +62,30 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
62
62
|
|
|
63
63
|
/* Smooth transition */
|
|
64
64
|
transition:
|
|
65
|
-
opacity var(--oh-motion-gentle
|
|
66
|
-
transform var(--oh-motion-gentle
|
|
65
|
+
opacity var(--oh-motion-gentle) ease,
|
|
66
|
+
transform var(--oh-motion-gentle) ease;
|
|
67
67
|
|
|
68
68
|
/* Link styling */
|
|
69
69
|
display: inline-block;
|
|
70
70
|
padding: var(--oh-spacing-2) var(--oh-spacing-4);
|
|
71
71
|
background-color: var(--oh-color-surface-base);
|
|
72
|
-
border: var(--oh-
|
|
73
|
-
border-radius: var(--oh-
|
|
74
|
-
box-shadow:
|
|
72
|
+
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
73
|
+
border-radius: var(--oh-shape-control);
|
|
74
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-neutral);
|
|
75
75
|
|
|
76
|
-
font-family: var(--oh-font-family
|
|
77
|
-
font-size: var(--oh-font-size
|
|
78
|
-
font-weight: var(--oh-font-weight
|
|
76
|
+
font-family: var(--oh-typography-body-font-family);
|
|
77
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
78
|
+
font-weight: var(--oh-typography-label-base-font-weight);
|
|
79
79
|
color: var(--oh-color-text-link);
|
|
80
80
|
text-decoration: none;
|
|
81
81
|
|
|
82
82
|
/* Focus state */
|
|
83
83
|
transition:
|
|
84
|
-
opacity var(--oh-motion-gentle
|
|
85
|
-
transform var(--oh-motion-gentle
|
|
86
|
-
background-color var(--oh-motion-quick
|
|
87
|
-
border-color var(--oh-motion-quick
|
|
88
|
-
box-shadow var(--oh-motion-snappy
|
|
84
|
+
opacity var(--oh-motion-gentle) ease,
|
|
85
|
+
transform var(--oh-motion-gentle) ease,
|
|
86
|
+
background-color var(--oh-motion-quick) ease,
|
|
87
|
+
border-color var(--oh-motion-quick) ease,
|
|
88
|
+
box-shadow var(--oh-motion-snappy) ease;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.skip-link:focus {
|
|
@@ -94,8 +94,9 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
94
94
|
transform: translateY(0);
|
|
95
95
|
pointer-events: auto;
|
|
96
96
|
background-color: var(--oh-color-surface-raised);
|
|
97
|
+
color: var(--oh-color-text-link-raised);
|
|
97
98
|
border-color: var(--oh-color-brand-primary);
|
|
98
|
-
box-shadow:
|
|
99
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
|
|
99
100
|
}
|
|
100
101
|
|
|
101
102
|
/* Screen reader only when not focused */
|
package/dist/oh-skip-link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-skip-link.js","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;
|
|
1
|
+
{"version":3,"file":"oh-skip-link.js","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QAuFL,SAAI,GAAG,OAAO,CAAC;QAGf,SAAI,GAAG,sBAAsB,CAAC;IAahC,CAAC;aAtGiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgFF;KACF,AAnFqB,CAmFpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,IAAI;qBACH,IAAI,CAAC,IAAI;;UAEpB,IAAI,CAAC,IAAI;;KAEd,CAAC;IACJ,CAAC;;AAfD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACG;AA1FnB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAuGtB"}
|
package/dist/oh-tabs.js
CHANGED
|
@@ -67,7 +67,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
67
67
|
|
|
68
68
|
:host {
|
|
69
69
|
display: block;
|
|
70
|
-
font-family: var(--oh-font-family
|
|
70
|
+
font-family: var(--oh-typography-body-font-family);
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -90,13 +90,13 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
90
90
|
position: relative;
|
|
91
91
|
padding: var(--oh-spacing-3) var(--oh-spacing-5);
|
|
92
92
|
font-family: inherit;
|
|
93
|
-
font-size: var(--oh-font-size
|
|
94
|
-
font-weight: var(--oh-font-weight
|
|
93
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
94
|
+
font-weight: var(--oh-typography-label-base-font-weight);
|
|
95
95
|
color: var(--oh-color-brand-primary);
|
|
96
96
|
background: transparent;
|
|
97
|
-
border: var(--oh-
|
|
97
|
+
border: var(--oh-stroke-control) solid transparent;
|
|
98
98
|
border-bottom: none;
|
|
99
|
-
border-radius: var(--oh-
|
|
99
|
+
border-radius: var(--oh-shape-control) var(--oh-shape-control) 0 0;
|
|
100
100
|
cursor: pointer;
|
|
101
101
|
|
|
102
102
|
/* No shadow for inactive tabs */
|
|
@@ -123,13 +123,13 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
123
123
|
left: 0;
|
|
124
124
|
right: 0;
|
|
125
125
|
bottom: -3px;
|
|
126
|
-
height:
|
|
126
|
+
height: var(--oh-decoration-underline-thickness);
|
|
127
127
|
background: repeating-linear-gradient(
|
|
128
128
|
to right,
|
|
129
129
|
var(--oh-color-brand-primary) 0,
|
|
130
|
-
var(--oh-color-brand-primary)
|
|
131
|
-
transparent
|
|
132
|
-
transparent
|
|
130
|
+
var(--oh-color-brand-primary) var(--oh-decoration-underline-dash),
|
|
131
|
+
transparent var(--oh-decoration-underline-dash),
|
|
132
|
+
transparent var(--oh-decoration-underline-period)
|
|
133
133
|
);
|
|
134
134
|
transform-origin: left;
|
|
135
135
|
transform: scaleX(0);
|
|
@@ -156,8 +156,8 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
156
156
|
border-bottom-color: transparent;
|
|
157
157
|
z-index: 1;
|
|
158
158
|
/* Extend down to overlap the content panel's top border */
|
|
159
|
-
margin-bottom: calc(-1 * var(--oh-
|
|
160
|
-
padding-bottom: calc(var(--oh-spacing-3) + var(--oh-
|
|
159
|
+
margin-bottom: calc(-1 * var(--oh-stroke-control));
|
|
160
|
+
padding-bottom: calc(var(--oh-spacing-3) + var(--oh-stroke-control));
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -176,7 +176,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
176
176
|
.tab:focus-visible .tab__label {
|
|
177
177
|
text-decoration: underline;
|
|
178
178
|
text-underline-offset: var(--oh-spacing-1);
|
|
179
|
-
text-decoration-thickness:
|
|
179
|
+
text-decoration-thickness: var(--oh-decoration-underline-thickness);
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
.tab__label {
|
|
@@ -191,14 +191,14 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
191
191
|
.tabpanel {
|
|
192
192
|
padding: var(--oh-spacing-6);
|
|
193
193
|
background: var(--oh-color-surface-base);
|
|
194
|
-
border: var(--oh-
|
|
195
|
-
border-radius: 0 var(--oh-
|
|
194
|
+
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
195
|
+
border-radius: 0 var(--oh-shape-container) var(--oh-shape-container) var(--oh-shape-container);
|
|
196
196
|
color: var(--oh-color-text-primary);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
/* When first tab is not selected, round all corners */
|
|
200
200
|
.tabpanel--rounded-top-left {
|
|
201
|
-
border-radius: var(--oh-
|
|
201
|
+
border-radius: var(--oh-shape-container);
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
.tabpanel:focus {
|
package/dist/oh-toggle.d.ts
CHANGED
|
@@ -31,8 +31,11 @@ export declare class OhToggle extends OhElement {
|
|
|
31
31
|
checked: boolean;
|
|
32
32
|
/** Label text displayed next to the toggle */
|
|
33
33
|
label?: string;
|
|
34
|
-
/**
|
|
35
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Accessible name when there's no visible label. Use this, not aria-label:
|
|
36
|
+
* an aria-label on the host isn't forwarded into the shadow root.
|
|
37
|
+
*/
|
|
38
|
+
accessibleLabel?: string;
|
|
36
39
|
/** Name for form submission */
|
|
37
40
|
name?: string;
|
|
38
41
|
/** Value for form submission */
|
package/dist/oh-toggle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAkHpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf
|
|
1
|
+
{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAkHpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/oh-toggle.js
CHANGED
|
@@ -38,8 +38,6 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
38
38
|
super(...arguments);
|
|
39
39
|
/** Whether the toggle is checked/on */
|
|
40
40
|
this.checked = false;
|
|
41
|
-
/** Accessible label when no visible label is provided */
|
|
42
|
-
this.ariaLabel = null;
|
|
43
41
|
/** Value for form submission */
|
|
44
42
|
this.value = "on";
|
|
45
43
|
this._labelId = `oh-toggle-label-${Math.random().toString(36).slice(2, 9)}`;
|
|
@@ -51,7 +49,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
51
49
|
display: inline-flex;
|
|
52
50
|
align-items: center;
|
|
53
51
|
gap: var(--oh-spacing-3);
|
|
54
|
-
font-family: var(--oh-font-family
|
|
52
|
+
font-family: var(--oh-typography-body-font-family);
|
|
55
53
|
cursor: pointer;
|
|
56
54
|
}
|
|
57
55
|
|
|
@@ -67,7 +65,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
67
65
|
height: 26px;
|
|
68
66
|
background-color: var(--oh-color-surface-raised);
|
|
69
67
|
border: none;
|
|
70
|
-
border-radius:
|
|
68
|
+
border-radius: var(--oh-shape-pill);
|
|
71
69
|
transition: background-color var(--oh-motion-snappy) ease;
|
|
72
70
|
}
|
|
73
71
|
|
|
@@ -76,7 +74,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
.toggle__track:focus-visible {
|
|
79
|
-
outline: 2px solid var(--oh-
|
|
77
|
+
outline: 2px solid var(--oh-focus-ring-color);
|
|
80
78
|
outline-offset: 2px;
|
|
81
79
|
box-shadow: 0 0 0 4px var(--oh-focus-glow-color);
|
|
82
80
|
}
|
|
@@ -99,9 +97,9 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
99
97
|
width: 26px;
|
|
100
98
|
height: 26px;
|
|
101
99
|
background-color: var(--oh-color-surface-base);
|
|
102
|
-
border: var(--oh-
|
|
100
|
+
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
103
101
|
border-radius: 50%;
|
|
104
|
-
box-shadow:
|
|
102
|
+
box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-secondary);
|
|
105
103
|
transition:
|
|
106
104
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
|
|
107
105
|
box-shadow var(--oh-motion-snappy) ease;
|
|
@@ -110,31 +108,31 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
110
108
|
/* Checked: thumb moves right, shadow flips to bottom-left */
|
|
111
109
|
.toggle__track--checked .toggle__thumb {
|
|
112
110
|
transform: translateX(30px);
|
|
113
|
-
box-shadow: -
|
|
111
|
+
box-shadow: calc(-1 * var(--oh-elevation-offset-md)) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-primary);
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
/* Hover state - lift further up-left, shadow grows */
|
|
117
115
|
.toggle__track:hover .toggle__thumb {
|
|
118
|
-
transform: translate(-
|
|
119
|
-
box-shadow:
|
|
116
|
+
transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
|
|
117
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-secondary);
|
|
120
118
|
}
|
|
121
119
|
|
|
122
120
|
/* Checked hover - shadow flipped and grows */
|
|
123
121
|
.toggle__track--checked:hover .toggle__thumb {
|
|
124
|
-
transform: translateX(30px) translate(
|
|
125
|
-
box-shadow: -
|
|
122
|
+
transform: translateX(30px) translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
|
|
123
|
+
box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
|
|
126
124
|
}
|
|
127
125
|
|
|
128
126
|
/* Active/pressed state - press down, shadow shrinks */
|
|
129
127
|
.toggle__track:active .toggle__thumb {
|
|
130
|
-
transform: translate(
|
|
131
|
-
box-shadow:
|
|
128
|
+
transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
|
|
129
|
+
box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-secondary);
|
|
132
130
|
}
|
|
133
131
|
|
|
134
132
|
/* Checked active - shadow flipped and shrinks */
|
|
135
133
|
.toggle__track--checked:active .toggle__thumb {
|
|
136
|
-
transform: translateX(30px) translate(-
|
|
137
|
-
box-shadow: -
|
|
134
|
+
transform: translateX(30px) translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
|
|
135
|
+
box-shadow: calc(-1 * var(--oh-elevation-offset-xs)) var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-primary);
|
|
138
136
|
}
|
|
139
137
|
|
|
140
138
|
/* ═══════════════════════════════════════════════════════════════
|
|
@@ -142,7 +140,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
142
140
|
═══════════════════════════════════════════════════════════════ */
|
|
143
141
|
|
|
144
142
|
.toggle__label {
|
|
145
|
-
font-size: var(--oh-font-size
|
|
143
|
+
font-size: var(--oh-typography-body-base-font-size);
|
|
146
144
|
color: var(--oh-color-text-primary);
|
|
147
145
|
user-select: none;
|
|
148
146
|
}
|
|
@@ -184,7 +182,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
184
182
|
role="switch"
|
|
185
183
|
aria-checked="${this.checked}"
|
|
186
184
|
aria-labelledby="${hasVisibleLabel ? this._labelId : nothing}"
|
|
187
|
-
aria-label="${!hasVisibleLabel && this.
|
|
185
|
+
aria-label="${!hasVisibleLabel && this.accessibleLabel ? this.accessibleLabel : nothing}"
|
|
188
186
|
tabindex="0"
|
|
189
187
|
@click="${this._handleClick}"
|
|
190
188
|
@keydown="${this._handleKeydown}"
|
|
@@ -204,8 +202,8 @@ __decorate([
|
|
|
204
202
|
property({ type: String })
|
|
205
203
|
], OhToggle.prototype, "label", void 0);
|
|
206
204
|
__decorate([
|
|
207
|
-
property({ type: String, attribute: "
|
|
208
|
-
], OhToggle.prototype, "
|
|
205
|
+
property({ type: String, attribute: "accessible-label" })
|
|
206
|
+
], OhToggle.prototype, "accessibleLabel", void 0);
|
|
209
207
|
__decorate([
|
|
210
208
|
property({ type: String })
|
|
211
209
|
], OhToggle.prototype, "name", void 0);
|
package/dist/oh-toggle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;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;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAqHL,uCAAuC;QAEvC,YAAO,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;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;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAqHL,uCAAuC;QAEvC,YAAO,GAAG,KAAK,CAAC;QAiBhB,gCAAgC;QAEhC,UAAK,GAAG,IAAI,CAAC;QAwBI,aAAQ,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAuB1F,CAAC;aAxLiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+GF;KACF,AAlHqB,CAkHpB;IAyBM,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAID,MAAM;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE5C,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;wBAEnD,IAAI,CAAC,OAAO;2BACT,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC9C,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;kBAE7E,IAAI,CAAC,YAAY;oBACf,IAAI,CAAC,cAAc;;;;QAI/B,eAAe;YACf,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,QAAQ,mCAAmC,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,SAAS;YAC5G,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;;AAjED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACjC;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AA1IF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB"}
|