@aurodesignsystem-dev/auro-formkit 0.0.0-pr1377.2 → 0.0.0-pr1377.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +97 -61
- package/components/combobox/demo/index.min.js +97 -61
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +3 -3
- package/components/combobox/dist/index.js +95 -59
- package/components/combobox/dist/registered.js +95 -59
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +11 -41
- package/components/datepicker/demo/index.min.js +11 -41
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -7
- package/components/datepicker/dist/index.js +11 -41
- package/components/datepicker/dist/registered.js +11 -41
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.min.js +141 -131
- package/components/form/demo/index.min.js +141 -131
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.min.js +2 -2
- package/components/menu/demo/index.min.js +2 -2
- package/components/menu/dist/index.js +2 -2
- package/components/menu/dist/registered.js +2 -2
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +30 -26
- package/components/select/demo/index.min.js +30 -26
- package/components/select/dist/index.js +28 -24
- package/components/select/dist/registered.js +28 -24
- package/components/select/dist/selectKeyboardStrategy.d.ts +1 -1
- package/custom-elements.json +2 -137
- package/package.json +1 -1
- package/components/dropdown/dist/keyboardUtils.d.ts +0 -37
|
@@ -1172,40 +1172,45 @@ function guardTouchPassthrough(element) {
|
|
|
1172
1172
|
function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
1173
1173
|
dropdown.trigger.inert = false;
|
|
1174
1174
|
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
});
|
|
1181
|
-
}
|
|
1175
|
+
requestAnimationFrame(() => {
|
|
1176
|
+
if (!dropdown.isPopoverVisible) {
|
|
1177
|
+
focusTarget.focus();
|
|
1178
|
+
}
|
|
1179
|
+
});
|
|
1182
1180
|
}
|
|
1183
1181
|
|
|
1184
1182
|
/**
|
|
1185
|
-
* Computes display state once per keydown event
|
|
1183
|
+
* Computes display state once per keydown event.
|
|
1186
1184
|
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
1185
|
+
*
|
|
1187
1186
|
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
1188
1187
|
* @param {Object} [options] - Optional config.
|
|
1188
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
1189
1189
|
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
1190
|
-
* @returns {
|
|
1190
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
1191
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
1191
1192
|
*/
|
|
1192
1193
|
function createDisplayContext(component, options = {}) {
|
|
1193
|
-
const dd = component.dropdown;
|
|
1194
|
-
|
|
1194
|
+
const dd = options.dropdown || component.dropdown;
|
|
1195
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
1196
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
1197
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
1195
1198
|
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
1196
1199
|
|
|
1197
1200
|
const ctx = {
|
|
1198
|
-
|
|
1199
|
-
isModal:
|
|
1200
|
-
isPopover:
|
|
1201
|
+
isExpanded,
|
|
1202
|
+
isModal: isFullscreen,
|
|
1203
|
+
isPopover: !isFullscreen,
|
|
1201
1204
|
activeInput: null,
|
|
1202
1205
|
};
|
|
1203
1206
|
|
|
1204
1207
|
if (options.inputResolver) {
|
|
1205
|
-
|
|
1208
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
1209
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
1210
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
1206
1211
|
}
|
|
1207
1212
|
|
|
1208
|
-
return
|
|
1213
|
+
return ctx;
|
|
1209
1214
|
}
|
|
1210
1215
|
|
|
1211
1216
|
/**
|
|
@@ -1218,7 +1223,7 @@ function createDisplayContext(component, options = {}) {
|
|
|
1218
1223
|
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
1219
1224
|
component.addEventListener('keydown', async (evt) => {
|
|
1220
1225
|
const handler = strategy[evt.key] || strategy.default;
|
|
1221
|
-
if (handler) {
|
|
1226
|
+
if (typeof handler === 'function') {
|
|
1222
1227
|
const ctx = createDisplayContext(component, options);
|
|
1223
1228
|
await handler(component, evt, ctx);
|
|
1224
1229
|
}
|
|
@@ -1235,7 +1240,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
1235
1240
|
* @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
|
|
1236
1241
|
*/
|
|
1237
1242
|
function navigateArrow(component, direction, options = {}) {
|
|
1238
|
-
const visible = options.ctx ? options.ctx.
|
|
1243
|
+
const visible = options.ctx ? options.ctx.isExpanded : component.dropdown.isPopoverVisible;
|
|
1239
1244
|
if (visible) {
|
|
1240
1245
|
component.menu.navigateOptions(direction);
|
|
1241
1246
|
} else if (options.showFn) {
|
|
@@ -1265,15 +1270,14 @@ const selectKeyboardStrategy = {
|
|
|
1265
1270
|
component.menu.makeSelection();
|
|
1266
1271
|
},
|
|
1267
1272
|
|
|
1268
|
-
Tab(component,
|
|
1269
|
-
if (!ctx.
|
|
1273
|
+
Tab(component, _evt, ctx) {
|
|
1274
|
+
if (!ctx.isExpanded) {
|
|
1270
1275
|
return;
|
|
1271
1276
|
}
|
|
1272
1277
|
|
|
1273
1278
|
// Tab selects the focused option and closes the popup per the
|
|
1274
1279
|
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
1275
|
-
|
|
1276
|
-
if (!evt.shiftKey && component.optionActive && !component.multiSelect) {
|
|
1280
|
+
if (component.optionActive && !component.multiSelect) {
|
|
1277
1281
|
component.menu.makeSelection();
|
|
1278
1282
|
}
|
|
1279
1283
|
component.dropdown.hide();
|
|
@@ -4888,7 +4892,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4888
4892
|
}
|
|
4889
4893
|
};
|
|
4890
4894
|
|
|
4891
|
-
var formkitVersion$1 = '
|
|
4895
|
+
var formkitVersion$1 = '202603192334';
|
|
4892
4896
|
|
|
4893
4897
|
class AuroElement extends LitElement {
|
|
4894
4898
|
static get properties() {
|
|
@@ -6632,7 +6636,7 @@ class AuroHelpText extends LitElement {
|
|
|
6632
6636
|
}
|
|
6633
6637
|
}
|
|
6634
6638
|
|
|
6635
|
-
var formkitVersion = '
|
|
6639
|
+
var formkitVersion = '202603192334';
|
|
6636
6640
|
|
|
6637
6641
|
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}`;
|
|
6638
6642
|
|
|
@@ -1172,40 +1172,45 @@ function guardTouchPassthrough(element) {
|
|
|
1172
1172
|
function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
1173
1173
|
dropdown.trigger.inert = false;
|
|
1174
1174
|
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
});
|
|
1181
|
-
}
|
|
1175
|
+
requestAnimationFrame(() => {
|
|
1176
|
+
if (!dropdown.isPopoverVisible) {
|
|
1177
|
+
focusTarget.focus();
|
|
1178
|
+
}
|
|
1179
|
+
});
|
|
1182
1180
|
}
|
|
1183
1181
|
|
|
1184
1182
|
/**
|
|
1185
|
-
* Computes display state once per keydown event
|
|
1183
|
+
* Computes display state once per keydown event.
|
|
1186
1184
|
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
1185
|
+
*
|
|
1187
1186
|
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
1188
1187
|
* @param {Object} [options] - Optional config.
|
|
1188
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
1189
1189
|
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
1190
|
-
* @returns {
|
|
1190
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
1191
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
1191
1192
|
*/
|
|
1192
1193
|
function createDisplayContext(component, options = {}) {
|
|
1193
|
-
const dd = component.dropdown;
|
|
1194
|
-
|
|
1194
|
+
const dd = options.dropdown || component.dropdown;
|
|
1195
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
1196
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
1197
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
1195
1198
|
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
1196
1199
|
|
|
1197
1200
|
const ctx = {
|
|
1198
|
-
|
|
1199
|
-
isModal:
|
|
1200
|
-
isPopover:
|
|
1201
|
+
isExpanded,
|
|
1202
|
+
isModal: isFullscreen,
|
|
1203
|
+
isPopover: !isFullscreen,
|
|
1201
1204
|
activeInput: null,
|
|
1202
1205
|
};
|
|
1203
1206
|
|
|
1204
1207
|
if (options.inputResolver) {
|
|
1205
|
-
|
|
1208
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
1209
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
1210
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
1206
1211
|
}
|
|
1207
1212
|
|
|
1208
|
-
return
|
|
1213
|
+
return ctx;
|
|
1209
1214
|
}
|
|
1210
1215
|
|
|
1211
1216
|
/**
|
|
@@ -1218,7 +1223,7 @@ function createDisplayContext(component, options = {}) {
|
|
|
1218
1223
|
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
1219
1224
|
component.addEventListener('keydown', async (evt) => {
|
|
1220
1225
|
const handler = strategy[evt.key] || strategy.default;
|
|
1221
|
-
if (handler) {
|
|
1226
|
+
if (typeof handler === 'function') {
|
|
1222
1227
|
const ctx = createDisplayContext(component, options);
|
|
1223
1228
|
await handler(component, evt, ctx);
|
|
1224
1229
|
}
|
|
@@ -1235,7 +1240,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
1235
1240
|
* @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
|
|
1236
1241
|
*/
|
|
1237
1242
|
function navigateArrow(component, direction, options = {}) {
|
|
1238
|
-
const visible = options.ctx ? options.ctx.
|
|
1243
|
+
const visible = options.ctx ? options.ctx.isExpanded : component.dropdown.isPopoverVisible;
|
|
1239
1244
|
if (visible) {
|
|
1240
1245
|
component.menu.navigateOptions(direction);
|
|
1241
1246
|
} else if (options.showFn) {
|
|
@@ -1265,15 +1270,14 @@ const selectKeyboardStrategy = {
|
|
|
1265
1270
|
component.menu.makeSelection();
|
|
1266
1271
|
},
|
|
1267
1272
|
|
|
1268
|
-
Tab(component,
|
|
1269
|
-
if (!ctx.
|
|
1273
|
+
Tab(component, _evt, ctx) {
|
|
1274
|
+
if (!ctx.isExpanded) {
|
|
1270
1275
|
return;
|
|
1271
1276
|
}
|
|
1272
1277
|
|
|
1273
1278
|
// Tab selects the focused option and closes the popup per the
|
|
1274
1279
|
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
1275
|
-
|
|
1276
|
-
if (!evt.shiftKey && component.optionActive && !component.multiSelect) {
|
|
1280
|
+
if (component.optionActive && !component.multiSelect) {
|
|
1277
1281
|
component.menu.makeSelection();
|
|
1278
1282
|
}
|
|
1279
1283
|
component.dropdown.hide();
|
|
@@ -4888,7 +4892,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4888
4892
|
}
|
|
4889
4893
|
};
|
|
4890
4894
|
|
|
4891
|
-
var formkitVersion$1 = '
|
|
4895
|
+
var formkitVersion$1 = '202603192334';
|
|
4892
4896
|
|
|
4893
4897
|
class AuroElement extends LitElement {
|
|
4894
4898
|
static get properties() {
|
|
@@ -6632,7 +6636,7 @@ class AuroHelpText extends LitElement {
|
|
|
6632
6636
|
}
|
|
6633
6637
|
}
|
|
6634
6638
|
|
|
6635
|
-
var formkitVersion = '
|
|
6639
|
+
var formkitVersion = '202603192334';
|
|
6636
6640
|
|
|
6637
6641
|
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}`;
|
|
6638
6642
|
|
|
@@ -2,7 +2,7 @@ export namespace selectKeyboardStrategy {
|
|
|
2
2
|
export function ArrowUp(component: any, evt: any, ctx: any): void;
|
|
3
3
|
export function ArrowDown(component: any, evt: any, ctx: any): void;
|
|
4
4
|
export function Enter(component: any, evt: any): void;
|
|
5
|
-
export function Tab(component: any,
|
|
5
|
+
export function Tab(component: any, _evt: any, ctx: any): void;
|
|
6
6
|
function _default(component: any, evt: any): void;
|
|
7
7
|
export { _default as default };
|
|
8
8
|
}
|
package/custom-elements.json
CHANGED
|
@@ -2402,7 +2402,7 @@
|
|
|
2402
2402
|
"type": {
|
|
2403
2403
|
"text": "object"
|
|
2404
2404
|
},
|
|
2405
|
-
"default": "{ async Enter(component, evt, ctx) { // If the clear button has focus, let the browser activate it normally. // stopPropagation prevents parent containers (e.g., forms) from treating // Enter as a submit, but we must NOT call preventDefault — that would // block the browser's built-in \"Enter activates focused button\" behavior.
|
|
2405
|
+
"default": "{ async Enter(component, evt, ctx) { // If the clear button has focus, let the browser activate it normally. // stopPropagation prevents parent containers (e.g., forms) from treating // Enter as a submit, but we must NOT call preventDefault — that would // block the browser's built-in \"Enter activates focused button\" behavior. if (isClearBtnFocused(ctx)) { evt.stopPropagation(); return; } if (ctx.isExpanded && component.optionActive) { component.menu.makeSelection(); await component.updateComplete; evt.preventDefault(); evt.stopPropagation(); component.setClearBtnFocus(); } else { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit or trigger other unintended behavior. // This is safe because showBib() opens the dialog programmatically, // not via event propagation. evt.preventDefault(); evt.stopPropagation(); component.showBib(); } }, Tab(component, _evt, ctx) { if (!ctx.isExpanded) { return; } if (ctx.isModal) { if (!ctx.activeInput) { return; } const clearBtn = getClearBtn(ctx); const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn); // Tab from input: if clear button exists and doesn't have focus, focus it if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) { // Force clear button container visible to work around Safari not // propagating :focus-within through shadow DOM boundaries, which // causes .wrapper:not(:focus-within) to hide .notification.clear. const clearContainer = clearBtn.closest('.clear'); if (clearContainer) { clearContainer.style.display = 'flex'; clearBtn.addEventListener('focusout', () => { // Delay cleanup so :focus-within settles when focus moves // to a sibling (e.g., Shift+Tab back to the input). requestAnimationFrame(() => { clearContainer.style.display = ''; }); }, { once: true }); } // Focus the native button inside auro-button so the browser // treats it as a real focusable element inside the dialog. const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button'); if (nativeBtn) { nativeBtn.focus(); } else { clearBtn.focus(); } return; } // Tab from clear button (or no clear button / no value) → // select the highlighted option if any, then close if (component.optionActive) { component.menu.makeSelection(); } component.hideBib(); return; } // Non-fullscreen: select + close if (component.menu.optionActive && component.menu.optionActive.value) { component.menu.value = component.menu.optionActive.value; } component.hideBib(); }, ArrowUp(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowUp normally. if (isClearBtnFocused(ctx)) { return; } if (component.availableOptions.length > 0) { component.showBib(); } // Read live visibility — ctx.isExpanded was computed before showBib() above, // so it wouldn't reflect the state change. if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'up'); } }, ArrowDown(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowDown normally. if (isClearBtnFocused(ctx)) { return; } if (component.availableOptions.length > 0) { component.showBib(); } // Read live visibility — ctx.isExpanded was computed before showBib() above, // so it wouldn't reflect the state change. if (component.dropdown.isPopoverVisible) { evt.preventDefault(); navigateArrow(component, 'down'); } }, }"
|
|
2406
2406
|
}
|
|
2407
2407
|
],
|
|
2408
2408
|
"exports": [
|
|
@@ -5642,17 +5642,6 @@
|
|
|
5642
5642
|
}
|
|
5643
5643
|
}
|
|
5644
5644
|
},
|
|
5645
|
-
{
|
|
5646
|
-
"kind": "method",
|
|
5647
|
-
"name": "handleReadOnly",
|
|
5648
|
-
"description": "Sets the readonly attribute on the inputs based on the window width.",
|
|
5649
|
-
"privacy": "private",
|
|
5650
|
-
"return": {
|
|
5651
|
-
"type": {
|
|
5652
|
-
"text": "void"
|
|
5653
|
-
}
|
|
5654
|
-
}
|
|
5655
|
-
},
|
|
5656
5645
|
{
|
|
5657
5646
|
"kind": "method",
|
|
5658
5647
|
"name": "handleCalendarCentralDateChange",
|
|
@@ -9082,130 +9071,6 @@
|
|
|
9082
9071
|
}
|
|
9083
9072
|
]
|
|
9084
9073
|
},
|
|
9085
|
-
{
|
|
9086
|
-
"kind": "javascript-module",
|
|
9087
|
-
"path": "components/dropdown/src/keyboardUtils.js",
|
|
9088
|
-
"declarations": [
|
|
9089
|
-
{
|
|
9090
|
-
"kind": "function",
|
|
9091
|
-
"name": "createDisplayContext",
|
|
9092
|
-
"parameters": [
|
|
9093
|
-
{
|
|
9094
|
-
"name": "component",
|
|
9095
|
-
"description": "The component with a dropdown reference.",
|
|
9096
|
-
"type": {
|
|
9097
|
-
"text": "HTMLElement"
|
|
9098
|
-
}
|
|
9099
|
-
},
|
|
9100
|
-
{
|
|
9101
|
-
"name": "options",
|
|
9102
|
-
"default": "{}",
|
|
9103
|
-
"description": "Optional config.",
|
|
9104
|
-
"optional": true,
|
|
9105
|
-
"type": {
|
|
9106
|
-
"text": "@param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.\n * "
|
|
9107
|
-
}
|
|
9108
|
-
}
|
|
9109
|
-
],
|
|
9110
|
-
"description": "Computes display state once per keydown event and returns a frozen context object.\nCentralizes null-safety checks and makes the shared/modal/popover branching explicit.",
|
|
9111
|
-
"return": {
|
|
9112
|
-
"type": {
|
|
9113
|
-
"text": "Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>"
|
|
9114
|
-
}
|
|
9115
|
-
}
|
|
9116
|
-
},
|
|
9117
|
-
{
|
|
9118
|
-
"kind": "variable",
|
|
9119
|
-
"name": "isVisible"
|
|
9120
|
-
},
|
|
9121
|
-
{
|
|
9122
|
-
"kind": "function",
|
|
9123
|
-
"name": "applyKeyboardStrategy",
|
|
9124
|
-
"parameters": [
|
|
9125
|
-
{
|
|
9126
|
-
"name": "component",
|
|
9127
|
-
"description": "The component to attach the listener to.",
|
|
9128
|
-
"type": {
|
|
9129
|
-
"text": "HTMLElement"
|
|
9130
|
-
}
|
|
9131
|
-
},
|
|
9132
|
-
{
|
|
9133
|
-
"name": "strategy",
|
|
9134
|
-
"description": "Map of key names to handler functions.",
|
|
9135
|
-
"type": {
|
|
9136
|
-
"text": "Object"
|
|
9137
|
-
}
|
|
9138
|
-
},
|
|
9139
|
-
{
|
|
9140
|
-
"name": "options",
|
|
9141
|
-
"default": "{}",
|
|
9142
|
-
"description": "Optional config passed to createDisplayContext.",
|
|
9143
|
-
"optional": true,
|
|
9144
|
-
"type": {
|
|
9145
|
-
"text": "Object"
|
|
9146
|
-
}
|
|
9147
|
-
}
|
|
9148
|
-
],
|
|
9149
|
-
"description": "Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.\nHandles both sync and async handlers."
|
|
9150
|
-
},
|
|
9151
|
-
{
|
|
9152
|
-
"kind": "function",
|
|
9153
|
-
"name": "navigateArrow",
|
|
9154
|
-
"parameters": [
|
|
9155
|
-
{
|
|
9156
|
-
"name": "component",
|
|
9157
|
-
"description": "The component with dropdown and menu references.",
|
|
9158
|
-
"type": {
|
|
9159
|
-
"text": "HTMLElement"
|
|
9160
|
-
}
|
|
9161
|
-
},
|
|
9162
|
-
{
|
|
9163
|
-
"name": "direction",
|
|
9164
|
-
"description": "'up' or 'down'.",
|
|
9165
|
-
"type": {
|
|
9166
|
-
"text": "string"
|
|
9167
|
-
}
|
|
9168
|
-
},
|
|
9169
|
-
{
|
|
9170
|
-
"name": "options",
|
|
9171
|
-
"default": "{}",
|
|
9172
|
-
"description": "Optional config.",
|
|
9173
|
-
"optional": true,
|
|
9174
|
-
"type": {
|
|
9175
|
-
"text": "@param {Function} [options.showFn] - Called to open the dropdown when closed.\n * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.\n "
|
|
9176
|
-
}
|
|
9177
|
-
}
|
|
9178
|
-
],
|
|
9179
|
-
"description": "Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.\nOptionally opens dropdown via showFn when closed."
|
|
9180
|
-
}
|
|
9181
|
-
],
|
|
9182
|
-
"exports": [
|
|
9183
|
-
{
|
|
9184
|
-
"kind": "js",
|
|
9185
|
-
"name": "createDisplayContext",
|
|
9186
|
-
"declaration": {
|
|
9187
|
-
"name": "createDisplayContext",
|
|
9188
|
-
"module": "components/dropdown/src/keyboardUtils.js"
|
|
9189
|
-
}
|
|
9190
|
-
},
|
|
9191
|
-
{
|
|
9192
|
-
"kind": "js",
|
|
9193
|
-
"name": "applyKeyboardStrategy",
|
|
9194
|
-
"declaration": {
|
|
9195
|
-
"name": "applyKeyboardStrategy",
|
|
9196
|
-
"module": "components/dropdown/src/keyboardUtils.js"
|
|
9197
|
-
}
|
|
9198
|
-
},
|
|
9199
|
-
{
|
|
9200
|
-
"kind": "js",
|
|
9201
|
-
"name": "navigateArrow",
|
|
9202
|
-
"declaration": {
|
|
9203
|
-
"name": "navigateArrow",
|
|
9204
|
-
"module": "components/dropdown/src/keyboardUtils.js"
|
|
9205
|
-
}
|
|
9206
|
-
}
|
|
9207
|
-
]
|
|
9208
|
-
},
|
|
9209
9074
|
{
|
|
9210
9075
|
"kind": "javascript-module",
|
|
9211
9076
|
"path": "components/dropdown/src/registered.js",
|
|
@@ -18687,7 +18552,7 @@
|
|
|
18687
18552
|
"type": {
|
|
18688
18553
|
"text": "object"
|
|
18689
18554
|
},
|
|
18690
|
-
"default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt) { evt.preventDefault(); component.menu.makeSelection(); }, Tab(component,
|
|
18555
|
+
"default": "{ ArrowUp(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'up', { ctx, showFn: () => component.dropdown.show(), }); }, ArrowDown(component, evt, ctx) { evt.preventDefault(); navigateArrow(component, 'down', { ctx, showFn: () => component.dropdown.show(), }); }, Enter(component, evt) { evt.preventDefault(); component.menu.makeSelection(); }, Tab(component, _evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive && !component.multiSelect) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt) { component.updateActiveOptionBasedOnKey(evt.key); }, }"
|
|
18691
18556
|
}
|
|
18692
18557
|
],
|
|
18693
18558
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Computes display state once per keydown event and returns a frozen context object.
|
|
3
|
-
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
4
|
-
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
5
|
-
* @param {Object} [options] - Optional config.
|
|
6
|
-
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
7
|
-
* @returns {Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>}
|
|
8
|
-
*/
|
|
9
|
-
export function createDisplayContext(component: HTMLElement, options?: {
|
|
10
|
-
inputResolver?: Function;
|
|
11
|
-
}): Readonly<{
|
|
12
|
-
isVisible: boolean;
|
|
13
|
-
isModal: boolean;
|
|
14
|
-
isPopover: boolean;
|
|
15
|
-
activeInput: HTMLElement | null;
|
|
16
|
-
}>;
|
|
17
|
-
/**
|
|
18
|
-
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
19
|
-
* Handles both sync and async handlers.
|
|
20
|
-
* @param {HTMLElement} component - The component to attach the listener to.
|
|
21
|
-
* @param {Object} strategy - Map of key names to handler functions.
|
|
22
|
-
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
23
|
-
*/
|
|
24
|
-
export function applyKeyboardStrategy(component: HTMLElement, strategy: any, options?: any): void;
|
|
25
|
-
/**
|
|
26
|
-
* Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
|
|
27
|
-
* Optionally opens dropdown via showFn when closed.
|
|
28
|
-
* @param {HTMLElement} component - The component with dropdown and menu references.
|
|
29
|
-
* @param {string} direction - 'up' or 'down'.
|
|
30
|
-
* @param {Object} [options] - Optional config.
|
|
31
|
-
* @param {Function} [options.showFn] - Called to open the dropdown when closed.
|
|
32
|
-
* @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
|
|
33
|
-
*/
|
|
34
|
-
export function navigateArrow(component: HTMLElement, direction: string, options?: {
|
|
35
|
-
showFn?: Function;
|
|
36
|
-
ctx?: any;
|
|
37
|
-
}): void;
|