@aurodesignsystem-dev/auro-formkit 0.0.0-pr1541.3 → 0.0.0-pr1541.4
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/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.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.md +1 -1
- package/components/combobox/demo/customize.min.js +71 -20
- package/components/combobox/demo/getting-started.min.js +71 -20
- package/components/combobox/demo/index.md +1 -0
- package/components/combobox/demo/index.min.js +71 -20
- package/components/combobox/dist/auro-combobox.d.ts +1 -1
- package/components/combobox/dist/index.js +4 -4
- package/components/combobox/dist/registered.js +4 -4
- package/components/counter/demo/customize.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/customize.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.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/customize.min.js +86 -31
- package/components/form/demo/getting-started.min.js +86 -31
- package/components/form/demo/index.min.js +86 -31
- package/components/form/demo/registerDemoDeps.min.js +86 -31
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.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.md +24 -18
- package/components/menu/demo/customize.md +1 -1
- package/components/menu/demo/getting-started.md +2 -2
- package/components/menu/demo/index.min.js +67 -16
- package/components/menu/dist/auro-menu-utils.d.ts +19 -0
- package/components/menu/dist/auro-menu.d.ts +3 -7
- package/components/menu/dist/auro-menuoption.d.ts +1 -0
- package/components/menu/dist/index.js +67 -16
- package/components/menu/dist/registered.js +67 -16
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.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.md +2 -2
- package/components/select/demo/customize.md +3 -0
- package/components/select/demo/customize.min.js +74 -19
- package/components/select/demo/getting-started.md +1 -1
- package/components/select/demo/getting-started.min.js +74 -19
- package/components/select/demo/index.md +2 -2
- package/components/select/demo/index.min.js +74 -19
- package/components/select/dist/auro-select.d.ts +6 -2
- package/components/select/dist/index.js +7 -3
- package/components/select/dist/registered.js +7 -3
- package/custom-elements.json +1836 -1776
- package/package.json +1 -1
|
@@ -907,6 +907,9 @@
|
|
|
907
907
|
<p>The component may be rendered with one or more <code>disabled</code> options. When navigating the list of options with the keyboard or assistive technology to mark the next or previous option as active, disabled options will be skipped, jumping to the next enabled option.</p>
|
|
908
908
|
<p>While using the pointer to mark options as active, hovering over disabled options will be ignored and the previous active option will remain active.</p>
|
|
909
909
|
<p class="note">
|
|
910
|
+
<strong>Note:</strong> Setting the component <code>value</code> to one that matches a <code>disabled</code> or <code>static</code> option — whether via the <code>value</code> attribute or programmatic assignment (e.g. <code>el.value = 'x'</code>) — is rejected: <code>value</code> and <code>optionSelected</code> are cleared to <code>undefined</code>. A value matching a <code>hidden</code> option is still applied.
|
|
911
|
+
</p>
|
|
912
|
+
<p class="note">
|
|
910
913
|
<strong>Note:</strong> If the currently <code>selected</code> option is marked as <code>disabled</code>, the component value is reset to <code>undefined</code> and the component validation workflow is performed (e.g., if the component instance is <code>required</code> it will set <code>validity="valueMissing".</code>).
|
|
911
914
|
</p>
|
|
912
915
|
<p class="note">
|
|
@@ -4995,7 +4995,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4995
4995
|
}
|
|
4996
4996
|
};
|
|
4997
4997
|
|
|
4998
|
-
var formkitVersion$1 = '
|
|
4998
|
+
var formkitVersion$1 = '202607082038';
|
|
4999
4999
|
|
|
5000
5000
|
class AuroElement extends i$2 {
|
|
5001
5001
|
static get properties() {
|
|
@@ -7034,7 +7034,7 @@ class AuroHelpText extends i$2 {
|
|
|
7034
7034
|
}
|
|
7035
7035
|
}
|
|
7036
7036
|
|
|
7037
|
-
var formkitVersion = '
|
|
7037
|
+
var formkitVersion = '202607082038';
|
|
7038
7038
|
|
|
7039
7039
|
var styleCss$2 = i$5`.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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
|
|
7040
7040
|
|
|
@@ -7476,7 +7476,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7476
7476
|
},
|
|
7477
7477
|
|
|
7478
7478
|
/**
|
|
7479
|
-
* Value selected for the component.
|
|
7479
|
+
* Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options remain selectable by value.
|
|
7480
7480
|
*/
|
|
7481
7481
|
value: {
|
|
7482
7482
|
type: String,
|
|
@@ -8296,6 +8296,10 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8296
8296
|
this._observeLabelChanges();
|
|
8297
8297
|
}
|
|
8298
8298
|
|
|
8299
|
+
/**
|
|
8300
|
+
* Sets the selected value by matching it against the menu options. Options marked `disabled` or `static` are not selectable: if the value matches one, the selection is rejected and `value`/`optionSelected` are cleared to `undefined`. `hidden` options remain selectable.
|
|
8301
|
+
* @param {string} value - The value to match against the menu options.
|
|
8302
|
+
*/
|
|
8299
8303
|
setMenuValue(value) {
|
|
8300
8304
|
if (!this.menu) return;
|
|
8301
8305
|
this.menu.selectByValue(value);
|
|
@@ -8823,6 +8827,18 @@ var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
8823
8827
|
// See LICENSE in the project root for license information.
|
|
8824
8828
|
|
|
8825
8829
|
|
|
8830
|
+
/**
|
|
8831
|
+
* Serializes a multi-select value array back into the String `value` property.
|
|
8832
|
+
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
8833
|
+
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
8834
|
+
* @private
|
|
8835
|
+
* @param {Array<string>|undefined} values - The selected values.
|
|
8836
|
+
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
8837
|
+
*/
|
|
8838
|
+
function serializeMultiSelectValue(values) {
|
|
8839
|
+
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
8840
|
+
}
|
|
8841
|
+
|
|
8826
8842
|
/**
|
|
8827
8843
|
* Validates if an option can be interacted with.
|
|
8828
8844
|
* @private
|
|
@@ -8835,6 +8851,20 @@ function isOptionInteractive(option) {
|
|
|
8835
8851
|
!option.hasAttribute('static');
|
|
8836
8852
|
}
|
|
8837
8853
|
|
|
8854
|
+
/**
|
|
8855
|
+
* Validates if an option may be selected by matching a programmatic value.
|
|
8856
|
+
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
8857
|
+
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
8858
|
+
* valid programmatic selection. Only disabled and static options — which are
|
|
8859
|
+
* never selectable — are rejected.
|
|
8860
|
+
* @param {HTMLElement} option - The option to check.
|
|
8861
|
+
* @returns {boolean} True if option can be selected by value.
|
|
8862
|
+
*/
|
|
8863
|
+
function isSelectableByValue(option) {
|
|
8864
|
+
return !option.hasAttribute('disabled') &&
|
|
8865
|
+
!option.hasAttribute('static');
|
|
8866
|
+
}
|
|
8867
|
+
|
|
8838
8868
|
/**
|
|
8839
8869
|
* Helper method to dispatch custom events.
|
|
8840
8870
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -9004,6 +9034,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9004
9034
|
|
|
9005
9035
|
/**
|
|
9006
9036
|
* Specifies the current active menuOption.
|
|
9037
|
+
* @readonly
|
|
9007
9038
|
*/
|
|
9008
9039
|
optionActive: {
|
|
9009
9040
|
type: Object,
|
|
@@ -9012,14 +9043,17 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9012
9043
|
|
|
9013
9044
|
/**
|
|
9014
9045
|
* The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
|
|
9046
|
+
* @readonly
|
|
9015
9047
|
*/
|
|
9016
9048
|
optionSelected: {
|
|
9017
9049
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
9018
|
-
type: Object
|
|
9050
|
+
type: Object,
|
|
9051
|
+
attribute: false
|
|
9019
9052
|
},
|
|
9020
9053
|
|
|
9021
9054
|
/**
|
|
9022
9055
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
9056
|
+
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
9023
9057
|
*/
|
|
9024
9058
|
value: {
|
|
9025
9059
|
type: String,
|
|
@@ -9143,7 +9177,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9143
9177
|
}
|
|
9144
9178
|
|
|
9145
9179
|
/**
|
|
9146
|
-
* Selects options by value.
|
|
9180
|
+
* Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
|
|
9147
9181
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
9148
9182
|
* @public
|
|
9149
9183
|
*/
|
|
@@ -9228,6 +9262,11 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9228
9262
|
this.initItems();
|
|
9229
9263
|
}
|
|
9230
9264
|
|
|
9265
|
+
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
9266
|
+
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
9267
|
+
// cycle to avoid firing option custom events twice on the same selection.
|
|
9268
|
+
let valueReconciled = false;
|
|
9269
|
+
|
|
9231
9270
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
9232
9271
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
9233
9272
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -9240,11 +9279,31 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9240
9279
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
9241
9280
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
9242
9281
|
const valueArray = this.formattedValue || [];
|
|
9243
|
-
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
9282
|
+
const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
|
|
9244
9283
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
9284
|
+
|
|
9285
|
+
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
9286
|
+
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
9287
|
+
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
9288
|
+
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
9289
|
+
// matching item yet are preserved so async preselection still works once options render.
|
|
9290
|
+
const rejectedValues = this.items
|
|
9291
|
+
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
9292
|
+
: [];
|
|
9293
|
+
if (rejectedValues.length > 0) {
|
|
9294
|
+
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
9295
|
+
this.value = serializeMultiSelectValue(reconciled);
|
|
9296
|
+
valueReconciled = true;
|
|
9297
|
+
}
|
|
9245
9298
|
} else {
|
|
9246
|
-
// In single-select mode, this.value should be a string
|
|
9247
|
-
|
|
9299
|
+
// In single-select mode, this.value should be a string. Reject
|
|
9300
|
+
// disabled/static options so a programmatic value pointing at a
|
|
9301
|
+
// non-selectable option falls through to the no-match path below
|
|
9302
|
+
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
9303
|
+
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
9304
|
+
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
9305
|
+
// still a valid programmatic selection.
|
|
9306
|
+
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
9248
9307
|
|
|
9249
9308
|
if (matchingOption) {
|
|
9250
9309
|
newSelected = matchingOption;
|
|
@@ -9286,8 +9345,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9286
9345
|
]
|
|
9287
9346
|
]));
|
|
9288
9347
|
|
|
9289
|
-
// Notify of changes
|
|
9290
|
-
|
|
9348
|
+
// Notify of changes. Skip when reconciliation just reassigned `value`: the
|
|
9349
|
+
// follow-on update cycle re-runs this branch and fires the events exactly once.
|
|
9350
|
+
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
9291
9351
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
9292
9352
|
selected.forEach((opt) => {
|
|
9293
9353
|
if (opt.hasAttribute('event')) {
|
|
@@ -9500,7 +9560,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9500
9560
|
const currentSelected = this.optionSelected || [];
|
|
9501
9561
|
|
|
9502
9562
|
if (!currentValue.includes(option.value)) {
|
|
9503
|
-
this.value =
|
|
9563
|
+
this.value = serializeMultiSelectValue([
|
|
9504
9564
|
...currentValue,
|
|
9505
9565
|
option.value
|
|
9506
9566
|
]);
|
|
@@ -9526,15 +9586,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9526
9586
|
*/
|
|
9527
9587
|
handleDeselectState(option) {
|
|
9528
9588
|
if (this.multiSelect) {
|
|
9529
|
-
// Remove this option from array
|
|
9589
|
+
// Remove this option from array; an empty result collapses `value` to undefined.
|
|
9530
9590
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
9531
|
-
|
|
9532
|
-
// If array is empty after removal, set back to undefined
|
|
9533
|
-
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
9534
|
-
this.value = undefined;
|
|
9535
|
-
} else {
|
|
9536
|
-
this.value = JSON.stringify(newFormattedValue);
|
|
9537
|
-
}
|
|
9591
|
+
this.value = serializeMultiSelectValue(newFormattedValue);
|
|
9538
9592
|
|
|
9539
9593
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
9540
9594
|
if (this.optionSelected.length === 0) {
|
|
@@ -9995,6 +10049,7 @@ let menuOptionIdCounter = 0;
|
|
|
9995
10049
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
9996
10050
|
* @customElement auro-menuoption
|
|
9997
10051
|
*
|
|
10052
|
+
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
9998
10053
|
* @slot default - The default slot for the menu option text.
|
|
9999
10054
|
*
|
|
10000
10055
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -390,7 +390,7 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
|
|
|
390
390
|
<auro-header level="3" id="validity">validity</auro-header>
|
|
391
391
|
<p>Returns the current <code>validityState</code> of the component as a string. Possible values include <code>"valid"</code>, <code>"valueMissing"</code>, and <code>"customError"</code>.</p>
|
|
392
392
|
<auro-header level="3" id="value">value</auro-header>
|
|
393
|
-
<p>Gets or sets the selected value of the select. When set programmatically, the component will attempt to match and select the corresponding menu option.</p>
|
|
393
|
+
<p>Gets or sets the selected value of the select. When set programmatically, the component will attempt to match and select the corresponding menu option. If the value matches an option marked <code>disabled</code> or <code>static</code>, the selection is rejected and <code>value</code> is cleared to <code>undefined</code>. <code>hidden</code> options remain selectable by value.</p>
|
|
394
394
|
</section>
|
|
395
395
|
<section>
|
|
396
396
|
<auro-header level="2" id="publicFunctions">Functions</auro-header>
|
|
@@ -4995,7 +4995,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4995
4995
|
}
|
|
4996
4996
|
};
|
|
4997
4997
|
|
|
4998
|
-
var formkitVersion$1 = '
|
|
4998
|
+
var formkitVersion$1 = '202607082038';
|
|
4999
4999
|
|
|
5000
5000
|
class AuroElement extends i$2 {
|
|
5001
5001
|
static get properties() {
|
|
@@ -7034,7 +7034,7 @@ class AuroHelpText extends i$2 {
|
|
|
7034
7034
|
}
|
|
7035
7035
|
}
|
|
7036
7036
|
|
|
7037
|
-
var formkitVersion = '
|
|
7037
|
+
var formkitVersion = '202607082038';
|
|
7038
7038
|
|
|
7039
7039
|
var styleCss$2 = i$5`.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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
|
|
7040
7040
|
|
|
@@ -7476,7 +7476,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7476
7476
|
},
|
|
7477
7477
|
|
|
7478
7478
|
/**
|
|
7479
|
-
* Value selected for the component.
|
|
7479
|
+
* Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options remain selectable by value.
|
|
7480
7480
|
*/
|
|
7481
7481
|
value: {
|
|
7482
7482
|
type: String,
|
|
@@ -8296,6 +8296,10 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8296
8296
|
this._observeLabelChanges();
|
|
8297
8297
|
}
|
|
8298
8298
|
|
|
8299
|
+
/**
|
|
8300
|
+
* Sets the selected value by matching it against the menu options. Options marked `disabled` or `static` are not selectable: if the value matches one, the selection is rejected and `value`/`optionSelected` are cleared to `undefined`. `hidden` options remain selectable.
|
|
8301
|
+
* @param {string} value - The value to match against the menu options.
|
|
8302
|
+
*/
|
|
8299
8303
|
setMenuValue(value) {
|
|
8300
8304
|
if (!this.menu) return;
|
|
8301
8305
|
this.menu.selectByValue(value);
|
|
@@ -8823,6 +8827,18 @@ var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
8823
8827
|
// See LICENSE in the project root for license information.
|
|
8824
8828
|
|
|
8825
8829
|
|
|
8830
|
+
/**
|
|
8831
|
+
* Serializes a multi-select value array back into the String `value` property.
|
|
8832
|
+
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
8833
|
+
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
8834
|
+
* @private
|
|
8835
|
+
* @param {Array<string>|undefined} values - The selected values.
|
|
8836
|
+
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
8837
|
+
*/
|
|
8838
|
+
function serializeMultiSelectValue(values) {
|
|
8839
|
+
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
8840
|
+
}
|
|
8841
|
+
|
|
8826
8842
|
/**
|
|
8827
8843
|
* Validates if an option can be interacted with.
|
|
8828
8844
|
* @private
|
|
@@ -8835,6 +8851,20 @@ function isOptionInteractive(option) {
|
|
|
8835
8851
|
!option.hasAttribute('static');
|
|
8836
8852
|
}
|
|
8837
8853
|
|
|
8854
|
+
/**
|
|
8855
|
+
* Validates if an option may be selected by matching a programmatic value.
|
|
8856
|
+
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
8857
|
+
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
8858
|
+
* valid programmatic selection. Only disabled and static options — which are
|
|
8859
|
+
* never selectable — are rejected.
|
|
8860
|
+
* @param {HTMLElement} option - The option to check.
|
|
8861
|
+
* @returns {boolean} True if option can be selected by value.
|
|
8862
|
+
*/
|
|
8863
|
+
function isSelectableByValue(option) {
|
|
8864
|
+
return !option.hasAttribute('disabled') &&
|
|
8865
|
+
!option.hasAttribute('static');
|
|
8866
|
+
}
|
|
8867
|
+
|
|
8838
8868
|
/**
|
|
8839
8869
|
* Helper method to dispatch custom events.
|
|
8840
8870
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -9004,6 +9034,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9004
9034
|
|
|
9005
9035
|
/**
|
|
9006
9036
|
* Specifies the current active menuOption.
|
|
9037
|
+
* @readonly
|
|
9007
9038
|
*/
|
|
9008
9039
|
optionActive: {
|
|
9009
9040
|
type: Object,
|
|
@@ -9012,14 +9043,17 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9012
9043
|
|
|
9013
9044
|
/**
|
|
9014
9045
|
* The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
|
|
9046
|
+
* @readonly
|
|
9015
9047
|
*/
|
|
9016
9048
|
optionSelected: {
|
|
9017
9049
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
9018
|
-
type: Object
|
|
9050
|
+
type: Object,
|
|
9051
|
+
attribute: false
|
|
9019
9052
|
},
|
|
9020
9053
|
|
|
9021
9054
|
/**
|
|
9022
9055
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
9056
|
+
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
9023
9057
|
*/
|
|
9024
9058
|
value: {
|
|
9025
9059
|
type: String,
|
|
@@ -9143,7 +9177,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9143
9177
|
}
|
|
9144
9178
|
|
|
9145
9179
|
/**
|
|
9146
|
-
* Selects options by value.
|
|
9180
|
+
* Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
|
|
9147
9181
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
9148
9182
|
* @public
|
|
9149
9183
|
*/
|
|
@@ -9228,6 +9262,11 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9228
9262
|
this.initItems();
|
|
9229
9263
|
}
|
|
9230
9264
|
|
|
9265
|
+
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
9266
|
+
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
9267
|
+
// cycle to avoid firing option custom events twice on the same selection.
|
|
9268
|
+
let valueReconciled = false;
|
|
9269
|
+
|
|
9231
9270
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
9232
9271
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
9233
9272
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -9240,11 +9279,31 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9240
9279
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
9241
9280
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
9242
9281
|
const valueArray = this.formattedValue || [];
|
|
9243
|
-
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
9282
|
+
const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
|
|
9244
9283
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
9284
|
+
|
|
9285
|
+
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
9286
|
+
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
9287
|
+
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
9288
|
+
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
9289
|
+
// matching item yet are preserved so async preselection still works once options render.
|
|
9290
|
+
const rejectedValues = this.items
|
|
9291
|
+
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
9292
|
+
: [];
|
|
9293
|
+
if (rejectedValues.length > 0) {
|
|
9294
|
+
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
9295
|
+
this.value = serializeMultiSelectValue(reconciled);
|
|
9296
|
+
valueReconciled = true;
|
|
9297
|
+
}
|
|
9245
9298
|
} else {
|
|
9246
|
-
// In single-select mode, this.value should be a string
|
|
9247
|
-
|
|
9299
|
+
// In single-select mode, this.value should be a string. Reject
|
|
9300
|
+
// disabled/static options so a programmatic value pointing at a
|
|
9301
|
+
// non-selectable option falls through to the no-match path below
|
|
9302
|
+
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
9303
|
+
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
9304
|
+
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
9305
|
+
// still a valid programmatic selection.
|
|
9306
|
+
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
9248
9307
|
|
|
9249
9308
|
if (matchingOption) {
|
|
9250
9309
|
newSelected = matchingOption;
|
|
@@ -9286,8 +9345,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9286
9345
|
]
|
|
9287
9346
|
]));
|
|
9288
9347
|
|
|
9289
|
-
// Notify of changes
|
|
9290
|
-
|
|
9348
|
+
// Notify of changes. Skip when reconciliation just reassigned `value`: the
|
|
9349
|
+
// follow-on update cycle re-runs this branch and fires the events exactly once.
|
|
9350
|
+
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
9291
9351
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
9292
9352
|
selected.forEach((opt) => {
|
|
9293
9353
|
if (opt.hasAttribute('event')) {
|
|
@@ -9500,7 +9560,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9500
9560
|
const currentSelected = this.optionSelected || [];
|
|
9501
9561
|
|
|
9502
9562
|
if (!currentValue.includes(option.value)) {
|
|
9503
|
-
this.value =
|
|
9563
|
+
this.value = serializeMultiSelectValue([
|
|
9504
9564
|
...currentValue,
|
|
9505
9565
|
option.value
|
|
9506
9566
|
]);
|
|
@@ -9526,15 +9586,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9526
9586
|
*/
|
|
9527
9587
|
handleDeselectState(option) {
|
|
9528
9588
|
if (this.multiSelect) {
|
|
9529
|
-
// Remove this option from array
|
|
9589
|
+
// Remove this option from array; an empty result collapses `value` to undefined.
|
|
9530
9590
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
9531
|
-
|
|
9532
|
-
// If array is empty after removal, set back to undefined
|
|
9533
|
-
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
9534
|
-
this.value = undefined;
|
|
9535
|
-
} else {
|
|
9536
|
-
this.value = JSON.stringify(newFormattedValue);
|
|
9537
|
-
}
|
|
9591
|
+
this.value = serializeMultiSelectValue(newFormattedValue);
|
|
9538
9592
|
|
|
9539
9593
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
9540
9594
|
if (this.optionSelected.length === 0) {
|
|
@@ -9995,6 +10049,7 @@ let menuOptionIdCounter = 0;
|
|
|
9995
10049
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
9996
10050
|
* @customElement auro-menuoption
|
|
9997
10051
|
*
|
|
10052
|
+
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
9998
10053
|
* @slot default - The default slot for the menu option text.
|
|
9999
10054
|
*
|
|
10000
10055
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -110,10 +110,10 @@
|
|
|
110
110
|
<p>In some cases it is necessary to preset the value of the component as part of the initial render.</p>
|
|
111
111
|
<auro-header level="4" id="us3a">Single Select</auro-header>
|
|
112
112
|
<p>When a value is preset, the matching option in the menu will be marked as both <code>active</code> and <code>selected</code>.</p>
|
|
113
|
-
<p>If a preset value is defined that does not match any option, the value is reset to <code>undefined</code>.
|
|
113
|
+
<p>If a preset value is defined that does not match any option, the value is reset to <code>undefined</code>. A value that matches an option marked <code>disabled</code> or <code>static</code> is also rejected and reset to <code>undefined</code>; a value matching a <code>hidden</code> option is still applied.</p>
|
|
114
114
|
<auro-header level="4" id="us3b">Multi Select</auro-header>
|
|
115
115
|
<p>When configured for multi-select, the preset value may include multiple options. The first selected option will also be marked <code>active</code>.</p>
|
|
116
|
-
<p>If one or more preset values do not match any option they will be discarded. If no preset values
|
|
116
|
+
<p>If one or more preset values do not match any option — or match an option marked <code>disabled</code> or <code>static</code> — they will be discarded. If no preset values remain, the value is reset to <code>undefined</code>.</p>
|
|
117
117
|
<div class="note"><strong>Important caveat:</strong> Multi-select is notoriously difficult for all users, including screen reader users — WCAG and usability research generally recommend avoiding <code><auro-select multiSelect></code> in favor of checkboxes or other patterns that make multi-selection more discoverable.</div>
|
|
118
118
|
<auro-header level="3" id="multiselect">Multi-select</auro-header>
|
|
119
119
|
<p>In certain cases it may be valid to allow more than one option to be selected. When the component is configured to support multi-select only one option is still able to be marked <code>active</code>. However, multiple options may be <code>selected</code> via click, tap or keyboard events on each option. A second click, tap or keyboard event on an already selected option will de-select it.</p>
|