@aurodesignsystem/auro-formkit 5.9.4 → 5.11.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/CHANGELOG.md +62 -2
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +16 -0
- package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +38 -16
- package/components/bibtemplate/dist/registered.js +38 -16
- package/components/checkbox/demo/api.md +7 -0
- package/components/checkbox/demo/api.min.js +19 -16
- package/components/checkbox/demo/index.min.js +19 -16
- package/components/checkbox/dist/auro-checkbox-group.d.ts +4 -3
- package/components/checkbox/dist/auro-checkbox.d.ts +2 -0
- package/components/checkbox/dist/index.js +10 -7
- package/components/checkbox/dist/registered.js +10 -7
- package/components/combobox/demo/api.js +2 -2
- package/components/combobox/demo/api.md +80 -0
- package/components/combobox/demo/api.min.js +1676 -645
- package/components/combobox/demo/index.min.js +1657 -640
- package/components/combobox/dist/auro-combobox.d.ts +25 -2
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +6 -0
- package/components/combobox/dist/index.js +1500 -501
- package/components/combobox/dist/registered.js +1500 -501
- package/components/counter/demo/api.min.js +1014 -427
- package/components/counter/demo/index.min.js +1014 -427
- package/components/counter/dist/auro-counter-button.d.ts +11 -2
- package/components/counter/dist/auro-counter.d.ts +8 -0
- package/components/counter/dist/buttonVersion.d.ts +1 -1
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +972 -389
- package/components/counter/dist/registered.js +972 -389
- package/components/datepicker/demo/api.md +110 -87
- package/components/datepicker/demo/api.min.js +1457 -665
- package/components/datepicker/demo/index.md +18 -12
- package/components/datepicker/demo/index.min.js +1457 -665
- package/components/datepicker/dist/auro-calendar.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +12 -2
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +1249 -461
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +1249 -461
- package/components/dropdown/demo/api.md +16 -18
- package/components/dropdown/demo/api.min.js +892 -378
- package/components/dropdown/demo/index.min.js +892 -378
- package/components/dropdown/dist/auro-dropdown.d.ts +27 -1
- package/components/dropdown/dist/auro-dropdownBib.d.ts +87 -0
- package/components/dropdown/dist/iconVersion.d.ts +1 -1
- package/components/dropdown/dist/index.js +862 -348
- package/components/dropdown/dist/keyboardUtils.d.ts +18 -0
- package/components/dropdown/dist/registered.js +862 -348
- package/components/form/README.md +47 -2
- package/components/form/demo/api.js +2 -0
- package/components/form/demo/api.md +303 -30
- package/components/form/demo/api.min.js +69263 -67
- package/components/form/demo/index.html +0 -1
- package/components/form/demo/index.js +1 -0
- package/components/form/demo/index.md +1 -275
- package/components/form/demo/index.min.js +69262 -67
- package/components/form/demo/readme.md +47 -2
- package/components/form/demo/working.html +123 -32
- package/components/form/dist/auro-form.d.ts +106 -61
- package/components/form/dist/index.js +143 -57
- package/components/form/dist/registered.js +143 -57
- package/components/input/demo/api.md +6 -1
- package/components/input/demo/api.min.js +164 -103
- package/components/input/demo/index.min.js +164 -103
- package/components/input/dist/auro-input.d.ts +23 -0
- package/components/input/dist/base-input.d.ts +36 -18
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +119 -58
- package/components/input/dist/registered.js +119 -58
- package/components/menu/demo/api.md +4 -10
- package/components/menu/demo/api.min.js +36 -22
- package/components/menu/demo/index.min.js +36 -22
- package/components/menu/dist/auro-menuoption.d.ts +0 -7
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +25 -11
- package/components/menu/dist/registered.js +25 -11
- package/components/radio/demo/api.min.js +13 -13
- package/components/radio/demo/index.min.js +13 -13
- package/components/radio/dist/index.js +4 -4
- package/components/radio/dist/registered.js +4 -4
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +333 -78
- package/components/select/demo/api.min.js +1339 -505
- package/components/select/demo/index.min.js +1327 -505
- package/components/select/dist/auro-select.d.ts +26 -0
- package/components/select/dist/index.js +1266 -462
- package/components/select/dist/registered.js +1266 -462
- package/components/select/dist/selectKeyboardStrategy.d.ts +8 -0
- package/custom-elements.json +18655 -0
- package/package.json +47 -13
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { LitElement, css, html as html$1 } from 'lit';
|
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
3
|
import { unsafeStatic, literal, html } from 'lit/static-html.js';
|
|
4
|
+
import 'lit-html';
|
|
5
|
+
import 'lit-html/directives/unsafe-html.js';
|
|
4
6
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
5
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
8
|
import { ifDefined as ifDefined$1 } from 'lit-html/directives/if-defined.js';
|
|
@@ -952,7 +954,7 @@ class AuroFormValidation {
|
|
|
952
954
|
}
|
|
953
955
|
}
|
|
954
956
|
|
|
955
|
-
if (!hasValue && elem.required && elem.touched) {
|
|
957
|
+
if (!hasValue && elem.required && (force || elem.touched)) {
|
|
956
958
|
elem.validity = 'valueMissing';
|
|
957
959
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
958
960
|
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
@@ -968,7 +970,7 @@ class AuroFormValidation {
|
|
|
968
970
|
}
|
|
969
971
|
}
|
|
970
972
|
|
|
971
|
-
if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
|
|
973
|
+
if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing" && elem.validity !== "customError") {
|
|
972
974
|
|
|
973
975
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
974
976
|
|
|
@@ -976,7 +978,7 @@ class AuroFormValidation {
|
|
|
976
978
|
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
977
979
|
|
|
978
980
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
979
|
-
this.auroInputElements.forEach(input => input.validate());
|
|
981
|
+
this.auroInputElements.forEach(input => input.validate(force));
|
|
980
982
|
|
|
981
983
|
// Reset element validity to the validity of the input
|
|
982
984
|
elem.validity = this.auroInputElements[0].validity;
|
|
@@ -1067,6 +1069,171 @@ class AuroFormValidation {
|
|
|
1067
1069
|
}
|
|
1068
1070
|
}
|
|
1069
1071
|
|
|
1072
|
+
/**
|
|
1073
|
+
* Announces text to screen readers via an `aria-live` region inside the given shadow root.
|
|
1074
|
+
*
|
|
1075
|
+
* Expects the shadow root to contain an element with `id="srAnnouncement"`.
|
|
1076
|
+
* The text is cleared and re-set inside a `requestAnimationFrame` so that
|
|
1077
|
+
* repeated identical announcements still fire, and is cleared again after
|
|
1078
|
+
* {@link ANNOUNCEMENT_DURATION_MS} so VoiceOver cannot swipe to stale text.
|
|
1079
|
+
*
|
|
1080
|
+
* @param {ShadowRoot} shadowRoot - The shadow root containing the live region.
|
|
1081
|
+
* @param {string} text - The text to announce.
|
|
1082
|
+
*/
|
|
1083
|
+
|
|
1084
|
+
const ANNOUNCEMENT_DURATION_MS = 1000;
|
|
1085
|
+
|
|
1086
|
+
function announceToScreenReader(shadowRoot, text) {
|
|
1087
|
+
const liveRegion = shadowRoot.querySelector('#srAnnouncement');
|
|
1088
|
+
if (liveRegion) {
|
|
1089
|
+
// Clear and re-set to ensure the announcement fires even with same text
|
|
1090
|
+
liveRegion.textContent = '';
|
|
1091
|
+
requestAnimationFrame(() => {
|
|
1092
|
+
liveRegion.textContent = text;
|
|
1093
|
+
|
|
1094
|
+
// Clear after the announcement so VoiceOver cannot swipe to stale text
|
|
1095
|
+
setTimeout(() => {
|
|
1096
|
+
liveRegion.textContent = '';
|
|
1097
|
+
}, ANNOUNCEMENT_DURATION_MS);
|
|
1098
|
+
});
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
/**
|
|
1103
|
+
* Schedules a callback after two animation frames.
|
|
1104
|
+
*
|
|
1105
|
+
* Used when opening a fullscreen dialog to wait for the dialog to render
|
|
1106
|
+
* (first frame) and then for a Lit update cycle to complete (second frame)
|
|
1107
|
+
* before performing an action like focusing the close button.
|
|
1108
|
+
*
|
|
1109
|
+
* @param {Function} fn - The callback to execute after two animation frames.
|
|
1110
|
+
*/
|
|
1111
|
+
function doubleRaf(fn) {
|
|
1112
|
+
requestAnimationFrame(() => {
|
|
1113
|
+
requestAnimationFrame(fn);
|
|
1114
|
+
});
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
/**
|
|
1118
|
+
* Prevents touch pass-through when a fullscreen dialog opens on a touch device.
|
|
1119
|
+
*
|
|
1120
|
+
* On coarse-pointer devices (phones / tablets), the tap that opens the
|
|
1121
|
+
* fullscreen dialog can "pass through" to content beneath the finger —
|
|
1122
|
+
* the touchstart opens the dialog, but the finger is still on the screen,
|
|
1123
|
+
* so the subsequent touchend / click lands on whatever element sits at
|
|
1124
|
+
* those coordinates (e.g. a menu option or calendar cell), selecting it
|
|
1125
|
+
* unintentionally. This does NOT happen with mouse clicks because
|
|
1126
|
+
* showModal() promotes the dialog to the top layer synchronously and the
|
|
1127
|
+
* click has already completed.
|
|
1128
|
+
*
|
|
1129
|
+
* Guard: only activates on devices whose primary input is coarse.
|
|
1130
|
+
* Laptops with a touchscreen report `pointer: fine` (trackpad / mouse is
|
|
1131
|
+
* primary) so they are unaffected. Re-enables on the next touchstart,
|
|
1132
|
+
* which is the user's first deliberate gesture inside the dialog.
|
|
1133
|
+
*
|
|
1134
|
+
* @param {HTMLElement} element - The element to disable pointer events on
|
|
1135
|
+
* (e.g. the menu or calendar wrapper).
|
|
1136
|
+
*/
|
|
1137
|
+
function guardTouchPassthrough(element) {
|
|
1138
|
+
if (!element || !window.matchMedia('(pointer: coarse)').matches) return;
|
|
1139
|
+
|
|
1140
|
+
element.style.pointerEvents = 'none';
|
|
1141
|
+
document.addEventListener('touchstart', () => {
|
|
1142
|
+
element.style.pointerEvents = '';
|
|
1143
|
+
}, { once: true });
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
/**
|
|
1147
|
+
* Restores the dropdown trigger after a fullscreen dialog closes.
|
|
1148
|
+
*
|
|
1149
|
+
* Removes the `inert` attribute from the trigger so it is accessible again,
|
|
1150
|
+
* and restores focus to the given target after one animation frame. The rAF
|
|
1151
|
+
* delay lets Lit's microtask update cycle call `dialog.close()` first —
|
|
1152
|
+
* without it the browser's native dialog focus restoration can conflict.
|
|
1153
|
+
*
|
|
1154
|
+
* The focus is only applied if the dropdown is still closed at the time the
|
|
1155
|
+
* rAF fires, guarding against a rapid close-then-reopen race.
|
|
1156
|
+
*
|
|
1157
|
+
* @param {HTMLElement} dropdown - The `auro-dropdown` element.
|
|
1158
|
+
* @param {HTMLElement} focusTarget - The element to focus (e.g. trigger or input).
|
|
1159
|
+
*/
|
|
1160
|
+
function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
1161
|
+
dropdown.trigger.inert = false;
|
|
1162
|
+
|
|
1163
|
+
if (dropdown.isBibFullscreen) {
|
|
1164
|
+
requestAnimationFrame(() => {
|
|
1165
|
+
if (!dropdown.isPopoverVisible) {
|
|
1166
|
+
focusTarget.focus();
|
|
1167
|
+
}
|
|
1168
|
+
});
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
/**
|
|
1173
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
1174
|
+
* Handles both sync and async handlers.
|
|
1175
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
1176
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
1177
|
+
*/
|
|
1178
|
+
function applyKeyboardStrategy(component, strategy) {
|
|
1179
|
+
component.addEventListener('keydown', async (evt) => {
|
|
1180
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
1181
|
+
if (handler) {
|
|
1182
|
+
await handler(component, evt);
|
|
1183
|
+
}
|
|
1184
|
+
});
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
/**
|
|
1188
|
+
* Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
|
|
1189
|
+
* Optionally opens dropdown via showFn when closed.
|
|
1190
|
+
* @param {HTMLElement} component - The component with dropdown and menu references.
|
|
1191
|
+
* @param {string} direction - 'up' or 'down'.
|
|
1192
|
+
* @param {Object} [options] - Optional config.
|
|
1193
|
+
* @param {Function} [options.showFn] - Called to open the dropdown when closed.
|
|
1194
|
+
*/
|
|
1195
|
+
function navigateArrow(component, direction, options = {}) {
|
|
1196
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1197
|
+
component.menu.navigateOptions(direction);
|
|
1198
|
+
} else if (options.showFn) {
|
|
1199
|
+
options.showFn();
|
|
1200
|
+
}
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
const selectKeyboardStrategy = {
|
|
1204
|
+
ArrowUp(component, evt) {
|
|
1205
|
+
evt.preventDefault();
|
|
1206
|
+
navigateArrow(component, 'up', { showFn: () => component.dropdown.show() });
|
|
1207
|
+
},
|
|
1208
|
+
|
|
1209
|
+
ArrowDown(component, evt) {
|
|
1210
|
+
evt.preventDefault();
|
|
1211
|
+
navigateArrow(component, 'down', { showFn: () => component.dropdown.show() });
|
|
1212
|
+
},
|
|
1213
|
+
|
|
1214
|
+
Enter(component, evt) {
|
|
1215
|
+
evt.preventDefault();
|
|
1216
|
+
component.menu.makeSelection();
|
|
1217
|
+
},
|
|
1218
|
+
|
|
1219
|
+
Tab(component) {
|
|
1220
|
+
if (!component.dropdown.isPopoverVisible) {
|
|
1221
|
+
return;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
// Tab selects the focused option and closes the popup per the
|
|
1225
|
+
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
1226
|
+
if (component.optionActive && !component.multiSelect) {
|
|
1227
|
+
component.menu.makeSelection();
|
|
1228
|
+
}
|
|
1229
|
+
component.dropdown.hide();
|
|
1230
|
+
},
|
|
1231
|
+
|
|
1232
|
+
default(component, evt) {
|
|
1233
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1234
|
+
},
|
|
1235
|
+
};
|
|
1236
|
+
|
|
1070
1237
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1071
1238
|
// See LICENSE in the project root for license information.
|
|
1072
1239
|
|
|
@@ -1234,8 +1401,9 @@ function getOppositeAxis(axis) {
|
|
|
1234
1401
|
function getAxisLength(axis) {
|
|
1235
1402
|
return axis === 'y' ? 'height' : 'width';
|
|
1236
1403
|
}
|
|
1404
|
+
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
1237
1405
|
function getSideAxis(placement) {
|
|
1238
|
-
return
|
|
1406
|
+
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
|
1239
1407
|
}
|
|
1240
1408
|
function getAlignmentAxis(placement) {
|
|
1241
1409
|
return getOppositeAxis(getSideAxis(placement));
|
|
@@ -1260,19 +1428,19 @@ function getExpandedPlacements(placement) {
|
|
|
1260
1428
|
function getOppositeAlignmentPlacement(placement) {
|
|
1261
1429
|
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
1262
1430
|
}
|
|
1431
|
+
const lrPlacement = ['left', 'right'];
|
|
1432
|
+
const rlPlacement = ['right', 'left'];
|
|
1433
|
+
const tbPlacement = ['top', 'bottom'];
|
|
1434
|
+
const btPlacement = ['bottom', 'top'];
|
|
1263
1435
|
function getSideList(side, isStart, rtl) {
|
|
1264
|
-
const lr = ['left', 'right'];
|
|
1265
|
-
const rl = ['right', 'left'];
|
|
1266
|
-
const tb = ['top', 'bottom'];
|
|
1267
|
-
const bt = ['bottom', 'top'];
|
|
1268
1436
|
switch (side) {
|
|
1269
1437
|
case 'top':
|
|
1270
1438
|
case 'bottom':
|
|
1271
|
-
if (rtl) return isStart ?
|
|
1272
|
-
return isStart ?
|
|
1439
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
1440
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
1273
1441
|
case 'left':
|
|
1274
1442
|
case 'right':
|
|
1275
|
-
return isStart ?
|
|
1443
|
+
return isStart ? tbPlacement : btPlacement;
|
|
1276
1444
|
default:
|
|
1277
1445
|
return [];
|
|
1278
1446
|
}
|
|
@@ -1383,6 +1551,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
1383
1551
|
return coords;
|
|
1384
1552
|
}
|
|
1385
1553
|
|
|
1554
|
+
/**
|
|
1555
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
1556
|
+
* element is overflowing a given clipping boundary on each side.
|
|
1557
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
1558
|
+
* - negative = how many pixels left before it will overflow
|
|
1559
|
+
* - 0 = lies flush with the boundary
|
|
1560
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
1561
|
+
*/
|
|
1562
|
+
async function detectOverflow(state, options) {
|
|
1563
|
+
var _await$platform$isEle;
|
|
1564
|
+
if (options === void 0) {
|
|
1565
|
+
options = {};
|
|
1566
|
+
}
|
|
1567
|
+
const {
|
|
1568
|
+
x,
|
|
1569
|
+
y,
|
|
1570
|
+
platform,
|
|
1571
|
+
rects,
|
|
1572
|
+
elements,
|
|
1573
|
+
strategy
|
|
1574
|
+
} = state;
|
|
1575
|
+
const {
|
|
1576
|
+
boundary = 'clippingAncestors',
|
|
1577
|
+
rootBoundary = 'viewport',
|
|
1578
|
+
elementContext = 'floating',
|
|
1579
|
+
altBoundary = false,
|
|
1580
|
+
padding = 0
|
|
1581
|
+
} = evaluate(options, state);
|
|
1582
|
+
const paddingObject = getPaddingObject(padding);
|
|
1583
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
1584
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
1585
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
1586
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
1587
|
+
boundary,
|
|
1588
|
+
rootBoundary,
|
|
1589
|
+
strategy
|
|
1590
|
+
}));
|
|
1591
|
+
const rect = elementContext === 'floating' ? {
|
|
1592
|
+
x,
|
|
1593
|
+
y,
|
|
1594
|
+
width: rects.floating.width,
|
|
1595
|
+
height: rects.floating.height
|
|
1596
|
+
} : rects.reference;
|
|
1597
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
1598
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
1599
|
+
x: 1,
|
|
1600
|
+
y: 1
|
|
1601
|
+
} : {
|
|
1602
|
+
x: 1,
|
|
1603
|
+
y: 1
|
|
1604
|
+
};
|
|
1605
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1606
|
+
elements,
|
|
1607
|
+
rect,
|
|
1608
|
+
offsetParent,
|
|
1609
|
+
strategy
|
|
1610
|
+
}) : rect);
|
|
1611
|
+
return {
|
|
1612
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1613
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1614
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1615
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1616
|
+
};
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1386
1619
|
/**
|
|
1387
1620
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
1388
1621
|
* next to a given reference element.
|
|
@@ -1412,6 +1645,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
1412
1645
|
let middlewareData = {};
|
|
1413
1646
|
let resetCount = 0;
|
|
1414
1647
|
for (let i = 0; i < validMiddleware.length; i++) {
|
|
1648
|
+
var _platform$detectOverf;
|
|
1415
1649
|
const {
|
|
1416
1650
|
name,
|
|
1417
1651
|
fn
|
|
@@ -1429,7 +1663,10 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
1429
1663
|
strategy,
|
|
1430
1664
|
middlewareData,
|
|
1431
1665
|
rects,
|
|
1432
|
-
platform
|
|
1666
|
+
platform: {
|
|
1667
|
+
...platform,
|
|
1668
|
+
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
1669
|
+
},
|
|
1433
1670
|
elements: {
|
|
1434
1671
|
reference,
|
|
1435
1672
|
floating
|
|
@@ -1474,71 +1711,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
1474
1711
|
};
|
|
1475
1712
|
};
|
|
1476
1713
|
|
|
1477
|
-
/**
|
|
1478
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
1479
|
-
* element is overflowing a given clipping boundary on each side.
|
|
1480
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
1481
|
-
* - negative = how many pixels left before it will overflow
|
|
1482
|
-
* - 0 = lies flush with the boundary
|
|
1483
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
1484
|
-
*/
|
|
1485
|
-
async function detectOverflow(state, options) {
|
|
1486
|
-
var _await$platform$isEle;
|
|
1487
|
-
if (options === void 0) {
|
|
1488
|
-
options = {};
|
|
1489
|
-
}
|
|
1490
|
-
const {
|
|
1491
|
-
x,
|
|
1492
|
-
y,
|
|
1493
|
-
platform,
|
|
1494
|
-
rects,
|
|
1495
|
-
elements,
|
|
1496
|
-
strategy
|
|
1497
|
-
} = state;
|
|
1498
|
-
const {
|
|
1499
|
-
boundary = 'clippingAncestors',
|
|
1500
|
-
rootBoundary = 'viewport',
|
|
1501
|
-
elementContext = 'floating',
|
|
1502
|
-
altBoundary = false,
|
|
1503
|
-
padding = 0
|
|
1504
|
-
} = evaluate(options, state);
|
|
1505
|
-
const paddingObject = getPaddingObject(padding);
|
|
1506
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
1507
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
1508
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
1509
|
-
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
1510
|
-
boundary,
|
|
1511
|
-
rootBoundary,
|
|
1512
|
-
strategy
|
|
1513
|
-
}));
|
|
1514
|
-
const rect = elementContext === 'floating' ? {
|
|
1515
|
-
x,
|
|
1516
|
-
y,
|
|
1517
|
-
width: rects.floating.width,
|
|
1518
|
-
height: rects.floating.height
|
|
1519
|
-
} : rects.reference;
|
|
1520
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
1521
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
1522
|
-
x: 1,
|
|
1523
|
-
y: 1
|
|
1524
|
-
} : {
|
|
1525
|
-
x: 1,
|
|
1526
|
-
y: 1
|
|
1527
|
-
};
|
|
1528
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1529
|
-
elements,
|
|
1530
|
-
rect,
|
|
1531
|
-
offsetParent,
|
|
1532
|
-
strategy
|
|
1533
|
-
}) : rect);
|
|
1534
|
-
return {
|
|
1535
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1536
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1537
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1538
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1539
|
-
};
|
|
1540
|
-
}
|
|
1541
|
-
|
|
1542
1714
|
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
1543
1715
|
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
1544
1716
|
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
@@ -1578,7 +1750,7 @@ const autoPlacement$1 = function (options) {
|
|
|
1578
1750
|
...detectOverflowOptions
|
|
1579
1751
|
} = evaluate(options, state);
|
|
1580
1752
|
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
1581
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1753
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
1582
1754
|
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
1583
1755
|
const currentPlacement = placements$1[currentIndex];
|
|
1584
1756
|
if (currentPlacement == null) {
|
|
@@ -1692,7 +1864,7 @@ const flip$1 = function (options) {
|
|
|
1692
1864
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1693
1865
|
}
|
|
1694
1866
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1695
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1867
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
1696
1868
|
const overflows = [];
|
|
1697
1869
|
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1698
1870
|
if (checkMainAxis) {
|
|
@@ -1713,16 +1885,22 @@ const flip$1 = function (options) {
|
|
|
1713
1885
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1714
1886
|
const nextPlacement = placements[nextIndex];
|
|
1715
1887
|
if (nextPlacement) {
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1888
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
1889
|
+
if (!ignoreCrossAxisOverflow ||
|
|
1890
|
+
// We leave the current main axis only if every placement on that axis
|
|
1891
|
+
// overflows the main axis.
|
|
1892
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
1893
|
+
// Try next placement and re-run the lifecycle.
|
|
1894
|
+
return {
|
|
1895
|
+
data: {
|
|
1896
|
+
index: nextIndex,
|
|
1897
|
+
overflows: overflowsData
|
|
1898
|
+
},
|
|
1899
|
+
reset: {
|
|
1900
|
+
placement: nextPlacement
|
|
1901
|
+
}
|
|
1902
|
+
};
|
|
1903
|
+
}
|
|
1726
1904
|
}
|
|
1727
1905
|
|
|
1728
1906
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -1768,6 +1946,8 @@ const flip$1 = function (options) {
|
|
|
1768
1946
|
};
|
|
1769
1947
|
};
|
|
1770
1948
|
|
|
1949
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
1950
|
+
|
|
1771
1951
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
1772
1952
|
// Derivable.
|
|
1773
1953
|
|
|
@@ -1781,7 +1961,7 @@ async function convertValueToCoords(state, options) {
|
|
|
1781
1961
|
const side = getSide(placement);
|
|
1782
1962
|
const alignment = getAlignment(placement);
|
|
1783
1963
|
const isVertical = getSideAxis(placement) === 'y';
|
|
1784
|
-
const mainAxisMulti =
|
|
1964
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
1785
1965
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
1786
1966
|
const rawValue = evaluate(options, state);
|
|
1787
1967
|
|
|
@@ -1868,7 +2048,8 @@ const shift$1 = function (options) {
|
|
|
1868
2048
|
const {
|
|
1869
2049
|
x,
|
|
1870
2050
|
y,
|
|
1871
|
-
placement
|
|
2051
|
+
placement,
|
|
2052
|
+
platform
|
|
1872
2053
|
} = state;
|
|
1873
2054
|
const {
|
|
1874
2055
|
mainAxis: checkMainAxis = true,
|
|
@@ -1891,7 +2072,7 @@ const shift$1 = function (options) {
|
|
|
1891
2072
|
x,
|
|
1892
2073
|
y
|
|
1893
2074
|
};
|
|
1894
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
2075
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
1895
2076
|
const crossAxis = getSideAxis(getSide(placement));
|
|
1896
2077
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
1897
2078
|
let mainAxisCoord = coords[mainAxis];
|
|
@@ -1974,6 +2155,7 @@ function isShadowRoot(value) {
|
|
|
1974
2155
|
}
|
|
1975
2156
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
1976
2157
|
}
|
|
2158
|
+
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
1977
2159
|
function isOverflowElement(element) {
|
|
1978
2160
|
const {
|
|
1979
2161
|
overflow,
|
|
@@ -1981,27 +2163,32 @@ function isOverflowElement(element) {
|
|
|
1981
2163
|
overflowY,
|
|
1982
2164
|
display
|
|
1983
2165
|
} = getComputedStyle$1(element);
|
|
1984
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !
|
|
2166
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
1985
2167
|
}
|
|
2168
|
+
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
1986
2169
|
function isTableElement(element) {
|
|
1987
|
-
return
|
|
2170
|
+
return tableElements.has(getNodeName(element));
|
|
1988
2171
|
}
|
|
2172
|
+
const topLayerSelectors = [':popover-open', ':modal'];
|
|
1989
2173
|
function isTopLayer(element) {
|
|
1990
|
-
return
|
|
2174
|
+
return topLayerSelectors.some(selector => {
|
|
1991
2175
|
try {
|
|
1992
2176
|
return element.matches(selector);
|
|
1993
|
-
} catch (
|
|
2177
|
+
} catch (_e) {
|
|
1994
2178
|
return false;
|
|
1995
2179
|
}
|
|
1996
2180
|
});
|
|
1997
2181
|
}
|
|
2182
|
+
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
|
2183
|
+
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
|
2184
|
+
const containValues = ['paint', 'layout', 'strict', 'content'];
|
|
1998
2185
|
function isContainingBlock(elementOrCss) {
|
|
1999
2186
|
const webkit = isWebKit();
|
|
2000
2187
|
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
2001
2188
|
|
|
2002
2189
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2003
2190
|
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
2004
|
-
return
|
|
2191
|
+
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
|
2005
2192
|
}
|
|
2006
2193
|
function getContainingBlock(element) {
|
|
2007
2194
|
let currentNode = getParentNode(element);
|
|
@@ -2019,8 +2206,9 @@ function isWebKit() {
|
|
|
2019
2206
|
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
2020
2207
|
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
2021
2208
|
}
|
|
2209
|
+
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
2022
2210
|
function isLastTraversableNode(node) {
|
|
2023
|
-
return
|
|
2211
|
+
return lastTraversableNodeNames.has(getNodeName(node));
|
|
2024
2212
|
}
|
|
2025
2213
|
function getComputedStyle$1(element) {
|
|
2026
2214
|
return getWindow(element).getComputedStyle(element);
|
|
@@ -2220,14 +2408,9 @@ function getWindowScrollBarX(element, rect) {
|
|
|
2220
2408
|
return rect.left + leftScroll;
|
|
2221
2409
|
}
|
|
2222
2410
|
|
|
2223
|
-
function getHTMLOffset(documentElement, scroll
|
|
2224
|
-
if (ignoreScrollbarX === void 0) {
|
|
2225
|
-
ignoreScrollbarX = false;
|
|
2226
|
-
}
|
|
2411
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
2227
2412
|
const htmlRect = documentElement.getBoundingClientRect();
|
|
2228
|
-
const x = htmlRect.left + scroll.scrollLeft - (
|
|
2229
|
-
// RTL <body> scrollbar.
|
|
2230
|
-
getWindowScrollBarX(documentElement, htmlRect));
|
|
2413
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
2231
2414
|
const y = htmlRect.top + scroll.scrollTop;
|
|
2232
2415
|
return {
|
|
2233
2416
|
x,
|
|
@@ -2266,7 +2449,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
2266
2449
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2267
2450
|
}
|
|
2268
2451
|
}
|
|
2269
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll
|
|
2452
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2270
2453
|
return {
|
|
2271
2454
|
width: rect.width * scale.x,
|
|
2272
2455
|
height: rect.height * scale.y,
|
|
@@ -2300,6 +2483,10 @@ function getDocumentRect(element) {
|
|
|
2300
2483
|
};
|
|
2301
2484
|
}
|
|
2302
2485
|
|
|
2486
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
2487
|
+
// calculation is affected by unusual styles.
|
|
2488
|
+
// Most scrollbars leave 15-18px of space.
|
|
2489
|
+
const SCROLLBAR_MAX = 25;
|
|
2303
2490
|
function getViewportRect(element, strategy) {
|
|
2304
2491
|
const win = getWindow(element);
|
|
2305
2492
|
const html = getDocumentElement(element);
|
|
@@ -2317,6 +2504,24 @@ function getViewportRect(element, strategy) {
|
|
|
2317
2504
|
y = visualViewport.offsetTop;
|
|
2318
2505
|
}
|
|
2319
2506
|
}
|
|
2507
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
2508
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
2509
|
+
// visual width of the <html> but this is not considered in the size
|
|
2510
|
+
// of `html.clientWidth`.
|
|
2511
|
+
if (windowScrollbarX <= 0) {
|
|
2512
|
+
const doc = html.ownerDocument;
|
|
2513
|
+
const body = doc.body;
|
|
2514
|
+
const bodyStyles = getComputedStyle(body);
|
|
2515
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
2516
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
2517
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
2518
|
+
width -= clippingStableScrollbarWidth;
|
|
2519
|
+
}
|
|
2520
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
2521
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
2522
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
2523
|
+
width += windowScrollbarX;
|
|
2524
|
+
}
|
|
2320
2525
|
return {
|
|
2321
2526
|
width,
|
|
2322
2527
|
height,
|
|
@@ -2325,6 +2530,7 @@ function getViewportRect(element, strategy) {
|
|
|
2325
2530
|
};
|
|
2326
2531
|
}
|
|
2327
2532
|
|
|
2533
|
+
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
|
2328
2534
|
// Returns the inner client rect, subtracting scrollbars if present.
|
|
2329
2535
|
function getInnerBoundingClientRect(element, strategy) {
|
|
2330
2536
|
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
@@ -2389,7 +2595,7 @@ function getClippingElementAncestors(element, cache) {
|
|
|
2389
2595
|
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
2390
2596
|
currentContainingBlockComputedStyle = null;
|
|
2391
2597
|
}
|
|
2392
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle &&
|
|
2598
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
2393
2599
|
if (shouldDropCurrentNode) {
|
|
2394
2600
|
// Drop non-containing blocks.
|
|
2395
2601
|
result = result.filter(ancestor => ancestor !== currentNode);
|
|
@@ -2452,6 +2658,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2452
2658
|
scrollTop: 0
|
|
2453
2659
|
};
|
|
2454
2660
|
const offsets = createCoords(0);
|
|
2661
|
+
|
|
2662
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
2663
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2664
|
+
function setLeftRTLScrollbarOffset() {
|
|
2665
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
2666
|
+
}
|
|
2455
2667
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2456
2668
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2457
2669
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -2461,11 +2673,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2461
2673
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2462
2674
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2463
2675
|
} else if (documentElement) {
|
|
2464
|
-
|
|
2465
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2466
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
2676
|
+
setLeftRTLScrollbarOffset();
|
|
2467
2677
|
}
|
|
2468
2678
|
}
|
|
2679
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
2680
|
+
setLeftRTLScrollbarOffset();
|
|
2681
|
+
}
|
|
2469
2682
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2470
2683
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
2471
2684
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -2642,7 +2855,7 @@ function observeMove(element, onMove) {
|
|
|
2642
2855
|
// Handle <iframe>s
|
|
2643
2856
|
root: root.ownerDocument
|
|
2644
2857
|
});
|
|
2645
|
-
} catch (
|
|
2858
|
+
} catch (_e) {
|
|
2646
2859
|
io = new IntersectionObserver(handleObserve, options);
|
|
2647
2860
|
}
|
|
2648
2861
|
io.observe(element);
|
|
@@ -2788,11 +3001,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
2788
3001
|
/* eslint-disable line-comment-position, no-inline-comments */
|
|
2789
3002
|
|
|
2790
3003
|
|
|
2791
|
-
|
|
2792
3004
|
const MAX_CONFIGURATION_COUNT = 10;
|
|
2793
3005
|
|
|
2794
3006
|
class AuroFloatingUI {
|
|
2795
|
-
|
|
2796
3007
|
/**
|
|
2797
3008
|
* @private
|
|
2798
3009
|
*/
|
|
@@ -2807,7 +3018,11 @@ class AuroFloatingUI {
|
|
|
2807
3018
|
* @private
|
|
2808
3019
|
*/
|
|
2809
3020
|
static setupMousePressChecker() {
|
|
2810
|
-
if (
|
|
3021
|
+
if (
|
|
3022
|
+
!AuroFloatingUI.isMousePressHandlerInitialized &&
|
|
3023
|
+
window &&
|
|
3024
|
+
window.addEventListener
|
|
3025
|
+
) {
|
|
2811
3026
|
AuroFloatingUI.isMousePressHandlerInitialized = true;
|
|
2812
3027
|
|
|
2813
3028
|
// Track timeout for isMousePressed reset to avoid race conditions
|
|
@@ -2815,7 +3030,7 @@ class AuroFloatingUI {
|
|
|
2815
3030
|
AuroFloatingUI._mousePressedTimeout = null;
|
|
2816
3031
|
}
|
|
2817
3032
|
const mouseEventGlobalHandler = (event) => {
|
|
2818
|
-
const isPressed = event.type ===
|
|
3033
|
+
const isPressed = event.type === "mousedown";
|
|
2819
3034
|
if (isPressed) {
|
|
2820
3035
|
// Clear any pending timeout to prevent race condition
|
|
2821
3036
|
if (AuroFloatingUI._mousePressedTimeout !== null) {
|
|
@@ -2834,8 +3049,8 @@ class AuroFloatingUI {
|
|
|
2834
3049
|
}
|
|
2835
3050
|
};
|
|
2836
3051
|
|
|
2837
|
-
window.addEventListener(
|
|
2838
|
-
window.addEventListener(
|
|
3052
|
+
window.addEventListener("mousedown", mouseEventGlobalHandler);
|
|
3053
|
+
window.addEventListener("mouseup", mouseEventGlobalHandler);
|
|
2839
3054
|
}
|
|
2840
3055
|
}
|
|
2841
3056
|
|
|
@@ -2883,11 +3098,12 @@ class AuroFloatingUI {
|
|
|
2883
3098
|
// mirror the boxsize from bibSizer
|
|
2884
3099
|
if (this.element.bibSizer && this.element.matchWidth) {
|
|
2885
3100
|
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
2886
|
-
const bibContent =
|
|
2887
|
-
|
|
3101
|
+
const bibContent =
|
|
3102
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3103
|
+
if (sizerStyle.width !== "0px") {
|
|
2888
3104
|
bibContent.style.width = sizerStyle.width;
|
|
2889
3105
|
}
|
|
2890
|
-
if (sizerStyle.height !==
|
|
3106
|
+
if (sizerStyle.height !== "0px") {
|
|
2891
3107
|
bibContent.style.height = sizerStyle.height;
|
|
2892
3108
|
}
|
|
2893
3109
|
bibContent.style.maxWidth = sizerStyle.maxWidth;
|
|
@@ -2905,28 +3121,34 @@ class AuroFloatingUI {
|
|
|
2905
3121
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
2906
3122
|
*/
|
|
2907
3123
|
getPositioningStrategy() {
|
|
2908
|
-
const breakpoint =
|
|
3124
|
+
const breakpoint =
|
|
3125
|
+
this.element.bib.mobileFullscreenBreakpoint ||
|
|
3126
|
+
this.element.floaterConfig?.fullscreenBreakpoint;
|
|
2909
3127
|
switch (this.behavior) {
|
|
2910
3128
|
case "tooltip":
|
|
2911
3129
|
return "floating";
|
|
2912
3130
|
case "dialog":
|
|
2913
3131
|
case "drawer":
|
|
2914
3132
|
if (breakpoint) {
|
|
2915
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3133
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3134
|
+
`(max-width: ${breakpoint})`,
|
|
3135
|
+
).matches;
|
|
2916
3136
|
|
|
2917
3137
|
this.element.expanded = smallerThanBreakpoint;
|
|
2918
3138
|
}
|
|
2919
3139
|
if (this.element.nested) {
|
|
2920
3140
|
return "cover";
|
|
2921
3141
|
}
|
|
2922
|
-
return
|
|
3142
|
+
return "fullscreen";
|
|
2923
3143
|
case "dropdown":
|
|
2924
3144
|
case undefined:
|
|
2925
3145
|
case null:
|
|
2926
3146
|
if (breakpoint) {
|
|
2927
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3147
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3148
|
+
`(max-width: ${breakpoint})`,
|
|
3149
|
+
).matches;
|
|
2928
3150
|
if (smallerThanBreakpoint) {
|
|
2929
|
-
return
|
|
3151
|
+
return "fullscreen";
|
|
2930
3152
|
}
|
|
2931
3153
|
}
|
|
2932
3154
|
return "floating";
|
|
@@ -2947,37 +3169,39 @@ class AuroFloatingUI {
|
|
|
2947
3169
|
const strategy = this.getPositioningStrategy();
|
|
2948
3170
|
this.configureBibStrategy(strategy);
|
|
2949
3171
|
|
|
2950
|
-
if (strategy ===
|
|
3172
|
+
if (strategy === "floating") {
|
|
2951
3173
|
this.mirrorSize();
|
|
2952
3174
|
// Define the middlware for the floater configuration
|
|
2953
3175
|
const middleware = [
|
|
2954
3176
|
offset(this.element.floaterConfig?.offset || 0),
|
|
2955
|
-
...this.element.floaterConfig?.shift ? [shift()] : [], // Add shift middleware if shift is enabled.
|
|
2956
|
-
...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
|
|
2957
|
-
...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3177
|
+
...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3178
|
+
...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3179
|
+
...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
2958
3180
|
];
|
|
2959
3181
|
|
|
2960
3182
|
// Compute the position of the bib
|
|
2961
3183
|
computePosition(this.element.trigger, this.element.bib, {
|
|
2962
|
-
strategy: this.element.floaterConfig?.strategy ||
|
|
3184
|
+
strategy: this.element.floaterConfig?.strategy || "fixed",
|
|
2963
3185
|
placement: this.element.floaterConfig?.placement,
|
|
2964
|
-
middleware: middleware || []
|
|
2965
|
-
}).then(({ x, y }) => {
|
|
3186
|
+
middleware: middleware || [],
|
|
3187
|
+
}).then(({ x, y }) => {
|
|
3188
|
+
// eslint-disable-line id-length
|
|
2966
3189
|
Object.assign(this.element.bib.style, {
|
|
2967
3190
|
left: `${x}px`,
|
|
2968
3191
|
top: `${y}px`,
|
|
2969
3192
|
});
|
|
2970
3193
|
});
|
|
2971
|
-
} else if (strategy ===
|
|
3194
|
+
} else if (strategy === "cover") {
|
|
2972
3195
|
// Compute the position of the bib
|
|
2973
3196
|
computePosition(this.element.parentNode, this.element.bib, {
|
|
2974
|
-
placement:
|
|
2975
|
-
}).then(({ x, y }) => {
|
|
3197
|
+
placement: "bottom-start",
|
|
3198
|
+
}).then(({ x, y }) => {
|
|
3199
|
+
// eslint-disable-line id-length
|
|
2976
3200
|
Object.assign(this.element.bib.style, {
|
|
2977
3201
|
left: `${x}px`,
|
|
2978
3202
|
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
2979
3203
|
width: `${this.element.parentNode.offsetWidth}px`,
|
|
2980
|
-
height: `${this.element.parentNode.offsetHeight}px
|
|
3204
|
+
height: `${this.element.parentNode.offsetHeight}px`,
|
|
2981
3205
|
});
|
|
2982
3206
|
});
|
|
2983
3207
|
}
|
|
@@ -2990,12 +3214,12 @@ class AuroFloatingUI {
|
|
|
2990
3214
|
*/
|
|
2991
3215
|
lockScroll(lock = true) {
|
|
2992
3216
|
if (lock) {
|
|
2993
|
-
document.body.style.overflow =
|
|
3217
|
+
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
2994
3218
|
|
|
2995
3219
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
2996
3220
|
this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
2997
3221
|
} else {
|
|
2998
|
-
document.body.style.overflow =
|
|
3222
|
+
document.body.style.overflow = "";
|
|
2999
3223
|
}
|
|
3000
3224
|
}
|
|
3001
3225
|
|
|
@@ -3009,23 +3233,24 @@ class AuroFloatingUI {
|
|
|
3009
3233
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3010
3234
|
*/
|
|
3011
3235
|
configureBibStrategy(value) {
|
|
3012
|
-
if (value ===
|
|
3236
|
+
if (value === "fullscreen") {
|
|
3013
3237
|
this.element.isBibFullscreen = true;
|
|
3014
3238
|
// reset the prev position
|
|
3015
|
-
this.element.bib.setAttribute(
|
|
3016
|
-
this.element.bib.style.position =
|
|
3239
|
+
this.element.bib.setAttribute("isfullscreen", "");
|
|
3240
|
+
this.element.bib.style.position = "fixed";
|
|
3017
3241
|
this.element.bib.style.top = "0px";
|
|
3018
3242
|
this.element.bib.style.left = "0px";
|
|
3019
|
-
this.element.bib.style.width =
|
|
3020
|
-
this.element.bib.style.height =
|
|
3021
|
-
this.element.style.contain =
|
|
3243
|
+
this.element.bib.style.width = "";
|
|
3244
|
+
this.element.bib.style.height = "";
|
|
3245
|
+
this.element.style.contain = "";
|
|
3022
3246
|
|
|
3023
3247
|
// reset the size that was mirroring `size` css-part
|
|
3024
|
-
const bibContent =
|
|
3248
|
+
const bibContent =
|
|
3249
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3025
3250
|
if (bibContent) {
|
|
3026
|
-
bibContent.style.width =
|
|
3027
|
-
bibContent.style.height =
|
|
3028
|
-
bibContent.style.maxWidth =
|
|
3251
|
+
bibContent.style.width = "";
|
|
3252
|
+
bibContent.style.height = "";
|
|
3253
|
+
bibContent.style.maxWidth = "";
|
|
3029
3254
|
bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
|
|
3030
3255
|
this.configureTrial = 0;
|
|
3031
3256
|
} else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
|
|
@@ -3040,21 +3265,26 @@ class AuroFloatingUI {
|
|
|
3040
3265
|
this.lockScroll(true);
|
|
3041
3266
|
}
|
|
3042
3267
|
} else {
|
|
3043
|
-
this.element.bib.style.position =
|
|
3044
|
-
this.element.bib.removeAttribute(
|
|
3268
|
+
this.element.bib.style.position = "";
|
|
3269
|
+
this.element.bib.removeAttribute("isfullscreen");
|
|
3045
3270
|
this.element.isBibFullscreen = false;
|
|
3046
|
-
this.element.style.contain =
|
|
3271
|
+
this.element.style.contain = "layout";
|
|
3047
3272
|
}
|
|
3048
3273
|
|
|
3049
3274
|
const isChanged = this.strategy && this.strategy !== value;
|
|
3050
3275
|
this.strategy = value;
|
|
3051
3276
|
if (isChanged) {
|
|
3052
|
-
const event = new CustomEvent(
|
|
3053
|
-
|
|
3054
|
-
|
|
3277
|
+
const event = new CustomEvent(
|
|
3278
|
+
this.eventPrefix
|
|
3279
|
+
? `${this.eventPrefix}-strategy-change`
|
|
3280
|
+
: "strategy-change",
|
|
3281
|
+
{
|
|
3282
|
+
detail: {
|
|
3283
|
+
value,
|
|
3284
|
+
},
|
|
3285
|
+
composed: true,
|
|
3055
3286
|
},
|
|
3056
|
-
|
|
3057
|
-
});
|
|
3287
|
+
);
|
|
3058
3288
|
|
|
3059
3289
|
this.element.dispatchEvent(event);
|
|
3060
3290
|
}
|
|
@@ -3086,19 +3316,24 @@ class AuroFloatingUI {
|
|
|
3086
3316
|
return;
|
|
3087
3317
|
}
|
|
3088
3318
|
|
|
3089
|
-
if (
|
|
3090
|
-
this.element.
|
|
3319
|
+
if (
|
|
3320
|
+
this.element.noHideOnThisFocusLoss ||
|
|
3321
|
+
this.element.hasAttribute("noHideOnThisFocusLoss")
|
|
3322
|
+
) {
|
|
3091
3323
|
return;
|
|
3092
3324
|
}
|
|
3093
3325
|
|
|
3094
3326
|
const { activeElement } = document;
|
|
3095
3327
|
// if focus is still inside of trigger or bib, do not close
|
|
3096
|
-
if (
|
|
3328
|
+
if (
|
|
3329
|
+
this.element.contains(activeElement) ||
|
|
3330
|
+
this.element.bib?.contains(activeElement)
|
|
3331
|
+
) {
|
|
3097
3332
|
return;
|
|
3098
3333
|
}
|
|
3099
3334
|
|
|
3100
3335
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3101
|
-
if (this.element.bib.hasAttribute(
|
|
3336
|
+
if (this.element.bib.hasAttribute("isfullscreen")) {
|
|
3102
3337
|
return;
|
|
3103
3338
|
}
|
|
3104
3339
|
|
|
@@ -3110,12 +3345,27 @@ class AuroFloatingUI {
|
|
|
3110
3345
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3111
3346
|
|
|
3112
3347
|
this.clickHandler = (evt) => {
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3348
|
+
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3349
|
+
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3350
|
+
// <dialog> may not include the bib in composedPath(), causing false
|
|
3351
|
+
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3352
|
+
if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
|
|
3353
|
+
return;
|
|
3354
|
+
}
|
|
3117
3355
|
|
|
3118
|
-
|
|
3356
|
+
if (
|
|
3357
|
+
(!evt.composedPath().includes(this.element.trigger) &&
|
|
3358
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
3359
|
+
(this.element.bib.backdrop &&
|
|
3360
|
+
evt.composedPath().includes(this.element.bib.backdrop))
|
|
3361
|
+
) {
|
|
3362
|
+
const existedVisibleFloatingUI =
|
|
3363
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3364
|
+
|
|
3365
|
+
if (
|
|
3366
|
+
existedVisibleFloatingUI &&
|
|
3367
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3368
|
+
) {
|
|
3119
3369
|
// if something else is open, close that
|
|
3120
3370
|
existedVisibleFloatingUI.hideBib();
|
|
3121
3371
|
document.expandedAuroFormkitDropdown = null;
|
|
@@ -3128,9 +3378,14 @@ class AuroFloatingUI {
|
|
|
3128
3378
|
|
|
3129
3379
|
// ESC key handler
|
|
3130
3380
|
this.keyDownHandler = (evt) => {
|
|
3131
|
-
if (evt.key ===
|
|
3132
|
-
const existedVisibleFloatingUI =
|
|
3133
|
-
|
|
3381
|
+
if (evt.key === "Escape" && this.element.isPopoverVisible) {
|
|
3382
|
+
const existedVisibleFloatingUI =
|
|
3383
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3384
|
+
if (
|
|
3385
|
+
existedVisibleFloatingUI &&
|
|
3386
|
+
existedVisibleFloatingUI !== this &&
|
|
3387
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3388
|
+
) {
|
|
3134
3389
|
// if something else is open, let it handle itself
|
|
3135
3390
|
return;
|
|
3136
3391
|
}
|
|
@@ -3138,17 +3393,17 @@ class AuroFloatingUI {
|
|
|
3138
3393
|
}
|
|
3139
3394
|
};
|
|
3140
3395
|
|
|
3141
|
-
if (this.behavior !==
|
|
3396
|
+
if (this.behavior !== "drawer" && this.behavior !== "dialog") {
|
|
3142
3397
|
// Add event listeners using the stored references
|
|
3143
|
-
document.addEventListener(
|
|
3398
|
+
document.addEventListener("focusin", this.focusHandler);
|
|
3144
3399
|
}
|
|
3145
3400
|
|
|
3146
|
-
document.addEventListener(
|
|
3401
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
3147
3402
|
|
|
3148
3403
|
// send this task to the end of queue to prevent conflicting
|
|
3149
3404
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
3150
3405
|
setTimeout(() => {
|
|
3151
|
-
window.addEventListener(
|
|
3406
|
+
window.addEventListener("click", this.clickHandler);
|
|
3152
3407
|
}, 0);
|
|
3153
3408
|
}
|
|
3154
3409
|
|
|
@@ -3156,34 +3411,38 @@ class AuroFloatingUI {
|
|
|
3156
3411
|
// Remove event listeners if they exist
|
|
3157
3412
|
|
|
3158
3413
|
if (this.focusHandler) {
|
|
3159
|
-
document.removeEventListener(
|
|
3414
|
+
document.removeEventListener("focusin", this.focusHandler);
|
|
3160
3415
|
this.focusHandler = null;
|
|
3161
3416
|
}
|
|
3162
3417
|
|
|
3163
3418
|
if (this.clickHandler) {
|
|
3164
|
-
window.removeEventListener(
|
|
3419
|
+
window.removeEventListener("click", this.clickHandler);
|
|
3165
3420
|
this.clickHandler = null;
|
|
3166
3421
|
}
|
|
3167
3422
|
|
|
3168
3423
|
if (this.keyDownHandler) {
|
|
3169
|
-
document.removeEventListener(
|
|
3424
|
+
document.removeEventListener("keydown", this.keyDownHandler);
|
|
3170
3425
|
this.keyDownHandler = null;
|
|
3171
3426
|
}
|
|
3172
3427
|
}
|
|
3173
3428
|
|
|
3174
3429
|
handleUpdate(changedProperties) {
|
|
3175
|
-
if (changedProperties.has(
|
|
3430
|
+
if (changedProperties.has("isPopoverVisible")) {
|
|
3176
3431
|
this.updateState();
|
|
3177
3432
|
}
|
|
3178
3433
|
}
|
|
3179
3434
|
|
|
3180
3435
|
updateCurrentExpandedDropdown() {
|
|
3181
3436
|
// Close any other dropdown that is already open
|
|
3182
|
-
const existedVisibleFloatingUI =
|
|
3183
|
-
|
|
3437
|
+
const existedVisibleFloatingUI =
|
|
3438
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3439
|
+
if (
|
|
3440
|
+
existedVisibleFloatingUI &&
|
|
3441
|
+
existedVisibleFloatingUI !== this &&
|
|
3184
3442
|
existedVisibleFloatingUI.element.isPopoverVisible &&
|
|
3185
|
-
|
|
3186
|
-
|
|
3443
|
+
existedVisibleFloatingUI.eventPrefix === this.eventPrefix
|
|
3444
|
+
) {
|
|
3445
|
+
existedVisibleFloatingUI.hideBib();
|
|
3187
3446
|
}
|
|
3188
3447
|
|
|
3189
3448
|
document.expandedAuroFloater = this;
|
|
@@ -3192,7 +3451,7 @@ class AuroFloatingUI {
|
|
|
3192
3451
|
showBib() {
|
|
3193
3452
|
if (!this.element.disabled && !this.showing) {
|
|
3194
3453
|
this.updateCurrentExpandedDropdown();
|
|
3195
|
-
this.element.triggerChevron?.setAttribute(
|
|
3454
|
+
this.element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3196
3455
|
|
|
3197
3456
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3198
3457
|
if (!this.showing) {
|
|
@@ -3206,9 +3465,13 @@ class AuroFloatingUI {
|
|
|
3206
3465
|
}
|
|
3207
3466
|
|
|
3208
3467
|
// Setup auto update to handle resize and scroll
|
|
3209
|
-
this.element.cleanup = autoUpdate(
|
|
3210
|
-
this.
|
|
3211
|
-
|
|
3468
|
+
this.element.cleanup = autoUpdate(
|
|
3469
|
+
this.element.trigger || this.element.parentNode,
|
|
3470
|
+
this.element.bib,
|
|
3471
|
+
() => {
|
|
3472
|
+
this.position();
|
|
3473
|
+
},
|
|
3474
|
+
);
|
|
3212
3475
|
}
|
|
3213
3476
|
}
|
|
3214
3477
|
|
|
@@ -3219,7 +3482,7 @@ class AuroFloatingUI {
|
|
|
3219
3482
|
hideBib(eventType = "unknown") {
|
|
3220
3483
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
3221
3484
|
this.lockScroll(false);
|
|
3222
|
-
this.element.triggerChevron?.removeAttribute(
|
|
3485
|
+
this.element.triggerChevron?.removeAttribute("data-expanded");
|
|
3223
3486
|
|
|
3224
3487
|
if (this.element.isPopoverVisible) {
|
|
3225
3488
|
this.element.isPopoverVisible = false;
|
|
@@ -3239,13 +3502,16 @@ class AuroFloatingUI {
|
|
|
3239
3502
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3240
3503
|
*/
|
|
3241
3504
|
dispatchEventDropdownToggle(eventType) {
|
|
3242
|
-
const event = new CustomEvent(
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3505
|
+
const event = new CustomEvent(
|
|
3506
|
+
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3507
|
+
{
|
|
3508
|
+
detail: {
|
|
3509
|
+
expanded: this.showing,
|
|
3510
|
+
eventType: eventType || "unknown",
|
|
3511
|
+
},
|
|
3512
|
+
composed: true,
|
|
3246
3513
|
},
|
|
3247
|
-
|
|
3248
|
-
});
|
|
3514
|
+
);
|
|
3249
3515
|
|
|
3250
3516
|
this.element.dispatchEvent(event);
|
|
3251
3517
|
}
|
|
@@ -3257,12 +3523,15 @@ class AuroFloatingUI {
|
|
|
3257
3523
|
this.showBib();
|
|
3258
3524
|
}
|
|
3259
3525
|
|
|
3260
|
-
const event = new CustomEvent(
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3526
|
+
const event = new CustomEvent(
|
|
3527
|
+
this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
|
|
3528
|
+
{
|
|
3529
|
+
composed: true,
|
|
3530
|
+
detail: {
|
|
3531
|
+
expanded: this.element.isPopoverVisible,
|
|
3532
|
+
},
|
|
3533
|
+
},
|
|
3534
|
+
);
|
|
3266
3535
|
|
|
3267
3536
|
this.element.dispatchEvent(event);
|
|
3268
3537
|
}
|
|
@@ -3270,30 +3539,32 @@ class AuroFloatingUI {
|
|
|
3270
3539
|
handleEvent(event) {
|
|
3271
3540
|
if (!this.element.disableEventShow) {
|
|
3272
3541
|
switch (event.type) {
|
|
3273
|
-
case
|
|
3542
|
+
case "keydown": {
|
|
3274
3543
|
// Support both Enter and Space keys for accessibility
|
|
3275
3544
|
// Space is included as it's expected behavior for interactive elements
|
|
3276
3545
|
|
|
3277
3546
|
const origin = event.composedPath()[0];
|
|
3278
|
-
if (
|
|
3279
|
-
|
|
3547
|
+
if (
|
|
3548
|
+
event.key === "Enter" ||
|
|
3549
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3550
|
+
) {
|
|
3280
3551
|
event.preventDefault();
|
|
3281
3552
|
this.handleClick();
|
|
3282
3553
|
}
|
|
3283
3554
|
break;
|
|
3284
|
-
|
|
3555
|
+
}
|
|
3556
|
+
case "mouseenter":
|
|
3285
3557
|
if (this.element.hoverToggle) {
|
|
3286
3558
|
this.showBib();
|
|
3287
3559
|
}
|
|
3288
3560
|
break;
|
|
3289
|
-
case
|
|
3561
|
+
case "mouseleave":
|
|
3290
3562
|
if (this.element.hoverToggle) {
|
|
3291
3563
|
this.hideBib("mouseleave");
|
|
3292
3564
|
}
|
|
3293
3565
|
break;
|
|
3294
|
-
case
|
|
3566
|
+
case "focus":
|
|
3295
3567
|
if (this.element.focusShow) {
|
|
3296
|
-
|
|
3297
3568
|
/*
|
|
3298
3569
|
This needs to better handle clicking that gives focus -
|
|
3299
3570
|
currently it shows and then immediately hides the bib
|
|
@@ -3301,12 +3572,12 @@ class AuroFloatingUI {
|
|
|
3301
3572
|
this.showBib();
|
|
3302
3573
|
}
|
|
3303
3574
|
break;
|
|
3304
|
-
case
|
|
3575
|
+
case "blur":
|
|
3305
3576
|
// send this task 100ms later queue to
|
|
3306
3577
|
// wait a frame in case focus moves within the floating element/bib
|
|
3307
3578
|
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3308
3579
|
break;
|
|
3309
|
-
case
|
|
3580
|
+
case "click":
|
|
3310
3581
|
if (document.activeElement === document.body) {
|
|
3311
3582
|
event.currentTarget.focus();
|
|
3312
3583
|
}
|
|
@@ -3325,15 +3596,15 @@ class AuroFloatingUI {
|
|
|
3325
3596
|
*/
|
|
3326
3597
|
handleTriggerTabIndex() {
|
|
3327
3598
|
const focusableElementSelectors = [
|
|
3328
|
-
|
|
3329
|
-
|
|
3599
|
+
"a",
|
|
3600
|
+
"button",
|
|
3330
3601
|
'input:not([type="hidden"])',
|
|
3331
|
-
|
|
3332
|
-
|
|
3602
|
+
"select",
|
|
3603
|
+
"textarea",
|
|
3333
3604
|
'[tabindex]:not([tabindex="-1"])',
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3605
|
+
"auro-button",
|
|
3606
|
+
"auro-input",
|
|
3607
|
+
"auro-hyperlink",
|
|
3337
3608
|
];
|
|
3338
3609
|
|
|
3339
3610
|
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
@@ -3361,10 +3632,10 @@ class AuroFloatingUI {
|
|
|
3361
3632
|
* @param {*} eventPrefix
|
|
3362
3633
|
*/
|
|
3363
3634
|
regenerateBibId() {
|
|
3364
|
-
this.id = this.element.getAttribute(
|
|
3635
|
+
this.id = this.element.getAttribute("id");
|
|
3365
3636
|
if (!this.id) {
|
|
3366
3637
|
this.id = window.crypto.randomUUID();
|
|
3367
|
-
this.element.setAttribute(
|
|
3638
|
+
this.element.setAttribute("id", this.id);
|
|
3368
3639
|
}
|
|
3369
3640
|
|
|
3370
3641
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
@@ -3385,11 +3656,15 @@ class AuroFloatingUI {
|
|
|
3385
3656
|
if (this.element.trigger) {
|
|
3386
3657
|
this.disconnect();
|
|
3387
3658
|
}
|
|
3388
|
-
this.element.trigger =
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3659
|
+
this.element.trigger =
|
|
3660
|
+
this.element.triggerElement ||
|
|
3661
|
+
this.element.shadowRoot.querySelector("#trigger") ||
|
|
3662
|
+
this.element.trigger;
|
|
3663
|
+
this.element.bib =
|
|
3664
|
+
this.element.shadowRoot.querySelector("#bib") || this.element.bib;
|
|
3665
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
|
|
3666
|
+
this.element.triggerChevron =
|
|
3667
|
+
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3393
3668
|
|
|
3394
3669
|
if (this.element.floaterConfig) {
|
|
3395
3670
|
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
@@ -3400,12 +3675,12 @@ class AuroFloatingUI {
|
|
|
3400
3675
|
|
|
3401
3676
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3402
3677
|
if (this.element.trigger) {
|
|
3403
|
-
this.element.trigger.addEventListener(
|
|
3404
|
-
this.element.trigger.addEventListener(
|
|
3405
|
-
this.element.trigger.addEventListener(
|
|
3406
|
-
this.element.trigger.addEventListener(
|
|
3407
|
-
this.element.trigger.addEventListener(
|
|
3408
|
-
this.element.trigger.addEventListener(
|
|
3678
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3679
|
+
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
3680
|
+
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3681
|
+
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3682
|
+
this.element.trigger.addEventListener("focus", this.handleEvent);
|
|
3683
|
+
this.element.trigger.addEventListener("blur", this.handleEvent);
|
|
3409
3684
|
}
|
|
3410
3685
|
}
|
|
3411
3686
|
|
|
@@ -3420,12 +3695,18 @@ class AuroFloatingUI {
|
|
|
3420
3695
|
|
|
3421
3696
|
// Remove event & keyboard listeners
|
|
3422
3697
|
if (this.element?.trigger) {
|
|
3423
|
-
this.element.trigger.removeEventListener(
|
|
3424
|
-
this.element.trigger.removeEventListener(
|
|
3425
|
-
this.element.trigger.removeEventListener(
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3698
|
+
this.element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3699
|
+
this.element.trigger.removeEventListener("click", this.handleEvent);
|
|
3700
|
+
this.element.trigger.removeEventListener(
|
|
3701
|
+
"mouseenter",
|
|
3702
|
+
this.handleEvent,
|
|
3703
|
+
);
|
|
3704
|
+
this.element.trigger.removeEventListener(
|
|
3705
|
+
"mouseleave",
|
|
3706
|
+
this.handleEvent,
|
|
3707
|
+
);
|
|
3708
|
+
this.element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3709
|
+
this.element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3429
3710
|
}
|
|
3430
3711
|
}
|
|
3431
3712
|
}
|
|
@@ -3433,32 +3714,32 @@ class AuroFloatingUI {
|
|
|
3433
3714
|
|
|
3434
3715
|
// Selectors for focusable elements
|
|
3435
3716
|
const FOCUSABLE_SELECTORS = [
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3717
|
+
"a[href]",
|
|
3718
|
+
"button:not([disabled])",
|
|
3719
|
+
"textarea:not([disabled])",
|
|
3720
|
+
"input:not([disabled])",
|
|
3721
|
+
"select:not([disabled])",
|
|
3441
3722
|
'[role="tab"]:not([disabled])',
|
|
3442
3723
|
'[role="link"]:not([disabled])',
|
|
3443
3724
|
'[role="button"]:not([disabled])',
|
|
3444
3725
|
'[tabindex]:not([tabindex="-1"])',
|
|
3445
|
-
'[contenteditable]:not([contenteditable="false"])'
|
|
3726
|
+
'[contenteditable]:not([contenteditable="false"])',
|
|
3446
3727
|
];
|
|
3447
3728
|
|
|
3448
3729
|
// List of custom components that are known to be focusable
|
|
3449
3730
|
const FOCUSABLE_COMPONENTS = [
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
'auro-menu',
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3731
|
+
"auro-checkbox",
|
|
3732
|
+
"auro-radio",
|
|
3733
|
+
"auro-dropdown",
|
|
3734
|
+
"auro-button",
|
|
3735
|
+
"auro-combobox",
|
|
3736
|
+
"auro-input",
|
|
3737
|
+
"auro-counter",
|
|
3738
|
+
// 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
|
|
3739
|
+
"auro-select",
|
|
3740
|
+
"auro-datepicker",
|
|
3741
|
+
"auro-hyperlink",
|
|
3742
|
+
"auro-accordion",
|
|
3462
3743
|
];
|
|
3463
3744
|
|
|
3464
3745
|
/**
|
|
@@ -3472,21 +3753,43 @@ function isFocusableComponent(element) {
|
|
|
3472
3753
|
const componentName = element.tagName.toLowerCase();
|
|
3473
3754
|
|
|
3474
3755
|
// Guard Clause: Element is a focusable component
|
|
3475
|
-
if (
|
|
3756
|
+
if (
|
|
3757
|
+
!FOCUSABLE_COMPONENTS.some(
|
|
3758
|
+
(name) => element.hasAttribute(name) || componentName === name,
|
|
3759
|
+
)
|
|
3760
|
+
)
|
|
3761
|
+
return false;
|
|
3476
3762
|
|
|
3477
3763
|
// Guard Clause: Element is not disabled
|
|
3478
|
-
if (element.hasAttribute(
|
|
3764
|
+
if (element.hasAttribute("disabled")) return false;
|
|
3479
3765
|
|
|
3480
3766
|
// Guard Clause: The element is a hyperlink and has no href attribute
|
|
3481
|
-
if (componentName.match("hyperlink") && !element.hasAttribute(
|
|
3767
|
+
if (componentName.match("hyperlink") && !element.hasAttribute("href"))
|
|
3768
|
+
return false;
|
|
3482
3769
|
|
|
3483
3770
|
// If all guard clauses pass, the element is a focusable component
|
|
3484
3771
|
return true;
|
|
3485
3772
|
}
|
|
3486
3773
|
|
|
3774
|
+
/**
|
|
3775
|
+
* Safely get a numeric tabindex for an element.
|
|
3776
|
+
* Returns a number if the tabindex is a valid integer, otherwise null.
|
|
3777
|
+
*
|
|
3778
|
+
* @param {HTMLElement} element The element whose tabindex to read.
|
|
3779
|
+
* @returns {?number} The numeric tabindex or null if missing/invalid.
|
|
3780
|
+
*/
|
|
3781
|
+
function getNumericTabIndex(element) {
|
|
3782
|
+
const raw = element.getAttribute("tabindex");
|
|
3783
|
+
if (raw == null) return null;
|
|
3784
|
+
|
|
3785
|
+
const value = Number.parseInt(raw, 10);
|
|
3786
|
+
return Number.isNaN(value) ? null : value;
|
|
3787
|
+
}
|
|
3788
|
+
|
|
3487
3789
|
/**
|
|
3488
3790
|
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
3489
3791
|
* Returns a unique, ordered array of elements that can receive focus.
|
|
3792
|
+
* Also sorts elements with tabindex first, preserving their order.
|
|
3490
3793
|
*
|
|
3491
3794
|
* @param {HTMLElement} container The container to search within
|
|
3492
3795
|
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
@@ -3520,14 +3823,14 @@ function getFocusableElements(container) {
|
|
|
3520
3823
|
if (root.shadowRoot) {
|
|
3521
3824
|
// Process shadow DOM children in order
|
|
3522
3825
|
if (root.shadowRoot.children) {
|
|
3523
|
-
Array.from(root.shadowRoot.children).forEach(child => {
|
|
3826
|
+
Array.from(root.shadowRoot.children).forEach((child) => {
|
|
3524
3827
|
collectFocusableElements(child);
|
|
3525
3828
|
});
|
|
3526
3829
|
}
|
|
3527
3830
|
}
|
|
3528
3831
|
|
|
3529
3832
|
// Process slots and their assigned nodes in order
|
|
3530
|
-
if (root.tagName ===
|
|
3833
|
+
if (root.tagName === "SLOT") {
|
|
3531
3834
|
const assignedNodes = root.assignedNodes({ flatten: true });
|
|
3532
3835
|
for (const node of assignedNodes) {
|
|
3533
3836
|
collectFocusableElements(node);
|
|
@@ -3535,7 +3838,7 @@ function getFocusableElements(container) {
|
|
|
3535
3838
|
} else {
|
|
3536
3839
|
// Process light DOM children in order
|
|
3537
3840
|
if (root.children) {
|
|
3538
|
-
Array.from(root.children).forEach(child => {
|
|
3841
|
+
Array.from(root.children).forEach((child) => {
|
|
3539
3842
|
collectFocusableElements(child);
|
|
3540
3843
|
});
|
|
3541
3844
|
}
|
|
@@ -3558,7 +3861,37 @@ function getFocusableElements(container) {
|
|
|
3558
3861
|
}
|
|
3559
3862
|
}
|
|
3560
3863
|
|
|
3561
|
-
|
|
3864
|
+
// Move tab-indexed elements to the front while preserving their order
|
|
3865
|
+
// This ensures that elements with tabindex are prioritized in the focus order
|
|
3866
|
+
|
|
3867
|
+
// First extract elements with valid positive tabindex
|
|
3868
|
+
const elementsWithTabindex = uniqueElements.filter((el) => {
|
|
3869
|
+
const tabindex = getNumericTabIndex(el);
|
|
3870
|
+
return tabindex !== null && tabindex > 0;
|
|
3871
|
+
});
|
|
3872
|
+
|
|
3873
|
+
// Sort these elements by their tabindex value
|
|
3874
|
+
elementsWithTabindex.sort((a, b) => {
|
|
3875
|
+
const aIndex = getNumericTabIndex(a) ?? 0;
|
|
3876
|
+
const bIndex = getNumericTabIndex(b) ?? 0;
|
|
3877
|
+
return aIndex - bIndex;
|
|
3878
|
+
});
|
|
3879
|
+
|
|
3880
|
+
// Elements without tabindex (preserving their original order)
|
|
3881
|
+
const elementsWithoutTabindex = uniqueElements.filter((el) => {
|
|
3882
|
+
const tabindex = getNumericTabIndex(el);
|
|
3883
|
+
|
|
3884
|
+
// Elements without tabindex or with tabindex of 0 stay in DOM order
|
|
3885
|
+
return tabindex === null || tabindex === 0;
|
|
3886
|
+
});
|
|
3887
|
+
|
|
3888
|
+
// Combine both arrays with tabindex elements first
|
|
3889
|
+
const tabIndexedUniqueElements = [
|
|
3890
|
+
...elementsWithTabindex,
|
|
3891
|
+
...elementsWithoutTabindex,
|
|
3892
|
+
];
|
|
3893
|
+
|
|
3894
|
+
return tabIndexedUniqueElements;
|
|
3562
3895
|
}
|
|
3563
3896
|
|
|
3564
3897
|
/**
|
|
@@ -3571,78 +3904,141 @@ class FocusTrap {
|
|
|
3571
3904
|
* Initializes event listeners and prepares the container for focus management.
|
|
3572
3905
|
*
|
|
3573
3906
|
* @param {HTMLElement} container The DOM element to trap focus within.
|
|
3907
|
+
* @param {boolean} [controlTabOrder=false] If true enables manual control of the tab order by the FocusTrap.
|
|
3574
3908
|
* @throws {Error} If the provided container is not a valid HTMLElement.
|
|
3575
3909
|
*/
|
|
3576
|
-
constructor(container) {
|
|
3910
|
+
constructor(container, controlTabOrder = false) {
|
|
3577
3911
|
if (!container || !(container instanceof HTMLElement)) {
|
|
3578
3912
|
throw new Error("FocusTrap requires a valid HTMLElement.");
|
|
3579
3913
|
}
|
|
3580
3914
|
|
|
3581
3915
|
this.container = container;
|
|
3582
|
-
this.tabDirection =
|
|
3916
|
+
this.tabDirection = "forward"; // or 'backward';
|
|
3917
|
+
this.controlTabOrder = controlTabOrder;
|
|
3583
3918
|
|
|
3584
3919
|
this._init();
|
|
3585
3920
|
}
|
|
3586
3921
|
|
|
3587
|
-
/**
|
|
3588
|
-
* Initializes the focus trap by setting up event listeners and attributes on the container.
|
|
3589
|
-
* Prepares the container for focus management, including support for shadow DOM and inert attributes.
|
|
3590
|
-
*
|
|
3591
|
-
* @private
|
|
3592
|
-
*/
|
|
3593
|
-
_init() {
|
|
3922
|
+
/**
|
|
3923
|
+
* Initializes the focus trap by setting up event listeners and attributes on the container.
|
|
3924
|
+
* Prepares the container for focus management, including support for shadow DOM and inert attributes.
|
|
3925
|
+
*
|
|
3926
|
+
* @private
|
|
3927
|
+
*/
|
|
3928
|
+
_init() {
|
|
3929
|
+
// Add inert attribute to prevent focusing programmatically as well (if supported)
|
|
3930
|
+
if ("inert" in HTMLElement.prototype) {
|
|
3931
|
+
this.container.inert = false; // Ensure the container isn't inert
|
|
3932
|
+
this.container.setAttribute("data-focus-trap-container", true); // Mark for identification
|
|
3933
|
+
}
|
|
3934
|
+
|
|
3935
|
+
// Track tab direction
|
|
3936
|
+
this.container.addEventListener("keydown", this._onKeydown);
|
|
3937
|
+
}
|
|
3938
|
+
|
|
3939
|
+
/**
|
|
3940
|
+
* Gets an array of currently active (focused) elements in the document and shadow DOM.
|
|
3941
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
3942
|
+
* @private
|
|
3943
|
+
*/
|
|
3944
|
+
_getActiveElements() {
|
|
3945
|
+
// Get the active element(s) in the document and shadow root
|
|
3946
|
+
// This will include the active element in the shadow DOM if it exists
|
|
3947
|
+
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
3948
|
+
let { activeElement } = document;
|
|
3949
|
+
const actives = [activeElement];
|
|
3950
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
3951
|
+
actives.push(activeElement.shadowRoot.activeElement);
|
|
3952
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
3953
|
+
}
|
|
3954
|
+
return actives;
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3957
|
+
/**
|
|
3958
|
+
* Gets the next focus index based on the current index and focusable elements.
|
|
3959
|
+
* @param {number} currentIndex The current index of the focused element.
|
|
3960
|
+
* @param {Array<HTMLElement>} focusables The array of focusable elements.
|
|
3961
|
+
* @returns {number|null} The next focus index or null if not determined.
|
|
3962
|
+
*/
|
|
3963
|
+
_getNextFocusIndex(currentIndex, focusables, actives) {
|
|
3964
|
+
if (this.controlTabOrder) {
|
|
3965
|
+
// Calculate the new index based on the current index and tab direction
|
|
3966
|
+
let newFocusIndex =
|
|
3967
|
+
currentIndex + (this.tabDirection === "forward" ? 1 : -1);
|
|
3968
|
+
|
|
3969
|
+
// Wrap-around logic
|
|
3970
|
+
if (newFocusIndex < 0) newFocusIndex = focusables.length - 1;
|
|
3971
|
+
if (newFocusIndex >= focusables.length) newFocusIndex = 0;
|
|
3972
|
+
|
|
3973
|
+
// Early return with the new index
|
|
3974
|
+
return newFocusIndex;
|
|
3975
|
+
}
|
|
3976
|
+
|
|
3977
|
+
// Determine if we need to wrap
|
|
3978
|
+
const atFirst =
|
|
3979
|
+
actives.includes(focusables[0]) || actives.includes(this.container);
|
|
3980
|
+
const atLast = actives.includes(focusables[focusables.length - 1]);
|
|
3981
|
+
|
|
3982
|
+
// Only wrap if at the ends
|
|
3983
|
+
if (this.tabDirection === "backward" && atFirst) {
|
|
3984
|
+
return focusables.length - 1;
|
|
3985
|
+
}
|
|
3986
|
+
|
|
3987
|
+
if (this.tabDirection === "forward" && atLast) {
|
|
3988
|
+
return 0;
|
|
3989
|
+
}
|
|
3990
|
+
|
|
3991
|
+
// No wrap, so don't change focus, return early
|
|
3992
|
+
return null;
|
|
3993
|
+
}
|
|
3994
|
+
|
|
3995
|
+
/**
|
|
3996
|
+
* Handles the Tab key press event to manage focus within the container.
|
|
3997
|
+
* @param {KeyboardEvent} e The keyboard event triggered by the user.
|
|
3998
|
+
* @returns {void}
|
|
3999
|
+
*/
|
|
4000
|
+
_handleTabKey(e) {
|
|
4001
|
+
// Update the focusable elements
|
|
4002
|
+
const focusables = this._getFocusableElements();
|
|
4003
|
+
|
|
4004
|
+
// If there are no focusable elements, exit
|
|
4005
|
+
if (!focusables.length) return;
|
|
4006
|
+
|
|
4007
|
+
// Set the tab direction based on the key pressed
|
|
4008
|
+
this.tabDirection = e.shiftKey ? "backward" : "forward";
|
|
4009
|
+
|
|
4010
|
+
// Get the active elements that are currently focused
|
|
4011
|
+
const actives = this._getActiveElements();
|
|
4012
|
+
|
|
4013
|
+
// If we're at either end of the focusable elements, wrap around to the other end
|
|
4014
|
+
let focusIndex = focusables.findIndex((el) => actives.includes(el));
|
|
4015
|
+
|
|
4016
|
+
// Fallback if we have no focused element
|
|
4017
|
+
if (focusIndex === -1) focusIndex = 0;
|
|
4018
|
+
|
|
4019
|
+
// Get the next focus index based on the current focus index, tab direction, and controlTabOrder setting
|
|
4020
|
+
// Is null if no new focus index is determined
|
|
4021
|
+
const newFocusIndex = this._getNextFocusIndex(
|
|
4022
|
+
focusIndex,
|
|
4023
|
+
focusables,
|
|
4024
|
+
actives,
|
|
4025
|
+
);
|
|
3594
4026
|
|
|
3595
|
-
//
|
|
3596
|
-
if (
|
|
3597
|
-
|
|
3598
|
-
|
|
4027
|
+
// If we have a new focus index, set focus to that element
|
|
4028
|
+
if (newFocusIndex !== null) {
|
|
4029
|
+
e.preventDefault();
|
|
4030
|
+
focusables[newFocusIndex].focus();
|
|
3599
4031
|
}
|
|
3600
|
-
|
|
3601
|
-
// Track tab direction
|
|
3602
|
-
this.container.addEventListener('keydown', this._onKeydown);
|
|
3603
4032
|
}
|
|
3604
4033
|
|
|
3605
4034
|
/**
|
|
3606
|
-
*
|
|
3607
|
-
* Ensures that focus wraps around when reaching the first or last focusable element.
|
|
3608
|
-
*
|
|
4035
|
+
* Catches the keydown event
|
|
3609
4036
|
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
3610
4037
|
* @private
|
|
3611
4038
|
*/
|
|
3612
4039
|
_onKeydown = (e) => {
|
|
3613
|
-
|
|
3614
|
-
if (e.key ===
|
|
3615
|
-
|
|
3616
|
-
// Set the tab direction based on the key pressed
|
|
3617
|
-
this.tabDirection = e.shiftKey ? 'backward' : 'forward';
|
|
3618
|
-
|
|
3619
|
-
// Get the active element(s) in the document and shadow root
|
|
3620
|
-
// This will include the active element in the shadow DOM if it exists
|
|
3621
|
-
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
3622
|
-
let activeElement = document.activeElement;
|
|
3623
|
-
const actives = [activeElement];
|
|
3624
|
-
while (activeElement?.shadowRoot?.activeElement) {
|
|
3625
|
-
actives.push(activeElement.shadowRoot.activeElement);
|
|
3626
|
-
activeElement = activeElement.shadowRoot.activeElement;
|
|
3627
|
-
}
|
|
3628
|
-
|
|
3629
|
-
// Update the focusable elements
|
|
3630
|
-
const focusables = this._getFocusableElements();
|
|
3631
|
-
|
|
3632
|
-
// If we're at either end of the focusable elements, wrap around to the other end
|
|
3633
|
-
const focusIndex =
|
|
3634
|
-
(actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
|
|
3635
|
-
? focusables.length - 1
|
|
3636
|
-
: actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
|
|
3637
|
-
? 0
|
|
3638
|
-
: null;
|
|
3639
|
-
|
|
3640
|
-
if (focusIndex !== null) {
|
|
3641
|
-
focusables[focusIndex].focus();
|
|
3642
|
-
e.preventDefault(); // Prevent default tab behavior
|
|
3643
|
-
e.stopPropagation(); // Stop the event from bubbling up
|
|
3644
|
-
}
|
|
3645
|
-
}
|
|
4040
|
+
// Handle tab
|
|
4041
|
+
if (e.key === "Tab") this._handleTabKey(e);
|
|
3646
4042
|
};
|
|
3647
4043
|
|
|
3648
4044
|
/**
|
|
@@ -3655,8 +4051,8 @@ class FocusTrap {
|
|
|
3655
4051
|
_getFocusableElements() {
|
|
3656
4052
|
// Use the imported utility function to get focusable elements
|
|
3657
4053
|
const elements = getFocusableElements(this.container);
|
|
3658
|
-
|
|
3659
|
-
//
|
|
4054
|
+
|
|
4055
|
+
// Return the elements found
|
|
3660
4056
|
return elements;
|
|
3661
4057
|
}
|
|
3662
4058
|
|
|
@@ -3683,12 +4079,11 @@ class FocusTrap {
|
|
|
3683
4079
|
* Call this method to clean up when the focus trap is no longer needed.
|
|
3684
4080
|
*/
|
|
3685
4081
|
disconnect() {
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
this.container.removeAttribute('data-focus-trap-container');
|
|
4082
|
+
if (this.container.hasAttribute("data-focus-trap-container")) {
|
|
4083
|
+
this.container.removeAttribute("data-focus-trap-container");
|
|
3689
4084
|
}
|
|
3690
4085
|
|
|
3691
|
-
this.container.removeEventListener(
|
|
4086
|
+
this.container.removeEventListener("keydown", this._onKeydown);
|
|
3692
4087
|
}
|
|
3693
4088
|
}
|
|
3694
4089
|
|
|
@@ -3732,11 +4127,11 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
3732
4127
|
}
|
|
3733
4128
|
};
|
|
3734
4129
|
|
|
3735
|
-
let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$2='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';let m$2 = class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$2=new Map,f$2=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$2.has(t)||g$2.set(t,fetch(t).then(e)),g$2.get(t)};var w$2=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
3736
|
-
`;let z$2 = class z extends m$2{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m$2.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$2}async fetchIcon(t,a){let e="";e="logos"===t?await f$2(`${this.uri}/${t}/${a}.svg`):await f$2(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u$2,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}};css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
4130
|
+
let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}};var u$2='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';let m$2 = class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$2=new Map,f$2=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$2.has(t)||g$2.set(t,fetch(t).then(e)),g$2.get(t)};var w$2=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
4131
|
+
`;let z$2 = class z extends m$2{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m$2.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$2}async fetchIcon(t,a){let e="";e="logos"===t?await f$2(`${this.uri}/${t}/${a}.svg`):await f$2(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u$2,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}};css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
3737
4132
|
`;var y$2=css`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
3738
|
-
`;var
|
|
3739
|
-
`;let
|
|
4133
|
+
`;var x$2=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
4134
|
+
`;let _$1 = class _ extends z$2{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$2;}static get properties(){return {...z$2.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z$2.styles,y$2,w$2,x$2]}static register(t="auro-icon"){p$2.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html$1`
|
|
3740
4135
|
<div class="componentWrapper">
|
|
3741
4136
|
<div
|
|
3742
4137
|
class="${classMap({svgWrapper:true})}"
|
|
@@ -3756,9 +4151,9 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3756
4151
|
</div>
|
|
3757
4152
|
`}};
|
|
3758
4153
|
|
|
3759
|
-
var iconVersion$1 = '9.1.
|
|
4154
|
+
var iconVersion$1 = '9.1.2';
|
|
3760
4155
|
|
|
3761
|
-
var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}
|
|
4156
|
+
var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
3762
4157
|
|
|
3763
4158
|
var colorCss$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3764
4159
|
|
|
@@ -3766,6 +4161,8 @@ var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--
|
|
|
3766
4161
|
|
|
3767
4162
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3768
4163
|
// See LICENSE in the project root for license information.
|
|
4164
|
+
/* eslint-disable max-lines */
|
|
4165
|
+
// ---------------------------------------------------------------------
|
|
3769
4166
|
|
|
3770
4167
|
|
|
3771
4168
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -3860,6 +4257,28 @@ class AuroDropdownBib extends LitElement {
|
|
|
3860
4257
|
shape: {
|
|
3861
4258
|
type: String,
|
|
3862
4259
|
reflect: true
|
|
4260
|
+
},
|
|
4261
|
+
|
|
4262
|
+
/**
|
|
4263
|
+
* Accessible label for the dialog element, used when displayed as a modal.
|
|
4264
|
+
* Applied via aria-labelledby on a visually hidden element rather than
|
|
4265
|
+
* aria-label because iOS VoiceOver does not reliably read aria-label
|
|
4266
|
+
* on <dialog> elements.
|
|
4267
|
+
* @private
|
|
4268
|
+
*/
|
|
4269
|
+
dialogLabel: {
|
|
4270
|
+
type: String
|
|
4271
|
+
},
|
|
4272
|
+
|
|
4273
|
+
/**
|
|
4274
|
+
* Overrides the native role of the dialog element.
|
|
4275
|
+
* For example, set to `"presentation"` on desktop combobox to prevent
|
|
4276
|
+
* VoiceOver from announcing "listbox inside of a dialog".
|
|
4277
|
+
* When `undefined`, the dialog keeps its native role.
|
|
4278
|
+
* @private
|
|
4279
|
+
*/
|
|
4280
|
+
dialogRole: {
|
|
4281
|
+
type: String
|
|
3863
4282
|
}
|
|
3864
4283
|
};
|
|
3865
4284
|
}
|
|
@@ -3927,7 +4346,10 @@ class AuroDropdownBib extends LitElement {
|
|
|
3927
4346
|
firstUpdated(changedProperties) {
|
|
3928
4347
|
super.firstUpdated(changedProperties);
|
|
3929
4348
|
|
|
3930
|
-
|
|
4349
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4350
|
+
this._setupCancelHandler(dialog);
|
|
4351
|
+
this._setupKeyboardBridge(dialog);
|
|
4352
|
+
|
|
3931
4353
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
3932
4354
|
bubbles: true,
|
|
3933
4355
|
composed: true,
|
|
@@ -3937,6 +4359,189 @@ class AuroDropdownBib extends LitElement {
|
|
|
3937
4359
|
}));
|
|
3938
4360
|
}
|
|
3939
4361
|
|
|
4362
|
+
/**
|
|
4363
|
+
* Forwards the dialog's native `cancel` event (fired on ESC) as
|
|
4364
|
+
* an `auro-bib-cancel` custom event so parent components can close.
|
|
4365
|
+
* @param {HTMLDialogElement} dialog
|
|
4366
|
+
* @private
|
|
4367
|
+
*/
|
|
4368
|
+
_setupCancelHandler(dialog) {
|
|
4369
|
+
dialog.addEventListener('cancel', (event) => {
|
|
4370
|
+
event.preventDefault();
|
|
4371
|
+
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4372
|
+
bubbles: true,
|
|
4373
|
+
composed: true
|
|
4374
|
+
}));
|
|
4375
|
+
});
|
|
4376
|
+
}
|
|
4377
|
+
|
|
4378
|
+
/**
|
|
4379
|
+
* showModal() creates a closed focus scope — keyboard events inside
|
|
4380
|
+
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4381
|
+
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
4382
|
+
* that gap by re-dispatching navigation keys so they cross the
|
|
4383
|
+
* shadow boundary and reach the menu navigation logic in the parent
|
|
4384
|
+
* component.
|
|
4385
|
+
*
|
|
4386
|
+
* The trade-off: intercepting these keys means native keyboard
|
|
4387
|
+
* behaviors that would normally "just work" must be manually
|
|
4388
|
+
* re-implemented here:
|
|
4389
|
+
*
|
|
4390
|
+
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4391
|
+
* native Enter→click that <button> provides, so we call .click()
|
|
4392
|
+
* directly when Enter is pressed on a button-like element.
|
|
4393
|
+
*
|
|
4394
|
+
* - Tab: Intercepted and re-dispatched so parent components
|
|
4395
|
+
* (select/combobox) can select the active option and close the
|
|
4396
|
+
* dialog. The <dialog> provides containment and isolation
|
|
4397
|
+
* (inert background, VoiceOver focus trapping, top layer), while
|
|
4398
|
+
* the content inside is a role="listbox" navigated via
|
|
4399
|
+
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
4400
|
+
* behavior follows listbox conventions (select + close) because
|
|
4401
|
+
* the dialog's native Tab trap only cycles between the close
|
|
4402
|
+
* button and browser chrome.
|
|
4403
|
+
*
|
|
4404
|
+
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4405
|
+
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
4406
|
+
* is a secondary path for parent components that also listen for
|
|
4407
|
+
* Escape keydown.
|
|
4408
|
+
*
|
|
4409
|
+
* @param {HTMLDialogElement} dialog
|
|
4410
|
+
* @private
|
|
4411
|
+
*/
|
|
4412
|
+
_setupKeyboardBridge(dialog) {
|
|
4413
|
+
const navKeys = new Set([
|
|
4414
|
+
'ArrowUp',
|
|
4415
|
+
'ArrowDown',
|
|
4416
|
+
'Enter',
|
|
4417
|
+
'Escape',
|
|
4418
|
+
'Tab'
|
|
4419
|
+
]);
|
|
4420
|
+
|
|
4421
|
+
dialog.addEventListener('keydown', (event) => {
|
|
4422
|
+
if (!navKeys.has(event.key)) {
|
|
4423
|
+
return;
|
|
4424
|
+
}
|
|
4425
|
+
|
|
4426
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4427
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4428
|
+
// and click it directly.
|
|
4429
|
+
if (event.key === 'Enter') {
|
|
4430
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4431
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4432
|
+
if (btn) {
|
|
4433
|
+
event.preventDefault();
|
|
4434
|
+
event.stopPropagation();
|
|
4435
|
+
btn.click();
|
|
4436
|
+
return;
|
|
4437
|
+
}
|
|
4438
|
+
}
|
|
4439
|
+
|
|
4440
|
+
event.preventDefault();
|
|
4441
|
+
event.stopPropagation();
|
|
4442
|
+
const newEvent = new KeyboardEvent('keydown', {
|
|
4443
|
+
key: event.key,
|
|
4444
|
+
code: event.code,
|
|
4445
|
+
shiftKey: event.shiftKey,
|
|
4446
|
+
altKey: event.altKey,
|
|
4447
|
+
ctrlKey: event.ctrlKey,
|
|
4448
|
+
metaKey: event.metaKey,
|
|
4449
|
+
bubbles: true,
|
|
4450
|
+
composed: true,
|
|
4451
|
+
cancelable: true
|
|
4452
|
+
});
|
|
4453
|
+
this.dispatchEvent(newEvent);
|
|
4454
|
+
});
|
|
4455
|
+
}
|
|
4456
|
+
|
|
4457
|
+
/**
|
|
4458
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4459
|
+
*
|
|
4460
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4461
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4462
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4463
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4464
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4465
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4466
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4467
|
+
*
|
|
4468
|
+
* @private
|
|
4469
|
+
*/
|
|
4470
|
+
_lockTouchScroll() {
|
|
4471
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4472
|
+
|
|
4473
|
+
this._touchMoveHandler = (event) => {
|
|
4474
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4475
|
+
// check whether the touch started inside a scrollable element that
|
|
4476
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4477
|
+
for (const el of event.composedPath()) {
|
|
4478
|
+
if (el === dialog) {
|
|
4479
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4480
|
+
break;
|
|
4481
|
+
}
|
|
4482
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4483
|
+
const { overflowY } = getComputedStyle(el);
|
|
4484
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4485
|
+
return;
|
|
4486
|
+
}
|
|
4487
|
+
}
|
|
4488
|
+
}
|
|
4489
|
+
|
|
4490
|
+
event.preventDefault();
|
|
4491
|
+
};
|
|
4492
|
+
|
|
4493
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4494
|
+
}
|
|
4495
|
+
|
|
4496
|
+
/**
|
|
4497
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4498
|
+
* @private
|
|
4499
|
+
*/
|
|
4500
|
+
_unlockTouchScroll() {
|
|
4501
|
+
if (this._touchMoveHandler) {
|
|
4502
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4503
|
+
this._touchMoveHandler = undefined;
|
|
4504
|
+
}
|
|
4505
|
+
}
|
|
4506
|
+
|
|
4507
|
+
open(modal = true) {
|
|
4508
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4509
|
+
if (dialog && !dialog.open) {
|
|
4510
|
+
if (modal) {
|
|
4511
|
+
// Prevent showModal() from scrolling the page to bring the dialog
|
|
4512
|
+
// into view. Locking overflow on <html> blocks the viewport scroll
|
|
4513
|
+
// that browsers perform natively; we release it immediately after
|
|
4514
|
+
// so it doesn't interfere with the modal's focus management.
|
|
4515
|
+
const { documentElement } = document;
|
|
4516
|
+
const prevOverflow = documentElement.style.overflow;
|
|
4517
|
+
documentElement.style.overflow = 'hidden';
|
|
4518
|
+
|
|
4519
|
+
dialog.showModal();
|
|
4520
|
+
|
|
4521
|
+
documentElement.style.overflow = prevOverflow;
|
|
4522
|
+
|
|
4523
|
+
this._lockTouchScroll();
|
|
4524
|
+
|
|
4525
|
+
} else {
|
|
4526
|
+
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4527
|
+
// focusing steps which steal focus from the trigger and cause
|
|
4528
|
+
// the floater's handleFocusLoss() to immediately hide the bib.
|
|
4529
|
+
dialog.setAttribute('open', '');
|
|
4530
|
+
}
|
|
4531
|
+
}
|
|
4532
|
+
}
|
|
4533
|
+
|
|
4534
|
+
/**
|
|
4535
|
+
* Closes the dialog.
|
|
4536
|
+
*/
|
|
4537
|
+
close() {
|
|
4538
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4539
|
+
if (dialog && dialog.open) {
|
|
4540
|
+
this._unlockTouchScroll();
|
|
4541
|
+
dialog.close();
|
|
4542
|
+
}
|
|
4543
|
+
}
|
|
4544
|
+
|
|
3940
4545
|
// function that renders the HTML and CSS into the scope of the component
|
|
3941
4546
|
render() {
|
|
3942
4547
|
const classes = {
|
|
@@ -3948,9 +4553,10 @@ class AuroDropdownBib extends LitElement {
|
|
|
3948
4553
|
classes[`shape-${this.shape}`] = true;
|
|
3949
4554
|
|
|
3950
4555
|
return html`
|
|
3951
|
-
<
|
|
4556
|
+
<dialog class="${classMap(classes)}" part="bibContainer" role="${ifDefined(this.dialogRole)}" aria-labelledby="${ifDefined(this.dialogLabel ? 'dialogLabel' : undefined)}">
|
|
4557
|
+
${this.dialogLabel ? html`<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.dialogLabel}</span>` : ''}
|
|
3952
4558
|
<slot></slot>
|
|
3953
|
-
</
|
|
4559
|
+
</dialog>
|
|
3954
4560
|
`;
|
|
3955
4561
|
}
|
|
3956
4562
|
}
|
|
@@ -3959,7 +4565,7 @@ var shapeSizeCss = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.sh
|
|
|
3959
4565
|
|
|
3960
4566
|
var colorCss$1$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([disabled],[onDark])) .wrapper:focus-within,:host(:not([disabled],[onDark])) .wrapper:active,:host(:not([disabled],[appearance=inverse])) .wrapper:focus-within,:host(:not([disabled],[appearance=inverse])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([disabled],[onDark])) .wrapper:hover,:host(:not([disabled],[appearance=inverse])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([ondark])) .wrapper,:host(:not([appearance=inverse])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([onDark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([onDark])[disabled]) #triggerLabel,:host(:not([appearance=inverse])[disabled]) #triggerLabel{cursor:default}:host(:not([ondark])[error]),:host(:not([appearance=inverse])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([disabled])[onDark]) .wrapper:focus-within,:host(:not([disabled])[onDark]) .wrapper:active,:host(:not([disabled])[appearance=inverse]) .wrapper:focus-within,:host(:not([disabled])[appearance=inverse]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host(:not([disabled])[onDark]) .wrapper:hover,:host(:not([disabled])[appearance=inverse]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark]) .label,:host([onDark]) .helpText,:host([appearance=inverse]) .label,:host([appearance=inverse]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper,:host([appearance=inverse]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([onDark][disabled]) #triggerLabel,:host([appearance=inverse][disabled]) #triggerLabel{cursor:default}:host([ondark][error]),:host([appearance=inverse][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
3961
4567
|
|
|
3962
|
-
var styleCss$1$1 = css`:host{position:relative;display:block;text-align:left}
|
|
4568
|
+
var styleCss$1$1 = css`:host{position:relative;display:block;text-align:left}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
3963
4569
|
|
|
3964
4570
|
var classicColorCss = css``;
|
|
3965
4571
|
|
|
@@ -4197,7 +4803,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4197
4803
|
}
|
|
4198
4804
|
};
|
|
4199
4805
|
|
|
4200
|
-
var formkitVersion$1 = '
|
|
4806
|
+
var formkitVersion$1 = '202603102257';
|
|
4201
4807
|
|
|
4202
4808
|
class AuroElement extends LitElement {
|
|
4203
4809
|
static get properties() {
|
|
@@ -4311,7 +4917,7 @@ class AuroElement extends LitElement {
|
|
|
4311
4917
|
* The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
|
|
4312
4918
|
* @customElement auro-dropdown
|
|
4313
4919
|
*
|
|
4314
|
-
* @slot - Default slot for the
|
|
4920
|
+
* @slot - Default slot for the dropdown bib content.
|
|
4315
4921
|
* @slot helpText - Defines the content of the helpText.
|
|
4316
4922
|
* @slot trigger - Defines the content of the trigger.
|
|
4317
4923
|
* @csspart trigger - The trigger content container.
|
|
@@ -4323,6 +4929,13 @@ class AuroElement extends LitElement {
|
|
|
4323
4929
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
4324
4930
|
*/
|
|
4325
4931
|
class AuroDropdown extends AuroElement {
|
|
4932
|
+
static get shadowRootOptions() {
|
|
4933
|
+
return {
|
|
4934
|
+
...AuroElement.shadowRootOptions,
|
|
4935
|
+
delegatesFocus: true,
|
|
4936
|
+
};
|
|
4937
|
+
}
|
|
4938
|
+
|
|
4326
4939
|
constructor() {
|
|
4327
4940
|
super();
|
|
4328
4941
|
|
|
@@ -4388,15 +5001,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4388
5001
|
this.shift = false;
|
|
4389
5002
|
this.autoPlacement = false;
|
|
4390
5003
|
|
|
4391
|
-
/**
|
|
4392
|
-
* @private
|
|
4393
|
-
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
4394
|
-
*/
|
|
4395
|
-
this.constructor.shadowRootOptions = {
|
|
4396
|
-
...LitElement.shadowRootOptions,
|
|
4397
|
-
delegatesFocus: true,
|
|
4398
|
-
};
|
|
4399
|
-
|
|
4400
5004
|
/**
|
|
4401
5005
|
* @private
|
|
4402
5006
|
*/
|
|
@@ -4425,7 +5029,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4425
5029
|
/**
|
|
4426
5030
|
* @private
|
|
4427
5031
|
*/
|
|
4428
|
-
this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion$1,
|
|
5032
|
+
this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion$1, _$1);
|
|
4429
5033
|
|
|
4430
5034
|
/**
|
|
4431
5035
|
* @private
|
|
@@ -4470,6 +5074,18 @@ class AuroDropdown extends AuroElement {
|
|
|
4470
5074
|
*/
|
|
4471
5075
|
show() {
|
|
4472
5076
|
this.floater.showBib();
|
|
5077
|
+
|
|
5078
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
5079
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
5080
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
5081
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
5082
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
5083
|
+
// falls outside the user activation window and causes iOS to
|
|
5084
|
+
// dismiss the keyboard.
|
|
5085
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
5086
|
+
const useModal = !this.disableFocusTrap;
|
|
5087
|
+
this.bibElement.value.open(useModal);
|
|
5088
|
+
}
|
|
4473
5089
|
}
|
|
4474
5090
|
|
|
4475
5091
|
/**
|
|
@@ -4477,13 +5093,37 @@ class AuroDropdown extends AuroElement {
|
|
|
4477
5093
|
* If not, trigger element will get focus.
|
|
4478
5094
|
*/
|
|
4479
5095
|
focus() {
|
|
4480
|
-
if (this.isPopoverVisible && this.
|
|
4481
|
-
this.
|
|
5096
|
+
if (this.isPopoverVisible && this.bibContent) {
|
|
5097
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
5098
|
+
if (focusables.length > 0) {
|
|
5099
|
+
focusables[0].focus();
|
|
5100
|
+
}
|
|
4482
5101
|
} else {
|
|
4483
5102
|
this.trigger.focus();
|
|
4484
5103
|
}
|
|
4485
5104
|
}
|
|
4486
5105
|
|
|
5106
|
+
/**
|
|
5107
|
+
* Sets the active descendant element for accessibility.
|
|
5108
|
+
* Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
|
|
5109
|
+
* This function is used in components that contain `auro-dropdown` to set the active descendant.
|
|
5110
|
+
* @private
|
|
5111
|
+
* @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
|
|
5112
|
+
* @returns {void}
|
|
5113
|
+
*/
|
|
5114
|
+
setActiveDescendant(element) {
|
|
5115
|
+
if (!this.trigger) {
|
|
5116
|
+
return;
|
|
5117
|
+
}
|
|
5118
|
+
|
|
5119
|
+
if (element) {
|
|
5120
|
+
this.trigger.ariaActiveDescendantElement = element;
|
|
5121
|
+
} else {
|
|
5122
|
+
this.trigger.ariaActiveDescendantElement = null;
|
|
5123
|
+
this.trigger.removeAttribute('aria-activedescendant');
|
|
5124
|
+
}
|
|
5125
|
+
}
|
|
5126
|
+
|
|
4487
5127
|
// function to define props used within the scope of this component
|
|
4488
5128
|
static get properties() {
|
|
4489
5129
|
return {
|
|
@@ -4492,7 +5132,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4492
5132
|
* The value for the role attribute of the trigger element.
|
|
4493
5133
|
*/
|
|
4494
5134
|
a11yRole: {
|
|
4495
|
-
type: String
|
|
5135
|
+
type: String,
|
|
4496
5136
|
attribute: false,
|
|
4497
5137
|
reflect: false
|
|
4498
5138
|
},
|
|
@@ -4741,6 +5381,16 @@ class AuroDropdown extends AuroElement {
|
|
|
4741
5381
|
*/
|
|
4742
5382
|
tabIndex: {
|
|
4743
5383
|
type: Number
|
|
5384
|
+
},
|
|
5385
|
+
|
|
5386
|
+
/**
|
|
5387
|
+
* Accessible label for the dropdown bib dialog element.
|
|
5388
|
+
* @private
|
|
5389
|
+
*/
|
|
5390
|
+
bibDialogLabel: {
|
|
5391
|
+
type: String,
|
|
5392
|
+
attribute: false,
|
|
5393
|
+
reflect: false
|
|
4744
5394
|
}
|
|
4745
5395
|
};
|
|
4746
5396
|
}
|
|
@@ -4792,7 +5442,10 @@ class AuroDropdown extends AuroElement {
|
|
|
4792
5442
|
|
|
4793
5443
|
disconnectedCallback() {
|
|
4794
5444
|
super.disconnectedCallback();
|
|
4795
|
-
this.floater
|
|
5445
|
+
if (this.floater) {
|
|
5446
|
+
this.floater.hideBib('disconnect');
|
|
5447
|
+
this.floater.disconnect();
|
|
5448
|
+
}
|
|
4796
5449
|
this.clearTriggerFocusEventBinding();
|
|
4797
5450
|
}
|
|
4798
5451
|
|
|
@@ -4814,11 +5467,22 @@ class AuroDropdown extends AuroElement {
|
|
|
4814
5467
|
|
|
4815
5468
|
if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
|
|
4816
5469
|
if (this.isPopoverVisible) {
|
|
4817
|
-
|
|
5470
|
+
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5471
|
+
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5472
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5473
|
+
this.bibElement.value.open(useModal);
|
|
4818
5474
|
} else {
|
|
4819
|
-
this.bibElement.value.
|
|
5475
|
+
this.bibElement.value.close();
|
|
4820
5476
|
}
|
|
4821
5477
|
}
|
|
5478
|
+
|
|
5479
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5480
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5481
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5482
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5483
|
+
this.bibElement.value.close();
|
|
5484
|
+
this.bibElement.value.open(useModal);
|
|
5485
|
+
}
|
|
4822
5486
|
}
|
|
4823
5487
|
|
|
4824
5488
|
/**
|
|
@@ -4836,11 +5500,28 @@ class AuroDropdown extends AuroElement {
|
|
|
4836
5500
|
}
|
|
4837
5501
|
|
|
4838
5502
|
firstUpdated() {
|
|
4839
|
-
|
|
4840
5503
|
// Configure the floater to, this will generate the ID for the bib
|
|
4841
5504
|
this.floater.configure(this, 'auroDropdown');
|
|
5505
|
+
|
|
5506
|
+
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5507
|
+
// creates a containing block for position:fixed descendants (the bib),
|
|
5508
|
+
// which clips the bib inside ancestor overflow contexts such as a
|
|
5509
|
+
// <dialog> element. Without it, the bib's position:fixed is relative
|
|
5510
|
+
// to the viewport, letting Floating UI's flip middleware detect
|
|
5511
|
+
// viewport boundaries and the bib escape overflow clipping.
|
|
5512
|
+
const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
|
|
5513
|
+
this.floater.configureBibStrategy = (value) => {
|
|
5514
|
+
origConfigureBibStrategy(value);
|
|
5515
|
+
this.style.contain = '';
|
|
5516
|
+
};
|
|
5517
|
+
|
|
4842
5518
|
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
4843
5519
|
|
|
5520
|
+
// Handle ESC key from dialog's cancel event
|
|
5521
|
+
this.addEventListener('auro-bib-cancel', () => {
|
|
5522
|
+
this.floater.hideBib('keydown');
|
|
5523
|
+
});
|
|
5524
|
+
|
|
4844
5525
|
/**
|
|
4845
5526
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
4846
5527
|
* @event auroDropdown-idAdded
|
|
@@ -4848,9 +5529,9 @@ class AuroDropdown extends AuroElement {
|
|
|
4848
5529
|
*/
|
|
4849
5530
|
this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
|
|
4850
5531
|
|
|
4851
|
-
// Set the bib ID locally
|
|
5532
|
+
// Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
|
|
4852
5533
|
if (!this.triggerContentFocusable) {
|
|
4853
|
-
this.dropdownId = this.floater.element.id;
|
|
5534
|
+
this.dropdownId = this.floater.element.bib.id;
|
|
4854
5535
|
}
|
|
4855
5536
|
|
|
4856
5537
|
this.bibContent = this.floater.element.bib;
|
|
@@ -4910,21 +5591,20 @@ class AuroDropdown extends AuroElement {
|
|
|
4910
5591
|
* @private
|
|
4911
5592
|
*/
|
|
4912
5593
|
updateFocusTrap() {
|
|
4913
|
-
// If the dropdown is open, create a focus trap and focus the first element
|
|
4914
5594
|
if (this.isPopoverVisible && !this.disableFocusTrap) {
|
|
4915
|
-
|
|
4916
|
-
|
|
5595
|
+
if (!this.isBibFullscreen) {
|
|
5596
|
+
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
5597
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
5598
|
+
this.focusTrap.focusFirstElement();
|
|
5599
|
+
}
|
|
5600
|
+
// Fullscreen: showModal() provides native focus trapping
|
|
4917
5601
|
return;
|
|
4918
5602
|
}
|
|
4919
5603
|
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
|
|
5604
|
+
if (this.focusTrap) {
|
|
5605
|
+
this.focusTrap.disconnect();
|
|
5606
|
+
this.focusTrap = undefined;
|
|
4923
5607
|
}
|
|
4924
|
-
|
|
4925
|
-
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
4926
|
-
this.focusTrap.disconnect();
|
|
4927
|
-
this.focusTrap = undefined;
|
|
4928
5608
|
}
|
|
4929
5609
|
|
|
4930
5610
|
/**
|
|
@@ -5140,13 +5820,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5140
5820
|
<div
|
|
5141
5821
|
id="showStateIcon"
|
|
5142
5822
|
class="chevron"
|
|
5143
|
-
part="chevron"
|
|
5823
|
+
part="chevron"
|
|
5824
|
+
aria-hidden="true">
|
|
5144
5825
|
<${this.iconTag}
|
|
5145
5826
|
category="interface"
|
|
5146
5827
|
name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
|
|
5147
5828
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
5148
|
-
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5149
|
-
>
|
|
5829
|
+
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5830
|
+
ariaHidden="true">
|
|
5150
5831
|
</${this.iconTag}>
|
|
5151
5832
|
</div>
|
|
5152
5833
|
` : undefined }
|
|
@@ -5160,8 +5841,8 @@ class AuroDropdown extends AuroElement {
|
|
|
5160
5841
|
shape="${this.shape}"
|
|
5161
5842
|
?data-show="${this.isPopoverVisible}"
|
|
5162
5843
|
?isfullscreen="${this.isBibFullscreen}"
|
|
5844
|
+
.dialogLabel="${this.bibDialogLabel}"
|
|
5163
5845
|
${ref(this.bibElement)}
|
|
5164
|
-
popover="manual"
|
|
5165
5846
|
>
|
|
5166
5847
|
<div class="slotContent">
|
|
5167
5848
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
@@ -5378,10 +6059,10 @@ class AuroDependencyVersioning {
|
|
|
5378
6059
|
}
|
|
5379
6060
|
}
|
|
5380
6061
|
|
|
5381
|
-
|
|
5382
|
-
`,u$1=css`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs) * 6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
6062
|
+
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c$1=css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
6063
|
+
`,u$1=css`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
5383
6064
|
`,p$1=css`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
5384
|
-
`;class b extends LitElement{constructor(){super(),this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new h,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [u$1,c$1,p$1]}static register(t="auro-loader"){h.prototype.registerComponent(t,b);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let t=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?t=Array.from(Array(this.smCount).keys()):this.ringworm&&(t=Array.from(Array(0).keys())),t}render(){return html$1`
|
|
6065
|
+
`;class b extends LitElement{constructor(){super(),this.appearance="default",this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new h,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {appearance:{type:String,reflect:true},laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [u$1,c$1,p$1]}static register(t="auro-loader"){h.prototype.registerComponent(t,b);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let t=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?t=Array.from(Array(this.smCount).keys()):this.ringworm&&(t=Array.from(Array(0).keys())),t}render(){return html$1`
|
|
5385
6066
|
${this.defineTemplate().map(t=>html$1`
|
|
5386
6067
|
<span part="element" class="loader node-${t}"></span>
|
|
5387
6068
|
`)}
|
|
@@ -5392,11 +6073,11 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
|
|
|
5392
6073
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
5393
6074
|
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
5394
6075
|
</svg>`:""}
|
|
5395
|
-
`}}const v=new WeakMap,m$1=new WeakMap,x$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{m$1.has(t)||m$1.set(t,{matchers:new Set,targets:new Map});const a=m$1.get(t);return a.matchers.add(o),a.targets.has(e)||a.targets.set(e,new Map),a.targets.get(e).set(o,{removeOriginal:s,currentAttributes:new Map}),f$1({host:t,target:e,matcher:o,removeOriginal:s}),y$1(t),{cleanup:()=>g$1(t,e,o),getObservedAttributes:()=>A(t,e,o),getObservedAttribute:s=>S(t,e,o,s)}},g$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);a&&(a.delete(o),0===a.size&&s.targets.delete(e));let r=false;for(const t of s.targets.values())if(t.has(o)){r=true;break}r||s.matchers.delete(o),0!==s.targets.size&&0!==s.matchers.size||w$1(t);},f$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{const a=t.getAttributeNames().filter(t=>o(t)).reduce((e,o)=>(e[o]=t.getAttribute(o),e),{});Object.entries(a).forEach(([a,r])=>{k$1(t,e,o,a,r),e.setAttribute(a,r),s&&t.removeAttribute(a);});},y$1=t=>{if(v.has(t))return v.get(t);const e=new MutationObserver(e=>{const o=m$1.get(t);o&&e.filter(t=>"attributes"===t.type).forEach(e=>{const s=e.attributeName;for(const e of o.matchers)if(e(s))for(const[s,a]of o.targets.entries())if(a.has(e)){const{removeOriginal:o}=a.get(e);f$1({host:t,target:s,matcher:e,removeOriginal:o});}});});return e.observe(t,{attributes:true}),v.set(t,e),e},w$1=t=>{if(v.has(t)){v.get(t).disconnect(),v.delete(t);}m$1.has(t)&&m$1.delete(t);},z$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);return a?a.get(o):void 0},k$1=(t,e,o,s,a)=>{const r=z$1(t,e,o);r&&r.currentAttributes.set(s,a);},S=(t,e,o,s)=>{const a=z$1(t,e,o);if(a)return a.currentAttributes.get(s)},A=(t,e,o)=>{const s=z$1(t,e,o);return s?Array.from(s.currentAttributes.entries()):[]},q={"aria-":t=>t.startsWith("aria-"),role:t=>t.match(/^role$/)},B=({host:t,target:e,removeOriginal:o=true})=>(({host:t,target:e,match:o,removeOriginal:s=true})=>{if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof s)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return x$1({host:t,target:e,matcher:o,removeOriginal:s})})({host:t,target:e,match:t=>{for(const e in q)if(q[e](t))return true;return false},removeOriginal:o});class C extends LitElement{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("shape-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("layout-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(t){(t.has("layout")||t.has("shape")||t.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=B({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(t){return console.error("Failed to get the defined layout - using the default layout",t),this.getLayout("default")}}}var U=css`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
|
|
6076
|
+
`}}const m$1=new WeakMap,v=new WeakMap,x$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{v.has(t)||v.set(t,{matchers:new Set,targets:new Map});const a=v.get(t);return a.matchers.add(o),a.targets.has(e)||a.targets.set(e,new Map),a.targets.get(e).set(o,{removeOriginal:s,currentAttributes:new Map}),f$1({host:t,target:e,matcher:o,removeOriginal:s}),y$1(t),{cleanup:()=>g$1(t,e,o),getObservedAttributes:()=>A(t,e,o),getObservedAttribute:s=>S(t,e,o,s)}},g$1=(t,e,o)=>{const s=v.get(t);if(!s)return;const a=s.targets.get(e);a&&(a.delete(o),0===a.size&&s.targets.delete(e));let r=false;for(const t of s.targets.values())if(t.has(o)){r=true;break}r||s.matchers.delete(o),0!==s.targets.size&&0!==s.matchers.size||w$1(t);},f$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{const a=t.getAttributeNames().filter(t=>o(t)).reduce((e,o)=>(e[o]=t.getAttribute(o),e),{});Object.entries(a).forEach(([a,r])=>{k(t,e,o,a,r),e.setAttribute(a,r),s&&t.removeAttribute(a);});},y$1=t=>{if(m$1.has(t))return m$1.get(t);const e=new MutationObserver(e=>{const o=v.get(t);o&&e.filter(t=>"attributes"===t.type).forEach(e=>{const s=e.attributeName;for(const e of o.matchers)if(e(s))for(const[s,a]of o.targets.entries())if(a.has(e)){const{removeOriginal:o}=a.get(e);f$1({host:t,target:s,matcher:e,removeOriginal:o});}});});return e.observe(t,{attributes:true}),m$1.set(t,e),e},w$1=t=>{if(m$1.has(t)){m$1.get(t).disconnect(),m$1.delete(t);}v.has(t)&&v.delete(t);},z$1=(t,e,o)=>{const s=v.get(t);if(!s)return;const a=s.targets.get(e);return a?a.get(o):void 0},k=(t,e,o,s,a)=>{const r=z$1(t,e,o);r&&r.currentAttributes.set(s,a);},S=(t,e,o,s)=>{const a=z$1(t,e,o);if(a)return a.currentAttributes.get(s)},A=(t,e,o)=>{const s=z$1(t,e,o);return s?Array.from(s.currentAttributes.entries()):[]},q={"aria-":t=>t.startsWith("aria-"),role:t=>t.match(/^role$/)},B=({host:t,target:e,removeOriginal:o=true})=>(({host:t,target:e,match:o,removeOriginal:s=true})=>{if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof s)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return x$1({host:t,target:e,matcher:o,removeOriginal:s})})({host:t,target:e,match:t=>{for(const e in q)if(q[e](t))return true;return false},removeOriginal:o});class C extends LitElement{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("shape-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("layout-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(t){(t.has("layout")||t.has("shape")||t.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=B({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(t){return console.error("Failed to get the defined layout - using the default layout",t),this.getLayout("default")}}}var U=css`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
|
|
5396
6077
|
`,H=css`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}
|
|
5397
|
-
`,M=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.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}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
6078
|
+
`,M=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.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}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}slot{pointer-events:none}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
5398
6079
|
`,R=css`:host{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff)}
|
|
5399
|
-
`;const N=["circle","square"];class T extends C{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new d,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const t=new l
|
|
6080
|
+
`;const N=["circle","square"];class T extends C{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new d,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const t=new l;this.loaderTag=t.generateTag("auro-loader","6.1.0",b),this.buttonHref=void 0,this.buttonTarget=void 0,this.buttonRel=void 0;}static get styles(){return [R,M,U,H]}static get properties(){return {...C.properties,layout:{type:Boolean,attribute:false,reflect:false},autofocus:{type:Boolean,reflect:true},disabled:{type:Boolean,reflect:true},fluid:{type:Boolean,reflect:true},loading:{type:Boolean,reflect:true},loadingText:{type:String},tIndex:{type:String,reflect:true},tabindex:{type:String,reflect:false},title:{type:String,reflect:true},type:{type:String,reflect:true},value:{type:String,reflect:true},variant:{type:String,reflect:true},buttonHref:{type:String},buttonTarget:{type:String},buttonRel:{type:String},static:{type:Boolean,reflect:true},onHover:{attribute:"data-hover",type:Boolean,reflect:true},onActive:{attribute:"data-active",type:Boolean,reflect:true}}}static register(t="auro-button"){d.prototype.registerComponent(t,T);}focus(){this.renderRoot.querySelector("button").focus();}surfaceSubmitEvent(){this.form&&this.form.requestSubmit();}get form(){return this.internals?this.internals.form:null}get showText(){return !N.includes(this.shape)}get currentAriaLabel(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-label")||void 0}get currentAriaLabelledBy(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-labelledby")||void 0}get iconOnly(){return N.includes(this.shape)}getFontSize(){return (this.iconOnly?{xs:"heading-xs",sm:"heading-sm",md:"heading-sm",lg:"heading-md",xl:"heading-lg"}:{xs:"body-xs",sm:"body-sm",md:"body-default",lg:"body-lg",xl:"body-lg"})[this.size]||"body-default"}get _renderTag(){return this.static?literal`span`:this.buttonHref?literal`a`:literal`button`}firstUpdated(){super.firstUpdated(),this.runtimeUtils.handleComponentTagRename(this,"auro-button");}generateAriaLabel(){return this.loading?this.runtimeUtils.getSlotText(this,"ariaLabel.loading")||this.loadingText:this.runtimeUtils.getSlotText(this,"ariaLabel")||this.currentAriaLabel}onPointerEvent(t){switch(t.type){case "pointerenter":this.onHover=true;break;case "pointerleave":this.onHover=false;break;case "pointerdown":this.onActive=true;break;case "pointerup":case "blur":this.onActive=false;}}renderLayoutDefault(){const t=this.getFontSize(),e=this.buttonHref?"link":"button",s={"auro-button":true,inset:this.showText,wrapper:true,loading:this.loading,simple:!["secondary"].includes(this.variant),thin:["secondary"].includes(this.variant)},a={contentWrapper:true,loading:this.loading},r={textSlot:true,[t]:this.showText},l=this.tIndex||this.tabindex;return html`
|
|
5400
6081
|
<!-- Hidden slots for aria labels -->
|
|
5401
6082
|
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
5402
6083
|
<slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
@@ -5435,13 +6116,13 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
|
|
|
5435
6116
|
</${this._renderTag}>
|
|
5436
6117
|
`}renderLayout(){return this.renderLayoutDefault()}}
|
|
5437
6118
|
|
|
5438
|
-
var buttonVersion = '12.3.
|
|
6119
|
+
var buttonVersion = '12.3.2';
|
|
5439
6120
|
|
|
5440
|
-
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
5441
|
-
`;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
6121
|
+
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
6122
|
+
`;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
5442
6123
|
`;var y=css`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
5443
|
-
`;var
|
|
5444
|
-
`;class
|
|
6124
|
+
`;var x=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
6125
|
+
`;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html$1`
|
|
5445
6126
|
<div class="componentWrapper">
|
|
5446
6127
|
<div
|
|
5447
6128
|
class="${classMap({svgWrapper:true})}"
|
|
@@ -5461,17 +6142,27 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
5461
6142
|
</div>
|
|
5462
6143
|
`}}
|
|
5463
6144
|
|
|
5464
|
-
var iconVersion = '9.1.
|
|
6145
|
+
var iconVersion = '9.1.2';
|
|
5465
6146
|
|
|
5466
|
-
class l{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,true);}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}}var n=css`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
|
|
5467
|
-
`;class c extends LitElement{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new
|
|
6147
|
+
class r{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,true);}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}getSlotText(e,s){const t=e.shadowRoot?.querySelector(`slot[name="${s}"]`);return (t?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var n=css`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
|
|
6148
|
+
`;class c extends LitElement{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.level=1,this.typography="heading",this.runtimeUtils=new r;}static get properties(){return {color:{type:String,reflect:true},display:{type:String,reflect:true},level:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},margin:{type:String,reflect:true},size:{type:String,reflect:true},typography:{type:String,reflect:true},visualLevel:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}}}}static get styles(){return [n]}static get displayClassMap(){return {800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){r.prototype.registerComponent(e,c);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header");}spacingDecision(e){if("both"===this.margin)switch(e){case "none":return "util_stackMarginnone--top util_stackMarginnone--bottom";case "25":return "util_stackMargin25--top util_stackMargin25--bottom";case "50":return "util_stackMargin50--top util_stackMargin50--bottom";case "100":return "util_stackMargin100--top util_stackMargin100--bottom";case "150":return "util_stackMargin150--top util_stackMargin150--bottom";case "200":return "util_stackMargin200--top util_stackMargin200--bottom";case "300":return "util_stackMargin300--top util_stackMargin300--bottom";case "400":return "util_stackMargin400--top util_stackMargin400--bottom";case "600":return "util_stackMargin600--top util_stackMargin600--bottom";case "800":return "util_stackMargin800--top util_stackMargin800--bottom";default:return ""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case "none":return `util_stackMarginnone--${this.margin}`;case "25":return `util_stackMargin25--${this.margin}`;case "50":return `util_stackMargin50--${this.margin}`;case "100":return `util_stackMargin100--${this.margin}`;case "150":return `util_stackMargin150--${this.margin}`;case "200":return `util_stackMargin200--${this.margin}`;case "300":return `util_stackMargin300--${this.margin}`;case "400":return `util_stackMargin400--${this.margin}`;case "600":return `util_stackMarginX600--${this.margin}`;case "800":return `util_stackMargin800--${this.margin}`;default:return ""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",r=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o={heading:true,[n]:true};if(r){r.split(" ").forEach(e=>{e.trim()&&(o[e.trim()]=true);});}const m=classMap(o),g=unsafeStatic(`h${s}`);return html`<${g} class="${m}" style="color: ${ifDefined(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}
|
|
5468
6149
|
|
|
5469
|
-
var headerVersion = '5.0.
|
|
6150
|
+
var headerVersion = '5.0.1';
|
|
5470
6151
|
|
|
5471
6152
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5472
6153
|
// See LICENSE in the project root for license information.
|
|
5473
6154
|
|
|
5474
6155
|
|
|
6156
|
+
/**
|
|
6157
|
+
* The `auro-bibtemplate` element provides users a template for creating modal dialog elements.
|
|
6158
|
+
* @customElement auro-bibtemplate
|
|
6159
|
+
*
|
|
6160
|
+
* @slot default - The default slot for the main content.
|
|
6161
|
+
* @slot header - Slot for the header content.
|
|
6162
|
+
* @slot subheader - Slot for the subheader content.
|
|
6163
|
+
* @slot footer - Slot for the footer content.
|
|
6164
|
+
* @slot ariaLabel.close - Slot for the close button aria-label.
|
|
6165
|
+
*/
|
|
5475
6166
|
class AuroBibtemplate extends LitElement {
|
|
5476
6167
|
|
|
5477
6168
|
constructor() {
|
|
@@ -5486,7 +6177,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
5486
6177
|
/**
|
|
5487
6178
|
* @private
|
|
5488
6179
|
*/
|
|
5489
|
-
this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion,
|
|
6180
|
+
this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, _);
|
|
5490
6181
|
|
|
5491
6182
|
/**
|
|
5492
6183
|
* @private
|
|
@@ -5558,6 +6249,18 @@ class AuroBibtemplate extends LitElement {
|
|
|
5558
6249
|
this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
|
|
5559
6250
|
}
|
|
5560
6251
|
|
|
6252
|
+
/**
|
|
6253
|
+
* Focuses the close button inside the bibtemplate's shadow DOM.
|
|
6254
|
+
* Used by parent components to set initial focus when the fullscreen dialog opens.
|
|
6255
|
+
* @returns {void}
|
|
6256
|
+
*/
|
|
6257
|
+
focusCloseButton() {
|
|
6258
|
+
const closeBtn = this.shadowRoot.querySelector('#closeButton');
|
|
6259
|
+
if (closeBtn) {
|
|
6260
|
+
closeBtn.focus();
|
|
6261
|
+
}
|
|
6262
|
+
}
|
|
6263
|
+
|
|
5561
6264
|
onCloseButtonClick() {
|
|
5562
6265
|
this.dispatchEvent(new Event("close-click", { bubbles: true,
|
|
5563
6266
|
composed: true }));
|
|
@@ -5844,7 +6547,7 @@ class AuroHelpText extends LitElement {
|
|
|
5844
6547
|
}
|
|
5845
6548
|
}
|
|
5846
6549
|
|
|
5847
|
-
var formkitVersion = '
|
|
6550
|
+
var formkitVersion = '202603102257';
|
|
5848
6551
|
|
|
5849
6552
|
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}`;
|
|
5850
6553
|
|
|
@@ -6364,28 +7067,76 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6364
7067
|
configureDropdown() {
|
|
6365
7068
|
this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
|
|
6366
7069
|
|
|
7070
|
+
// Prevent dropdown from closing on focus loss since menu content is slotted
|
|
7071
|
+
// from select's light DOM and won't be detected by dropdown's contains() check.
|
|
7072
|
+
// Select handles Tab key closing explicitly, ESC via dialog cancel, and
|
|
7073
|
+
// click outside works correctly via composedPath().
|
|
7074
|
+
this.dropdown.noHideOnThisFocusLoss = true;
|
|
7075
|
+
|
|
7076
|
+
|
|
6367
7077
|
this.dropdown.addEventListener('auroDropdown-toggled', () => {
|
|
6368
7078
|
this.isPopoverVisible = this.dropdown.isPopoverVisible;
|
|
6369
7079
|
|
|
7080
|
+
// Clear aria-activedescendant when dropdown closes
|
|
7081
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7082
|
+
this.dropdown.setActiveDescendant(null);
|
|
7083
|
+
this.optionActive = null;
|
|
7084
|
+
|
|
7085
|
+
restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
|
|
7086
|
+
}
|
|
7087
|
+
|
|
6370
7088
|
if (this.dropdown.isPopoverVisible) {
|
|
6371
7089
|
this.updateMenuShapeSize();
|
|
6372
|
-
// wait til the bib gets fully rendered
|
|
6373
|
-
setTimeout(() => {
|
|
6374
|
-
if (this.dropdown.isBibFullscreen) {
|
|
6375
|
-
// trigger holds the focus since menu is not a focusable element.
|
|
6376
|
-
this.dropdown.trigger.focus();
|
|
6377
7090
|
|
|
6378
|
-
|
|
6379
|
-
|
|
6380
|
-
|
|
7091
|
+
if (this.dropdown.isBibFullscreen) {
|
|
7092
|
+
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
7093
|
+
// behind the fullscreen dialog
|
|
7094
|
+
this.dropdown.trigger.inert = true;
|
|
7095
|
+
|
|
7096
|
+
guardTouchPassthrough(this.menu);
|
|
7097
|
+
|
|
7098
|
+
// Wait for the bibtemplate to fully render (close button) across
|
|
7099
|
+
// multiple Lit update cycles before moving focus into the bib
|
|
7100
|
+
doubleRaf(() => {
|
|
7101
|
+
this.bibtemplate.focusCloseButton();
|
|
7102
|
+
|
|
7103
|
+
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
7104
|
+
// No selection → no highlight
|
|
7105
|
+
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
7106
|
+
this.menu.updateActiveOption(this.optionSelected);
|
|
7107
|
+
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
7108
|
+
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
6381
7109
|
}
|
|
6382
|
-
|
|
6383
|
-
|
|
7110
|
+
|
|
7111
|
+
// Scroll the selected option into view when dropdown opens
|
|
7112
|
+
this.scrollSelectedOptionIntoView();
|
|
7113
|
+
});
|
|
7114
|
+
} else {
|
|
7115
|
+
// wait til the bib gets fully rendered
|
|
7116
|
+
setTimeout(() => {
|
|
7117
|
+
// Keep focus on trigger so aria-activedescendant announces menu options
|
|
7118
|
+
this.dropdown.trigger.focus();
|
|
7119
|
+
|
|
7120
|
+
// Scroll the selected option into view when dropdown opens
|
|
7121
|
+
this.scrollSelectedOptionIntoView();
|
|
7122
|
+
});
|
|
7123
|
+
}
|
|
6384
7124
|
}
|
|
6385
7125
|
});
|
|
6386
7126
|
|
|
6387
7127
|
this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
|
|
6388
7128
|
this.updateMenuShapeSize();
|
|
7129
|
+
|
|
7130
|
+
// When switching to fullscreen while open, focus the close button
|
|
7131
|
+
// so it's not stuck on the trigger behind the dialog
|
|
7132
|
+
if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
|
|
7133
|
+
this.dropdown.trigger.inert = true;
|
|
7134
|
+
doubleRaf(() => {
|
|
7135
|
+
this.bibtemplate.focusCloseButton();
|
|
7136
|
+
});
|
|
7137
|
+
} else if (!this.dropdown.isBibFullscreen) {
|
|
7138
|
+
this.dropdown.trigger.inert = false;
|
|
7139
|
+
}
|
|
6389
7140
|
});
|
|
6390
7141
|
|
|
6391
7142
|
// setting up bibtemplate
|
|
@@ -6395,6 +7146,12 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6395
7146
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
6396
7147
|
}
|
|
6397
7148
|
|
|
7149
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7150
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7151
|
+
if (labelElement) {
|
|
7152
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7153
|
+
}
|
|
7154
|
+
|
|
6398
7155
|
// Exposes the CSS parts from the dropdown for styling
|
|
6399
7156
|
this.dropdown.exposeCssParts();
|
|
6400
7157
|
}
|
|
@@ -6496,6 +7253,23 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6496
7253
|
}
|
|
6497
7254
|
}
|
|
6498
7255
|
|
|
7256
|
+
/**
|
|
7257
|
+
* Sets aria-setsize and aria-posinset on each menu option so screen readers
|
|
7258
|
+
* can announce position even when the listbox context is broken by
|
|
7259
|
+
* shadow DOM boundaries.
|
|
7260
|
+
* @private
|
|
7261
|
+
* @returns {void}
|
|
7262
|
+
*/
|
|
7263
|
+
updateOptionPositions() {
|
|
7264
|
+
if (!this.menu || !this.menu.options) return;
|
|
7265
|
+
const visibleOptions = this.menu.options;
|
|
7266
|
+
const count = visibleOptions.length;
|
|
7267
|
+
visibleOptions.forEach((option, index) => {
|
|
7268
|
+
option.setAttribute('aria-setsize', count);
|
|
7269
|
+
option.setAttribute('aria-posinset', index + 1);
|
|
7270
|
+
});
|
|
7271
|
+
}
|
|
7272
|
+
|
|
6499
7273
|
/**
|
|
6500
7274
|
* Binds all behavior needed to the menu after rendering.
|
|
6501
7275
|
* @private
|
|
@@ -6517,13 +7291,38 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6517
7291
|
this.updateMenuShapeSize();
|
|
6518
7292
|
this.setMenuValue(this.value);
|
|
6519
7293
|
|
|
7294
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7295
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7296
|
+
if (labelElement) {
|
|
7297
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7298
|
+
}
|
|
7299
|
+
|
|
6520
7300
|
if (this.multiSelect) {
|
|
6521
7301
|
this.menu.multiSelect = this.multiSelect;
|
|
6522
7302
|
}
|
|
6523
7303
|
|
|
6524
7304
|
this.options = this.menu.options;
|
|
6525
|
-
this.
|
|
7305
|
+
this.updateOptionPositions();
|
|
6526
7306
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7307
|
+
|
|
7308
|
+
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
7309
|
+
this.optionActive = evt.detail;
|
|
7310
|
+
|
|
7311
|
+
if (this.dropdown) {
|
|
7312
|
+
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7313
|
+
}
|
|
7314
|
+
|
|
7315
|
+
// Announce the active option for screen readers
|
|
7316
|
+
if (this.optionActive) {
|
|
7317
|
+
const optionText = this.optionActive.textContent.trim();
|
|
7318
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7319
|
+
announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}`);
|
|
7320
|
+
}
|
|
7321
|
+
|
|
7322
|
+
if (this.dropdown.isPopoverVisible) {
|
|
7323
|
+
this.scrollActiveOptionIntoView();
|
|
7324
|
+
}
|
|
7325
|
+
});
|
|
6527
7326
|
this.menu.addEventListener('auroMenu-selectedOption', (event) => {
|
|
6528
7327
|
|
|
6529
7328
|
// Update the displayed value
|
|
@@ -6536,6 +7335,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6536
7335
|
if (this.dropdown.isPopoverVisible) {
|
|
6537
7336
|
this.dropdown.hide();
|
|
6538
7337
|
}
|
|
7338
|
+
|
|
7339
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
7340
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7341
|
+
const selectedValue = event.detail.stringValue;
|
|
7342
|
+
const announcementDelay = 300;
|
|
7343
|
+
setTimeout(() => {
|
|
7344
|
+
announceToScreenReader(this.shadowRoot, `${selectedValue}, selected`);
|
|
7345
|
+
}, announcementDelay);
|
|
6539
7346
|
});
|
|
6540
7347
|
}
|
|
6541
7348
|
|
|
@@ -6547,66 +7354,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6547
7354
|
configureSelect() {
|
|
6548
7355
|
this.nativeSelect = this.shadowRoot.querySelector('select');
|
|
6549
7356
|
|
|
6550
|
-
this
|
|
6551
|
-
|
|
6552
|
-
// when the focus is on trigger not on close button
|
|
6553
|
-
if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
|
|
6554
|
-
if (evt.key === 'ArrowUp') {
|
|
6555
|
-
evt.preventDefault();
|
|
6556
|
-
|
|
6557
|
-
this.dropdown.show();
|
|
6558
|
-
|
|
6559
|
-
if (this.dropdown.isPopoverVisible) {
|
|
6560
|
-
this.menu.navigateOptions('up');
|
|
6561
|
-
}
|
|
6562
|
-
|
|
6563
|
-
return;
|
|
6564
|
-
}
|
|
6565
|
-
|
|
6566
|
-
if (evt.key === 'ArrowDown') {
|
|
6567
|
-
evt.preventDefault();
|
|
6568
|
-
|
|
6569
|
-
this.dropdown.show();
|
|
6570
|
-
|
|
6571
|
-
if (this.dropdown.isPopoverVisible) {
|
|
6572
|
-
this.menu.navigateOptions('down');
|
|
6573
|
-
}
|
|
6574
|
-
|
|
6575
|
-
return;
|
|
6576
|
-
}
|
|
6577
|
-
|
|
6578
|
-
if (evt.key === 'Enter') {
|
|
6579
|
-
if (!this.dropdown.isPopoverVisible) {
|
|
6580
|
-
evt.preventDefault();
|
|
6581
|
-
this.menu.makeSelection();
|
|
6582
|
-
}
|
|
6583
|
-
|
|
6584
|
-
return;
|
|
6585
|
-
}
|
|
6586
|
-
}
|
|
6587
|
-
|
|
6588
|
-
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
6589
|
-
if (this.dropdown.isBibFullscreen) {
|
|
6590
|
-
evt.preventDefault();
|
|
6591
|
-
|
|
6592
|
-
// when the focus is on trigger not on close button
|
|
6593
|
-
if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
|
|
6594
|
-
// `dropdown.focus` will move focus to the first focusable element in bib when it's open,
|
|
6595
|
-
// when bib it not open, it will focus onto trigger.
|
|
6596
|
-
this.dropdown.focus();
|
|
6597
|
-
} else {
|
|
6598
|
-
// when close button has the focus, move focus back to the trigger
|
|
6599
|
-
this.dropdown.trigger.focus();
|
|
6600
|
-
}
|
|
6601
|
-
} else {
|
|
6602
|
-
this.dropdown.hide();
|
|
6603
|
-
}
|
|
6604
|
-
return;
|
|
6605
|
-
}
|
|
6606
|
-
|
|
6607
|
-
// Handle all other key presses by updating the active option based on the key pressed
|
|
6608
|
-
this.updateActiveOptionBasedOnKey(evt.key);
|
|
6609
|
-
});
|
|
7357
|
+
applyKeyboardStrategy(this, selectKeyboardStrategy);
|
|
6610
7358
|
|
|
6611
7359
|
this.addEventListener('focusin', this.handleFocusin);
|
|
6612
7360
|
|
|
@@ -6616,6 +7364,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6616
7364
|
});
|
|
6617
7365
|
}
|
|
6618
7366
|
|
|
7367
|
+
/**
|
|
7368
|
+
* Updates the active option in the menu.
|
|
7369
|
+
* @param {number} index - Index of the option to make active.
|
|
7370
|
+
*/
|
|
7371
|
+
updateActiveOption(index) {
|
|
7372
|
+
if (this.menu) {
|
|
7373
|
+
this.menu.index = index;
|
|
7374
|
+
}
|
|
7375
|
+
}
|
|
7376
|
+
|
|
6619
7377
|
/**
|
|
6620
7378
|
* Updates the active option in the menu based on keyboard input.
|
|
6621
7379
|
* @private
|
|
@@ -6779,6 +7537,48 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6779
7537
|
this.menu.value = value;
|
|
6780
7538
|
}
|
|
6781
7539
|
|
|
7540
|
+
/**
|
|
7541
|
+
* Scrolls the currently active option into view.
|
|
7542
|
+
* Respects user's motion preferences for accessibility.
|
|
7543
|
+
* @private
|
|
7544
|
+
*/
|
|
7545
|
+
scrollActiveOptionIntoView() {
|
|
7546
|
+
if (!this.menu || !this.menu.optionActive) return;
|
|
7547
|
+
|
|
7548
|
+
// Check if user prefers reduced motion for accessibility
|
|
7549
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
7550
|
+
|
|
7551
|
+
this.menu.optionActive.scrollIntoView({
|
|
7552
|
+
alignToTop: false,
|
|
7553
|
+
block: "nearest",
|
|
7554
|
+
behavior: prefersReducedMotion ? "auto" : "smooth"
|
|
7555
|
+
});
|
|
7556
|
+
}
|
|
7557
|
+
|
|
7558
|
+
/**
|
|
7559
|
+
* Scrolls the currently selected option into view.
|
|
7560
|
+
* Respects user's motion preferences for accessibility.
|
|
7561
|
+
* @private
|
|
7562
|
+
*/
|
|
7563
|
+
scrollSelectedOptionIntoView() {
|
|
7564
|
+
if (!this.menu || !this.menu.optionSelected) return;
|
|
7565
|
+
|
|
7566
|
+
const selectedOption = this.multiSelect && Array.isArray(this.menu.optionSelected)
|
|
7567
|
+
? this.menu.optionSelected[0]
|
|
7568
|
+
: this.menu.optionSelected;
|
|
7569
|
+
|
|
7570
|
+
if (selectedOption) {
|
|
7571
|
+
// Check if user prefers reduced motion for accessibility
|
|
7572
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
7573
|
+
|
|
7574
|
+
selectedOption.scrollIntoView({
|
|
7575
|
+
alignToTop: true,
|
|
7576
|
+
block: "start",
|
|
7577
|
+
behavior: prefersReducedMotion ? "auto" : "smooth"
|
|
7578
|
+
});
|
|
7579
|
+
}
|
|
7580
|
+
}
|
|
7581
|
+
|
|
6782
7582
|
updated(changedProperties) {
|
|
6783
7583
|
if (changedProperties.has('multiSelect') && !changedProperties.has('value')) {
|
|
6784
7584
|
this.clearSelection();
|
|
@@ -6790,7 +7590,9 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6790
7590
|
this._updateNativeSelect();
|
|
6791
7591
|
this.validate();
|
|
6792
7592
|
this.hideBib();
|
|
6793
|
-
this.
|
|
7593
|
+
if (this.dropdown && this.dropdown.trigger) {
|
|
7594
|
+
this.dropdown.trigger.focus();
|
|
7595
|
+
}
|
|
6794
7596
|
|
|
6795
7597
|
// LEGACY EVENT
|
|
6796
7598
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -6839,6 +7641,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6839
7641
|
* @returns {void}
|
|
6840
7642
|
*/
|
|
6841
7643
|
reset() {
|
|
7644
|
+
this.menu.reset();
|
|
6842
7645
|
this.validation.reset(this);
|
|
6843
7646
|
}
|
|
6844
7647
|
|
|
@@ -6988,7 +7791,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6988
7791
|
</div>
|
|
6989
7792
|
<${this.dropdownTag}
|
|
6990
7793
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
6991
|
-
a11yRole
|
|
7794
|
+
.a11yRole=${"combobox"}
|
|
6992
7795
|
?autoPlacement="${this.autoPlacement}"
|
|
6993
7796
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
6994
7797
|
?matchWidth="${this.matchWidth}"
|
|
@@ -7003,16 +7806,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7003
7806
|
part="dropdown"
|
|
7004
7807
|
shape="${this.shape}"
|
|
7005
7808
|
size="${this.size}">
|
|
7006
|
-
<div slot="trigger"
|
|
7809
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7007
7810
|
<div class="accents left">
|
|
7008
7811
|
<slot name="typeIcon"></slot>
|
|
7009
7812
|
</div>
|
|
7010
7813
|
<div class="mainContent">
|
|
7011
7814
|
<div class="${classMap(valueContainerClasses)}">
|
|
7012
|
-
<
|
|
7815
|
+
<span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
|
|
7013
7816
|
<slot name="label"></slot>
|
|
7014
7817
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7015
|
-
</
|
|
7818
|
+
</span>
|
|
7016
7819
|
<div class="value" id="value"></div>
|
|
7017
7820
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
7018
7821
|
${this.placeholder}
|
|
@@ -7024,7 +7827,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7024
7827
|
</div>
|
|
7025
7828
|
<div class="accents right"></div>
|
|
7026
7829
|
</div>
|
|
7027
|
-
<div class="menuWrapper"></div>
|
|
7028
7830
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7029
7831
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7030
7832
|
<slot></slot>
|
|
@@ -7068,6 +7870,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7068
7870
|
</div>
|
|
7069
7871
|
<${this.dropdownTag}
|
|
7070
7872
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
7873
|
+
.a11yRole=${"combobox"}
|
|
7071
7874
|
?autoPlacement="${this.autoPlacement}"
|
|
7072
7875
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
7073
7876
|
?matchWidth="${this.matchWidth}"
|
|
@@ -7081,16 +7884,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7081
7884
|
part="dropdown"
|
|
7082
7885
|
shape="${this.shape}"
|
|
7083
7886
|
size="${this.size}">
|
|
7084
|
-
<div slot="trigger"
|
|
7887
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7085
7888
|
<div class="accents left">
|
|
7086
7889
|
<slot name="typeIcon"></slot>
|
|
7087
7890
|
</div>
|
|
7088
7891
|
<div class="mainContent">
|
|
7089
7892
|
<div class="${classMap(valueContainerClasses)}">
|
|
7090
|
-
<
|
|
7893
|
+
<span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
|
|
7091
7894
|
<slot name="label"></slot>
|
|
7092
7895
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7093
|
-
</
|
|
7896
|
+
</span>
|
|
7094
7897
|
<div class="value body-default" id="value"></div>
|
|
7095
7898
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
7096
7899
|
${this.placeholder}
|
|
@@ -7102,7 +7905,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7102
7905
|
</div>
|
|
7103
7906
|
<div class="accents right"></div>
|
|
7104
7907
|
</div>
|
|
7105
|
-
<div class="menuWrapper"></div>
|
|
7106
7908
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7107
7909
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7108
7910
|
<slot></slot>
|
|
@@ -7112,6 +7914,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7112
7914
|
</div>
|
|
7113
7915
|
</${this.dropdownTag}>
|
|
7114
7916
|
${this.renderNativeSelect()}
|
|
7917
|
+
<span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
|
|
7115
7918
|
</div>
|
|
7116
7919
|
`;
|
|
7117
7920
|
}
|
|
@@ -7152,6 +7955,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7152
7955
|
</div>
|
|
7153
7956
|
<${this.dropdownTag}
|
|
7154
7957
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
7958
|
+
.a11yRole=${"combobox"}
|
|
7155
7959
|
?autoPlacement="${this.autoPlacement}"
|
|
7156
7960
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
7157
7961
|
?matchWidth="${!this.flexMenuWidth}"
|
|
@@ -7165,16 +7969,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7165
7969
|
part="dropdown"
|
|
7166
7970
|
shape="${this.shape}"
|
|
7167
7971
|
size="${this.size}">
|
|
7168
|
-
<div slot="trigger"
|
|
7972
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7169
7973
|
<div class="accents left">
|
|
7170
7974
|
<slot name="typeIcon"></slot>
|
|
7171
7975
|
</div>
|
|
7172
7976
|
<div class="mainContent">
|
|
7173
7977
|
<div class="${classMap(valueContainerClasses)}">
|
|
7174
|
-
<
|
|
7978
|
+
<span id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
|
|
7175
7979
|
<slot name="label"></slot>
|
|
7176
7980
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7177
|
-
</
|
|
7981
|
+
</span>
|
|
7178
7982
|
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
7179
7983
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
7180
7984
|
${this.placeholder}
|
|
@@ -7186,7 +7990,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7186
7990
|
</div>
|
|
7187
7991
|
<div class="accents right"></div>
|
|
7188
7992
|
</div>
|
|
7189
|
-
<div class="menuWrapper"></div>
|
|
7190
7993
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7191
7994
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7192
7995
|
<slot></slot>
|
|
@@ -7196,6 +7999,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7196
7999
|
</div>
|
|
7197
8000
|
</${this.dropdownTag}>
|
|
7198
8001
|
${this.renderNativeSelect()}
|
|
8002
|
+
<span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
|
|
7199
8003
|
</div>
|
|
7200
8004
|
`;
|
|
7201
8005
|
}
|