@aurodesignsystem-dev/auro-formkit 0.0.0-pr1411.0 → 0.0.0-pr1411.2
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/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +27 -7
- package/components/combobox/demo/index.min.js +27 -7
- package/components/combobox/dist/index.js +27 -7
- package/components/combobox/dist/registered.js +27 -7
- package/components/counter/demo/api.min.js +26 -6
- package/components/counter/demo/index.min.js +26 -6
- package/components/counter/dist/index.js +26 -6
- package/components/counter/dist/registered.js +26 -6
- package/components/datepicker/demo/api.min.js +27 -7
- package/components/datepicker/demo/index.min.js +27 -7
- package/components/datepicker/dist/index.js +27 -7
- package/components/datepicker/dist/registered.js +27 -7
- package/components/dropdown/demo/api.md +29 -28
- package/components/dropdown/demo/api.min.js +25 -5
- package/components/dropdown/demo/index.min.js +25 -5
- package/components/dropdown/dist/auro-dropdown.d.ts +8 -0
- package/components/dropdown/dist/index.js +25 -5
- package/components/dropdown/dist/registered.js +25 -5
- package/components/form/demo/api.min.js +159 -54
- package/components/form/demo/index.min.js +159 -54
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +76 -31
- package/components/select/demo/index.min.js +76 -31
- package/components/select/dist/index.js +76 -31
- package/components/select/dist/registered.js +76 -31
- package/components/select/dist/selectKeyboardStrategy.d.ts +4 -3
- package/custom-elements.json +20 -1
- package/package.json +5 -5
|
@@ -1248,41 +1248,48 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1248
1248
|
}
|
|
1249
1249
|
}
|
|
1250
1250
|
|
|
1251
|
+
/* eslint-disable new-cap */
|
|
1252
|
+
|
|
1251
1253
|
const selectKeyboardStrategy = {
|
|
1252
1254
|
ArrowUp(component, evt, ctx) {
|
|
1253
|
-
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1254
1255
|
evt.preventDefault();
|
|
1255
|
-
if (evt.altKey || evt.metaKey)
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
});
|
|
1260
|
-
} else {
|
|
1261
|
-
component.dropdown.show();
|
|
1256
|
+
if (evt.altKey || evt.metaKey) {
|
|
1257
|
+
// navigate to first enabled option
|
|
1258
|
+
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
1259
|
+
return;
|
|
1262
1260
|
}
|
|
1261
|
+
navigateArrow(component, 'up', {
|
|
1262
|
+
ctx,
|
|
1263
|
+
showFn: () => component.dropdown.show(),
|
|
1264
|
+
});
|
|
1263
1265
|
},
|
|
1264
1266
|
|
|
1265
1267
|
ArrowDown(component, evt, ctx) {
|
|
1266
|
-
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1267
1268
|
evt.preventDefault();
|
|
1268
|
-
if (evt.altKey || evt.metaKey)
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
});
|
|
1273
|
-
} else {
|
|
1274
|
-
component.dropdown.show();
|
|
1269
|
+
if (evt.altKey || evt.metaKey) {
|
|
1270
|
+
// navigate to last enabled option
|
|
1271
|
+
selectKeyboardStrategy.End(component, evt, ctx);
|
|
1272
|
+
return;
|
|
1275
1273
|
}
|
|
1274
|
+
navigateArrow(component, 'down', {
|
|
1275
|
+
ctx,
|
|
1276
|
+
showFn: () => component.dropdown.show(),
|
|
1277
|
+
});
|
|
1276
1278
|
},
|
|
1277
1279
|
|
|
1278
1280
|
Enter(component, evt, ctx) {
|
|
1279
|
-
if (!ctx.isExpanded
|
|
1280
|
-
component.
|
|
1281
|
-
|
|
1282
|
-
// for modal, isExpanded is always true
|
|
1283
|
-
// defaultPrevented will be true if Floating UI has already handled the event to open the dropdown
|
|
1284
|
-
component.menu.makeSelection();
|
|
1281
|
+
if (!ctx.isExpanded) {
|
|
1282
|
+
component.dropdown.show();
|
|
1283
|
+
return;
|
|
1285
1284
|
}
|
|
1285
|
+
component.menu.makeSelection();
|
|
1286
|
+
},
|
|
1287
|
+
|
|
1288
|
+
Escape(component, evt, ctx) {
|
|
1289
|
+
if (!ctx.isExpanded) {
|
|
1290
|
+
return;
|
|
1291
|
+
}
|
|
1292
|
+
component.dropdown.hide();
|
|
1286
1293
|
},
|
|
1287
1294
|
|
|
1288
1295
|
Tab(component, evt, ctx) {
|
|
@@ -1297,7 +1304,10 @@ const selectKeyboardStrategy = {
|
|
|
1297
1304
|
}
|
|
1298
1305
|
component.dropdown.hide();
|
|
1299
1306
|
},
|
|
1300
|
-
Home(component, evt) {
|
|
1307
|
+
Home(component, evt, ctx) {
|
|
1308
|
+
if (!ctx.isExpanded) {
|
|
1309
|
+
return;
|
|
1310
|
+
}
|
|
1301
1311
|
evt.preventDefault();
|
|
1302
1312
|
evt.stopPropagation();
|
|
1303
1313
|
const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
@@ -1306,7 +1316,10 @@ const selectKeyboardStrategy = {
|
|
|
1306
1316
|
}
|
|
1307
1317
|
},
|
|
1308
1318
|
|
|
1309
|
-
End(component, evt) {
|
|
1319
|
+
End(component, evt, ctx) {
|
|
1320
|
+
if (!ctx.isExpanded) {
|
|
1321
|
+
return;
|
|
1322
|
+
}
|
|
1310
1323
|
evt.preventDefault();
|
|
1311
1324
|
evt.stopPropagation();
|
|
1312
1325
|
const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
|
|
@@ -1315,8 +1328,17 @@ const selectKeyboardStrategy = {
|
|
|
1315
1328
|
}
|
|
1316
1329
|
},
|
|
1317
1330
|
|
|
1318
|
-
default(component, evt) {
|
|
1331
|
+
default(component, evt, ctx) {
|
|
1319
1332
|
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1333
|
+
if (evt.key === ' ') {
|
|
1334
|
+
evt.preventDefault();
|
|
1335
|
+
evt.stopPropagation();
|
|
1336
|
+
if (ctx.isExpanded) {
|
|
1337
|
+
component.dropdown.hide();
|
|
1338
|
+
return;
|
|
1339
|
+
}
|
|
1340
|
+
component.dropdown.show();
|
|
1341
|
+
}
|
|
1320
1342
|
},
|
|
1321
1343
|
};
|
|
1322
1344
|
|
|
@@ -3149,6 +3171,11 @@ class AuroFloatingUI {
|
|
|
3149
3171
|
this.clickHandler = null;
|
|
3150
3172
|
this.keyDownHandler = null;
|
|
3151
3173
|
|
|
3174
|
+
/**
|
|
3175
|
+
* @private
|
|
3176
|
+
*/
|
|
3177
|
+
this.enableKeyboardHandling = true;
|
|
3178
|
+
|
|
3152
3179
|
/**
|
|
3153
3180
|
* @private
|
|
3154
3181
|
*/
|
|
@@ -3483,7 +3510,9 @@ class AuroFloatingUI {
|
|
|
3483
3510
|
document.addEventListener("focusin", this.focusHandler);
|
|
3484
3511
|
}
|
|
3485
3512
|
|
|
3486
|
-
|
|
3513
|
+
if (this.enableKeyboardHandling) {
|
|
3514
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
3515
|
+
}
|
|
3487
3516
|
|
|
3488
3517
|
// send this task to the end of queue to prevent conflicting
|
|
3489
3518
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -3739,8 +3768,9 @@ class AuroFloatingUI {
|
|
|
3739
3768
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
3740
3769
|
}
|
|
3741
3770
|
|
|
3742
|
-
configure(elem, eventPrefix) {
|
|
3771
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
3743
3772
|
AuroFloatingUI.setupMousePressChecker();
|
|
3773
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
3744
3774
|
|
|
3745
3775
|
this.eventPrefix = eventPrefix;
|
|
3746
3776
|
if (this.element !== elem) {
|
|
@@ -3773,7 +3803,9 @@ class AuroFloatingUI {
|
|
|
3773
3803
|
|
|
3774
3804
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3775
3805
|
if (this.element.trigger) {
|
|
3776
|
-
|
|
3806
|
+
if (this.enableKeyboardHandling) {
|
|
3807
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3808
|
+
}
|
|
3777
3809
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
3778
3810
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3779
3811
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -4927,7 +4959,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4927
4959
|
}
|
|
4928
4960
|
};
|
|
4929
4961
|
|
|
4930
|
-
var formkitVersion$1 = '
|
|
4962
|
+
var formkitVersion$1 = '202604021752';
|
|
4931
4963
|
|
|
4932
4964
|
class AuroElement extends LitElement {
|
|
4933
4965
|
static get properties() {
|
|
@@ -5108,6 +5140,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5108
5140
|
this.appearance = 'default';
|
|
5109
5141
|
this.chevron = false;
|
|
5110
5142
|
this.disabled = false;
|
|
5143
|
+
this.disableKeyboardHandling = false;
|
|
5111
5144
|
this.error = false;
|
|
5112
5145
|
this.tabIndex = 0;
|
|
5113
5146
|
this.noToggle = false;
|
|
@@ -5319,6 +5352,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5319
5352
|
reflect: true
|
|
5320
5353
|
},
|
|
5321
5354
|
|
|
5355
|
+
/**
|
|
5356
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5357
|
+
*/
|
|
5358
|
+
disableKeyboardHandling: {
|
|
5359
|
+
type: Boolean,
|
|
5360
|
+
reflect: true
|
|
5361
|
+
},
|
|
5362
|
+
|
|
5322
5363
|
/**
|
|
5323
5364
|
* @private
|
|
5324
5365
|
*/
|
|
@@ -5624,7 +5665,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5624
5665
|
|
|
5625
5666
|
firstUpdated() {
|
|
5626
5667
|
// Configure the floater to, this will generate the ID for the bib
|
|
5627
|
-
this.floater.configure(this, 'auroDropdown');
|
|
5668
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
5628
5669
|
|
|
5629
5670
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5630
5671
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -5932,6 +5973,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5932
5973
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5933
5974
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
5934
5975
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
5976
|
+
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
5935
5977
|
@focusin="${this.handleFocusin}"
|
|
5936
5978
|
@blur="${this.handleFocusOut}">
|
|
5937
5979
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -6670,7 +6712,7 @@ class AuroHelpText extends LitElement {
|
|
|
6670
6712
|
}
|
|
6671
6713
|
}
|
|
6672
6714
|
|
|
6673
|
-
var formkitVersion = '
|
|
6715
|
+
var formkitVersion = '202604021752';
|
|
6674
6716
|
|
|
6675
6717
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6676
6718
|
|
|
@@ -7923,6 +7965,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7923
7965
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
7924
7966
|
</div>
|
|
7925
7967
|
<${this.dropdownTag}
|
|
7968
|
+
disableKeyboardHandling
|
|
7926
7969
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
7927
7970
|
.a11yRole=${"combobox"}
|
|
7928
7971
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -8002,6 +8045,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8002
8045
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
8003
8046
|
</div>
|
|
8004
8047
|
<${this.dropdownTag}
|
|
8048
|
+
disableKeyboardHandling
|
|
8005
8049
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8006
8050
|
.a11yRole=${"combobox"}
|
|
8007
8051
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -8087,6 +8131,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8087
8131
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
8088
8132
|
</div>
|
|
8089
8133
|
<${this.dropdownTag}
|
|
8134
|
+
disableKeyboardHandling
|
|
8090
8135
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8091
8136
|
.a11yRole=${"combobox"}
|
|
8092
8137
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -1248,41 +1248,48 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1248
1248
|
}
|
|
1249
1249
|
}
|
|
1250
1250
|
|
|
1251
|
+
/* eslint-disable new-cap */
|
|
1252
|
+
|
|
1251
1253
|
const selectKeyboardStrategy = {
|
|
1252
1254
|
ArrowUp(component, evt, ctx) {
|
|
1253
|
-
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1254
1255
|
evt.preventDefault();
|
|
1255
|
-
if (evt.altKey || evt.metaKey)
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
});
|
|
1260
|
-
} else {
|
|
1261
|
-
component.dropdown.show();
|
|
1256
|
+
if (evt.altKey || evt.metaKey) {
|
|
1257
|
+
// navigate to first enabled option
|
|
1258
|
+
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
1259
|
+
return;
|
|
1262
1260
|
}
|
|
1261
|
+
navigateArrow(component, 'up', {
|
|
1262
|
+
ctx,
|
|
1263
|
+
showFn: () => component.dropdown.show(),
|
|
1264
|
+
});
|
|
1263
1265
|
},
|
|
1264
1266
|
|
|
1265
1267
|
ArrowDown(component, evt, ctx) {
|
|
1266
|
-
// Navigate menu only if the bib is open, otherwise open the bib
|
|
1267
1268
|
evt.preventDefault();
|
|
1268
|
-
if (evt.altKey || evt.metaKey)
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
});
|
|
1273
|
-
} else {
|
|
1274
|
-
component.dropdown.show();
|
|
1269
|
+
if (evt.altKey || evt.metaKey) {
|
|
1270
|
+
// navigate to last enabled option
|
|
1271
|
+
selectKeyboardStrategy.End(component, evt, ctx);
|
|
1272
|
+
return;
|
|
1275
1273
|
}
|
|
1274
|
+
navigateArrow(component, 'down', {
|
|
1275
|
+
ctx,
|
|
1276
|
+
showFn: () => component.dropdown.show(),
|
|
1277
|
+
});
|
|
1276
1278
|
},
|
|
1277
1279
|
|
|
1278
1280
|
Enter(component, evt, ctx) {
|
|
1279
|
-
if (!ctx.isExpanded
|
|
1280
|
-
component.
|
|
1281
|
-
|
|
1282
|
-
// for modal, isExpanded is always true
|
|
1283
|
-
// defaultPrevented will be true if Floating UI has already handled the event to open the dropdown
|
|
1284
|
-
component.menu.makeSelection();
|
|
1281
|
+
if (!ctx.isExpanded) {
|
|
1282
|
+
component.dropdown.show();
|
|
1283
|
+
return;
|
|
1285
1284
|
}
|
|
1285
|
+
component.menu.makeSelection();
|
|
1286
|
+
},
|
|
1287
|
+
|
|
1288
|
+
Escape(component, evt, ctx) {
|
|
1289
|
+
if (!ctx.isExpanded) {
|
|
1290
|
+
return;
|
|
1291
|
+
}
|
|
1292
|
+
component.dropdown.hide();
|
|
1286
1293
|
},
|
|
1287
1294
|
|
|
1288
1295
|
Tab(component, evt, ctx) {
|
|
@@ -1297,7 +1304,10 @@ const selectKeyboardStrategy = {
|
|
|
1297
1304
|
}
|
|
1298
1305
|
component.dropdown.hide();
|
|
1299
1306
|
},
|
|
1300
|
-
Home(component, evt) {
|
|
1307
|
+
Home(component, evt, ctx) {
|
|
1308
|
+
if (!ctx.isExpanded) {
|
|
1309
|
+
return;
|
|
1310
|
+
}
|
|
1301
1311
|
evt.preventDefault();
|
|
1302
1312
|
evt.stopPropagation();
|
|
1303
1313
|
const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
@@ -1306,7 +1316,10 @@ const selectKeyboardStrategy = {
|
|
|
1306
1316
|
}
|
|
1307
1317
|
},
|
|
1308
1318
|
|
|
1309
|
-
End(component, evt) {
|
|
1319
|
+
End(component, evt, ctx) {
|
|
1320
|
+
if (!ctx.isExpanded) {
|
|
1321
|
+
return;
|
|
1322
|
+
}
|
|
1310
1323
|
evt.preventDefault();
|
|
1311
1324
|
evt.stopPropagation();
|
|
1312
1325
|
const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
|
|
@@ -1315,8 +1328,17 @@ const selectKeyboardStrategy = {
|
|
|
1315
1328
|
}
|
|
1316
1329
|
},
|
|
1317
1330
|
|
|
1318
|
-
default(component, evt) {
|
|
1331
|
+
default(component, evt, ctx) {
|
|
1319
1332
|
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1333
|
+
if (evt.key === ' ') {
|
|
1334
|
+
evt.preventDefault();
|
|
1335
|
+
evt.stopPropagation();
|
|
1336
|
+
if (ctx.isExpanded) {
|
|
1337
|
+
component.dropdown.hide();
|
|
1338
|
+
return;
|
|
1339
|
+
}
|
|
1340
|
+
component.dropdown.show();
|
|
1341
|
+
}
|
|
1320
1342
|
},
|
|
1321
1343
|
};
|
|
1322
1344
|
|
|
@@ -3149,6 +3171,11 @@ class AuroFloatingUI {
|
|
|
3149
3171
|
this.clickHandler = null;
|
|
3150
3172
|
this.keyDownHandler = null;
|
|
3151
3173
|
|
|
3174
|
+
/**
|
|
3175
|
+
* @private
|
|
3176
|
+
*/
|
|
3177
|
+
this.enableKeyboardHandling = true;
|
|
3178
|
+
|
|
3152
3179
|
/**
|
|
3153
3180
|
* @private
|
|
3154
3181
|
*/
|
|
@@ -3483,7 +3510,9 @@ class AuroFloatingUI {
|
|
|
3483
3510
|
document.addEventListener("focusin", this.focusHandler);
|
|
3484
3511
|
}
|
|
3485
3512
|
|
|
3486
|
-
|
|
3513
|
+
if (this.enableKeyboardHandling) {
|
|
3514
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
3515
|
+
}
|
|
3487
3516
|
|
|
3488
3517
|
// send this task to the end of queue to prevent conflicting
|
|
3489
3518
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -3739,8 +3768,9 @@ class AuroFloatingUI {
|
|
|
3739
3768
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
3740
3769
|
}
|
|
3741
3770
|
|
|
3742
|
-
configure(elem, eventPrefix) {
|
|
3771
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
3743
3772
|
AuroFloatingUI.setupMousePressChecker();
|
|
3773
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
3744
3774
|
|
|
3745
3775
|
this.eventPrefix = eventPrefix;
|
|
3746
3776
|
if (this.element !== elem) {
|
|
@@ -3773,7 +3803,9 @@ class AuroFloatingUI {
|
|
|
3773
3803
|
|
|
3774
3804
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3775
3805
|
if (this.element.trigger) {
|
|
3776
|
-
|
|
3806
|
+
if (this.enableKeyboardHandling) {
|
|
3807
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3808
|
+
}
|
|
3777
3809
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
3778
3810
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3779
3811
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -4927,7 +4959,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4927
4959
|
}
|
|
4928
4960
|
};
|
|
4929
4961
|
|
|
4930
|
-
var formkitVersion$1 = '
|
|
4962
|
+
var formkitVersion$1 = '202604021752';
|
|
4931
4963
|
|
|
4932
4964
|
class AuroElement extends LitElement {
|
|
4933
4965
|
static get properties() {
|
|
@@ -5108,6 +5140,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5108
5140
|
this.appearance = 'default';
|
|
5109
5141
|
this.chevron = false;
|
|
5110
5142
|
this.disabled = false;
|
|
5143
|
+
this.disableKeyboardHandling = false;
|
|
5111
5144
|
this.error = false;
|
|
5112
5145
|
this.tabIndex = 0;
|
|
5113
5146
|
this.noToggle = false;
|
|
@@ -5319,6 +5352,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5319
5352
|
reflect: true
|
|
5320
5353
|
},
|
|
5321
5354
|
|
|
5355
|
+
/**
|
|
5356
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5357
|
+
*/
|
|
5358
|
+
disableKeyboardHandling: {
|
|
5359
|
+
type: Boolean,
|
|
5360
|
+
reflect: true
|
|
5361
|
+
},
|
|
5362
|
+
|
|
5322
5363
|
/**
|
|
5323
5364
|
* @private
|
|
5324
5365
|
*/
|
|
@@ -5624,7 +5665,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5624
5665
|
|
|
5625
5666
|
firstUpdated() {
|
|
5626
5667
|
// Configure the floater to, this will generate the ID for the bib
|
|
5627
|
-
this.floater.configure(this, 'auroDropdown');
|
|
5668
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
5628
5669
|
|
|
5629
5670
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5630
5671
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -5932,6 +5973,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5932
5973
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5933
5974
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
5934
5975
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
5976
|
+
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
5935
5977
|
@focusin="${this.handleFocusin}"
|
|
5936
5978
|
@blur="${this.handleFocusOut}">
|
|
5937
5979
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -6670,7 +6712,7 @@ class AuroHelpText extends LitElement {
|
|
|
6670
6712
|
}
|
|
6671
6713
|
}
|
|
6672
6714
|
|
|
6673
|
-
var formkitVersion = '
|
|
6715
|
+
var formkitVersion = '202604021752';
|
|
6674
6716
|
|
|
6675
6717
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6676
6718
|
|
|
@@ -7923,6 +7965,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7923
7965
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
7924
7966
|
</div>
|
|
7925
7967
|
<${this.dropdownTag}
|
|
7968
|
+
disableKeyboardHandling
|
|
7926
7969
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
7927
7970
|
.a11yRole=${"combobox"}
|
|
7928
7971
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -8002,6 +8045,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8002
8045
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
8003
8046
|
</div>
|
|
8004
8047
|
<${this.dropdownTag}
|
|
8048
|
+
disableKeyboardHandling
|
|
8005
8049
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8006
8050
|
.a11yRole=${"combobox"}
|
|
8007
8051
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -8087,6 +8131,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8087
8131
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
8088
8132
|
</div>
|
|
8089
8133
|
<${this.dropdownTag}
|
|
8134
|
+
disableKeyboardHandling
|
|
8090
8135
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8091
8136
|
.a11yRole=${"combobox"}
|
|
8092
8137
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -2,9 +2,10 @@ export namespace selectKeyboardStrategy {
|
|
|
2
2
|
export function ArrowUp(component: any, evt: any, ctx: any): void;
|
|
3
3
|
export function ArrowDown(component: any, evt: any, ctx: any): void;
|
|
4
4
|
export function Enter(component: any, evt: any, ctx: any): void;
|
|
5
|
+
export function Escape(component: any, evt: any, ctx: any): void;
|
|
5
6
|
export function Tab(component: any, evt: any, ctx: any): void;
|
|
6
|
-
export function Home(component: any, evt: any): void;
|
|
7
|
-
export function End(component: any, evt: any): void;
|
|
8
|
-
function _default(component: any, evt: any): void;
|
|
7
|
+
export function Home(component: any, evt: any, ctx: any): void;
|
|
8
|
+
export function End(component: any, evt: any, ctx: any): void;
|
|
9
|
+
function _default(component: any, evt: any, ctx: any): void;
|
|
9
10
|
export { _default as default };
|
|
10
11
|
}
|
package/custom-elements.json
CHANGED
|
@@ -8285,6 +8285,17 @@
|
|
|
8285
8285
|
"attribute": "disabled",
|
|
8286
8286
|
"reflects": true
|
|
8287
8287
|
},
|
|
8288
|
+
{
|
|
8289
|
+
"kind": "field",
|
|
8290
|
+
"name": "disableKeyboardHandling",
|
|
8291
|
+
"privacy": "public",
|
|
8292
|
+
"type": {
|
|
8293
|
+
"text": "boolean"
|
|
8294
|
+
},
|
|
8295
|
+
"description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.",
|
|
8296
|
+
"attribute": "disableKeyboardHandling",
|
|
8297
|
+
"reflects": true
|
|
8298
|
+
},
|
|
8288
8299
|
{
|
|
8289
8300
|
"kind": "field",
|
|
8290
8301
|
"name": "dropdownWidth",
|
|
@@ -8568,6 +8579,14 @@
|
|
|
8568
8579
|
"description": "If declared, the dropdown is not interactive.",
|
|
8569
8580
|
"fieldName": "disabled"
|
|
8570
8581
|
},
|
|
8582
|
+
{
|
|
8583
|
+
"name": "disableKeyboardHandling",
|
|
8584
|
+
"type": {
|
|
8585
|
+
"text": "boolean"
|
|
8586
|
+
},
|
|
8587
|
+
"description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.",
|
|
8588
|
+
"fieldName": "disableKeyboardHandling"
|
|
8589
|
+
},
|
|
8571
8590
|
{
|
|
8572
8591
|
"name": "dropdownWidth",
|
|
8573
8592
|
"type": {
|
|
@@ -18692,7 +18711,7 @@
|
|
|
18692
18711
|
"type": {
|
|
18693
18712
|
"text": "object"
|
|
18694
18713
|
},
|
|
18695
|
-
"default": "{ ArrowUp(component, evt, ctx) {
|
|
18714
|
+
"default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); return; } navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); if (evt.altKey || evt.metaKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); return; } navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt, ctx) { if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Escape(component, evt, ctx) { if (!ctx.isExpanded) { return; } component.dropdown.hide(); }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, Home(component, evt, ctx) { if (!ctx.isExpanded) { return; } evt.preventDefault(); evt.stopPropagation(); const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled); if (firstOption) { component.menu.updateActiveOption(firstOption); } }, End(component, evt, ctx) { if (!ctx.isExpanded) { return; } evt.preventDefault(); evt.stopPropagation(); const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled); if (lastOption) { component.menu.updateActiveOption(lastOption); } }, default(component, evt, ctx) { component.updateActiveOptionBasedOnKey(evt.key); if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (ctx.isExpanded) { component.dropdown.hide(); return; } component.dropdown.show(); } }, }"
|
|
18696
18715
|
}
|
|
18697
18716
|
],
|
|
18698
18717
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurodesignsystem-dev/auro-formkit",
|
|
3
|
-
"version": "0.0.0-pr1411.
|
|
3
|
+
"version": "0.0.0-pr1411.2",
|
|
4
4
|
"description": "A collection of web components used to build forms.",
|
|
5
5
|
"homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -76,13 +76,14 @@
|
|
|
76
76
|
"lit": "^3.3.1"
|
|
77
77
|
},
|
|
78
78
|
"optionalDependencies": {
|
|
79
|
-
"@
|
|
80
|
-
"@
|
|
79
|
+
"@rolldown/binding-linux-x64-gnu": "*",
|
|
80
|
+
"@rollup/rollup-linux-x64-gnu": "*"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
83
|
"@aurodesignsystem/auro-accordion": "^6.1.1",
|
|
84
84
|
"@aurodesignsystem/auro-button": "^12.3.2",
|
|
85
|
-
"@aurodesignsystem/auro-library": "^5.
|
|
85
|
+
"@aurodesignsystem/auro-library": "^5.12.0",
|
|
86
|
+
"@aurodesignsystem/auro-loader": "^6.2.0",
|
|
86
87
|
"@aurodesignsystem/build-tools": "*",
|
|
87
88
|
"@aurodesignsystem/config": "*",
|
|
88
89
|
"@aurodesignsystem/design-tokens": "^8.15.1",
|
|
@@ -92,7 +93,6 @@
|
|
|
92
93
|
"@aurodesignsystem/utils": "*",
|
|
93
94
|
"@aurodesignsystem/version": "*",
|
|
94
95
|
"@aurodesignsystem/webcorestylesheets": "^10.1.4",
|
|
95
|
-
"@aurodesignsystem/auro-loader": "^6.2.0",
|
|
96
96
|
"@chromatic-com/storybook": "^5.0.0",
|
|
97
97
|
"@commitlint/cli": "^19.8.1",
|
|
98
98
|
"@commitlint/config-conventional": "^19.8.1",
|