@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.42 → 0.0.0-pr624.44

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 (24) hide show
  1. package/components/combobox/demo/api.min.js +1 -1
  2. package/components/combobox/demo/index.min.js +1 -1
  3. package/components/combobox/dist/index.js +1 -1
  4. package/components/combobox/dist/registered.js +1 -1
  5. package/components/counter/demo/api.min.js +1 -1
  6. package/components/counter/demo/index.min.js +1 -1
  7. package/components/counter/dist/index.js +1 -1
  8. package/components/counter/dist/registered.js +1 -1
  9. package/components/datepicker/demo/api.min.js +1 -1
  10. package/components/datepicker/demo/index.min.js +1 -1
  11. package/components/datepicker/dist/index.js +1 -1
  12. package/components/datepicker/dist/registered.js +1 -1
  13. package/components/dropdown/demo/api.min.js +1 -1
  14. package/components/dropdown/demo/index.min.js +1 -1
  15. package/components/dropdown/dist/index.js +1 -1
  16. package/components/dropdown/dist/registered.js +1 -1
  17. package/components/select/demo/api.md +4 -7
  18. package/components/select/demo/api.min.js +11 -101
  19. package/components/select/demo/index.md +5 -157
  20. package/components/select/demo/index.min.js +11 -101
  21. package/components/select/dist/auro-select.d.ts +12 -3
  22. package/components/select/dist/index.js +11 -101
  23. package/components/select/dist/registered.js +11 -101
  24. package/package.json +1 -1
package/components/combobox/demo/api.min.js CHANGED
@@ -4243,7 +4243,7 @@ var colorCss$1$3 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4243
4243
 
4244
4244
  var classicColorCss$1 = i$5``;
4245
4245
 
4246
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4246
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
4247
4247
 
4248
4248
  var styleEmphasizedCss$1 = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4249
4249
 
package/components/combobox/demo/index.min.js CHANGED
@@ -4101,7 +4101,7 @@ var colorCss$1$3 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4101
4101
 
4102
4102
  var classicColorCss$1 = i$5``;
4103
4103
 
4104
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4104
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
4105
4105
 
4106
4106
  var styleEmphasizedCss$1 = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4107
4107
 
package/components/combobox/dist/index.js CHANGED
@@ -4032,7 +4032,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4032
4032
 
4033
4033
  var classicColorCss$1 = css``;
4034
4034
 
4035
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4035
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
4036
4036
 
4037
4037
  var styleEmphasizedCss$1 = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4038
4038
 
package/components/combobox/dist/registered.js CHANGED
@@ -4032,7 +4032,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4032
4032
 
4033
4033
  var classicColorCss$1 = css``;
4034
4034
 
4035
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4035
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
4036
4036
 
4037
4037
  var styleEmphasizedCss$1 = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4038
4038
 
package/components/counter/demo/api.min.js CHANGED
@@ -5952,7 +5952,7 @@ var colorCss$1$2 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
5952
5952
 
5953
5953
  var classicColorCss = i$5``;
5954
5954
 
5955
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
5955
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
5956
5956
 
5957
5957
  var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
5958
5958
 
package/components/counter/demo/index.min.js CHANGED
@@ -5952,7 +5952,7 @@ var colorCss$1$2 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
5952
5952
 
5953
5953
  var classicColorCss = i$5``;
5954
5954
 
5955
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
5955
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
5956
5956
 
5957
5957
  var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
5958
5958
 
package/components/counter/dist/index.js CHANGED
@@ -5905,7 +5905,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
5905
5905
 
5906
5906
  var classicColorCss = css``;
5907
5907
 
5908
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
5908
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
5909
5909
 
5910
5910
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
5911
5911
 
package/components/counter/dist/registered.js CHANGED
@@ -5905,7 +5905,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
5905
5905
 
5906
5906
  var classicColorCss = css``;
5907
5907
 
5908
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
5908
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
5909
5909
 
5910
5910
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
5911
5911
 
package/components/datepicker/demo/api.min.js CHANGED
@@ -17560,7 +17560,7 @@ var colorCss$1$2 = i$2`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
17560
17560
 
17561
17561
  var classicColorCss$1 = i$2``;
17562
17562
 
17563
- var classicLayoutCss = i$2`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
17563
+ var classicLayoutCss = i$2`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
17564
17564
 
17565
17565
  var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
17566
17566
 
package/components/datepicker/demo/index.min.js CHANGED
@@ -17301,7 +17301,7 @@ var colorCss$1$2 = i$2`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
17301
17301
 
17302
17302
  var classicColorCss$1 = i$2``;
17303
17303
 
17304
- var classicLayoutCss = i$2`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
17304
+ var classicLayoutCss = i$2`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
17305
17305
 
17306
17306
  var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
17307
17307
 
package/components/datepicker/dist/index.js CHANGED
@@ -17250,7 +17250,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
17250
17250
 
17251
17251
  var classicColorCss$1 = css``;
17252
17252
 
17253
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
17253
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
17254
17254
 
17255
17255
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
17256
17256
 
package/components/datepicker/dist/registered.js CHANGED
@@ -17250,7 +17250,7 @@ var colorCss$1$2 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
17250
17250
 
17251
17251
  var classicColorCss$1 = css``;
17252
17252
 
17253
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
17253
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
17254
17254
 
17255
17255
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
17256
17256
 
package/components/dropdown/demo/api.min.js CHANGED
@@ -3216,7 +3216,7 @@ var colorCss$1 = i$2`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-d
3216
3216
 
3217
3217
  var classicColorCss = i$2``;
3218
3218
 
3219
- var classicLayoutCss = i$2`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
3219
+ var classicLayoutCss = i$2`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
3220
3220
 
3221
3221
  var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
3222
3222
 
package/components/dropdown/demo/index.min.js CHANGED
@@ -3191,7 +3191,7 @@ var colorCss$1 = i$2`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-d
3191
3191
 
3192
3192
  var classicColorCss = i$2``;
3193
3193
 
3194
- var classicLayoutCss = i$2`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
3194
+ var classicLayoutCss = i$2`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
3195
3195
 
3196
3196
  var styleEmphasizedCss = i$2`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
3197
3197
 
package/components/dropdown/dist/index.js CHANGED
@@ -3144,7 +3144,7 @@ var colorCss$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-d
3144
3144
 
3145
3145
  var classicColorCss = css``;
3146
3146
 
3147
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
3147
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
3148
3148
 
3149
3149
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
3150
3150
 
package/components/dropdown/dist/registered.js CHANGED
@@ -3144,7 +3144,7 @@ var colorCss$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-d
3144
3144
 
3145
3145
  var classicColorCss = css``;
3146
3146
 
3147
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
3147
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
3148
3148
 
3149
3149
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
3150
3150
 
package/components/select/demo/api.md CHANGED
@@ -45,13 +45,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
45
45
 
46
46
  ## Methods
47
47
 
48
- | Method | Type | Description |
49
- |----------------------|----------------------------------------|--------------------------------------------------|
50
- | [renderAriaHtml](#renderAriaHtml) | `(): TemplateResult` | |
51
- | [renderBACKUP](#renderBACKUP) | `(): TemplateResult` | |
52
- | [renderNativeSelect](#renderNativeSelect) | `(): TemplateResult` | |
53
- | [reset](#reset) | `(): void` | Resets component to initial state. |
54
- | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
48
+ | Method | Type | Description |
49
+ |------------|----------------------------------------|--------------------------------------------------|
50
+ | [reset](#reset) | `(): void` | Resets component to initial state. |
51
+ | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
55
52
 
56
53
  ## Events
57
54
 
package/components/select/demo/api.min.js CHANGED
@@ -4269,7 +4269,7 @@ var colorCss$1$2 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4269
4269
 
4270
4270
  var classicColorCss = i$5``;
4271
4271
 
4272
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4272
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
4273
4273
 
4274
4274
  var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4275
4275
 
@@ -8696,6 +8696,11 @@ class AuroSelect extends AuroElement$4 {
8696
8696
  }
8697
8697
  }
8698
8698
 
8699
+ /**
8700
+ * Returns HTML for the hidden a11y screen reader content.
8701
+ * @private
8702
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
8703
+ */
8699
8704
  renderAriaHtml() {
8700
8705
  return u`
8701
8706
  <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8716,6 +8721,11 @@ class AuroSelect extends AuroElement$4 {
8716
8721
  `;
8717
8722
  }
8718
8723
 
8724
+ /**
8725
+ * Returns HTML for the hidden HTML5 select.
8726
+ * @private
8727
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
8728
+ */
8719
8729
  renderNativeSelect() {
8720
8730
  return u`
8721
8731
  <div class="nativeSelectWrapper util_displayHidden">
@@ -9045,106 +9055,6 @@ class AuroSelect extends AuroElement$4 {
9045
9055
 
9046
9056
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
9047
9057
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
9048
-
9049
- // function that renders the HTML and CSS into the scope of the component
9050
- renderBACKUP() {
9051
- const placeholderClass = {
9052
- hidden: this.value,
9053
- };
9054
-
9055
- return u`
9056
- <div class="outerWrapper">
9057
- <div aria-live="polite" class="util_displayHiddenVisually">
9058
- ${this.optionActive && this.options.length > 0
9059
- ? u`
9060
- ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
9061
- `
9062
- : undefined
9063
- };
9064
-
9065
- ${this.optionSelected && this.options.length > 0
9066
- ? u`
9067
- ${`${this.optionSelected.innerText} selected`}
9068
- `
9069
- : undefined
9070
- };
9071
- </div>
9072
- <div id="slotHolder" aria-hidden="true">
9073
- <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
9074
- </div>
9075
- <${this.dropdownTag}
9076
- ?autoPlacement="${this.autoPlacement}"
9077
- ?disabled="${this.disabled}"
9078
- ?error="${this.validity !== undefined && this.validity !== 'valid'}"
9079
- ?matchWidth="${this.matchWidth}"
9080
- ?noFlip="${this.noFlip}"
9081
- ?onDark="${this.onDark}"
9082
- .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
9083
- .offset="${this.offset}"
9084
- .placement="${this.placement}"
9085
- chevron
9086
- fluid
9087
- for="selectMenu"
9088
- layout="${this.layout}"
9089
- part="dropdown"
9090
- shape="${this.shape}"
9091
- size="${this.size}">
9092
- <span slot="trigger" aria-haspopup="true" id="triggerFocus">
9093
- <span id="placeholder"
9094
- class="${e(placeholderClass)}"
9095
- ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
9096
- >
9097
- <slot name="placeholder"></slot>
9098
- </span>
9099
- <slot name="valueText" id="valueText"></slot>
9100
- </span>
9101
-
9102
- <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
9103
- <slot></slot>
9104
- </${this.bibtemplateTag}>
9105
- <slot name="label" slot="label"></slot>
9106
- ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
9107
- <p slot="helpText">
9108
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
9109
- ? u`
9110
- <span id="${this.uniqueId}" part="helpText">
9111
- <slot name="helpText"></slot>
9112
- </span>`
9113
- : u`
9114
- <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
9115
- ${this.errorMessage}
9116
- </span>`
9117
- }
9118
- </p>
9119
- </${this.dropdownTag}>
9120
- <div class="nativeSelectWrapper">
9121
- <select
9122
- tabindex="-1"
9123
- id="${`native-select-${this.id || this.uniqueId}`}"
9124
- name="${this.name || ''}"
9125
- ?disabled="${this.disabled}"
9126
- ?required="${this.required}"
9127
- aria-hidden="true"
9128
- autocomplete="${o(this.autocomplete)}"
9129
- @change="${this._handleNativeSelectChange}">
9130
- <option value="" ?selected="${!this.value}"></option>
9131
- ${this.options.map((option) => {
9132
- const optionValue = option.value || option.textContent;
9133
- return u`
9134
- <option
9135
- value="${optionValue}"
9136
- ?selected="${this.value === optionValue}">
9137
- ${option.textContent}
9138
- </option>
9139
- `;
9140
- })}
9141
- </select>
9142
- </div>
9143
- <!-- Help text and error message template -->
9144
- ${this.renderHtmlHelpText()}
9145
- </div>
9146
- `;
9147
- }
9148
9058
  }
9149
9059
 
9150
9060
  var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
package/components/select/demo/index.md CHANGED
@@ -56,86 +56,10 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
56
56
  <!-- AURO-GENERATED-CONTENT:END -->
57
57
  </div>
58
58
 
59
- ### Emphasized
59
+ ### Emphasized
60
+
61
+ Only supported for onDark usage.
60
62
 
61
- <div class="exampleWrapper">
62
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
63
- <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
64
- <div style="display: flex; flex-direction: row; gap: 10px;">
65
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
66
- <span slot="label">Select Example</span>
67
- <auro-menu nocheckmark>
68
- <auro-menuoption value="flights">
69
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
70
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
71
- </auro-menuoption>
72
- <auro-menuoption value="cars">
73
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
74
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
75
- </auro-menuoption>
76
- <auro-menuoption value="hotels">
77
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
78
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
79
- </auro-menuoption>
80
- <auro-menuoption value="packages">
81
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
82
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
83
- </auro-menuoption>
84
- <auro-menuoption value="cruises">
85
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
86
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
87
- </auro-menuoption>
88
- </auro-menu>
89
- </auro-select>
90
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
91
- <span slot="label">Select Example</span>
92
- <auro-menu nocheckmark>
93
- <auro-menuoption value="flights">
94
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
95
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
96
- </auro-menuoption>
97
- <auro-menuoption value="cars">
98
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
99
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
100
- </auro-menuoption>
101
- <auro-menuoption value="hotels">
102
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
103
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
104
- </auro-menuoption>
105
- <auro-menuoption value="packages">
106
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
107
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
108
- </auro-menuoption>
109
- <auro-menuoption value="cruises">
110
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
111
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
112
- </auro-menuoption>
113
- </auro-menu>
114
- </auro-select>
115
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
116
- <span slot="label">Select Example</span>
117
- <span slot="helpText">no displayValue in menuoptions</span>
118
- <auro-menu nocheckmark>
119
- <auro-menuoption value="flights">
120
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
121
- </auro-menuoption>
122
- <auro-menuoption value="cars">
123
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
124
- </auro-menuoption>
125
- <auro-menuoption value="hotels">
126
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
127
- </auro-menuoption>
128
- <auro-menuoption value="packages">
129
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
130
- </auro-menuoption>
131
- <auro-menuoption value="cruises">
132
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
133
- </auro-menuoption>
134
- </auro-menu>
135
- </auro-select>
136
- </div>
137
- <!-- AURO-GENERATED-CONTENT:END -->
138
- </div>
139
63
  <div class="exampleWrapper--ondark" aria-hidden>
140
64
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
141
65
  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
@@ -217,84 +141,8 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
217
141
 
218
142
  ### Snowflake
219
143
 
220
- <div class="exampleWrapper">
221
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
222
- <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
223
- <div style="display: flex; flex-direction: row; gap: 10px;">
224
- <auro-select placeholder="placeholder text" layout="snowflake" shape="snowflake" forceDisplayValue style="display:inline-block;">
225
- <span slot="label">Select Example</span>
226
- <auro-menu nocheckmark>
227
- <auro-menuoption value="flights">
228
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
229
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
230
- </auro-menuoption>
231
- <auro-menuoption value="cars">
232
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
233
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
234
- </auro-menuoption>
235
- <auro-menuoption value="hotels">
236
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
237
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
238
- </auro-menuoption>
239
- <auro-menuoption value="packages">
240
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
241
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
242
- </auro-menuoption>
243
- <auro-menuoption value="cruises">
244
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
245
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
246
- </auro-menuoption>
247
- </auro-menu>
248
- </auro-select>
249
- <auro-select layout="snowflake" shape="snowflake" value="flights" style="display:inline-block;">
250
- <span slot="label">Select Example</span>
251
- <auro-menu nocheckmark>
252
- <auro-menuoption value="flights">
253
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
254
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
255
- </auro-menuoption>
256
- <auro-menuoption value="cars">
257
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
258
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
259
- </auro-menuoption>
260
- <auro-menuoption value="hotels">
261
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
262
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
263
- </auro-menuoption>
264
- <auro-menuoption value="packages">
265
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
266
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
267
- </auro-menuoption>
268
- <auro-menuoption value="cruises">
269
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
270
- <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
271
- </auro-menuoption>
272
- </auro-menu>
273
- </auro-select>
274
- <auro-select layout="snowflake" shape="snowflake" placeholder="placeholder text" required style="display:inline-block;">
275
- <span slot="label">Select Example Placeholder</span>
276
- <span slot="helpText">no displayValue in menuoptions</span>
277
- <auro-menu nocheckmark>
278
- <auro-menuoption value="flights">
279
- <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
280
- </auro-menuoption>
281
- <auro-menuoption value="cars">
282
- <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
283
- </auro-menuoption>
284
- <auro-menuoption value="hotels">
285
- <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
286
- </auro-menuoption>
287
- <auro-menuoption value="packages">
288
- <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
289
- </auro-menuoption>
290
- <auro-menuoption value="cruises">
291
- <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
292
- </auro-menuoption>
293
- </auro-menu>
294
- </auro-select>
295
- </div>
296
- <!-- AURO-GENERATED-CONTENT:END -->
297
- </div>
144
+ Only supported for onDark usage.
145
+
298
146
  <div class="exampleWrapper--ondark" aria-hidden>
299
147
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
300
148
  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
package/components/select/demo/index.min.js CHANGED
@@ -4177,7 +4177,7 @@ var colorCss$1$2 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4177
4177
 
4178
4178
  var classicColorCss = i$5``;
4179
4179
 
4180
- var classicLayoutCss = i$5`: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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4180
+ var classicLayoutCss = i$5`: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)}:host([matchwidth]) #bibSizer{width:100%}`;
4181
4181
 
4182
4182
  var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4183
4183
 
@@ -8604,6 +8604,11 @@ class AuroSelect extends AuroElement$4 {
8604
8604
  }
8605
8605
  }
8606
8606
 
8607
+ /**
8608
+ * Returns HTML for the hidden a11y screen reader content.
8609
+ * @private
8610
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
8611
+ */
8607
8612
  renderAriaHtml() {
8608
8613
  return u`
8609
8614
  <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8624,6 +8629,11 @@ class AuroSelect extends AuroElement$4 {
8624
8629
  `;
8625
8630
  }
8626
8631
 
8632
+ /**
8633
+ * Returns HTML for the hidden HTML5 select.
8634
+ * @private
8635
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
8636
+ */
8627
8637
  renderNativeSelect() {
8628
8638
  return u`
8629
8639
  <div class="nativeSelectWrapper util_displayHidden">
@@ -8953,106 +8963,6 @@ class AuroSelect extends AuroElement$4 {
8953
8963
 
8954
8964
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
8955
8965
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
8956
-
8957
- // function that renders the HTML and CSS into the scope of the component
8958
- renderBACKUP() {
8959
- const placeholderClass = {
8960
- hidden: this.value,
8961
- };
8962
-
8963
- return u`
8964
- <div class="outerWrapper">
8965
- <div aria-live="polite" class="util_displayHiddenVisually">
8966
- ${this.optionActive && this.options.length > 0
8967
- ? u`
8968
- ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
8969
- `
8970
- : undefined
8971
- };
8972
-
8973
- ${this.optionSelected && this.options.length > 0
8974
- ? u`
8975
- ${`${this.optionSelected.innerText} selected`}
8976
- `
8977
- : undefined
8978
- };
8979
- </div>
8980
- <div id="slotHolder" aria-hidden="true">
8981
- <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
8982
- </div>
8983
- <${this.dropdownTag}
8984
- ?autoPlacement="${this.autoPlacement}"
8985
- ?disabled="${this.disabled}"
8986
- ?error="${this.validity !== undefined && this.validity !== 'valid'}"
8987
- ?matchWidth="${this.matchWidth}"
8988
- ?noFlip="${this.noFlip}"
8989
- ?onDark="${this.onDark}"
8990
- .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
8991
- .offset="${this.offset}"
8992
- .placement="${this.placement}"
8993
- chevron
8994
- fluid
8995
- for="selectMenu"
8996
- layout="${this.layout}"
8997
- part="dropdown"
8998
- shape="${this.shape}"
8999
- size="${this.size}">
9000
- <span slot="trigger" aria-haspopup="true" id="triggerFocus">
9001
- <span id="placeholder"
9002
- class="${e(placeholderClass)}"
9003
- ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
9004
- >
9005
- <slot name="placeholder"></slot>
9006
- </span>
9007
- <slot name="valueText" id="valueText"></slot>
9008
- </span>
9009
-
9010
- <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
9011
- <slot></slot>
9012
- </${this.bibtemplateTag}>
9013
- <slot name="label" slot="label"></slot>
9014
- ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
9015
- <p slot="helpText">
9016
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
9017
- ? u`
9018
- <span id="${this.uniqueId}" part="helpText">
9019
- <slot name="helpText"></slot>
9020
- </span>`
9021
- : u`
9022
- <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
9023
- ${this.errorMessage}
9024
- </span>`
9025
- }
9026
- </p>
9027
- </${this.dropdownTag}>
9028
- <div class="nativeSelectWrapper">
9029
- <select
9030
- tabindex="-1"
9031
- id="${`native-select-${this.id || this.uniqueId}`}"
9032
- name="${this.name || ''}"
9033
- ?disabled="${this.disabled}"
9034
- ?required="${this.required}"
9035
- aria-hidden="true"
9036
- autocomplete="${o(this.autocomplete)}"
9037
- @change="${this._handleNativeSelectChange}">
9038
- <option value="" ?selected="${!this.value}"></option>
9039
- ${this.options.map((option) => {
9040
- const optionValue = option.value || option.textContent;
9041
- return u`
9042
- <option
9043
- value="${optionValue}"
9044
- ?selected="${this.value === optionValue}">
9045
- ${option.textContent}
9046
- </option>
9047
- `;
9048
- })}
9049
- </select>
9050
- </div>
9051
- <!-- Help text and error message template -->
9052
- ${this.renderHtmlHelpText()}
9053
- </div>
9054
- `;
9055
- }
9056
8966
  }
9057
8967
 
9058
8968
  var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
package/components/select/dist/auro-select.d.ts CHANGED
@@ -421,8 +421,18 @@ export class AuroSelect extends AuroElement {
421
421
  * @private
422
422
  */
423
423
  private _updateNativeSelect;
424
- renderAriaHtml(): import("lit-html").TemplateResult;
425
- renderNativeSelect(): import("lit-html").TemplateResult;
424
+ /**
425
+ * Returns HTML for the hidden a11y screen reader content.
426
+ * @private
427
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
428
+ */
429
+ private renderAriaHtml;
430
+ /**
431
+ * Returns HTML for the hidden HTML5 select.
432
+ * @private
433
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
434
+ */
435
+ private renderNativeSelect;
426
436
  /**
427
437
  * Returns HTML for the help text and error message.
428
438
  * @private
@@ -454,6 +464,5 @@ export class AuroSelect extends AuroElement {
454
464
  * @returns {void}
455
465
  */
456
466
  private renderLayout;
457
- renderBACKUP(): import("lit-html").TemplateResult;
458
467
  }
459
468
  import { AuroElement } from '../../layoutElement/src/auroElement.js';
package/components/select/dist/index.js CHANGED
@@ -4131,7 +4131,7 @@ var colorCss$1$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4131
4131
 
4132
4132
  var classicColorCss = css``;
4133
4133
 
4134
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4134
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
4135
4135
 
4136
4136
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4137
4137
 
@@ -8558,6 +8558,11 @@ class AuroSelect extends AuroElement$3 {
8558
8558
  }
8559
8559
  }
8560
8560
 
8561
+ /**
8562
+ * Returns HTML for the hidden a11y screen reader content.
8563
+ * @private
8564
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
8565
+ */
8561
8566
  renderAriaHtml() {
8562
8567
  return html`
8563
8568
  <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8578,6 +8583,11 @@ class AuroSelect extends AuroElement$3 {
8578
8583
  `;
8579
8584
  }
8580
8585
 
8586
+ /**
8587
+ * Returns HTML for the hidden HTML5 select.
8588
+ * @private
8589
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
8590
+ */
8581
8591
  renderNativeSelect() {
8582
8592
  return html`
8583
8593
  <div class="nativeSelectWrapper util_displayHidden">
@@ -8907,106 +8917,6 @@ class AuroSelect extends AuroElement$3 {
8907
8917
 
8908
8918
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
8909
8919
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
8910
-
8911
- // function that renders the HTML and CSS into the scope of the component
8912
- renderBACKUP() {
8913
- const placeholderClass = {
8914
- hidden: this.value,
8915
- };
8916
-
8917
- return html`
8918
- <div class="outerWrapper">
8919
- <div aria-live="polite" class="util_displayHiddenVisually">
8920
- ${this.optionActive && this.options.length > 0
8921
- ? html`
8922
- ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
8923
- `
8924
- : undefined
8925
- };
8926
-
8927
- ${this.optionSelected && this.options.length > 0
8928
- ? html`
8929
- ${`${this.optionSelected.innerText} selected`}
8930
- `
8931
- : undefined
8932
- };
8933
- </div>
8934
- <div id="slotHolder" aria-hidden="true">
8935
- <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
8936
- </div>
8937
- <${this.dropdownTag}
8938
- ?autoPlacement="${this.autoPlacement}"
8939
- ?disabled="${this.disabled}"
8940
- ?error="${this.validity !== undefined && this.validity !== 'valid'}"
8941
- ?matchWidth="${this.matchWidth}"
8942
- ?noFlip="${this.noFlip}"
8943
- ?onDark="${this.onDark}"
8944
- .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
8945
- .offset="${this.offset}"
8946
- .placement="${this.placement}"
8947
- chevron
8948
- fluid
8949
- for="selectMenu"
8950
- layout="${this.layout}"
8951
- part="dropdown"
8952
- shape="${this.shape}"
8953
- size="${this.size}">
8954
- <span slot="trigger" aria-haspopup="true" id="triggerFocus">
8955
- <span id="placeholder"
8956
- class="${classMap(placeholderClass)}"
8957
- ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
8958
- >
8959
- <slot name="placeholder"></slot>
8960
- </span>
8961
- <slot name="valueText" id="valueText"></slot>
8962
- </span>
8963
-
8964
- <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
8965
- <slot></slot>
8966
- </${this.bibtemplateTag}>
8967
- <slot name="label" slot="label"></slot>
8968
- ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
8969
- <p slot="helpText">
8970
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
8971
- ? html`
8972
- <span id="${this.uniqueId}" part="helpText">
8973
- <slot name="helpText"></slot>
8974
- </span>`
8975
- : html`
8976
- <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
8977
- ${this.errorMessage}
8978
- </span>`
8979
- }
8980
- </p>
8981
- </${this.dropdownTag}>
8982
- <div class="nativeSelectWrapper">
8983
- <select
8984
- tabindex="-1"
8985
- id="${`native-select-${this.id || this.uniqueId}`}"
8986
- name="${this.name || ''}"
8987
- ?disabled="${this.disabled}"
8988
- ?required="${this.required}"
8989
- aria-hidden="true"
8990
- autocomplete="${ifDefined$1(this.autocomplete)}"
8991
- @change="${this._handleNativeSelectChange}">
8992
- <option value="" ?selected="${!this.value}"></option>
8993
- ${this.options.map((option) => {
8994
- const optionValue = option.value || option.textContent;
8995
- return html`
8996
- <option
8997
- value="${optionValue}"
8998
- ?selected="${this.value === optionValue}">
8999
- ${option.textContent}
9000
- </option>
9001
- `;
9002
- })}
9003
- </select>
9004
- </div>
9005
- <!-- Help text and error message template -->
9006
- ${this.renderHtmlHelpText()}
9007
- </div>
9008
- `;
9009
- }
9010
8920
  }
9011
8921
 
9012
8922
  export { AuroSelect };
package/components/select/dist/registered.js CHANGED
@@ -4131,7 +4131,7 @@ var colorCss$1$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro
4131
4131
 
4132
4132
  var classicColorCss = css``;
4133
4133
 
4134
- 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)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
4134
+ 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)}:host([matchwidth]) #bibSizer{width:100%}`;
4135
4135
 
4136
4136
  var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.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([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)}`;
4137
4137
 
@@ -8558,6 +8558,11 @@ class AuroSelect extends AuroElement$3 {
8558
8558
  }
8559
8559
  }
8560
8560
 
8561
+ /**
8562
+ * Returns HTML for the hidden a11y screen reader content.
8563
+ * @private
8564
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
8565
+ */
8561
8566
  renderAriaHtml() {
8562
8567
  return html`
8563
8568
  <div aria-live="polite" class="util_displayHiddenVisually">
@@ -8578,6 +8583,11 @@ class AuroSelect extends AuroElement$3 {
8578
8583
  `;
8579
8584
  }
8580
8585
 
8586
+ /**
8587
+ * Returns HTML for the hidden HTML5 select.
8588
+ * @private
8589
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
8590
+ */
8581
8591
  renderNativeSelect() {
8582
8592
  return html`
8583
8593
  <div class="nativeSelectWrapper util_displayHidden">
@@ -8907,106 +8917,6 @@ class AuroSelect extends AuroElement$3 {
8907
8917
 
8908
8918
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
8909
8919
  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
8910
-
8911
- // function that renders the HTML and CSS into the scope of the component
8912
- renderBACKUP() {
8913
- const placeholderClass = {
8914
- hidden: this.value,
8915
- };
8916
-
8917
- return html`
8918
- <div class="outerWrapper">
8919
- <div aria-live="polite" class="util_displayHiddenVisually">
8920
- ${this.optionActive && this.options.length > 0
8921
- ? html`
8922
- ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
8923
- `
8924
- : undefined
8925
- };
8926
-
8927
- ${this.optionSelected && this.options.length > 0
8928
- ? html`
8929
- ${`${this.optionSelected.innerText} selected`}
8930
- `
8931
- : undefined
8932
- };
8933
- </div>
8934
- <div id="slotHolder" aria-hidden="true">
8935
- <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
8936
- </div>
8937
- <${this.dropdownTag}
8938
- ?autoPlacement="${this.autoPlacement}"
8939
- ?disabled="${this.disabled}"
8940
- ?error="${this.validity !== undefined && this.validity !== 'valid'}"
8941
- ?matchWidth="${this.matchWidth}"
8942
- ?noFlip="${this.noFlip}"
8943
- ?onDark="${this.onDark}"
8944
- .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
8945
- .offset="${this.offset}"
8946
- .placement="${this.placement}"
8947
- chevron
8948
- fluid
8949
- for="selectMenu"
8950
- layout="${this.layout}"
8951
- part="dropdown"
8952
- shape="${this.shape}"
8953
- size="${this.size}">
8954
- <span slot="trigger" aria-haspopup="true" id="triggerFocus">
8955
- <span id="placeholder"
8956
- class="${classMap(placeholderClass)}"
8957
- ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
8958
- >
8959
- <slot name="placeholder"></slot>
8960
- </span>
8961
- <slot name="valueText" id="valueText"></slot>
8962
- </span>
8963
-
8964
- <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
8965
- <slot></slot>
8966
- </${this.bibtemplateTag}>
8967
- <slot name="label" slot="label"></slot>
8968
- ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
8969
- <p slot="helpText">
8970
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
8971
- ? html`
8972
- <span id="${this.uniqueId}" part="helpText">
8973
- <slot name="helpText"></slot>
8974
- </span>`
8975
- : html`
8976
- <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
8977
- ${this.errorMessage}
8978
- </span>`
8979
- }
8980
- </p>
8981
- </${this.dropdownTag}>
8982
- <div class="nativeSelectWrapper">
8983
- <select
8984
- tabindex="-1"
8985
- id="${`native-select-${this.id || this.uniqueId}`}"
8986
- name="${this.name || ''}"
8987
- ?disabled="${this.disabled}"
8988
- ?required="${this.required}"
8989
- aria-hidden="true"
8990
- autocomplete="${ifDefined$1(this.autocomplete)}"
8991
- @change="${this._handleNativeSelectChange}">
8992
- <option value="" ?selected="${!this.value}"></option>
8993
- ${this.options.map((option) => {
8994
- const optionValue = option.value || option.textContent;
8995
- return html`
8996
- <option
8997
- value="${optionValue}"
8998
- ?selected="${this.value === optionValue}">
8999
- ${option.textContent}
9000
- </option>
9001
- `;
9002
- })}
9003
- </select>
9004
- </div>
9005
- <!-- Help text and error message template -->
9006
- ${this.renderHtmlHelpText()}
9007
- </div>
9008
- `;
9009
- }
9010
8920
  }
9011
8921
 
9012
8922
  AuroSelect.register();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr624.42",
3
+ "version": "0.0.0-pr624.44",
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": {