@aurodesignsystem-dev/auro-formkit 0.0.0-pr788.2 → 0.0.0-pr788.3

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.
Files changed (40) hide show
  1. package/components/combobox/demo/api.min.js +112 -17
  2. package/components/combobox/demo/index.md +2 -4
  3. package/components/combobox/demo/index.min.js +112 -17
  4. package/components/combobox/dist/auro-combobox.d.ts +8 -2
  5. package/components/combobox/dist/index.js +103 -15
  6. package/components/combobox/dist/registered.js +103 -15
  7. package/components/counter/demo/api.min.js +11 -9
  8. package/components/counter/demo/index.min.js +11 -9
  9. package/components/counter/dist/index.js +11 -9
  10. package/components/counter/dist/registered.js +11 -9
  11. package/components/datepicker/demo/api.min.js +126 -42
  12. package/components/datepicker/demo/index.min.js +126 -42
  13. package/components/datepicker/dist/index.js +126 -42
  14. package/components/datepicker/dist/registered.js +126 -42
  15. package/components/dropdown/demo/api.min.js +2 -2
  16. package/components/dropdown/demo/index.min.js +2 -2
  17. package/components/dropdown/dist/index.js +2 -2
  18. package/components/dropdown/dist/registered.js +2 -2
  19. package/components/input/demo/api.md +2 -5
  20. package/components/input/demo/api.min.js +89 -12
  21. package/components/input/demo/index.md +2 -2
  22. package/components/input/demo/index.min.js +89 -12
  23. package/components/input/dist/auro-input.d.ts +24 -0
  24. package/components/input/dist/base-input.d.ts +8 -2
  25. package/components/input/dist/index.js +89 -12
  26. package/components/input/dist/registered.js +89 -12
  27. package/components/menu/demo/api.min.js +9 -2
  28. package/components/menu/demo/index.min.js +9 -2
  29. package/components/menu/dist/index.js +9 -2
  30. package/components/menu/dist/registered.js +9 -2
  31. package/components/select/demo/api.md +1 -3
  32. package/components/select/demo/api.min.js +73 -34
  33. package/components/select/demo/index.min.js +73 -34
  34. package/components/select/dist/auro-select.d.ts +11 -5
  35. package/components/select/dist/index.js +64 -32
  36. package/components/select/dist/registered.js +64 -32
  37. package/package.json +1 -1
  38. package/components/input/dist/styles/default/input-css.d.ts +0 -2
  39. package/components/input/dist/styles/default/label-css.d.ts +0 -2
  40. package/components/input/dist/styles/input-css.d.ts +0 -2
@@ -4148,11 +4148,11 @@ var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic
4148
4148
 
4149
4149
  var colorCss$1$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
4150
4150
 
4151
- var styleCss$1$2 = css`:host{display:block;position:relative}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
4151
+ var styleCss$1$2 = css`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;box-sizing:border-box;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
4152
4152
 
4153
4153
  var classicColorCss = css``;
4154
4154
 
4155
- var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
4155
+ var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;box-sizing:border-box;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
4156
4156
 
4157
4157
  var styleEmphasizedCss = css`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
4158
4158
 
@@ -7495,7 +7495,7 @@ class AuroHelpText extends LitElement {
7495
7495
 
7496
7496
  var helpTextVersion = '1.0.0';
7497
7497
 
7498
- 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}[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)}:host{display:inline-block}: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,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}: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;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7498
+ 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.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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)}:host{display:inline-block}: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,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}: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}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7499
7499
 
7500
7500
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7501
7501
  // See LICENSE in the project root for license information.
@@ -7532,11 +7532,6 @@ class AuroSelect extends AuroElement$3 {
7532
7532
 
7533
7533
  this.matchWidth = false;
7534
7534
 
7535
- // Layout Config
7536
- this.layout = 'snowflake';
7537
- this.shape = 'snowflake';
7538
- this.size = 'xl';
7539
-
7540
7535
  // floaterConfig
7541
7536
  this.placement = 'bottom-start';
7542
7537
  this.offset = 0;
@@ -7545,10 +7540,6 @@ class AuroSelect extends AuroElement$3 {
7545
7540
 
7546
7541
  this.forceDisplayValue = false;
7547
7542
 
7548
- this.layout = 'classic';
7549
- this.shape = 'classic';
7550
- this.size = 'xl';
7551
-
7552
7543
  /**
7553
7544
  * @private
7554
7545
  */
@@ -7614,6 +7605,11 @@ class AuroSelect extends AuroElement$3 {
7614
7605
  this.fullscreenBreakpoint = 'sm';
7615
7606
  this.onDark = false;
7616
7607
  this.isPopoverVisible = false;
7608
+
7609
+ // Layout Config
7610
+ this.layout = 'classic';
7611
+ this.shape = 'classic';
7612
+ this.size = 'lg';
7617
7613
  }
7618
7614
 
7619
7615
  // This function is to define props used within the scope of this component
@@ -7916,22 +7912,52 @@ class AuroSelect extends AuroElement$3 {
7916
7912
  * @returns {void}
7917
7913
  */
7918
7914
  get commonLabelClasses() {
7919
- return {
7915
+ const obj = {
7920
7916
  'is-disabled': this.disabled,
7921
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
7922
- 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
7917
+ 'withValue': false,
7918
+ 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
7919
+ [this.labelFontClass]: true
7923
7920
  };
7921
+
7922
+ if (this.placeholder) {
7923
+ obj.withValue = true;
7924
+ } else if (this.optionSelected) {
7925
+ if (Array.isArray(this.optionSelected)) {
7926
+ obj.withValue = this.optionSelected.length > 0;
7927
+ } else {
7928
+ obj.withValue = true;
7929
+ }
7930
+ }
7931
+ return obj;
7924
7932
  }
7925
7933
 
7926
7934
  /**
7927
- * Returns classmap configuration for wrapper elements in each layout.
7935
+ * Returns the label font class based on layout and selection state.
7928
7936
  * @private
7929
- * @returns {object} - Returns classmap.
7937
+ * @returns {string} - The font class for the label.
7930
7938
  */
7931
- get commonWrapperClasses() {
7932
- return {
7933
- 'wrapper': true
7934
- };
7939
+ get labelFontClass() {
7940
+ const isSelected = this.hasValue;
7941
+
7942
+ if (this.layout.startsWith('emphasized')) {
7943
+ return isSelected ? 'body-sm' : 'accent-xl';
7944
+ }
7945
+
7946
+ if (this.layout === 'snowflake') {
7947
+ return isSelected ? 'body-xs' : 'body-lg';
7948
+ }
7949
+
7950
+ // classic layout (default)
7951
+ return isSelected ? 'body-xs' : 'body-default';
7952
+ }
7953
+
7954
+ /**
7955
+ * Whether or not the component has a value.
7956
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
7957
+ * @private
7958
+ */
7959
+ get hasValue() {
7960
+ return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
7935
7961
  }
7936
7962
 
7937
7963
  /**
@@ -8087,7 +8113,7 @@ class AuroSelect extends AuroElement$3 {
8087
8113
 
8088
8114
  this.menu.addEventListener('auroMenu-selectValueReset', () => {
8089
8115
  this.optionSelected = this.menu.optionSelected;
8090
- this.validation.validate(this);
8116
+ this.validate(this);
8091
8117
  });
8092
8118
 
8093
8119
  this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
@@ -8171,7 +8197,7 @@ class AuroSelect extends AuroElement$3 {
8171
8197
  this.addEventListener('focusin', this.handleFocusin);
8172
8198
 
8173
8199
  this.addEventListener('blur', () => {
8174
- this.validation.validate(this);
8200
+ this.validate();
8175
8201
  this.hasFocus = false;
8176
8202
  });
8177
8203
  }
@@ -8360,7 +8386,11 @@ class AuroSelect extends AuroElement$3 {
8360
8386
  if (!this.menu) return;
8361
8387
 
8362
8388
  this.menu.setAttribute('value', value);
8363
- this.menu.value = value;
8389
+ if (value) {
8390
+ this.menu.value = value;
8391
+ } else {
8392
+ this.menu.reset();
8393
+ }
8364
8394
  await this.menu.updateComplete;
8365
8395
  }
8366
8396
 
@@ -8381,7 +8411,7 @@ class AuroSelect extends AuroElement$3 {
8381
8411
  }
8382
8412
 
8383
8413
  this._updateNativeSelect();
8384
- this.validation.validate(this);
8414
+ this.validate();
8385
8415
 
8386
8416
  // LEGACY EVENT
8387
8417
  this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
@@ -8578,7 +8608,7 @@ class AuroSelect extends AuroElement$3 {
8578
8608
  'displayValue': true,
8579
8609
  'hasContent': this.hasDisplayValueContent,
8580
8610
  'hasFocus': this.isPopoverVisible,
8581
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
8611
+ 'withValue': this.commonLabelClasses.widthValue,
8582
8612
  'force': this.forceDisplayValue,
8583
8613
  };
8584
8614
 
@@ -8589,7 +8619,6 @@ class AuroSelect extends AuroElement$3 {
8589
8619
 
8590
8620
  return html`
8591
8621
  <div
8592
- class="${classMap(this.commonWrapperClasses)}"
8593
8622
  part="wrapper">
8594
8623
  <div id="slotHolder" aria-hidden="true">
8595
8624
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8658,7 +8687,7 @@ class AuroSelect extends AuroElement$3 {
8658
8687
  'displayValue': true,
8659
8688
  'hasContent': this.hasDisplayValueContent,
8660
8689
  'hasFocus': this.isPopoverVisible,
8661
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
8690
+ 'withValue': this.commonLabelClasses.widthValue,
8662
8691
  'force': this.forceDisplayValue,
8663
8692
  };
8664
8693
 
@@ -8669,7 +8698,6 @@ class AuroSelect extends AuroElement$3 {
8669
8698
 
8670
8699
  return html`
8671
8700
  <div
8672
- class="${classMap(this.commonWrapperClasses)}"
8673
8701
  part="wrapper">
8674
8702
  <div id="slotHolder" aria-hidden="true">
8675
8703
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8738,7 +8766,7 @@ class AuroSelect extends AuroElement$3 {
8738
8766
  'displayValue': true,
8739
8767
  'hasContent': this.hasDisplayValueContent,
8740
8768
  'hasFocus': this.isPopoverVisible,
8741
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
8769
+ 'withValue': this.commonLabelClasses.widthValue,
8742
8770
  'force': this.forceDisplayValue,
8743
8771
  };
8744
8772
 
@@ -8747,9 +8775,13 @@ class AuroSelect extends AuroElement$3 {
8747
8775
  'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
8748
8776
  };
8749
8777
 
8778
+ const valueClasses = {
8779
+ 'value': true,
8780
+ 'body-default': true
8781
+ };
8782
+
8750
8783
  return html`
8751
8784
  <div
8752
- class="${classMap(this.commonWrapperClasses)}"
8753
8785
  part="wrapper">
8754
8786
  <div id="slotHolder" aria-hidden="true">
8755
8787
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8779,7 +8811,7 @@ class AuroSelect extends AuroElement$3 {
8779
8811
  <slot name="label"></slot>
8780
8812
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
8781
8813
  </label>
8782
- <div class="value" id="value"></div>
8814
+ <div class="${classMap(valueClasses)}" id="value"></div>
8783
8815
  <div id="placeholder" class="${classMap(placeholderClass)}">
8784
8816
  ${this.placeholder}
8785
8817
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr788.2",
3
+ "version": "0.0.0-pr788.3",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;