@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.
- package/custom-elements.json +369 -0
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +1 -2
- package/dist/base.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.d.ts.map +1 -1
- package/dist/oh-accordion.js +24 -16
- package/dist/oh-accordion.js.map +1 -1
- package/dist/oh-alert.d.ts.map +1 -1
- package/dist/oh-alert.js +64 -22
- package/dist/oh-alert.js.map +1 -1
- package/dist/oh-badge.d.ts.map +1 -1
- package/dist/oh-badge.js +3 -3
- package/dist/oh-badge.js.map +1 -1
- package/dist/oh-breadcrumb.d.ts.map +1 -1
- package/dist/oh-breadcrumb.js +27 -8
- package/dist/oh-breadcrumb.js.map +1 -1
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.figma.js +1 -3
- package/dist/oh-button.figma.js.map +1 -1
- package/dist/oh-button.js +70 -38
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +42 -23
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.js +41 -18
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +47 -20
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +21 -10
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-grid.d.ts.map +1 -1
- package/dist/oh-grid.js +1 -2
- package/dist/oh-grid.js.map +1 -1
- package/dist/oh-hero.d.ts.map +1 -1
- package/dist/oh-hero.js +3 -1
- package/dist/oh-hero.js.map +1 -1
- package/dist/oh-icon.d.ts.map +1 -1
- package/dist/oh-icon.js +6 -4
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +9 -4
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.js +35 -18
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts.map +1 -1
- package/dist/oh-link.js +36 -9
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +6 -0
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +54 -24
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +2 -1
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +4 -2
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.js +53 -22
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +49 -21
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +1 -0
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +77 -42
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +7 -9
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-tabs.d.ts.map +1 -1
- package/dist/oh-tabs.js +25 -16
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +98 -0
- package/dist/oh-textarea.d.ts.map +1 -0
- package/dist/oh-textarea.js +370 -0
- package/dist/oh-textarea.js.map +1 -0
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +26 -11
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +1 -1
- package/package.json +7 -3
package/dist/oh-select.js
CHANGED
|
@@ -53,6 +53,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
53
53
|
this._labelId = `oh-select-label-${Math.random().toString(36).substr(2, 9)}`;
|
|
54
54
|
this._listboxId = `oh-select-listbox-${Math.random().toString(36).substr(2, 9)}`;
|
|
55
55
|
this._errorId = `oh-select-error-${Math.random().toString(36).substr(2, 9)}`;
|
|
56
|
+
this._helperId = `oh-select-helper-${Math.random().toString(36).substr(2, 9)}`;
|
|
56
57
|
this._typeaheadBuffer = "";
|
|
57
58
|
this._typeaheadTimeout = null;
|
|
58
59
|
this._handleClickOutside = (event) => {
|
|
@@ -113,23 +114,24 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
113
114
|
width: 100%;
|
|
114
115
|
min-height: var(--oh-input-size-md-min-height);
|
|
115
116
|
padding: var(--oh-spacing-3) var(--oh-spacing-4);
|
|
116
|
-
|
|
117
|
+
|
|
117
118
|
font-family: var(--oh-typography-control-font-family);
|
|
118
119
|
font-size: var(--oh-typography-control-font-size-md);
|
|
119
120
|
color: var(--oh-color-text-primary);
|
|
120
121
|
text-align: left;
|
|
121
|
-
|
|
122
|
+
|
|
122
123
|
background-color: var(--oh-color-surface-base);
|
|
123
124
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
124
125
|
border-radius: var(--oh-shape-control);
|
|
125
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
126
|
-
|
|
126
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
127
|
+
0 0 var(--oh-shadow-secondary);
|
|
128
|
+
|
|
127
129
|
cursor: pointer;
|
|
128
130
|
-webkit-appearance: none;
|
|
129
131
|
-moz-appearance: none;
|
|
130
132
|
appearance: none;
|
|
131
|
-
|
|
132
|
-
transition:
|
|
133
|
+
|
|
134
|
+
transition:
|
|
133
135
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
134
136
|
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
135
137
|
border-color var(--oh-motion-snappy) ease,
|
|
@@ -168,12 +170,14 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
168
170
|
.trigger:hover {
|
|
169
171
|
border-color: var(--oh-color-border-hover);
|
|
170
172
|
transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
|
|
171
|
-
box-shadow: var(--oh-elevation-offset-2xl)
|
|
173
|
+
box-shadow: var(--oh-elevation-offset-2xl)
|
|
174
|
+
var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
|
|
172
175
|
}
|
|
173
176
|
|
|
174
177
|
.trigger:active {
|
|
175
178
|
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)
|
|
179
|
+
box-shadow: var(--oh-elevation-offset-sm) var(--oh-elevation-offset-sm)
|
|
180
|
+
0 0 var(--oh-shadow-secondary);
|
|
177
181
|
}
|
|
178
182
|
|
|
179
183
|
.trigger--open {
|
|
@@ -208,18 +212,19 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
208
212
|
right: 0;
|
|
209
213
|
z-index: var(--oh-z-index-dropdown);
|
|
210
214
|
margin-top: var(--oh-spacing-1);
|
|
211
|
-
|
|
215
|
+
|
|
212
216
|
background-color: var(--oh-color-surface-highlight);
|
|
213
217
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
214
218
|
border-radius: var(--oh-shape-container);
|
|
215
|
-
box-shadow: var(--oh-elevation-offset-2xl)
|
|
216
|
-
|
|
219
|
+
box-shadow: var(--oh-elevation-offset-2xl)
|
|
220
|
+
var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
|
|
221
|
+
|
|
217
222
|
max-height: 0;
|
|
218
223
|
overflow: hidden;
|
|
219
224
|
opacity: 0;
|
|
220
225
|
transform: translateY(-8px);
|
|
221
|
-
|
|
222
|
-
transition:
|
|
226
|
+
|
|
227
|
+
transition:
|
|
223
228
|
max-height var(--oh-motion-gentle) ease,
|
|
224
229
|
opacity var(--oh-motion-snappy) ease,
|
|
225
230
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-playful);
|
|
@@ -244,11 +249,11 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
244
249
|
align-items: center;
|
|
245
250
|
gap: var(--oh-spacing-3);
|
|
246
251
|
padding: var(--oh-spacing-3) var(--oh-spacing-4);
|
|
247
|
-
|
|
252
|
+
|
|
248
253
|
font-family: var(--oh-typography-control-font-family);
|
|
249
254
|
font-size: var(--oh-typography-control-font-size-md);
|
|
250
255
|
color: var(--oh-color-text-primary);
|
|
251
|
-
|
|
256
|
+
|
|
252
257
|
cursor: pointer;
|
|
253
258
|
transition: background-color var(--oh-motion-quick) ease;
|
|
254
259
|
}
|
|
@@ -270,7 +275,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
270
275
|
}
|
|
271
276
|
|
|
272
277
|
.option--selected::before {
|
|
273
|
-
content:
|
|
278
|
+
content: "";
|
|
274
279
|
width: 8px;
|
|
275
280
|
height: 8px;
|
|
276
281
|
background-color: var(--oh-color-brand-primary);
|
|
@@ -284,12 +289,14 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
284
289
|
|
|
285
290
|
.trigger--error {
|
|
286
291
|
border-color: var(--oh-color-feedback-error);
|
|
287
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
292
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
293
|
+
0 0 var(--oh-shadow-error);
|
|
288
294
|
}
|
|
289
295
|
|
|
290
296
|
.trigger--error:hover {
|
|
291
297
|
border-color: var(--oh-color-feedback-error-hover);
|
|
292
|
-
box-shadow: var(--oh-elevation-offset-2xl)
|
|
298
|
+
box-shadow: var(--oh-elevation-offset-2xl)
|
|
299
|
+
var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-error);
|
|
293
300
|
}
|
|
294
301
|
|
|
295
302
|
.helper {
|
|
@@ -329,11 +336,11 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
329
336
|
`,
|
|
330
337
|
]; }
|
|
331
338
|
get _selectedOption() {
|
|
332
|
-
return this.options.find(opt => opt.value === this.value);
|
|
339
|
+
return this.options.find((opt) => opt.value === this.value);
|
|
333
340
|
}
|
|
334
341
|
_open_dropdown() {
|
|
335
342
|
this._open = true;
|
|
336
|
-
this._highlightedIndex = this.options.findIndex(opt => opt.value === this.value);
|
|
343
|
+
this._highlightedIndex = this.options.findIndex((opt) => opt.value === this.value);
|
|
337
344
|
if (this._highlightedIndex === -1 && this.options.length > 0) {
|
|
338
345
|
this._highlightedIndex = 0;
|
|
339
346
|
}
|
|
@@ -431,7 +438,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
431
438
|
this._typeaheadTimeout = window.setTimeout(() => {
|
|
432
439
|
this._typeaheadBuffer = "";
|
|
433
440
|
}, 500);
|
|
434
|
-
const matchIndex = this.options.findIndex(opt => opt.label.toLowerCase().startsWith(this._typeaheadBuffer));
|
|
441
|
+
const matchIndex = this.options.findIndex((opt) => opt.label.toLowerCase().startsWith(this._typeaheadBuffer));
|
|
435
442
|
if (matchIndex >= 0) {
|
|
436
443
|
if (this._open) {
|
|
437
444
|
this._highlightedIndex = matchIndex;
|
|
@@ -450,9 +457,10 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
450
457
|
_highlightPrevious() {
|
|
451
458
|
if (this.options.length === 0)
|
|
452
459
|
return;
|
|
453
|
-
this._highlightedIndex =
|
|
454
|
-
|
|
455
|
-
|
|
460
|
+
this._highlightedIndex =
|
|
461
|
+
this._highlightedIndex <= 0
|
|
462
|
+
? this.options.length - 1
|
|
463
|
+
: this._highlightedIndex - 1;
|
|
456
464
|
this._scrollToHighlighted();
|
|
457
465
|
}
|
|
458
466
|
_highlightFirst() {
|
|
@@ -469,8 +477,8 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
469
477
|
}
|
|
470
478
|
_scrollToHighlighted() {
|
|
471
479
|
requestAnimationFrame(() => {
|
|
472
|
-
const highlighted = this._listbox?.querySelector(
|
|
473
|
-
highlighted?.scrollIntoView({ block:
|
|
480
|
+
const highlighted = this._listbox?.querySelector(".option--highlighted");
|
|
481
|
+
highlighted?.scrollIntoView({ block: "nearest" });
|
|
474
482
|
});
|
|
475
483
|
}
|
|
476
484
|
_handleOptionClick(option, event) {
|
|
@@ -494,14 +502,14 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
494
502
|
}
|
|
495
503
|
connectedCallback() {
|
|
496
504
|
super.connectedCallback();
|
|
497
|
-
document.addEventListener(
|
|
505
|
+
document.addEventListener("click", this._handleClickOutside);
|
|
498
506
|
}
|
|
499
507
|
disconnectedCallback() {
|
|
500
508
|
super.disconnectedCallback();
|
|
501
|
-
document.removeEventListener(
|
|
509
|
+
document.removeEventListener("click", this._handleClickOutside);
|
|
502
510
|
}
|
|
503
511
|
willUpdate(changed) {
|
|
504
|
-
if (this.hasUpdated &&
|
|
512
|
+
if (this.hasUpdated && changed.has("errorText")) {
|
|
505
513
|
this._announceError = !!this.errorText;
|
|
506
514
|
}
|
|
507
515
|
}
|
|
@@ -519,7 +527,7 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
519
527
|
<div class="label-container">
|
|
520
528
|
${this.label
|
|
521
529
|
? html `
|
|
522
|
-
<label
|
|
530
|
+
<label
|
|
523
531
|
id=${this._labelId}
|
|
524
532
|
class="label ${this.required ? "label--required" : ""}"
|
|
525
533
|
>
|
|
@@ -531,9 +539,22 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
531
539
|
|
|
532
540
|
${hasError
|
|
533
541
|
? html `
|
|
534
|
-
<div
|
|
535
|
-
|
|
536
|
-
|
|
542
|
+
<div
|
|
543
|
+
id=${this._errorId}
|
|
544
|
+
class="error-message"
|
|
545
|
+
role=${this._announceError ? "alert" : nothing}
|
|
546
|
+
>
|
|
547
|
+
<svg
|
|
548
|
+
class="error-icon"
|
|
549
|
+
viewBox="0 0 20 20"
|
|
550
|
+
fill="currentColor"
|
|
551
|
+
aria-hidden="true"
|
|
552
|
+
>
|
|
553
|
+
<path
|
|
554
|
+
fill-rule="evenodd"
|
|
555
|
+
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"
|
|
556
|
+
clip-rule="evenodd"
|
|
557
|
+
/>
|
|
537
558
|
</svg>
|
|
538
559
|
${this.errorText}
|
|
539
560
|
</div>
|
|
@@ -553,27 +574,39 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
553
574
|
: nothing}
|
|
554
575
|
aria-required=${this.required ? "true" : nothing}
|
|
555
576
|
aria-invalid=${hasError ? "true" : nothing}
|
|
556
|
-
aria-describedby=${hasError
|
|
577
|
+
aria-describedby=${hasError
|
|
578
|
+
? this._errorId
|
|
579
|
+
: this.helperText
|
|
580
|
+
? this._helperId
|
|
581
|
+
: nothing}
|
|
557
582
|
@click=${this._handleTriggerClick}
|
|
558
583
|
@keydown=${this._handleTriggerKeydown}
|
|
559
584
|
@focus=${this._handleFocus}
|
|
560
585
|
@blur=${this._handleBlur}
|
|
561
586
|
>
|
|
562
|
-
<span
|
|
587
|
+
<span
|
|
588
|
+
class="trigger__text ${!selectedLabel
|
|
589
|
+
? "trigger__text--placeholder"
|
|
590
|
+
: ""}"
|
|
591
|
+
>
|
|
563
592
|
${selectedLabel || this.placeholder}
|
|
564
593
|
</span>
|
|
565
|
-
<svg
|
|
566
|
-
class="trigger__icon ${this._open ?
|
|
567
|
-
viewBox="0 0 20 20"
|
|
594
|
+
<svg
|
|
595
|
+
class="trigger__icon ${this._open ? "trigger__icon--open" : ""}"
|
|
596
|
+
viewBox="0 0 20 20"
|
|
568
597
|
fill="currentColor"
|
|
569
598
|
aria-hidden="true"
|
|
570
599
|
>
|
|
571
|
-
<path
|
|
600
|
+
<path
|
|
601
|
+
fill-rule="evenodd"
|
|
602
|
+
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
|
|
603
|
+
clip-rule="evenodd"
|
|
604
|
+
/>
|
|
572
605
|
</svg>
|
|
573
606
|
</button>
|
|
574
607
|
|
|
575
|
-
<ul
|
|
576
|
-
class="dropdown ${this._open ?
|
|
608
|
+
<ul
|
|
609
|
+
class="dropdown ${this._open ? "dropdown--open" : ""}"
|
|
577
610
|
role="listbox"
|
|
578
611
|
id=${this._listboxId}
|
|
579
612
|
aria-labelledby=${this.label ? this._labelId : nothing}
|
|
@@ -602,7 +635,9 @@ let OhSelect = class OhSelect extends OhElement {
|
|
|
602
635
|
</ul>
|
|
603
636
|
|
|
604
637
|
${this.helperText && !hasError
|
|
605
|
-
? html `<span class="helper"
|
|
638
|
+
? html `<span id=${this._helperId} class="helper"
|
|
639
|
+
>${this.helperText}</span
|
|
640
|
+
>`
|
|
606
641
|
: nothing}
|
|
607
642
|
</div>
|
|
608
643
|
`;
|
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,EAAuB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQ3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;
|
|
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,4BAqFpB;IAGF,IAAI,SAAW;IAGf,IAAI,SAA0B;IAE9B,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
|
package/dist/oh-skip-link.js
CHANGED
|
@@ -61,7 +61,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
61
61
|
pointer-events: none;
|
|
62
62
|
|
|
63
63
|
/* Smooth transition */
|
|
64
|
-
transition:
|
|
64
|
+
transition:
|
|
65
65
|
opacity var(--oh-motion-gentle) ease,
|
|
66
66
|
transform var(--oh-motion-gentle) ease;
|
|
67
67
|
|
|
@@ -71,7 +71,8 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
71
71
|
background-color: var(--oh-color-surface-base);
|
|
72
72
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
73
73
|
border-radius: var(--oh-shape-control);
|
|
74
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
74
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
75
|
+
0 0 var(--oh-shadow-neutral);
|
|
75
76
|
|
|
76
77
|
font-family: var(--oh-typography-body-font-family);
|
|
77
78
|
font-size: var(--oh-typography-body-base-font-size);
|
|
@@ -80,7 +81,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
80
81
|
text-decoration: none;
|
|
81
82
|
|
|
82
83
|
/* Focus state */
|
|
83
|
-
transition:
|
|
84
|
+
transition:
|
|
84
85
|
opacity var(--oh-motion-gentle) ease,
|
|
85
86
|
transform var(--oh-motion-gentle) ease,
|
|
86
87
|
background-color var(--oh-motion-quick) ease,
|
|
@@ -96,7 +97,8 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
96
97
|
background-color: var(--oh-color-surface-raised);
|
|
97
98
|
color: var(--oh-color-text-link-raised);
|
|
98
99
|
border-color: var(--oh-color-brand-primary);
|
|
99
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
100
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
101
|
+
0 0 var(--oh-shadow-primary);
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
/* Screen reader only when not focused */
|
|
@@ -123,11 +125,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
|
|
|
123
125
|
]; }
|
|
124
126
|
render() {
|
|
125
127
|
return html `
|
|
126
|
-
<a
|
|
127
|
-
class="skip-link"
|
|
128
|
-
href=${this.href}
|
|
129
|
-
aria-label=${this.text}
|
|
130
|
-
>
|
|
128
|
+
<a class="skip-link" href=${this.href} aria-label=${this.text}>
|
|
131
129
|
${this.text}
|
|
132
130
|
</a>
|
|
133
131
|
`;
|
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;;QAyFL,SAAI,GAAG,OAAO,CAAC;QAGf,SAAI,GAAG,sBAAsB,CAAC;IAShC,CAAC;aApGiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;KACF,AArFqB,CAqFpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,IAAI;UACzD,IAAI,CAAC,IAAI;;KAEd,CAAC;IACJ,CAAC;;AAXD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACG;AA5FnB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAqGtB"}
|
package/dist/oh-tabs.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-tabs.d.ts","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-tabs.d.ts","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAyKpB;IAEF;;OAEG;IAEH,IAAI,EAAE,OAAO,EAAE,CAAM;IAErB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAK;IAE1B;;OAEG;IACH,OAAO,CAAC,SAAS,CAAwD;IAEhE,iBAAiB;IAajB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAUxD;;;OAGG;YACW,cAAc;IAuE5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAMjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAelB;;OAEG;IACH,OAAO,CAAC,eAAe;IAKvB,MAAM;CA2DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-tabs.js
CHANGED
|
@@ -98,14 +98,14 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
98
98
|
border-bottom: none;
|
|
99
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 */
|
|
103
103
|
box-shadow: none;
|
|
104
|
-
|
|
104
|
+
|
|
105
105
|
/* Position above the border line */
|
|
106
106
|
margin-bottom: -2.5px;
|
|
107
|
-
|
|
108
|
-
transition:
|
|
107
|
+
|
|
108
|
+
transition:
|
|
109
109
|
color var(--oh-motion-snappy) ease,
|
|
110
110
|
background-color var(--oh-motion-snappy) ease,
|
|
111
111
|
border-color var(--oh-motion-snappy) ease,
|
|
@@ -118,7 +118,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
.tab:not([aria-selected="true"]) .tab__label::after {
|
|
121
|
-
content:
|
|
121
|
+
content: "";
|
|
122
122
|
position: absolute;
|
|
123
123
|
left: 0;
|
|
124
124
|
right: 0;
|
|
@@ -192,7 +192,8 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
192
192
|
padding: var(--oh-spacing-6);
|
|
193
193
|
background: var(--oh-color-surface-base);
|
|
194
194
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
195
|
-
border-radius: 0 var(--oh-shape-container) var(--oh-shape-container)
|
|
195
|
+
border-radius: 0 var(--oh-shape-container) var(--oh-shape-container)
|
|
196
|
+
var(--oh-shape-container);
|
|
196
197
|
color: var(--oh-color-text-primary);
|
|
197
198
|
}
|
|
198
199
|
|
|
@@ -233,10 +234,12 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
233
234
|
this.selected = this.tabs[0].id;
|
|
234
235
|
}
|
|
235
236
|
// Set initial focused index to match selected
|
|
236
|
-
this._focusedIndex = Math.max(0, this.tabs.findIndex(t => t.id === this.selected));
|
|
237
|
+
this._focusedIndex = Math.max(0, this.tabs.findIndex((t) => t.id === this.selected));
|
|
237
238
|
}
|
|
238
239
|
updated(changedProperties) {
|
|
239
|
-
if (changedProperties.has("tabs") &&
|
|
240
|
+
if (changedProperties.has("tabs") &&
|
|
241
|
+
this.tabs.length > 0 &&
|
|
242
|
+
!this.selected) {
|
|
240
243
|
this.selected = this.tabs[0].id;
|
|
241
244
|
}
|
|
242
245
|
}
|
|
@@ -255,25 +258,29 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
255
258
|
switch (key) {
|
|
256
259
|
case "ArrowLeft":
|
|
257
260
|
if (this.orientation === "horizontal") {
|
|
258
|
-
newIndex =
|
|
261
|
+
newIndex =
|
|
262
|
+
this._focusedIndex === 0 ? tabCount - 1 : this._focusedIndex - 1;
|
|
259
263
|
handled = true;
|
|
260
264
|
}
|
|
261
265
|
break;
|
|
262
266
|
case "ArrowRight":
|
|
263
267
|
if (this.orientation === "horizontal") {
|
|
264
|
-
newIndex =
|
|
268
|
+
newIndex =
|
|
269
|
+
this._focusedIndex === tabCount - 1 ? 0 : this._focusedIndex + 1;
|
|
265
270
|
handled = true;
|
|
266
271
|
}
|
|
267
272
|
break;
|
|
268
273
|
case "ArrowUp":
|
|
269
274
|
if (this.orientation === "vertical") {
|
|
270
|
-
newIndex =
|
|
275
|
+
newIndex =
|
|
276
|
+
this._focusedIndex === 0 ? tabCount - 1 : this._focusedIndex - 1;
|
|
271
277
|
handled = true;
|
|
272
278
|
}
|
|
273
279
|
break;
|
|
274
280
|
case "ArrowDown":
|
|
275
281
|
if (this.orientation === "vertical") {
|
|
276
|
-
newIndex =
|
|
282
|
+
newIndex =
|
|
283
|
+
this._focusedIndex === tabCount - 1 ? 0 : this._focusedIndex + 1;
|
|
277
284
|
handled = true;
|
|
278
285
|
}
|
|
279
286
|
break;
|
|
@@ -319,7 +326,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
319
326
|
* Focus a specific tab button
|
|
320
327
|
*/
|
|
321
328
|
_focusTab(index) {
|
|
322
|
-
const tabButtons = this.shadowRoot?.querySelectorAll(
|
|
329
|
+
const tabButtons = this.shadowRoot?.querySelectorAll(".tab");
|
|
323
330
|
tabButtons?.[index]?.focus();
|
|
324
331
|
}
|
|
325
332
|
/**
|
|
@@ -328,7 +335,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
328
335
|
_selectTab(tabId) {
|
|
329
336
|
if (this.selected !== tabId) {
|
|
330
337
|
this.selected = tabId;
|
|
331
|
-
this._focusedIndex = this.tabs.findIndex(t => t.id === tabId);
|
|
338
|
+
this._focusedIndex = this.tabs.findIndex((t) => t.id === tabId);
|
|
332
339
|
this.dispatchEvent(new CustomEvent("tab-change", {
|
|
333
340
|
detail: { tabId },
|
|
334
341
|
bubbles: true,
|
|
@@ -347,7 +354,7 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
347
354
|
return html `
|
|
348
355
|
<div class="tabs-container">
|
|
349
356
|
<!-- Tab List -->
|
|
350
|
-
<div
|
|
357
|
+
<div
|
|
351
358
|
class="tablist"
|
|
352
359
|
role="tablist"
|
|
353
360
|
aria-orientation=${this.orientation}
|
|
@@ -381,7 +388,9 @@ let OhTabs = class OhTabs extends OhElement {
|
|
|
381
388
|
const isFirstTabSelected = this.tabs.length > 0 && this.selected === this.tabs[0].id;
|
|
382
389
|
return html `
|
|
383
390
|
<div
|
|
384
|
-
class="tabpanel ${!isFirstTabSelected
|
|
391
|
+
class="tabpanel ${!isFirstTabSelected
|
|
392
|
+
? "tabpanel--rounded-top-left"
|
|
393
|
+
: ""}"
|
|
385
394
|
role="tabpanel"
|
|
386
395
|
id=${panelId}
|
|
387
396
|
aria-labelledby=${tabId}
|
package/dist/oh-tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-tabs.js","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;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;AAS3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;
|
|
1
|
+
{"version":3,"file":"oh-tabs.js","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* oh-textarea
|
|
3
|
+
*
|
|
4
|
+
* A multi-line text field for messages, comments and feedback. The same
|
|
5
|
+
* chunky, inset field as oh-input, and the first OHDS control that takes
|
|
6
|
+
* part in a native <form>.
|
|
7
|
+
*
|
|
8
|
+
* DESIGN DECISIONS:
|
|
9
|
+
* ─────────────────
|
|
10
|
+
* 1. SAME FAMILY AS oh-input
|
|
11
|
+
* - Thick border (stroke.control), inset shadow, shape.control corners
|
|
12
|
+
* - Focus thickens the border inward with an inset ring in
|
|
13
|
+
* focus.ringColor; background switches to color.surface.highlight
|
|
14
|
+
*
|
|
15
|
+
* 2. ON THE GRID
|
|
16
|
+
* - Line height is 1.5 times the text size, rounded up to the brand's
|
|
17
|
+
* grid (grid.unit), so every line of a long message sits on it
|
|
18
|
+
*
|
|
19
|
+
* 3. A REAL FORM CONTROL
|
|
20
|
+
* - Form-associated: its value submits with the form under its name,
|
|
21
|
+
* `required` blocks submission with the browser's own message, a
|
|
22
|
+
* form reset restores the starting text, and a disabled <fieldset>
|
|
23
|
+
* disables it
|
|
24
|
+
*
|
|
25
|
+
* 4. ERRORS BEFORE THE FIELD
|
|
26
|
+
* - Error text sits after the label and before the field, with an icon,
|
|
27
|
+
* so it's read before the field is reached. Helper text sits after
|
|
28
|
+
*/
|
|
29
|
+
import { type PropertyValues } from "lit";
|
|
30
|
+
import { OhElement } from "./base.js";
|
|
31
|
+
/**
|
|
32
|
+
* A multi-line text field that submits with a native form.
|
|
33
|
+
*
|
|
34
|
+
* @element oh-textarea
|
|
35
|
+
* @fires oh-input - On every keystroke. detail: { value, originalEvent }
|
|
36
|
+
* @fires oh-change - When the value is committed (on blur). detail: { value, originalEvent }
|
|
37
|
+
* @csspart label - The visible label
|
|
38
|
+
* @csspart textarea - The text field
|
|
39
|
+
* @csspart helper - The helper text
|
|
40
|
+
* @csspart error - The error message
|
|
41
|
+
*/
|
|
42
|
+
export declare class OhTextarea extends OhElement {
|
|
43
|
+
static formAssociated: boolean;
|
|
44
|
+
static styles: import("lit").CSSResult[];
|
|
45
|
+
/** The visible label. Always set one: it names the field. */
|
|
46
|
+
label: string;
|
|
47
|
+
/** The text in the field */
|
|
48
|
+
value: string;
|
|
49
|
+
/** Example text shown while the field is empty. Not a replacement for the label */
|
|
50
|
+
placeholder: string;
|
|
51
|
+
/** Help shown under the field and linked to it */
|
|
52
|
+
helperText: string;
|
|
53
|
+
/** Error shown before the field and linked to it. Setting it puts the field in its error state */
|
|
54
|
+
errorText: string;
|
|
55
|
+
/** The name the value is submitted under */
|
|
56
|
+
name: string;
|
|
57
|
+
/** Must be filled in before the form submits */
|
|
58
|
+
required: boolean;
|
|
59
|
+
/** Not editable, and left out of the form's data */
|
|
60
|
+
disabled: boolean;
|
|
61
|
+
/** Visible lines of text before the field scrolls (people can drag it taller) */
|
|
62
|
+
rows: number;
|
|
63
|
+
/** Longest allowed text, in characters */
|
|
64
|
+
maxlength?: number;
|
|
65
|
+
/** The field's purpose for autofill and assistive tech (WCAG 1.3.5), e.g. "street-address" */
|
|
66
|
+
autocomplete?: string;
|
|
67
|
+
private _textarea;
|
|
68
|
+
private _internals;
|
|
69
|
+
/** The starting text, restored when the form resets */
|
|
70
|
+
private _defaultValue;
|
|
71
|
+
/** Set when a disabled <fieldset> around it disables it */
|
|
72
|
+
private _formDisabled;
|
|
73
|
+
/**
|
|
74
|
+
* Errors that appear after first render (e.g. on submit) are announced via
|
|
75
|
+
* role="alert". Errors present on page load are only linked with
|
|
76
|
+
* aria-describedby, so they aren't read out unprompted.
|
|
77
|
+
*/
|
|
78
|
+
private _announceError;
|
|
79
|
+
connectedCallback(): void;
|
|
80
|
+
/** The form this field belongs to */
|
|
81
|
+
get form(): HTMLFormElement | null;
|
|
82
|
+
focus(options?: FocusOptions): void;
|
|
83
|
+
blur(): void;
|
|
84
|
+
formResetCallback(): void;
|
|
85
|
+
formDisabledCallback(disabled: boolean): void;
|
|
86
|
+
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
87
|
+
willUpdate(changed: PropertyValues): void;
|
|
88
|
+
updated(changed: PropertyValues): void;
|
|
89
|
+
private _handleInput;
|
|
90
|
+
private _handleChange;
|
|
91
|
+
render(): import("lit").TemplateResult<1>;
|
|
92
|
+
}
|
|
93
|
+
declare global {
|
|
94
|
+
interface HTMLElementTagNameMap {
|
|
95
|
+
"oh-textarea": OhTextarea;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
//# sourceMappingURL=oh-textarea.d.ts.map
|