@descope/web-components-ui 1.0.239 → 1.0.240

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 (34) hide show
  1. package/dist/cjs/index.cjs.js +1418 -894
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1401 -877
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1438.js +374 -0
  6. package/dist/umd/1438.js.LICENSE.txt +5 -0
  7. package/dist/umd/1940.js +303 -0
  8. package/dist/umd/{849.js → 4595.js} +5 -5
  9. package/dist/umd/63.js +2 -0
  10. package/dist/umd/63.js.LICENSE.txt +5 -0
  11. package/dist/umd/6687.js +9 -0
  12. package/dist/umd/6687.js.LICENSE.txt +5 -0
  13. package/dist/umd/7583.js +113 -0
  14. package/dist/umd/{5977.js.LICENSE.txt → 7583.js.LICENSE.txt} +0 -6
  15. package/dist/umd/8866.js +183 -0
  16. package/dist/umd/8866.js.LICENSE.txt +11 -0
  17. package/dist/umd/9558.js +1 -1
  18. package/dist/umd/descope-combo-box-index-js.js +1 -1
  19. package/dist/umd/descope-grid-index-js.js +1 -1
  20. package/dist/umd/descope-modal-index-js.js +1 -1
  21. package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -0
  22. package/dist/umd/index.js +1 -1
  23. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  24. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  25. package/package.json +2 -1
  26. package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +488 -0
  27. package/src/components/descope-multi-select-combo-box/index.js +6 -0
  28. package/src/theme/components/index.js +2 -0
  29. package/src/theme/components/inputWrapper.js +4 -4
  30. package/src/theme/components/multiSelectComboBox.js +57 -0
  31. package/dist/umd/1932.js +0 -310
  32. package/dist/umd/5977.js +0 -294
  33. /package/dist/umd/{1932.js.LICENSE.txt → 1940.js.LICENSE.txt} +0 -0
  34. /package/dist/umd/{849.js.LICENSE.txt → 4595.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -1239,7 +1239,7 @@ const clickableMixin = (superclass) =>
1239
1239
  }
1240
1240
  };
1241
1241
 
1242
- const componentName$D = getComponentName('button');
1242
+ const componentName$E = getComponentName('button');
1243
1243
 
1244
1244
  const resetStyles = `
1245
1245
  :host {
@@ -1277,7 +1277,7 @@ const iconStyles = `
1277
1277
 
1278
1278
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1279
1279
 
1280
- const { host: host$g, label: label$9 } = {
1280
+ const { host: host$h, label: label$a } = {
1281
1281
  host: { selector: () => ':host' },
1282
1282
  label: { selector: '::part(label)' },
1283
1283
  };
@@ -1289,7 +1289,7 @@ const ButtonClass = compose(
1289
1289
  mappings: {
1290
1290
  hostWidth: { property: 'width' },
1291
1291
  hostHeight: { property: 'height' },
1292
- hostDirection: { ...host$g, property: 'direction' },
1292
+ hostDirection: { ...host$h, property: 'direction' },
1293
1293
  fontSize: {},
1294
1294
  fontFamily: {},
1295
1295
 
@@ -1309,8 +1309,8 @@ const ButtonClass = compose(
1309
1309
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
1310
1310
 
1311
1311
  labelTextColor: { property: 'color' },
1312
- labelTextDecoration: { ...label$9, property: 'text-decoration' },
1313
- labelSpacing: { ...label$9, property: 'gap' },
1312
+ labelTextDecoration: { ...label$a, property: 'text-decoration' },
1313
+ labelSpacing: { ...label$a, property: 'gap' },
1314
1314
  },
1315
1315
  }),
1316
1316
  clickableMixin,
@@ -1340,7 +1340,7 @@ const ButtonClass = compose(
1340
1340
  }
1341
1341
  `,
1342
1342
  excludeAttrsSync: ['tabindex'],
1343
- componentName: componentName$D,
1343
+ componentName: componentName$E,
1344
1344
  })
1345
1345
  );
1346
1346
 
@@ -1377,7 +1377,7 @@ loadingIndicatorStyles = `
1377
1377
  }
1378
1378
  `;
1379
1379
 
1380
- customElements.define(componentName$D, ButtonClass);
1380
+ customElements.define(componentName$E, ButtonClass);
1381
1381
 
1382
1382
  const createBaseInputClass = (...args) =>
1383
1383
  compose(
@@ -1387,11 +1387,11 @@ const createBaseInputClass = (...args) =>
1387
1387
  inputEventsDispatchingMixin
1388
1388
  )(createBaseClass(...args));
1389
1389
 
1390
- const componentName$C = getComponentName('boolean-field-internal');
1390
+ const componentName$D = getComponentName('boolean-field-internal');
1391
1391
 
1392
1392
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1393
1393
 
1394
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
1394
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
1395
1395
 
1396
1396
  class BooleanInputInternal extends BaseInputClass$5 {
1397
1397
  static get observedAttributes() {
@@ -1467,14 +1467,14 @@ const booleanFieldMixin = (superclass) =>
1467
1467
 
1468
1468
  const template = document.createElement('template');
1469
1469
  template.innerHTML = `
1470
- <${componentName$C}
1470
+ <${componentName$D}
1471
1471
  tabindex="-1"
1472
1472
  slot="input"
1473
- ></${componentName$C}>
1473
+ ></${componentName$D}>
1474
1474
  `;
1475
1475
 
1476
1476
  this.baseElement.appendChild(template.content.cloneNode(true));
1477
- this.inputElement = this.shadowRoot.querySelector(componentName$C);
1477
+ this.inputElement = this.shadowRoot.querySelector(componentName$D);
1478
1478
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1479
1479
 
1480
1480
  forwardAttrs(this, this.inputElement, {
@@ -1673,17 +1673,17 @@ descope-boolean-field-internal {
1673
1673
  }
1674
1674
  `;
1675
1675
 
1676
- const componentName$B = getComponentName('checkbox');
1676
+ const componentName$C = getComponentName('checkbox');
1677
1677
 
1678
1678
  const {
1679
- host: host$f,
1679
+ host: host$g,
1680
1680
  component: component$1,
1681
1681
  checkboxElement,
1682
1682
  checkboxSurface,
1683
1683
  checkboxLabel: checkboxLabel$1,
1684
- requiredIndicator: requiredIndicator$a,
1685
- helperText: helperText$8,
1686
- errorMessage: errorMessage$a,
1684
+ requiredIndicator: requiredIndicator$b,
1685
+ helperText: helperText$9,
1686
+ errorMessage: errorMessage$b,
1687
1687
  } = {
1688
1688
  host: { selector: () => ':host' },
1689
1689
  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1698,19 +1698,19 @@ const {
1698
1698
  const CheckboxClass = compose(
1699
1699
  createStyleMixin({
1700
1700
  mappings: {
1701
- hostWidth: { ...host$f, property: 'width' },
1702
- hostDirection: { ...host$f, property: 'direction' },
1701
+ hostWidth: { ...host$g, property: 'width' },
1702
+ hostDirection: { ...host$g, property: 'direction' },
1703
1703
 
1704
- fontSize: [host$f, checkboxElement, checkboxLabel$1],
1705
- fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
1704
+ fontSize: [host$g, checkboxElement, checkboxLabel$1],
1705
+ fontFamily: [checkboxLabel$1, helperText$9, errorMessage$b],
1706
1706
 
1707
1707
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
1708
1708
  labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
1709
1709
  labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
1710
1710
  labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
1711
- labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1711
+ labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
1712
1712
 
1713
- errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1713
+ errorMessageTextColor: { ...errorMessage$b, property: 'color' },
1714
1714
 
1715
1715
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
1716
1716
  inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -1779,25 +1779,25 @@ const CheckboxClass = compose(
1779
1779
  }
1780
1780
  `,
1781
1781
  excludeAttrsSync: ['label', 'tabindex'],
1782
- componentName: componentName$B,
1782
+ componentName: componentName$C,
1783
1783
  })
1784
1784
  );
1785
1785
 
1786
- customElements.define(componentName$C, BooleanInputInternal);
1786
+ customElements.define(componentName$D, BooleanInputInternal);
1787
1787
 
1788
- customElements.define(componentName$B, CheckboxClass);
1788
+ customElements.define(componentName$C, CheckboxClass);
1789
1789
 
1790
- const componentName$A = getComponentName('switch-toggle');
1790
+ const componentName$B = getComponentName('switch-toggle');
1791
1791
 
1792
1792
  const {
1793
- host: host$e,
1793
+ host: host$f,
1794
1794
  component,
1795
1795
  checkboxElement: track,
1796
1796
  checkboxSurface: knob,
1797
1797
  checkboxLabel,
1798
- requiredIndicator: requiredIndicator$9,
1799
- helperText: helperText$7,
1800
- errorMessage: errorMessage$9,
1798
+ requiredIndicator: requiredIndicator$a,
1799
+ helperText: helperText$8,
1800
+ errorMessage: errorMessage$a,
1801
1801
  } = {
1802
1802
  host: { selector: () => ':host' },
1803
1803
  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1812,19 +1812,19 @@ const {
1812
1812
  const SwitchToggleClass = compose(
1813
1813
  createStyleMixin({
1814
1814
  mappings: {
1815
- hostWidth: { ...host$e, property: 'width' },
1816
- hostDirection: { ...host$e, property: 'direction' },
1815
+ hostWidth: { ...host$f, property: 'width' },
1816
+ hostDirection: { ...host$f, property: 'direction' },
1817
1817
 
1818
1818
  fontSize: [component, checkboxLabel, checkboxLabel],
1819
- fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
1819
+ fontFamily: [checkboxLabel, helperText$8, errorMessage$a],
1820
1820
 
1821
1821
  labelTextColor: { ...checkboxLabel, property: 'color' },
1822
1822
  labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
1823
1823
  labelLineHeight: { ...checkboxLabel, property: 'line-height' },
1824
1824
  labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
1825
- labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1825
+ labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1826
1826
 
1827
- errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1827
+ errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1828
1828
 
1829
1829
  trackBorderWidth: { ...track, property: 'border-width' },
1830
1830
  trackBorderStyle: { ...track, property: 'border-style' },
@@ -1919,17 +1919,17 @@ const SwitchToggleClass = compose(
1919
1919
  }
1920
1920
  `,
1921
1921
  excludeAttrsSync: ['label', 'tabindex'],
1922
- componentName: componentName$A,
1922
+ componentName: componentName$B,
1923
1923
  })
1924
1924
  );
1925
1925
 
1926
- customElements.define(componentName$A, SwitchToggleClass);
1926
+ customElements.define(componentName$B, SwitchToggleClass);
1927
1927
 
1928
- const componentName$z = getComponentName('loader-linear');
1928
+ const componentName$A = getComponentName('loader-linear');
1929
1929
 
1930
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
1930
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
1931
1931
  static get componentName() {
1932
- return componentName$z;
1932
+ return componentName$A;
1933
1933
  }
1934
1934
 
1935
1935
  constructor() {
@@ -1965,18 +1965,18 @@ const selectors$2 = {
1965
1965
  host: { selector: () => ':host' },
1966
1966
  };
1967
1967
 
1968
- const { after: after$1, host: host$d } = selectors$2;
1968
+ const { after: after$1, host: host$e } = selectors$2;
1969
1969
 
1970
1970
  const LoaderLinearClass = compose(
1971
1971
  createStyleMixin({
1972
1972
  mappings: {
1973
1973
  hostDisplay: {},
1974
- hostWidth: { ...host$d, property: 'width' },
1974
+ hostWidth: { ...host$e, property: 'width' },
1975
1975
  barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
1976
1976
  barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
1977
1977
  verticalPadding: [
1978
- { ...host$d, property: 'padding-top' },
1979
- { ...host$d, property: 'padding-bottom' },
1978
+ { ...host$e, property: 'padding-top' },
1979
+ { ...host$e, property: 'padding-bottom' },
1980
1980
  ],
1981
1981
  barBackgroundColor: { property: 'background-color' },
1982
1982
  barColor: { ...after$1, property: 'background-color' },
@@ -1990,11 +1990,11 @@ const LoaderLinearClass = compose(
1990
1990
  componentNameValidationMixin
1991
1991
  )(RawLoaderLinear);
1992
1992
 
1993
- customElements.define(componentName$z, LoaderLinearClass);
1993
+ customElements.define(componentName$A, LoaderLinearClass);
1994
1994
 
1995
- const componentName$y = getComponentName('loader-radial');
1995
+ const componentName$z = getComponentName('loader-radial');
1996
1996
 
1997
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
1997
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
1998
1998
  constructor() {
1999
1999
  super();
2000
2000
 
@@ -2038,11 +2038,11 @@ const LoaderRadialClass = compose(
2038
2038
  componentNameValidationMixin
2039
2039
  )(RawLoaderRadial);
2040
2040
 
2041
- customElements.define(componentName$y, LoaderRadialClass);
2041
+ customElements.define(componentName$z, LoaderRadialClass);
2042
2042
 
2043
- const componentName$x = getComponentName('container');
2043
+ const componentName$y = getComponentName('container');
2044
2044
 
2045
- class RawContainer extends createBaseClass({ componentName: componentName$x, baseSelector: 'slot' }) {
2045
+ class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
2046
2046
  constructor() {
2047
2047
  super();
2048
2048
 
@@ -2094,13 +2094,13 @@ const ContainerClass = compose(
2094
2094
  componentNameValidationMixin
2095
2095
  )(RawContainer);
2096
2096
 
2097
- customElements.define(componentName$x, ContainerClass);
2097
+ customElements.define(componentName$y, ContainerClass);
2098
2098
 
2099
2099
  // eslint-disable-next-line max-classes-per-file
2100
2100
 
2101
- const componentName$w = getComponentName('text');
2101
+ const componentName$x = getComponentName('text');
2102
2102
 
2103
- class RawText extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
2103
+ class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
2104
2104
  constructor() {
2105
2105
  super();
2106
2106
 
@@ -2160,8 +2160,8 @@ const TextClass = compose(
2160
2160
  customTextMixin
2161
2161
  )(RawText);
2162
2162
 
2163
- const componentName$v = getComponentName('divider');
2164
- class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
2163
+ const componentName$w = getComponentName('divider');
2164
+ class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
2165
2165
  constructor() {
2166
2166
  super();
2167
2167
 
@@ -2207,7 +2207,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$v, baseS
2207
2207
  }
2208
2208
 
2209
2209
  const textVars$3 = TextClass.cssVarList;
2210
- const { host: host$c, before, after, text: text$3 } = {
2210
+ const { host: host$d, before, after, text: text$3 } = {
2211
2211
  host: { selector: () => ':host' },
2212
2212
  before: { selector: '::before' },
2213
2213
  after: { selector: '::after' },
@@ -2217,8 +2217,8 @@ const { host: host$c, before, after, text: text$3 } = {
2217
2217
  const DividerClass = compose(
2218
2218
  createStyleMixin({
2219
2219
  mappings: {
2220
- hostWidth: { ...host$c, property: 'width' },
2221
- hostPadding: { ...host$c, property: 'padding' },
2220
+ hostWidth: { ...host$d, property: 'width' },
2221
+ hostPadding: { ...host$d, property: 'padding' },
2222
2222
  hostDirection: { ...text$3, property: 'direction' },
2223
2223
 
2224
2224
  minHeight: {},
@@ -2260,11 +2260,11 @@ const DividerClass = compose(
2260
2260
  componentNameValidationMixin
2261
2261
  )(RawDivider);
2262
2262
 
2263
- customElements.define(componentName$w, TextClass);
2263
+ customElements.define(componentName$x, TextClass);
2264
2264
 
2265
- customElements.define(componentName$v, DividerClass);
2265
+ customElements.define(componentName$w, DividerClass);
2266
2266
 
2267
- const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
2267
+ const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
2268
2268
  {
2269
2269
  host: { selector: () => ':host' },
2270
2270
  label: { selector: '::part(label)' },
@@ -2278,48 +2278,48 @@ const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndica
2278
2278
 
2279
2279
  var textFieldMappings = {
2280
2280
  // we apply font-size also on the host so we can set its width with em
2281
- fontSize: [{}, host$b],
2282
- fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
2281
+ fontSize: [{}, host$c],
2282
+ fontFamily: [label$9, inputField$6, helperText$7, errorMessage$9],
2283
2283
 
2284
- hostWidth: { ...host$b, property: 'width' },
2285
- hostMinWidth: { ...host$b, property: 'min-width' },
2286
- hostDirection: { ...host$b, property: 'direction' },
2284
+ hostWidth: { ...host$c, property: 'width' },
2285
+ hostMinWidth: { ...host$c, property: 'min-width' },
2286
+ hostDirection: { ...host$c, property: 'direction' },
2287
2287
 
2288
- inputBackgroundColor: { ...inputField$5, property: 'background-color' },
2288
+ inputBackgroundColor: { ...inputField$6, property: 'background-color' },
2289
2289
 
2290
2290
  labelTextColor: [
2291
- { ...label$8, property: 'color' },
2292
- { ...requiredIndicator$8, property: 'color' },
2291
+ { ...label$9, property: 'color' },
2292
+ { ...requiredIndicator$9, property: 'color' },
2293
2293
  ],
2294
- errorMessageTextColor: { ...errorMessage$8, property: 'color' },
2294
+ errorMessageTextColor: { ...errorMessage$9, property: 'color' },
2295
2295
 
2296
- inputValueTextColor: { ...inputField$5, property: 'color' },
2296
+ inputValueTextColor: { ...inputField$6, property: 'color' },
2297
2297
  inputCaretTextColor: { ...input, property: 'color' },
2298
2298
 
2299
- labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2299
+ labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
2300
2300
 
2301
- inputBorderColor: { ...inputField$5, property: 'border-color' },
2302
- inputBorderWidth: { ...inputField$5, property: 'border-width' },
2303
- inputBorderStyle: { ...inputField$5, property: 'border-style' },
2304
- inputBorderRadius: { ...inputField$5, property: 'border-radius' },
2301
+ inputBorderColor: { ...inputField$6, property: 'border-color' },
2302
+ inputBorderWidth: { ...inputField$6, property: 'border-width' },
2303
+ inputBorderStyle: { ...inputField$6, property: 'border-style' },
2304
+ inputBorderRadius: { ...inputField$6, property: 'border-radius' },
2305
2305
 
2306
- inputHeight: { ...inputField$5, property: 'height' },
2306
+ inputHeight: { ...inputField$6, property: 'height' },
2307
2307
  inputHorizontalPadding: [
2308
2308
  { ...input, property: 'padding-left' },
2309
2309
  { ...input, property: 'padding-right' },
2310
2310
  ],
2311
2311
 
2312
- inputOutlineColor: { ...inputField$5, property: 'outline-color' },
2313
- inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
2314
- inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
2315
- inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
2312
+ inputOutlineColor: { ...inputField$6, property: 'outline-color' },
2313
+ inputOutlineStyle: { ...inputField$6, property: 'outline-style' },
2314
+ inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
2315
+ inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
2316
2316
 
2317
2317
  inputTextAlign: { ...input, property: 'text-align' },
2318
2318
 
2319
- inputPlaceholderColor: { ...placeholder$2, property: 'color' },
2319
+ inputPlaceholderColor: { ...placeholder$3, property: 'color' },
2320
2320
  };
2321
2321
 
2322
- const componentName$u = getComponentName('email-field');
2322
+ const componentName$v = getComponentName('email-field');
2323
2323
 
2324
2324
  const customMixin$7 = (superclass) =>
2325
2325
  class EmailFieldMixinClass extends superclass {
@@ -2354,15 +2354,15 @@ const EmailFieldClass = compose(
2354
2354
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2355
2355
  `,
2356
2356
  excludeAttrsSync: ['tabindex'],
2357
- componentName: componentName$u,
2357
+ componentName: componentName$v,
2358
2358
  })
2359
2359
  );
2360
2360
 
2361
- customElements.define(componentName$u, EmailFieldClass);
2361
+ customElements.define(componentName$v, EmailFieldClass);
2362
2362
 
2363
- const componentName$t = getComponentName('link');
2363
+ const componentName$u = getComponentName('link');
2364
2364
 
2365
- class RawLink extends createBaseClass({ componentName: componentName$t, baseSelector: ':host a' }) {
2365
+ class RawLink extends createBaseClass({ componentName: componentName$u, baseSelector: ':host a' }) {
2366
2366
  constructor() {
2367
2367
  super();
2368
2368
 
@@ -2408,12 +2408,12 @@ const selectors$1 = {
2408
2408
  text: { selector: () => TextClass.componentName },
2409
2409
  };
2410
2410
 
2411
- const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors$1;
2411
+ const { anchor, text: text$2, host: host$b, wrapper: wrapper$1 } = selectors$1;
2412
2412
 
2413
2413
  const LinkClass = compose(
2414
2414
  createStyleMixin({
2415
2415
  mappings: {
2416
- hostWidth: { ...host$a, property: 'width' },
2416
+ hostWidth: { ...host$b, property: 'width' },
2417
2417
  hostDirection: { ...text$2, property: 'direction' },
2418
2418
  textAlign: wrapper$1,
2419
2419
  textColor: [
@@ -2427,7 +2427,7 @@ const LinkClass = compose(
2427
2427
  componentNameValidationMixin
2428
2428
  )(RawLink);
2429
2429
 
2430
- customElements.define(componentName$t, LinkClass);
2430
+ customElements.define(componentName$u, LinkClass);
2431
2431
 
2432
2432
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2433
2433
  let style;
@@ -2479,27 +2479,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2479
2479
  return CssVarImageClass;
2480
2480
  };
2481
2481
 
2482
- const componentName$s = getComponentName('logo');
2482
+ const componentName$t = getComponentName('logo');
2483
2483
 
2484
2484
  const LogoClass = createCssVarImageClass({
2485
- componentName: componentName$s,
2485
+ componentName: componentName$t,
2486
2486
  varName: 'url',
2487
2487
  fallbackVarName: 'fallbackUrl',
2488
2488
  });
2489
2489
 
2490
- customElements.define(componentName$s, LogoClass);
2490
+ customElements.define(componentName$t, LogoClass);
2491
2491
 
2492
- const componentName$r = getComponentName('totp-image');
2492
+ const componentName$s = getComponentName('totp-image');
2493
2493
 
2494
2494
  const TotpImageClass = createCssVarImageClass({
2495
- componentName: componentName$r,
2495
+ componentName: componentName$s,
2496
2496
  varName: 'url',
2497
2497
  fallbackVarName: 'fallbackUrl',
2498
2498
  });
2499
2499
 
2500
- customElements.define(componentName$r, TotpImageClass);
2500
+ customElements.define(componentName$s, TotpImageClass);
2501
2501
 
2502
- const componentName$q = getComponentName('number-field');
2502
+ const componentName$r = getComponentName('number-field');
2503
2503
 
2504
2504
  const NumberFieldClass = compose(
2505
2505
  createStyleMixin({
@@ -2525,11 +2525,11 @@ const NumberFieldClass = compose(
2525
2525
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2526
2526
  `,
2527
2527
  excludeAttrsSync: ['tabindex'],
2528
- componentName: componentName$q,
2528
+ componentName: componentName$r,
2529
2529
  })
2530
2530
  );
2531
2531
 
2532
- customElements.define(componentName$q, NumberFieldClass);
2532
+ customElements.define(componentName$r, NumberFieldClass);
2533
2533
 
2534
2534
  const focusElement = (ele) => {
2535
2535
  ele?.focus();
@@ -2547,13 +2547,13 @@ const getSanitizedCharacters = (str) => {
2547
2547
 
2548
2548
  /* eslint-disable no-param-reassign */
2549
2549
 
2550
- const componentName$p = getComponentName('passcode-internal');
2550
+ const componentName$q = getComponentName('passcode-internal');
2551
2551
 
2552
2552
  const observedAttributes$5 = ['digits'];
2553
2553
 
2554
2554
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2555
2555
 
2556
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
2556
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
2557
2557
 
2558
2558
  class PasscodeInternal extends BaseInputClass$4 {
2559
2559
  static get observedAttributes() {
@@ -2755,7 +2755,7 @@ class PasscodeInternal extends BaseInputClass$4 {
2755
2755
  }
2756
2756
  }
2757
2757
 
2758
- const componentName$o = getComponentName('text-field');
2758
+ const componentName$p = getComponentName('text-field');
2759
2759
 
2760
2760
  const observedAttrs = ['type'];
2761
2761
 
@@ -2805,11 +2805,11 @@ const TextFieldClass = compose(
2805
2805
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2806
2806
  `,
2807
2807
  excludeAttrsSync: ['tabindex'],
2808
- componentName: componentName$o,
2808
+ componentName: componentName$p,
2809
2809
  })
2810
2810
  );
2811
2811
 
2812
- const componentName$n = getComponentName('passcode');
2812
+ const componentName$o = getComponentName('passcode');
2813
2813
 
2814
2814
  const observedAttributes$4 = ['digits'];
2815
2815
 
@@ -2828,17 +2828,17 @@ const customMixin$5 = (superclass) =>
2828
2828
  const template = document.createElement('template');
2829
2829
 
2830
2830
  template.innerHTML = `
2831
- <${componentName$p}
2831
+ <${componentName$q}
2832
2832
  bordered="true"
2833
2833
  name="code"
2834
2834
  tabindex="-1"
2835
2835
  slot="input"
2836
- ><slot></slot></${componentName$p}>
2836
+ ><slot></slot></${componentName$q}>
2837
2837
  `;
2838
2838
 
2839
2839
  this.baseElement.appendChild(template.content.cloneNode(true));
2840
2840
 
2841
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
2841
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
2842
2842
 
2843
2843
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2844
2844
  }
@@ -2853,13 +2853,13 @@ const customMixin$5 = (superclass) =>
2853
2853
  };
2854
2854
 
2855
2855
  const {
2856
- host: host$9,
2856
+ host: host$a,
2857
2857
  digitField,
2858
- label: label$7,
2859
- requiredIndicator: requiredIndicator$7,
2858
+ label: label$8,
2859
+ requiredIndicator: requiredIndicator$8,
2860
2860
  internalWrapper: internalWrapper$1,
2861
2861
  focusedDigitField,
2862
- errorMessage: errorMessage$7,
2862
+ errorMessage: errorMessage$8,
2863
2863
  } = {
2864
2864
  host: { selector: () => ':host' },
2865
2865
  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2875,16 +2875,16 @@ const textVars$2 = TextFieldClass.cssVarList;
2875
2875
  const PasscodeClass = compose(
2876
2876
  createStyleMixin({
2877
2877
  mappings: {
2878
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$9],
2878
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
2879
2879
  hostWidth: { property: 'width' },
2880
- hostDirection: { ...host$9, property: 'direction' },
2881
- fontFamily: [host$9, { ...label$7 }],
2880
+ hostDirection: { ...host$a, property: 'direction' },
2881
+ fontFamily: [host$a, { ...label$8 }],
2882
2882
  labelTextColor: [
2883
- { ...label$7, property: 'color' },
2884
- { ...requiredIndicator$7, property: 'color' },
2883
+ { ...label$8, property: 'color' },
2884
+ { ...requiredIndicator$8, property: 'color' },
2885
2885
  ],
2886
- labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
2887
- errorMessageTextColor: { ...errorMessage$7, property: 'color' },
2886
+ labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2887
+ errorMessageTextColor: { ...errorMessage$8, property: 'color' },
2888
2888
  digitValueTextColor: {
2889
2889
  selector: TextFieldClass.componentName,
2890
2890
  property: textVars$2.inputValueTextColor,
@@ -2978,15 +2978,15 @@ const PasscodeClass = compose(
2978
2978
  ${resetInputCursor('vaadin-text-field')}
2979
2979
  `,
2980
2980
  excludeAttrsSync: ['tabindex'],
2981
- componentName: componentName$n,
2981
+ componentName: componentName$o,
2982
2982
  })
2983
2983
  );
2984
2984
 
2985
- customElements.define(componentName$o, TextFieldClass);
2985
+ customElements.define(componentName$p, TextFieldClass);
2986
2986
 
2987
- customElements.define(componentName$p, PasscodeInternal);
2987
+ customElements.define(componentName$q, PasscodeInternal);
2988
2988
 
2989
- customElements.define(componentName$n, PasscodeClass);
2989
+ customElements.define(componentName$o, PasscodeClass);
2990
2990
 
2991
2991
  const passwordDraggableMixin = (superclass) =>
2992
2992
  class PasswordDraggableMixinClass extends superclass {
@@ -3022,19 +3022,19 @@ const passwordDraggableMixin = (superclass) =>
3022
3022
  }
3023
3023
  };
3024
3024
 
3025
- const componentName$m = getComponentName('password');
3025
+ const componentName$n = getComponentName('password');
3026
3026
 
3027
3027
  const {
3028
- host: host$8,
3029
- inputField: inputField$4,
3030
- inputElement: inputElement$1,
3028
+ host: host$9,
3029
+ inputField: inputField$5,
3030
+ inputElement: inputElement$2,
3031
3031
  inputElementPlaceholder,
3032
3032
  revealButtonContainer,
3033
3033
  revealButtonIcon,
3034
- label: label$6,
3035
- requiredIndicator: requiredIndicator$6,
3036
- errorMessage: errorMessage$6,
3037
- helperText: helperText$5,
3034
+ label: label$7,
3035
+ requiredIndicator: requiredIndicator$7,
3036
+ errorMessage: errorMessage$7,
3037
+ helperText: helperText$6,
3038
3038
  } = {
3039
3039
  host: { selector: () => ':host' },
3040
3040
  inputField: { selector: '::part(input-field)' },
@@ -3051,37 +3051,37 @@ const {
3051
3051
  const PasswordClass = compose(
3052
3052
  createStyleMixin({
3053
3053
  mappings: {
3054
- hostWidth: { ...host$8, property: 'width' },
3055
- hostMinWidth: { ...host$8, property: 'min-width' },
3056
- hostDirection: { ...host$8, property: 'direction' },
3057
- fontSize: [{}, host$8],
3058
- fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
3059
- inputHeight: { ...inputField$4, property: 'height' },
3054
+ hostWidth: { ...host$9, property: 'width' },
3055
+ hostMinWidth: { ...host$9, property: 'min-width' },
3056
+ hostDirection: { ...host$9, property: 'direction' },
3057
+ fontSize: [{}, host$9],
3058
+ fontFamily: [label$7, inputField$5, errorMessage$7, helperText$6],
3059
+ inputHeight: { ...inputField$5, property: 'height' },
3060
3060
  inputHorizontalPadding: [
3061
- { ...inputElement$1, property: 'padding-left' },
3062
- { ...inputElement$1, property: 'padding-right' },
3061
+ { ...inputElement$2, property: 'padding-left' },
3062
+ { ...inputElement$2, property: 'padding-right' },
3063
3063
  ],
3064
- inputBackgroundColor: { ...inputField$4, property: 'background-color' },
3064
+ inputBackgroundColor: { ...inputField$5, property: 'background-color' },
3065
3065
 
3066
- inputBorderStyle: { ...inputField$4, property: 'border-style' },
3067
- inputBorderWidth: { ...inputField$4, property: 'border-width' },
3068
- inputBorderColor: { ...inputField$4, property: 'border-color' },
3069
- inputBorderRadius: { ...inputField$4, property: 'border-radius' },
3066
+ inputBorderStyle: { ...inputField$5, property: 'border-style' },
3067
+ inputBorderWidth: { ...inputField$5, property: 'border-width' },
3068
+ inputBorderColor: { ...inputField$5, property: 'border-color' },
3069
+ inputBorderRadius: { ...inputField$5, property: 'border-radius' },
3070
3070
 
3071
- inputOutlineColor: { ...inputField$4, property: 'outline-color' },
3072
- inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
3073
- inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
3074
- inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
3071
+ inputOutlineColor: { ...inputField$5, property: 'outline-color' },
3072
+ inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
3073
+ inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
3074
+ inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
3075
3075
 
3076
3076
  labelTextColor: [
3077
- { ...label$6, property: 'color' },
3078
- { ...requiredIndicator$6, property: 'color' },
3077
+ { ...label$7, property: 'color' },
3078
+ { ...requiredIndicator$7, property: 'color' },
3079
3079
  ],
3080
- labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
3081
- errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3080
+ labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
3081
+ errorMessageTextColor: { ...errorMessage$7, property: 'color' },
3082
3082
 
3083
3083
  inputValueTextColor: [
3084
- { ...inputElement$1, property: 'color' },
3084
+ { ...inputElement$2, property: 'color' },
3085
3085
  { ...revealButtonIcon, property: 'color' },
3086
3086
  ],
3087
3087
  inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
@@ -3153,23 +3153,23 @@ const PasswordClass = compose(
3153
3153
  }
3154
3154
  `,
3155
3155
  excludeAttrsSync: ['tabindex'],
3156
- componentName: componentName$m,
3156
+ componentName: componentName$n,
3157
3157
  })
3158
3158
  );
3159
3159
 
3160
- customElements.define(componentName$m, PasswordClass);
3160
+ customElements.define(componentName$n, PasswordClass);
3161
3161
 
3162
- const componentName$l = getComponentName('text-area');
3162
+ const componentName$m = getComponentName('text-area');
3163
3163
 
3164
3164
  const {
3165
- host: host$7,
3166
- label: label$5,
3167
- placeholder: placeholder$1,
3168
- inputField: inputField$3,
3165
+ host: host$8,
3166
+ label: label$6,
3167
+ placeholder: placeholder$2,
3168
+ inputField: inputField$4,
3169
3169
  textArea: textArea$2,
3170
- requiredIndicator: requiredIndicator$5,
3171
- helperText: helperText$4,
3172
- errorMessage: errorMessage$5,
3170
+ requiredIndicator: requiredIndicator$6,
3171
+ helperText: helperText$5,
3172
+ errorMessage: errorMessage$6,
3173
3173
  } = {
3174
3174
  host: { selector: () => ':host' },
3175
3175
  label: { selector: '::part(label)' },
@@ -3184,28 +3184,28 @@ const {
3184
3184
  const TextAreaClass = compose(
3185
3185
  createStyleMixin({
3186
3186
  mappings: {
3187
- hostWidth: { ...host$7, property: 'width' },
3188
- hostMinWidth: { ...host$7, property: 'min-width' },
3189
- hostDirection: { ...host$7, property: 'direction' },
3190
- fontSize: [host$7, textArea$2],
3191
- fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
3187
+ hostWidth: { ...host$8, property: 'width' },
3188
+ hostMinWidth: { ...host$8, property: 'min-width' },
3189
+ hostDirection: { ...host$8, property: 'direction' },
3190
+ fontSize: [host$8, textArea$2],
3191
+ fontFamily: [label$6, inputField$4, helperText$5, errorMessage$6],
3192
3192
  labelTextColor: [
3193
- { ...label$5, property: 'color' },
3194
- { ...requiredIndicator$5, property: 'color' },
3193
+ { ...label$6, property: 'color' },
3194
+ { ...requiredIndicator$6, property: 'color' },
3195
3195
  ],
3196
- labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
3197
- errorMessageTextColor: { ...errorMessage$5, property: 'color' },
3198
- inputBackgroundColor: { ...inputField$3, property: 'background-color' },
3196
+ labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
3197
+ errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3198
+ inputBackgroundColor: { ...inputField$4, property: 'background-color' },
3199
3199
  inputValueTextColor: { ...textArea$2, property: 'color' },
3200
- inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
3201
- inputBorderWidth: { ...inputField$3, property: 'border-width' },
3202
- inputBorderStyle: { ...inputField$3, property: 'border-style' },
3203
- inputBorderColor: { ...inputField$3, property: 'border-color' },
3204
- inputBorderRadius: { ...inputField$3, property: 'border-radius' },
3205
- inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
3206
- inputOutlineColor: { ...inputField$3, property: 'outline-color' },
3207
- inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
3208
- inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
3200
+ inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
3201
+ inputBorderWidth: { ...inputField$4, property: 'border-width' },
3202
+ inputBorderStyle: { ...inputField$4, property: 'border-style' },
3203
+ inputBorderColor: { ...inputField$4, property: 'border-color' },
3204
+ inputBorderRadius: { ...inputField$4, property: 'border-radius' },
3205
+ inputOutlineStyle: { ...inputField$4, property: 'outline-Style' },
3206
+ inputOutlineColor: { ...inputField$4, property: 'outline-color' },
3207
+ inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
3208
+ inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
3209
3209
  inputResizeType: { ...textArea$2, property: 'resize' },
3210
3210
  inputMinHeight: { ...textArea$2, property: 'min-height' },
3211
3211
  },
@@ -3234,17 +3234,17 @@ const TextAreaClass = compose(
3234
3234
  ${resetInputCursor('vaadin-text-area')}
3235
3235
  `,
3236
3236
  excludeAttrsSync: ['tabindex'],
3237
- componentName: componentName$l,
3237
+ componentName: componentName$m,
3238
3238
  })
3239
3239
  );
3240
3240
 
3241
- customElements.define(componentName$l, TextAreaClass);
3241
+ customElements.define(componentName$m, TextAreaClass);
3242
3242
 
3243
3243
  const observedAttributes$3 = ['src', 'alt'];
3244
3244
 
3245
- const componentName$k = getComponentName('image');
3245
+ const componentName$l = getComponentName('image');
3246
3246
 
3247
- const BaseClass$1 = createBaseClass({ componentName: componentName$k, baseSelector: ':host > img' });
3247
+ const BaseClass$1 = createBaseClass({ componentName: componentName$l, baseSelector: ':host > img' });
3248
3248
  class RawImage extends BaseClass$1 {
3249
3249
  static get observedAttributes() {
3250
3250
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3284,9 +3284,9 @@ const ImageClass = compose(
3284
3284
  draggableMixin
3285
3285
  )(RawImage);
3286
3286
 
3287
- customElements.define(componentName$k, ImageClass);
3287
+ customElements.define(componentName$l, ImageClass);
3288
3288
 
3289
- const componentName$j = getComponentName('combo-box');
3289
+ const componentName$k = getComponentName('combo-box');
3290
3290
 
3291
3291
  const ComboBoxMixin = (superclass) =>
3292
3292
  class ComboBoxMixinClass extends superclass {
@@ -3508,15 +3508,15 @@ const ComboBoxMixin = (superclass) =>
3508
3508
  };
3509
3509
 
3510
3510
  const {
3511
- host: host$6,
3512
- inputField: inputField$2,
3513
- inputElement,
3514
- placeholder,
3515
- toggle,
3516
- label: label$4,
3517
- requiredIndicator: requiredIndicator$4,
3518
- helperText: helperText$3,
3519
- errorMessage: errorMessage$4,
3511
+ host: host$7,
3512
+ inputField: inputField$3,
3513
+ inputElement: inputElement$1,
3514
+ placeholder: placeholder$1,
3515
+ toggle: toggle$1,
3516
+ label: label$5,
3517
+ requiredIndicator: requiredIndicator$5,
3518
+ helperText: helperText$4,
3519
+ errorMessage: errorMessage$5,
3520
3520
  } = {
3521
3521
  host: { selector: () => ':host' },
3522
3522
  inputField: { selector: '::part(input-field)' },
@@ -3532,39 +3532,39 @@ const {
3532
3532
  const ComboBoxClass = compose(
3533
3533
  createStyleMixin({
3534
3534
  mappings: {
3535
- hostWidth: { ...host$6, property: 'width' },
3536
- hostDirection: { ...host$6, property: 'direction' },
3535
+ hostWidth: { ...host$7, property: 'width' },
3536
+ hostDirection: { ...host$7, property: 'direction' },
3537
3537
  // we apply font-size also on the host so we can set its width with em
3538
- fontSize: [{}, host$6],
3539
- fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
3538
+ fontSize: [{}, host$7],
3539
+ fontFamily: [label$5, placeholder$1, inputField$3, helperText$4, errorMessage$5],
3540
3540
  labelTextColor: [
3541
- { ...label$4, property: 'color' },
3542
- { ...requiredIndicator$4, property: 'color' },
3541
+ { ...label$5, property: 'color' },
3542
+ { ...requiredIndicator$5, property: 'color' },
3543
3543
  ],
3544
- errorMessageTextColor: { ...errorMessage$4, property: 'color' },
3545
- inputHeight: { ...inputField$2, property: 'height' },
3546
- inputBackgroundColor: { ...inputField$2, property: 'background-color' },
3547
- inputBorderColor: { ...inputField$2, property: 'border-color' },
3548
- inputBorderWidth: { ...inputField$2, property: 'border-width' },
3549
- inputBorderStyle: { ...inputField$2, property: 'border-style' },
3550
- inputBorderRadius: { ...inputField$2, property: 'border-radius' },
3551
- labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
3552
- inputValueTextColor: { ...inputField$2, property: 'color' },
3553
- inputPlaceholderTextColor: { ...placeholder, property: 'color' },
3554
- inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
3555
- inputDropdownButtonColor: { ...toggle, property: 'color' },
3556
- inputDropdownButtonSize: { ...toggle, property: 'font-size' },
3544
+ errorMessageTextColor: { ...errorMessage$5, property: 'color' },
3545
+ inputHeight: { ...inputField$3, property: 'height' },
3546
+ inputBackgroundColor: { ...inputField$3, property: 'background-color' },
3547
+ inputBorderColor: { ...inputField$3, property: 'border-color' },
3548
+ inputBorderWidth: { ...inputField$3, property: 'border-width' },
3549
+ inputBorderStyle: { ...inputField$3, property: 'border-style' },
3550
+ inputBorderRadius: { ...inputField$3, property: 'border-radius' },
3551
+ labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
3552
+ inputValueTextColor: { ...inputField$3, property: 'color' },
3553
+ inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
3554
+ inputDropdownButtonCursor: { ...toggle$1, property: 'cursor' },
3555
+ inputDropdownButtonColor: { ...toggle$1, property: 'color' },
3556
+ inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
3557
3557
  inputDropdownButtonOffset: [
3558
- { ...toggle, property: 'margin-right' },
3559
- { ...toggle, property: 'margin-left' },
3558
+ { ...toggle$1, property: 'margin-right' },
3559
+ { ...toggle$1, property: 'margin-left' },
3560
3560
  ],
3561
- inputOutlineColor: { ...inputField$2, property: 'outline-color' },
3562
- inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
3563
- inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
3564
- inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
3561
+ inputOutlineColor: { ...inputField$3, property: 'outline-color' },
3562
+ inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
3563
+ inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
3564
+ inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
3565
3565
  inputHorizontalPadding: [
3566
- { ...inputElement, property: 'padding-left' },
3567
- { ...inputElement, property: 'padding-right' },
3566
+ { ...inputElement$1, property: 'padding-left' },
3567
+ { ...inputElement$1, property: 'padding-right' },
3568
3568
  ],
3569
3569
 
3570
3570
  // we need to use the variables from the portal mixin
@@ -3650,12 +3650,12 @@ const ComboBoxClass = compose(
3650
3650
  // and reset items to an empty array, and opening the list box with no items
3651
3651
  // to display.
3652
3652
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3653
- componentName: componentName$j,
3653
+ componentName: componentName$k,
3654
3654
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3655
3655
  })
3656
3656
  );
3657
3657
 
3658
- customElements.define(componentName$j, ComboBoxClass);
3658
+ customElements.define(componentName$k, ComboBoxClass);
3659
3659
 
3660
3660
  var CountryCodes = [
3661
3661
  {
@@ -4895,7 +4895,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
4895
4895
  </div>
4896
4896
  `;
4897
4897
 
4898
- const componentName$i = getComponentName('phone-field-internal');
4898
+ const componentName$j = getComponentName('phone-field-internal');
4899
4899
 
4900
4900
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
4901
4901
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4907,7 +4907,7 @@ const mapAttrs$1 = {
4907
4907
 
4908
4908
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
4909
4909
 
4910
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
4910
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
4911
4911
 
4912
4912
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4913
4913
  static get observedAttributes() {
@@ -5079,12 +5079,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5079
5079
  }
5080
5080
  };
5081
5081
 
5082
- customElements.define(componentName$i, PhoneFieldInternal$1);
5082
+ customElements.define(componentName$j, PhoneFieldInternal$1);
5083
5083
 
5084
5084
  const textVars$1 = TextFieldClass.cssVarList;
5085
5085
  const comboVars = ComboBoxClass.cssVarList;
5086
5086
 
5087
- const componentName$h = getComponentName('phone-field');
5087
+ const componentName$i = getComponentName('phone-field');
5088
5088
 
5089
5089
  const customMixin$4 = (superclass) =>
5090
5090
  class PhoneFieldMixinClass extends superclass {
@@ -5098,15 +5098,15 @@ const customMixin$4 = (superclass) =>
5098
5098
  const template = document.createElement('template');
5099
5099
 
5100
5100
  template.innerHTML = `
5101
- <${componentName$i}
5101
+ <${componentName$j}
5102
5102
  tabindex="-1"
5103
5103
  slot="input"
5104
- ></${componentName$i}>
5104
+ ></${componentName$j}>
5105
5105
  `;
5106
5106
 
5107
5107
  this.baseElement.appendChild(template.content.cloneNode(true));
5108
5108
 
5109
- this.inputElement = this.shadowRoot.querySelector(componentName$i);
5109
+ this.inputElement = this.shadowRoot.querySelector(componentName$j);
5110
5110
 
5111
5111
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5112
5112
  includeAttrs: [
@@ -5126,15 +5126,15 @@ const customMixin$4 = (superclass) =>
5126
5126
  };
5127
5127
 
5128
5128
  const {
5129
- host: host$5,
5130
- label: label$3,
5131
- requiredIndicator: requiredIndicator$3,
5132
- inputField: inputField$1,
5129
+ host: host$6,
5130
+ label: label$4,
5131
+ requiredIndicator: requiredIndicator$4,
5132
+ inputField: inputField$2,
5133
5133
  countryCodeInput,
5134
5134
  phoneInput: phoneInput$1,
5135
5135
  separator,
5136
- errorMessage: errorMessage$3,
5137
- helperText: helperText$2,
5136
+ errorMessage: errorMessage$4,
5137
+ helperText: helperText$3,
5138
5138
  } = {
5139
5139
  host: { selector: () => ':host' },
5140
5140
  label: { selector: '::part(label)' },
@@ -5151,8 +5151,8 @@ const PhoneFieldClass = compose(
5151
5151
  createStyleMixin({
5152
5152
  mappings: {
5153
5153
  fontSize: [
5154
- host$5,
5155
- inputField$1,
5154
+ host$6,
5155
+ inputField$2,
5156
5156
  {
5157
5157
  selector: TextFieldClass.componentName,
5158
5158
  property: TextFieldClass.cssVarList.fontSize,
@@ -5163,34 +5163,34 @@ const PhoneFieldClass = compose(
5163
5163
  },
5164
5164
  ],
5165
5165
  fontFamily: [
5166
- label$3,
5167
- errorMessage$3,
5168
- helperText$2,
5166
+ label$4,
5167
+ errorMessage$4,
5168
+ helperText$3,
5169
5169
  {
5170
5170
  ...countryCodeInput,
5171
5171
  property: ComboBoxClass.cssVarList.overlay.fontFamily,
5172
5172
  },
5173
5173
  ],
5174
5174
  hostWidth: [
5175
- { ...host$5, property: 'width' },
5175
+ { ...host$6, property: 'width' },
5176
5176
  { ...phoneInput$1, property: 'width' },
5177
5177
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
5178
5178
  ],
5179
- hostDirection: { ...host$5, property: 'direction' },
5179
+ hostDirection: { ...host$6, property: 'direction' },
5180
5180
 
5181
5181
  inputBorderStyle: [
5182
- { ...inputField$1, property: 'border-style' },
5182
+ { ...inputField$2, property: 'border-style' },
5183
5183
  { ...separator, property: 'border-left-style' },
5184
5184
  ],
5185
5185
  inputBorderWidth: [
5186
- { ...inputField$1, property: 'border-width' },
5186
+ { ...inputField$2, property: 'border-width' },
5187
5187
  { ...separator, property: 'border-left-width' },
5188
5188
  ],
5189
5189
  inputBorderColor: [
5190
- { ...inputField$1, property: 'border-color' },
5190
+ { ...inputField$2, property: 'border-color' },
5191
5191
  { ...separator, property: 'border-left-color' },
5192
5192
  ],
5193
- inputBorderRadius: { ...inputField$1, property: 'border-radius' },
5193
+ inputBorderRadius: { ...inputField$2, property: 'border-radius' },
5194
5194
 
5195
5195
  countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
5196
5196
  countryCodeDropdownWidth: {
@@ -5200,11 +5200,11 @@ const PhoneFieldClass = compose(
5200
5200
  phoneInputWidth: { ...phoneInput$1, property: 'width' },
5201
5201
 
5202
5202
  labelTextColor: [
5203
- { ...label$3, property: 'color' },
5204
- { ...requiredIndicator$3, property: 'color' },
5203
+ { ...label$4, property: 'color' },
5204
+ { ...requiredIndicator$4, property: 'color' },
5205
5205
  ],
5206
- labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
5207
- errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5206
+ labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
5207
+ errorMessageTextColor: { ...errorMessage$4, property: 'color' },
5208
5208
 
5209
5209
  inputValueTextColor: [
5210
5210
  { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -5218,10 +5218,10 @@ const PhoneFieldClass = compose(
5218
5218
  property: comboVars.overlayItemBackgroundColor,
5219
5219
  },
5220
5220
 
5221
- inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
5222
- inputOutlineColor: { ...inputField$1, property: 'outline-color' },
5223
- inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
5224
- inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
5221
+ inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
5222
+ inputOutlineColor: { ...inputField$2, property: 'outline-color' },
5223
+ inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
5224
+ inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
5225
5225
  },
5226
5226
  }),
5227
5227
  draggableMixin,
@@ -5302,17 +5302,17 @@ const PhoneFieldClass = compose(
5302
5302
  ${resetInputLabelPosition('vaadin-text-field')}
5303
5303
  `,
5304
5304
  excludeAttrsSync: ['tabindex'],
5305
- componentName: componentName$h,
5305
+ componentName: componentName$i,
5306
5306
  })
5307
5307
  );
5308
5308
 
5309
- customElements.define(componentName$h, PhoneFieldClass);
5309
+ customElements.define(componentName$i, PhoneFieldClass);
5310
5310
 
5311
5311
  const getCountryByCodeId = (countryCode) => {
5312
5312
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5313
5313
  };
5314
5314
 
5315
- const componentName$g = getComponentName('phone-field-internal-input-box');
5315
+ const componentName$h = getComponentName('phone-field-internal-input-box');
5316
5316
 
5317
5317
  const observedAttributes$2 = [
5318
5318
  'disabled',
@@ -5326,7 +5326,7 @@ const mapAttrs = {
5326
5326
  'phone-input-placeholder': 'placeholder',
5327
5327
  };
5328
5328
 
5329
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
5329
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
5330
5330
 
5331
5331
  class PhoneFieldInternal extends BaseInputClass$2 {
5332
5332
  static get observedAttributes() {
@@ -5465,11 +5465,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5465
5465
  }
5466
5466
  }
5467
5467
 
5468
- customElements.define(componentName$g, PhoneFieldInternal);
5468
+ customElements.define(componentName$h, PhoneFieldInternal);
5469
5469
 
5470
5470
  const textVars = TextFieldClass.cssVarList;
5471
5471
 
5472
- const componentName$f = getComponentName('phone-input-box-field');
5472
+ const componentName$g = getComponentName('phone-input-box-field');
5473
5473
 
5474
5474
  const customMixin$3 = (superclass) =>
5475
5475
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5483,15 +5483,15 @@ const customMixin$3 = (superclass) =>
5483
5483
  const template = document.createElement('template');
5484
5484
 
5485
5485
  template.innerHTML = `
5486
- <${componentName$g}
5486
+ <${componentName$h}
5487
5487
  tabindex="-1"
5488
5488
  slot="input"
5489
- ></${componentName$g}>
5489
+ ></${componentName$h}>
5490
5490
  `;
5491
5491
 
5492
5492
  this.baseElement.appendChild(template.content.cloneNode(true));
5493
5493
 
5494
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
5494
+ this.inputElement = this.shadowRoot.querySelector(componentName$h);
5495
5495
 
5496
5496
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5497
5497
  includeAttrs: [
@@ -5508,7 +5508,7 @@ const customMixin$3 = (superclass) =>
5508
5508
  }
5509
5509
  };
5510
5510
 
5511
- const { host: host$4, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
5511
+ const { host: host$5, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$3, helperText: helperText$2 } = {
5512
5512
  host: { selector: () => ':host' },
5513
5513
  label: { selector: '::part(label)' },
5514
5514
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5522,38 +5522,38 @@ const PhoneFieldInputBoxClass = compose(
5522
5522
  createStyleMixin({
5523
5523
  mappings: {
5524
5524
  fontSize: [
5525
- host$4,
5526
- inputField,
5525
+ host$5,
5526
+ inputField$1,
5527
5527
  {
5528
5528
  selector: TextFieldClass.componentName,
5529
5529
  property: TextFieldClass.cssVarList.fontSize,
5530
5530
  },
5531
5531
  ],
5532
- fontFamily: [label$2, errorMessage$2, helperText$1],
5533
- hostWidth: { ...host$4, property: 'width' },
5534
- hostMinWidth: { ...host$4, property: 'min-width' },
5535
- hostDirection: { ...host$4, property: 'direction' },
5532
+ fontFamily: [label$3, errorMessage$3, helperText$2],
5533
+ hostWidth: { ...host$5, property: 'width' },
5534
+ hostMinWidth: { ...host$5, property: 'min-width' },
5535
+ hostDirection: { ...host$5, property: 'direction' },
5536
5536
 
5537
- inputBorderStyle: { ...inputField, property: 'border-style' },
5538
- inputBorderWidth: { ...inputField, property: 'border-width' },
5539
- inputBorderColor: { ...inputField, property: 'border-color' },
5540
- inputBorderRadius: { ...inputField, property: 'border-radius' },
5537
+ inputBorderStyle: { ...inputField$1, property: 'border-style' },
5538
+ inputBorderWidth: { ...inputField$1, property: 'border-width' },
5539
+ inputBorderColor: { ...inputField$1, property: 'border-color' },
5540
+ inputBorderRadius: { ...inputField$1, property: 'border-radius' },
5541
5541
 
5542
5542
  labelTextColor: [
5543
- { ...label$2, property: 'color' },
5544
- { ...requiredIndicator$2, property: 'color' },
5543
+ { ...label$3, property: 'color' },
5544
+ { ...requiredIndicator$3, property: 'color' },
5545
5545
  ],
5546
- labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
5547
- errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5546
+ labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
5547
+ errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5548
5548
 
5549
5549
  inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
5550
5550
 
5551
5551
  inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
5552
5552
 
5553
- inputOutlineStyle: { ...inputField, property: 'outline-style' },
5554
- inputOutlineColor: { ...inputField, property: 'outline-color' },
5555
- inputOutlineWidth: { ...inputField, property: 'outline-width' },
5556
- inputOutlineOffset: { ...inputField, property: 'outline-offset' },
5553
+ inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
5554
+ inputOutlineColor: { ...inputField$1, property: 'outline-color' },
5555
+ inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
5556
+ inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
5557
5557
  },
5558
5558
  }),
5559
5559
  draggableMixin,
@@ -5624,15 +5624,15 @@ const PhoneFieldInputBoxClass = compose(
5624
5624
  ${resetInputLabelPosition('vaadin-text-field')}
5625
5625
  `,
5626
5626
  excludeAttrsSync: ['tabindex'],
5627
- componentName: componentName$f,
5627
+ componentName: componentName$g,
5628
5628
  })
5629
5629
  );
5630
5630
 
5631
- customElements.define(componentName$f, PhoneFieldInputBoxClass);
5631
+ customElements.define(componentName$g, PhoneFieldInputBoxClass);
5632
5632
 
5633
- const componentName$e = getComponentName('new-password-internal');
5633
+ const componentName$f = getComponentName('new-password-internal');
5634
5634
 
5635
- const componentName$d = getComponentName('new-password');
5635
+ const componentName$e = getComponentName('new-password');
5636
5636
 
5637
5637
  const customMixin$2 = (superclass) =>
5638
5638
  class NewPasswordMixinClass extends superclass {
@@ -5642,16 +5642,16 @@ const customMixin$2 = (superclass) =>
5642
5642
  const template = document.createElement('template');
5643
5643
 
5644
5644
  template.innerHTML = `
5645
- <${componentName$e}
5645
+ <${componentName$f}
5646
5646
  name="new-password"
5647
5647
  tabindex="-1"
5648
5648
  slot="input"
5649
- ></${componentName$e}>
5649
+ ></${componentName$f}>
5650
5650
  `;
5651
5651
 
5652
5652
  this.baseElement.appendChild(template.content.cloneNode(true));
5653
5653
 
5654
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
5654
+ this.inputElement = this.shadowRoot.querySelector(componentName$f);
5655
5655
 
5656
5656
  forwardAttrs(this, this.inputElement, {
5657
5657
  includeAttrs: [
@@ -5672,7 +5672,7 @@ const customMixin$2 = (superclass) =>
5672
5672
  }
5673
5673
  };
5674
5674
 
5675
- const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText, passwordInput } = {
5675
+ const { host: host$4, label: label$2, internalInputsWrapper, errorMessage: errorMessage$2, helperText: helperText$1, passwordInput } = {
5676
5676
  host: { selector: () => ':host' },
5677
5677
  label: { selector: '::part(label)' },
5678
5678
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5685,22 +5685,22 @@ const NewPasswordClass = compose(
5685
5685
  createStyleMixin({
5686
5686
  mappings: {
5687
5687
  fontSize: [
5688
- host$3,
5688
+ host$4,
5689
5689
  {},
5690
5690
  {
5691
5691
  selector: PasswordClass.componentName,
5692
5692
  property: PasswordClass.cssVarList.fontSize,
5693
5693
  },
5694
5694
  ],
5695
- fontFamily: [label$1, errorMessage$1, helperText],
5696
- errorMessageTextColor: { ...errorMessage$1, property: 'color' },
5697
- hostWidth: { ...host$3, property: 'width' },
5698
- hostMinWidth: { ...host$3, property: 'min-width' },
5695
+ fontFamily: [label$2, errorMessage$2, helperText$1],
5696
+ errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5697
+ hostWidth: { ...host$4, property: 'width' },
5698
+ hostMinWidth: { ...host$4, property: 'min-width' },
5699
5699
  hostDirection: [
5700
- { ...host$3, property: 'direction' },
5700
+ { ...host$4, property: 'direction' },
5701
5701
  { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
5702
5702
  ],
5703
- inputsRequiredIndicator: { ...host$3, property: 'content' },
5703
+ inputsRequiredIndicator: { ...host$4, property: 'content' },
5704
5704
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
5705
5705
  },
5706
5706
  }),
@@ -5758,7 +5758,7 @@ const NewPasswordClass = compose(
5758
5758
  }
5759
5759
  `,
5760
5760
  excludeAttrsSync: ['tabindex'],
5761
- componentName: componentName$d,
5761
+ componentName: componentName$e,
5762
5762
  })
5763
5763
  );
5764
5764
 
@@ -5783,7 +5783,7 @@ const commonAttrs = [
5783
5783
 
5784
5784
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5785
5785
 
5786
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
5786
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
5787
5787
 
5788
5788
  class NewPasswordInternal extends BaseInputClass$1 {
5789
5789
  static get observedAttributes() {
@@ -5948,16 +5948,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
5948
5948
  }
5949
5949
  }
5950
5950
 
5951
- customElements.define(componentName$e, NewPasswordInternal);
5951
+ customElements.define(componentName$f, NewPasswordInternal);
5952
5952
 
5953
- customElements.define(componentName$d, NewPasswordClass);
5953
+ customElements.define(componentName$e, NewPasswordClass);
5954
5954
 
5955
- const componentName$c = getComponentName('recaptcha');
5955
+ const componentName$d = getComponentName('recaptcha');
5956
5956
 
5957
5957
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
5958
5958
 
5959
5959
  const BaseClass = createBaseClass({
5960
- componentName: componentName$c,
5960
+ componentName: componentName$d,
5961
5961
  baseSelector: ':host > div',
5962
5962
  });
5963
5963
  class RawRecaptcha extends BaseClass {
@@ -6109,7 +6109,7 @@ class RawRecaptcha extends BaseClass {
6109
6109
 
6110
6110
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
6111
6111
 
6112
- customElements.define(componentName$c, RecaptchaClass);
6112
+ customElements.define(componentName$d, RecaptchaClass);
6113
6113
 
6114
6114
  const getFileBase64 = (fileObj) => {
6115
6115
  return new Promise((resolve) => {
@@ -6123,7 +6123,7 @@ const getFilename = (fileObj) => {
6123
6123
  return fileObj.name.replace(/^.*\\/, '');
6124
6124
  };
6125
6125
 
6126
- const componentName$b = getComponentName('upload-file');
6126
+ const componentName$c = getComponentName('upload-file');
6127
6127
 
6128
6128
  const observedAttributes = [
6129
6129
  'title',
@@ -6138,7 +6138,7 @@ const observedAttributes = [
6138
6138
  'icon',
6139
6139
  ];
6140
6140
 
6141
- const BaseInputClass = createBaseInputClass({ componentName: componentName$b, baseSelector: ':host > div' });
6141
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
6142
6142
 
6143
6143
  class RawUploadFile extends BaseInputClass {
6144
6144
  static get observedAttributes() {
@@ -6310,7 +6310,7 @@ class RawUploadFile extends BaseInputClass {
6310
6310
  }
6311
6311
 
6312
6312
  const buttonVars = ButtonClass.cssVarList;
6313
- const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
6313
+ const { host: host$3, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
6314
6314
  host: { selector: () => ':host' },
6315
6315
  wrapper: { selector: () => ':host > div' },
6316
6316
  icon: { selector: () => '::slotted(*)' },
@@ -6329,11 +6329,11 @@ const UploadFileClass = compose(
6329
6329
  borderWidth: {},
6330
6330
  borderStyle: {},
6331
6331
  borderRadius: {},
6332
- hostHeight: { ...host$2, property: 'height' },
6333
- hostWidth: { ...host$2, property: 'width' },
6332
+ hostHeight: { ...host$3, property: 'height' },
6333
+ hostWidth: { ...host$3, property: 'width' },
6334
6334
  hostPadding: { property: 'padding' },
6335
6335
  hostDirection: [
6336
- { ...host$2, property: 'direction' },
6336
+ { ...host$3, property: 'direction' },
6337
6337
  { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
6338
6338
  ],
6339
6339
  gap: { ...wrapper },
@@ -6346,19 +6346,19 @@ const UploadFileClass = compose(
6346
6346
  { ...description, property: 'color' },
6347
6347
  ],
6348
6348
  iconSize: { ...icon, property: 'width' },
6349
- requiredIndicator: { ...requiredIndicator$1, property: 'content' },
6349
+ requiredIndicator: { ...requiredIndicator$2, property: 'content' },
6350
6350
  },
6351
6351
  }),
6352
6352
  draggableMixin,
6353
6353
  componentNameValidationMixin
6354
6354
  )(RawUploadFile);
6355
6355
 
6356
- customElements.define(componentName$b, UploadFileClass);
6356
+ customElements.define(componentName$c, UploadFileClass);
6357
6357
 
6358
- const componentName$a = getComponentName('button-selection-group-internal');
6358
+ const componentName$b = getComponentName('button-selection-group-internal');
6359
6359
 
6360
6360
  class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6361
- componentName: componentName$a,
6361
+ componentName: componentName$b,
6362
6362
  baseSelector: 'slot',
6363
6363
  }) {
6364
6364
  constructor() {
@@ -6495,7 +6495,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6495
6495
  }
6496
6496
  }
6497
6497
 
6498
- const componentName$9 = getComponentName('button-selection-group');
6498
+ const componentName$a = getComponentName('button-selection-group');
6499
6499
 
6500
6500
  const customMixin$1 = (superclass) =>
6501
6501
  class ButtonSelectionGroupMixinClass extends superclass {
@@ -6570,18 +6570,18 @@ const customMixin$1 = (superclass) =>
6570
6570
  const template = document.createElement('template');
6571
6571
 
6572
6572
  template.innerHTML = `
6573
- <${componentName$a}
6573
+ <${componentName$b}
6574
6574
  name="button-selection-group"
6575
6575
  slot="input"
6576
6576
  tabindex="-1"
6577
6577
  >
6578
6578
  <slot></slot>
6579
- </${componentName$a}>
6579
+ </${componentName$b}>
6580
6580
  `;
6581
6581
 
6582
6582
  this.baseElement.appendChild(template.content.cloneNode(true));
6583
6583
 
6584
- this.inputElement = this.shadowRoot.querySelector(componentName$a);
6584
+ this.inputElement = this.shadowRoot.querySelector(componentName$b);
6585
6585
 
6586
6586
  forwardAttrs(this, this.inputElement, {
6587
6587
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6600,7 +6600,7 @@ const customMixin$1 = (superclass) =>
6600
6600
  }
6601
6601
  };
6602
6602
 
6603
- const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage } = {
6603
+ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$1 } = {
6604
6604
  host: { selector: () => ':host' },
6605
6605
  label: { selector: '::part(label)' },
6606
6606
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6611,15 +6611,15 @@ const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage }
6611
6611
  const ButtonSelectionGroupClass = compose(
6612
6612
  createStyleMixin({
6613
6613
  mappings: {
6614
- hostWidth: { ...host$1, property: 'width' },
6615
- hostDirection: { ...host$1, property: 'direction' },
6616
- fontFamily: host$1,
6614
+ hostWidth: { ...host$2, property: 'width' },
6615
+ hostDirection: { ...host$2, property: 'direction' },
6616
+ fontFamily: host$2,
6617
6617
  labelTextColor: [
6618
- { ...label, property: 'color' },
6619
- { ...requiredIndicator, property: 'color' },
6618
+ { ...label$1, property: 'color' },
6619
+ { ...requiredIndicator$1, property: 'color' },
6620
6620
  ],
6621
- labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
6622
- errorMessageTextColor: { ...errorMessage, property: 'color' },
6621
+ labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
6622
+ errorMessageTextColor: { ...errorMessage$1, property: 'color' },
6623
6623
  itemsSpacing: { ...internalWrapper, property: 'gap' },
6624
6624
  },
6625
6625
  }),
@@ -6686,18 +6686,18 @@ const ButtonSelectionGroupClass = compose(
6686
6686
  ${resetInputCursor('vaadin-text-field')}
6687
6687
  `,
6688
6688
  excludeAttrsSync: ['tabindex'],
6689
- componentName: componentName$9,
6689
+ componentName: componentName$a,
6690
6690
  })
6691
6691
  );
6692
6692
 
6693
- customElements.define(componentName$a, ButtonSelectionGroupInternalClass);
6693
+ customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
6694
6694
 
6695
- customElements.define(componentName$9, ButtonSelectionGroupClass);
6695
+ customElements.define(componentName$a, ButtonSelectionGroupClass);
6696
6696
 
6697
- const componentName$8 = getComponentName('button-selection-group-item');
6697
+ const componentName$9 = getComponentName('button-selection-group-item');
6698
6698
 
6699
6699
  class RawSelectItem extends createBaseClass({
6700
- componentName: componentName$8,
6700
+ componentName: componentName$9,
6701
6701
  baseSelector: ':host > descope-button',
6702
6702
  }) {
6703
6703
  get size() {
@@ -6795,7 +6795,7 @@ const ButtonSelectionGroupItemClass = compose(
6795
6795
  componentNameValidationMixin
6796
6796
  )(RawSelectItem);
6797
6797
 
6798
- customElements.define(componentName$8, ButtonSelectionGroupItemClass);
6798
+ customElements.define(componentName$9, ButtonSelectionGroupItemClass);
6799
6799
 
6800
6800
  class GridTextColumnClass extends GridSortColumn {
6801
6801
  get sortable() {
@@ -6814,9 +6814,9 @@ class GridTextColumnClass extends GridSortColumn {
6814
6814
  }
6815
6815
  }
6816
6816
 
6817
- const componentName$7 = getComponentName('grid-text-column');
6817
+ const componentName$8 = getComponentName('grid-text-column');
6818
6818
 
6819
- customElements.define(componentName$7, GridTextColumnClass);
6819
+ customElements.define(componentName$8, GridTextColumnClass);
6820
6820
 
6821
6821
  /* eslint-disable no-param-reassign */
6822
6822
 
@@ -6851,9 +6851,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
6851
6851
 
6852
6852
  /* eslint-disable no-param-reassign */
6853
6853
 
6854
- const componentName$6 = getComponentName('grid-custom-column');
6854
+ const componentName$7 = getComponentName('grid-custom-column');
6855
6855
 
6856
- customElements.define(componentName$6, GridCustomColumnClass);
6856
+ customElements.define(componentName$7, GridCustomColumnClass);
6857
6857
 
6858
6858
  const createCheckboxEle = () => {
6859
6859
  const checkbox = document.createElement('descope-checkbox');
@@ -6911,9 +6911,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
6911
6911
  }
6912
6912
  }
6913
6913
 
6914
- const componentName$5 = getComponentName('grid-selection-column');
6914
+ const componentName$6 = getComponentName('grid-selection-column');
6915
6915
 
6916
- customElements.define(componentName$5, GridSelectionColumnClass);
6916
+ customElements.define(componentName$6, GridSelectionColumnClass);
6917
6917
 
6918
6918
  const isValidDataType = (data) => {
6919
6919
  const isValid = Array.isArray(data);
@@ -6925,7 +6925,7 @@ const isValidDataType = (data) => {
6925
6925
  return isValid;
6926
6926
  };
6927
6927
 
6928
- const componentName$4 = getComponentName('grid');
6928
+ const componentName$5 = getComponentName('grid');
6929
6929
 
6930
6930
  const GridMixin = (superclass) =>
6931
6931
  class GridMixinClass extends superclass {
@@ -7085,7 +7085,7 @@ const GridMixin = (superclass) =>
7085
7085
  };
7086
7086
 
7087
7087
  const {
7088
- host,
7088
+ host: host$1,
7089
7089
  headerRow,
7090
7090
  headerRowCell,
7091
7091
  contentRow,
@@ -7120,15 +7120,15 @@ const GridClass = compose(
7120
7120
  fontWeight: { ...contentRow },
7121
7121
  valueTextColor: { ...contentRow, property: 'color' },
7122
7122
  backgroundColor: [
7123
- { ...host, property: 'background-color' },
7123
+ { ...host$1, property: 'background-color' },
7124
7124
  { ...contentRow, property: 'background-color' },
7125
7125
  ],
7126
7126
  sortIndicatorsColor: { ...sortIndicators, property: 'color' },
7127
7127
  activeSortIndicator: { ...activeSortIndicator, property: 'color' },
7128
- inputBorderColor: { ...host, property: 'border-color' },
7129
- inputBorderWidth: { ...host, property: 'border-width' },
7130
- inputBorderStyle: { ...host, property: 'border-style' },
7131
- inputBorderRadius: { ...host, property: 'border-radius' },
7128
+ inputBorderColor: { ...host$1, property: 'border-color' },
7129
+ inputBorderWidth: { ...host$1, property: 'border-width' },
7130
+ inputBorderStyle: { ...host$1, property: 'border-style' },
7131
+ inputBorderRadius: { ...host$1, property: 'border-radius' },
7132
7132
  selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
7133
7133
  selectedTextColor: { ...selectedRow, property: 'color' },
7134
7134
  headerRowTextColor: { ...headerRowCell, property: 'color' },
@@ -7157,11 +7157,11 @@ const GridClass = compose(
7157
7157
  }
7158
7158
  `,
7159
7159
  excludeAttrsSync: ['columns', 'tabindex'],
7160
- componentName: componentName$4,
7160
+ componentName: componentName$5,
7161
7161
  })
7162
7162
  );
7163
7163
 
7164
- customElements.define(componentName$4, GridClass);
7164
+ customElements.define(componentName$5, GridClass);
7165
7165
 
7166
7166
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
7167
7167
 
@@ -7492,33 +7492,33 @@ const globals = {
7492
7492
  fonts,
7493
7493
  direction,
7494
7494
  };
7495
- const vars$v = getThemeVars(globals);
7495
+ const vars$w = getThemeVars(globals);
7496
7496
 
7497
- const globalRefs$h = getThemeRefs(globals);
7497
+ const globalRefs$i = getThemeRefs(globals);
7498
7498
  const compVars$4 = ButtonClass.cssVarList;
7499
7499
 
7500
7500
  const mode = {
7501
- primary: globalRefs$h.colors.primary,
7502
- secondary: globalRefs$h.colors.secondary,
7503
- success: globalRefs$h.colors.success,
7504
- error: globalRefs$h.colors.error,
7505
- surface: globalRefs$h.colors.surface,
7501
+ primary: globalRefs$i.colors.primary,
7502
+ secondary: globalRefs$i.colors.secondary,
7503
+ success: globalRefs$i.colors.success,
7504
+ error: globalRefs$i.colors.error,
7505
+ surface: globalRefs$i.colors.surface,
7506
7506
  };
7507
7507
 
7508
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$D);
7508
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
7509
7509
 
7510
7510
  const button = {
7511
7511
  ...helperTheme$3,
7512
7512
 
7513
- [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
7513
+ [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
7514
7514
 
7515
7515
  [compVars$4.cursor]: 'pointer',
7516
7516
  [compVars$4.hostHeight]: '3em',
7517
7517
  [compVars$4.hostWidth]: 'auto',
7518
- [compVars$4.hostDirection]: globalRefs$h.direction,
7518
+ [compVars$4.hostDirection]: globalRefs$i.direction,
7519
7519
 
7520
- [compVars$4.borderRadius]: globalRefs$h.radius.sm,
7521
- [compVars$4.borderWidth]: globalRefs$h.border.xs,
7520
+ [compVars$4.borderRadius]: globalRefs$i.radius.sm,
7521
+ [compVars$4.borderWidth]: globalRefs$i.border.xs,
7522
7522
  [compVars$4.borderStyle]: 'solid',
7523
7523
  [compVars$4.borderColor]: 'transparent',
7524
7524
 
@@ -7554,10 +7554,10 @@ const button = {
7554
7554
  },
7555
7555
 
7556
7556
  _disabled: {
7557
- [helperVars$3.main]: globalRefs$h.colors.surface.main,
7558
- [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
7559
- [helperVars$3.light]: globalRefs$h.colors.surface.light,
7560
- [helperVars$3.contrast]: globalRefs$h.colors.surface.contrast,
7557
+ [helperVars$3.main]: globalRefs$i.colors.surface.main,
7558
+ [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
7559
+ [helperVars$3.light]: globalRefs$i.colors.surface.light,
7560
+ [helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
7561
7561
  },
7562
7562
 
7563
7563
  variant: {
@@ -7599,11 +7599,11 @@ const button = {
7599
7599
  },
7600
7600
 
7601
7601
  _focused: {
7602
- [compVars$4.outlineColor]: globalRefs$h.colors.surface.main,
7602
+ [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
7603
7603
  },
7604
7604
  };
7605
7605
 
7606
- const vars$u = {
7606
+ const vars$v = {
7607
7607
  ...compVars$4,
7608
7608
  ...helperVars$3,
7609
7609
  };
@@ -7611,25 +7611,25 @@ const vars$u = {
7611
7611
  var button$1 = /*#__PURE__*/Object.freeze({
7612
7612
  __proto__: null,
7613
7613
  default: button,
7614
- vars: vars$u
7614
+ vars: vars$v
7615
7615
  });
7616
7616
 
7617
- const componentName$3 = getComponentName('input-wrapper');
7618
- const globalRefs$g = getThemeRefs(globals);
7617
+ const componentName$4 = getComponentName('input-wrapper');
7618
+ const globalRefs$h = getThemeRefs(globals);
7619
7619
 
7620
- const [theme$1, refs, vars$t] = createHelperVars(
7620
+ const [theme$1, refs, vars$u] = createHelperVars(
7621
7621
  {
7622
- labelTextColor: globalRefs$g.colors.surface.contrast,
7623
- valueTextColor: globalRefs$g.colors.surface.contrast,
7624
- placeholderTextColor: globalRefs$g.colors.surface.main,
7622
+ labelTextColor: globalRefs$h.colors.surface.contrast,
7623
+ valueTextColor: globalRefs$h.colors.surface.contrast,
7624
+ placeholderTextColor: globalRefs$h.colors.surface.main,
7625
7625
  requiredIndicator: "'*'",
7626
- errorMessageTextColor: globalRefs$g.colors.error.main,
7626
+ errorMessageTextColor: globalRefs$h.colors.error.main,
7627
7627
 
7628
- borderWidth: globalRefs$g.border.xs,
7629
- borderRadius: globalRefs$g.radius.xs,
7628
+ borderWidth: globalRefs$h.border.xs,
7629
+ borderRadius: globalRefs$h.radius.xs,
7630
7630
  borderColor: 'transparent',
7631
7631
 
7632
- outlineWidth: globalRefs$g.border.sm,
7632
+ outlineWidth: globalRefs$h.border.sm,
7633
7633
  outlineStyle: 'solid',
7634
7634
  outlineColor: 'transparent',
7635
7635
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -7640,17 +7640,17 @@ const [theme$1, refs, vars$t] = createHelperVars(
7640
7640
  horizontalPadding: '0.5em',
7641
7641
  verticalPadding: '0.5em',
7642
7642
 
7643
- backgroundColor: globalRefs$g.colors.surface.light,
7643
+ backgroundColor: globalRefs$h.colors.surface.light,
7644
7644
 
7645
- fontFamily: globalRefs$g.fonts.font1.family,
7645
+ fontFamily: globalRefs$h.fonts.font1.family,
7646
7646
 
7647
- direction: globalRefs$g.direction,
7647
+ direction: globalRefs$h.direction,
7648
7648
 
7649
7649
  size: {
7650
- xs: { fontSize: '12px' },
7651
- sm: { fontSize: '14px' },
7652
- md: { fontSize: '16px' },
7653
- lg: { fontSize: '18px' },
7650
+ xs: { fontSize: '12px', chipFontSize: '10px' },
7651
+ sm: { fontSize: '14px', chipFontSize: '12px' },
7652
+ md: { fontSize: '16px', chipFontSize: '14px' },
7653
+ lg: { fontSize: '18px', chipFontSize: '16px' },
7654
7654
  },
7655
7655
 
7656
7656
  _fullWidth: {
@@ -7658,88 +7658,118 @@ const [theme$1, refs, vars$t] = createHelperVars(
7658
7658
  },
7659
7659
 
7660
7660
  _focused: {
7661
- outlineColor: globalRefs$g.colors.surface.main,
7661
+ outlineColor: globalRefs$h.colors.surface.main,
7662
7662
  _invalid: {
7663
- outlineColor: globalRefs$g.colors.error.main,
7663
+ outlineColor: globalRefs$h.colors.error.main,
7664
7664
  },
7665
7665
  },
7666
7666
 
7667
7667
  _bordered: {
7668
- outlineWidth: globalRefs$g.border.xs,
7669
- borderColor: globalRefs$g.colors.surface.main,
7668
+ outlineWidth: globalRefs$h.border.xs,
7669
+ borderColor: globalRefs$h.colors.surface.main,
7670
7670
  borderStyle: 'solid',
7671
7671
  _invalid: {
7672
- borderColor: globalRefs$g.colors.error.main,
7672
+ borderColor: globalRefs$h.colors.error.main,
7673
7673
  },
7674
7674
  },
7675
7675
 
7676
7676
  _disabled: {
7677
- labelTextColor: globalRefs$g.colors.surface.main,
7678
- borderColor: globalRefs$g.colors.surface.main,
7679
- valueTextColor: globalRefs$g.colors.surface.dark,
7680
- placeholderTextColor: globalRefs$g.colors.surface.dark,
7681
- backgroundColor: globalRefs$g.colors.surface.main,
7677
+ labelTextColor: globalRefs$h.colors.surface.main,
7678
+ borderColor: globalRefs$h.colors.surface.main,
7679
+ valueTextColor: globalRefs$h.colors.surface.dark,
7680
+ placeholderTextColor: globalRefs$h.colors.surface.dark,
7681
+ backgroundColor: globalRefs$h.colors.surface.main,
7682
7682
  },
7683
7683
  },
7684
- componentName$3
7684
+ componentName$4
7685
7685
  );
7686
7686
 
7687
7687
  var inputWrapper = /*#__PURE__*/Object.freeze({
7688
7688
  __proto__: null,
7689
7689
  default: theme$1,
7690
7690
  refs: refs,
7691
- vars: vars$t
7691
+ vars: vars$u
7692
7692
  });
7693
7693
 
7694
- const vars$s = TextFieldClass.cssVarList;
7694
+ const vars$t = TextFieldClass.cssVarList;
7695
7695
 
7696
7696
  const textField = {
7697
- [vars$s.hostWidth]: refs.width,
7698
- [vars$s.hostMinWidth]: refs.minWidth,
7699
- [vars$s.hostDirection]: refs.direction,
7700
- [vars$s.fontSize]: refs.fontSize,
7701
- [vars$s.fontFamily]: refs.fontFamily,
7702
- [vars$s.labelTextColor]: refs.labelTextColor,
7703
- [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
7704
- [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
7705
- [vars$s.inputValueTextColor]: refs.valueTextColor,
7706
- [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
7707
- [vars$s.inputBorderWidth]: refs.borderWidth,
7708
- [vars$s.inputBorderStyle]: refs.borderStyle,
7697
+ [vars$t.hostWidth]: refs.width,
7698
+ [vars$t.hostMinWidth]: refs.minWidth,
7699
+ [vars$t.hostDirection]: refs.direction,
7700
+ [vars$t.fontSize]: refs.fontSize,
7701
+ [vars$t.fontFamily]: refs.fontFamily,
7702
+ [vars$t.labelTextColor]: refs.labelTextColor,
7703
+ [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
7704
+ [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
7705
+ [vars$t.inputValueTextColor]: refs.valueTextColor,
7706
+ [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
7707
+ [vars$t.inputBorderWidth]: refs.borderWidth,
7708
+ [vars$t.inputBorderStyle]: refs.borderStyle,
7709
+ [vars$t.inputBorderColor]: refs.borderColor,
7710
+ [vars$t.inputBorderRadius]: refs.borderRadius,
7711
+ [vars$t.inputOutlineWidth]: refs.outlineWidth,
7712
+ [vars$t.inputOutlineStyle]: refs.outlineStyle,
7713
+ [vars$t.inputOutlineColor]: refs.outlineColor,
7714
+ [vars$t.inputOutlineOffset]: refs.outlineOffset,
7715
+ [vars$t.inputBackgroundColor]: refs.backgroundColor,
7716
+ [vars$t.inputHeight]: refs.inputHeight,
7717
+ [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
7718
+ };
7719
+
7720
+ var textField$1 = /*#__PURE__*/Object.freeze({
7721
+ __proto__: null,
7722
+ default: textField,
7723
+ textField: textField,
7724
+ vars: vars$t
7725
+ });
7726
+
7727
+ const globalRefs$g = getThemeRefs(globals);
7728
+ const vars$s = PasswordClass.cssVarList;
7729
+
7730
+ const password = {
7731
+ [vars$s.hostWidth]: refs.width,
7732
+ [vars$s.hostDirection]: refs.direction,
7733
+ [vars$s.fontSize]: refs.fontSize,
7734
+ [vars$s.fontFamily]: refs.fontFamily,
7735
+ [vars$s.labelTextColor]: refs.labelTextColor,
7736
+ [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
7737
+ [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
7738
+ [vars$s.inputHeight]: refs.inputHeight,
7739
+ [vars$s.inputBackgroundColor]: refs.backgroundColor,
7740
+ [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
7741
+ [vars$s.inputValueTextColor]: refs.valueTextColor,
7742
+ [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
7743
+ [vars$s.inputBorderWidth]: refs.borderWidth,
7744
+ [vars$s.inputBorderStyle]: refs.borderStyle,
7709
7745
  [vars$s.inputBorderColor]: refs.borderColor,
7710
7746
  [vars$s.inputBorderRadius]: refs.borderRadius,
7711
7747
  [vars$s.inputOutlineWidth]: refs.outlineWidth,
7712
7748
  [vars$s.inputOutlineStyle]: refs.outlineStyle,
7713
7749
  [vars$s.inputOutlineColor]: refs.outlineColor,
7714
7750
  [vars$s.inputOutlineOffset]: refs.outlineOffset,
7715
- [vars$s.inputBackgroundColor]: refs.backgroundColor,
7716
- [vars$s.inputHeight]: refs.inputHeight,
7717
- [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
7751
+ [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
7752
+ [vars$s.revealButtonSize]: refs.toggleButtonSize,
7718
7753
  };
7719
7754
 
7720
- var textField$1 = /*#__PURE__*/Object.freeze({
7755
+ var password$1 = /*#__PURE__*/Object.freeze({
7721
7756
  __proto__: null,
7722
- default: textField,
7723
- textField: textField,
7757
+ default: password,
7724
7758
  vars: vars$s
7725
7759
  });
7726
7760
 
7727
- const globalRefs$f = getThemeRefs(globals);
7728
- const vars$r = PasswordClass.cssVarList;
7761
+ const vars$r = NumberFieldClass.cssVarList;
7729
7762
 
7730
- const password = {
7763
+ const numberField = {
7731
7764
  [vars$r.hostWidth]: refs.width,
7765
+ [vars$r.hostMinWidth]: refs.minWidth,
7732
7766
  [vars$r.hostDirection]: refs.direction,
7733
7767
  [vars$r.fontSize]: refs.fontSize,
7734
7768
  [vars$r.fontFamily]: refs.fontFamily,
7735
7769
  [vars$r.labelTextColor]: refs.labelTextColor,
7736
7770
  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
7737
- [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
7738
- [vars$r.inputHeight]: refs.inputHeight,
7739
- [vars$r.inputBackgroundColor]: refs.backgroundColor,
7740
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
7741
7771
  [vars$r.inputValueTextColor]: refs.valueTextColor,
7742
- [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
7772
+ [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
7743
7773
  [vars$r.inputBorderWidth]: refs.borderWidth,
7744
7774
  [vars$r.inputBorderStyle]: refs.borderStyle,
7745
7775
  [vars$r.inputBorderColor]: refs.borderColor,
@@ -7748,19 +7778,21 @@ const password = {
7748
7778
  [vars$r.inputOutlineStyle]: refs.outlineStyle,
7749
7779
  [vars$r.inputOutlineColor]: refs.outlineColor,
7750
7780
  [vars$r.inputOutlineOffset]: refs.outlineOffset,
7751
- [vars$r.revealButtonOffset]: globalRefs$f.spacing.md,
7752
- [vars$r.revealButtonSize]: refs.toggleButtonSize,
7781
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
7782
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
7783
+ [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
7784
+ [vars$r.inputHeight]: refs.inputHeight,
7753
7785
  };
7754
7786
 
7755
- var password$1 = /*#__PURE__*/Object.freeze({
7787
+ var numberField$1 = /*#__PURE__*/Object.freeze({
7756
7788
  __proto__: null,
7757
- default: password,
7789
+ default: numberField,
7758
7790
  vars: vars$r
7759
7791
  });
7760
7792
 
7761
- const vars$q = NumberFieldClass.cssVarList;
7793
+ const vars$q = EmailFieldClass.cssVarList;
7762
7794
 
7763
- const numberField = {
7795
+ const emailField = {
7764
7796
  [vars$q.hostWidth]: refs.width,
7765
7797
  [vars$q.hostMinWidth]: refs.minWidth,
7766
7798
  [vars$q.hostDirection]: refs.direction,
@@ -7769,6 +7801,7 @@ const numberField = {
7769
7801
  [vars$q.labelTextColor]: refs.labelTextColor,
7770
7802
  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
7771
7803
  [vars$q.inputValueTextColor]: refs.valueTextColor,
7804
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
7772
7805
  [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
7773
7806
  [vars$q.inputBorderWidth]: refs.borderWidth,
7774
7807
  [vars$q.inputBorderStyle]: refs.borderStyle,
@@ -7779,201 +7812,168 @@ const numberField = {
7779
7812
  [vars$q.inputOutlineColor]: refs.outlineColor,
7780
7813
  [vars$q.inputOutlineOffset]: refs.outlineOffset,
7781
7814
  [vars$q.inputBackgroundColor]: refs.backgroundColor,
7782
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
7783
7815
  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
7784
7816
  [vars$q.inputHeight]: refs.inputHeight,
7785
7817
  };
7786
7818
 
7787
- var numberField$1 = /*#__PURE__*/Object.freeze({
7819
+ var emailField$1 = /*#__PURE__*/Object.freeze({
7788
7820
  __proto__: null,
7789
- default: numberField,
7821
+ default: emailField,
7790
7822
  vars: vars$q
7791
7823
  });
7792
7824
 
7793
- const vars$p = EmailFieldClass.cssVarList;
7825
+ const globalRefs$f = getThemeRefs(globals);
7826
+ const vars$p = TextAreaClass.cssVarList;
7794
7827
 
7795
- const emailField = {
7828
+ const textArea = {
7796
7829
  [vars$p.hostWidth]: refs.width,
7797
7830
  [vars$p.hostMinWidth]: refs.minWidth,
7798
7831
  [vars$p.hostDirection]: refs.direction,
7799
7832
  [vars$p.fontSize]: refs.fontSize,
7800
7833
  [vars$p.fontFamily]: refs.fontFamily,
7801
7834
  [vars$p.labelTextColor]: refs.labelTextColor,
7835
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
7802
7836
  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
7837
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
7803
7838
  [vars$p.inputValueTextColor]: refs.valueTextColor,
7804
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
7805
- [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
7839
+ [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
7840
+ [vars$p.inputBorderRadius]: refs.borderRadius,
7806
7841
  [vars$p.inputBorderWidth]: refs.borderWidth,
7807
7842
  [vars$p.inputBorderStyle]: refs.borderStyle,
7808
7843
  [vars$p.inputBorderColor]: refs.borderColor,
7809
- [vars$p.inputBorderRadius]: refs.borderRadius,
7810
7844
  [vars$p.inputOutlineWidth]: refs.outlineWidth,
7811
7845
  [vars$p.inputOutlineStyle]: refs.outlineStyle,
7812
7846
  [vars$p.inputOutlineColor]: refs.outlineColor,
7813
7847
  [vars$p.inputOutlineOffset]: refs.outlineOffset,
7814
- [vars$p.inputBackgroundColor]: refs.backgroundColor,
7815
- [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
7816
- [vars$p.inputHeight]: refs.inputHeight,
7848
+ [vars$p.inputResizeType]: 'vertical',
7849
+ [vars$p.inputMinHeight]: '5em',
7850
+
7851
+ _disabled: {
7852
+ [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
7853
+ },
7854
+
7855
+ _readonly: {
7856
+ [vars$p.inputResizeType]: 'none',
7857
+ },
7817
7858
  };
7818
7859
 
7819
- var emailField$1 = /*#__PURE__*/Object.freeze({
7860
+ var textArea$1 = /*#__PURE__*/Object.freeze({
7820
7861
  __proto__: null,
7821
- default: emailField,
7862
+ default: textArea,
7822
7863
  vars: vars$p
7823
7864
  });
7824
7865
 
7825
- const globalRefs$e = getThemeRefs(globals);
7826
- const vars$o = TextAreaClass.cssVarList;
7866
+ const vars$o = CheckboxClass.cssVarList;
7867
+ const checkboxSize = '1.35em';
7827
7868
 
7828
- const textArea = {
7869
+ const checkbox = {
7829
7870
  [vars$o.hostWidth]: refs.width,
7830
- [vars$o.hostMinWidth]: refs.minWidth,
7831
7871
  [vars$o.hostDirection]: refs.direction,
7832
7872
  [vars$o.fontSize]: refs.fontSize,
7833
7873
  [vars$o.fontFamily]: refs.fontFamily,
7834
7874
  [vars$o.labelTextColor]: refs.labelTextColor,
7835
7875
  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
7876
+ [vars$o.labelFontWeight]: '400',
7877
+ [vars$o.labelLineHeight]: checkboxSize,
7878
+ [vars$o.labelSpacing]: '1em',
7836
7879
  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
7837
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
7838
- [vars$o.inputValueTextColor]: refs.valueTextColor,
7839
- [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
7880
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
7881
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
7882
+ [vars$o.inputOutlineColor]: refs.outlineColor,
7883
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
7840
7884
  [vars$o.inputBorderRadius]: refs.borderRadius,
7885
+ [vars$o.inputBorderColor]: refs.borderColor,
7841
7886
  [vars$o.inputBorderWidth]: refs.borderWidth,
7842
7887
  [vars$o.inputBorderStyle]: refs.borderStyle,
7843
- [vars$o.inputBorderColor]: refs.borderColor,
7844
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
7845
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
7846
- [vars$o.inputOutlineColor]: refs.outlineColor,
7847
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
7848
- [vars$o.inputResizeType]: 'vertical',
7849
- [vars$o.inputMinHeight]: '5em',
7888
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
7889
+ [vars$o.inputSize]: checkboxSize,
7850
7890
 
7851
- _disabled: {
7852
- [vars$o.inputBackgroundColor]: globalRefs$e.colors.surface.light,
7891
+ _checked: {
7892
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
7853
7893
  },
7854
7894
 
7855
- _readonly: {
7856
- [vars$o.inputResizeType]: 'none',
7895
+ _disabled: {
7896
+ [vars$o.labelTextColor]: refs.labelTextColor,
7857
7897
  },
7858
7898
  };
7859
7899
 
7860
- var textArea$1 = /*#__PURE__*/Object.freeze({
7900
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
7861
7901
  __proto__: null,
7862
- default: textArea,
7902
+ default: checkbox,
7863
7903
  vars: vars$o
7864
7904
  });
7865
7905
 
7866
- const vars$n = CheckboxClass.cssVarList;
7867
- const checkboxSize = '1.35em';
7906
+ const knobMargin = '2px';
7907
+ const checkboxHeight = '1.25em';
7868
7908
 
7869
- const checkbox = {
7909
+ const globalRefs$e = getThemeRefs(globals);
7910
+ const vars$n = SwitchToggleClass.cssVarList;
7911
+
7912
+ const switchToggle = {
7870
7913
  [vars$n.hostWidth]: refs.width,
7871
7914
  [vars$n.hostDirection]: refs.direction,
7872
7915
  [vars$n.fontSize]: refs.fontSize,
7873
7916
  [vars$n.fontFamily]: refs.fontFamily,
7874
- [vars$n.labelTextColor]: refs.labelTextColor,
7875
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7876
- [vars$n.labelFontWeight]: '400',
7877
- [vars$n.labelLineHeight]: checkboxSize,
7878
- [vars$n.labelSpacing]: '1em',
7879
- [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
7917
+
7880
7918
  [vars$n.inputOutlineWidth]: refs.outlineWidth,
7881
7919
  [vars$n.inputOutlineOffset]: refs.outlineOffset,
7882
7920
  [vars$n.inputOutlineColor]: refs.outlineColor,
7883
7921
  [vars$n.inputOutlineStyle]: refs.outlineStyle,
7884
- [vars$n.inputBorderRadius]: refs.borderRadius,
7885
- [vars$n.inputBorderColor]: refs.borderColor,
7886
- [vars$n.inputBorderWidth]: refs.borderWidth,
7887
- [vars$n.inputBorderStyle]: refs.borderStyle,
7888
- [vars$n.inputBackgroundColor]: refs.backgroundColor,
7889
- [vars$n.inputSize]: checkboxSize,
7890
-
7891
- _checked: {
7892
- [vars$n.inputValueTextColor]: refs.valueTextColor,
7893
- },
7894
-
7895
- _disabled: {
7896
- [vars$n.labelTextColor]: refs.labelTextColor,
7897
- },
7898
- };
7899
-
7900
- var checkbox$1 = /*#__PURE__*/Object.freeze({
7901
- __proto__: null,
7902
- default: checkbox,
7903
- vars: vars$n
7904
- });
7905
-
7906
- const knobMargin = '2px';
7907
- const checkboxHeight = '1.25em';
7908
7922
 
7909
- const globalRefs$d = getThemeRefs(globals);
7910
- const vars$m = SwitchToggleClass.cssVarList;
7923
+ [vars$n.trackBorderStyle]: refs.borderStyle,
7924
+ [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7925
+ [vars$n.trackBorderColor]: refs.borderColor,
7926
+ [vars$n.trackBackgroundColor]: 'none',
7927
+ [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
7928
+ [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7929
+ [vars$n.trackHeight]: checkboxHeight,
7930
+
7931
+ [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
7932
+ [vars$n.knobRadius]: '50%',
7933
+ [vars$n.knobTopOffset]: '1px',
7934
+ [vars$n.knobLeftOffset]: knobMargin,
7935
+ [vars$n.knobColor]: refs.valueTextColor,
7936
+ [vars$n.knobTransitionDuration]: '0.3s',
7911
7937
 
7912
- const switchToggle = {
7913
- [vars$m.hostWidth]: refs.width,
7914
- [vars$m.hostDirection]: refs.direction,
7915
- [vars$m.fontSize]: refs.fontSize,
7916
- [vars$m.fontFamily]: refs.fontFamily,
7917
-
7918
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
7919
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
7920
- [vars$m.inputOutlineColor]: refs.outlineColor,
7921
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
7922
-
7923
- [vars$m.trackBorderStyle]: refs.borderStyle,
7924
- [vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7925
- [vars$m.trackBorderColor]: refs.borderColor,
7926
- [vars$m.trackBackgroundColor]: 'none',
7927
- [vars$m.trackBorderRadius]: globalRefs$d.radius.md,
7928
- [vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7929
- [vars$m.trackHeight]: checkboxHeight,
7930
-
7931
- [vars$m.knobSize]: `calc(1em - ${knobMargin})`,
7932
- [vars$m.knobRadius]: '50%',
7933
- [vars$m.knobTopOffset]: '1px',
7934
- [vars$m.knobLeftOffset]: knobMargin,
7935
- [vars$m.knobColor]: refs.valueTextColor,
7936
- [vars$m.knobTransitionDuration]: '0.3s',
7937
-
7938
- [vars$m.labelTextColor]: refs.labelTextColor,
7939
- [vars$m.labelFontWeight]: '400',
7940
- [vars$m.labelLineHeight]: '1.35em',
7941
- [vars$m.labelSpacing]: '1em',
7942
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
7943
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
7938
+ [vars$n.labelTextColor]: refs.labelTextColor,
7939
+ [vars$n.labelFontWeight]: '400',
7940
+ [vars$n.labelLineHeight]: '1.35em',
7941
+ [vars$n.labelSpacing]: '1em',
7942
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7943
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
7944
7944
 
7945
7945
  _checked: {
7946
- [vars$m.trackBorderColor]: refs.borderColor,
7947
- [vars$m.trackBackgroundColor]: refs.backgroundColor,
7948
- [vars$m.knobLeftOffset]: `calc(100% - var(${vars$m.knobSize}) - ${knobMargin})`,
7949
- [vars$m.knobColor]: refs.valueTextColor,
7950
- [vars$m.knobTextColor]: refs.valueTextColor,
7946
+ [vars$n.trackBorderColor]: refs.borderColor,
7947
+ [vars$n.trackBackgroundColor]: refs.backgroundColor,
7948
+ [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
7949
+ [vars$n.knobColor]: refs.valueTextColor,
7950
+ [vars$n.knobTextColor]: refs.valueTextColor,
7951
7951
  },
7952
7952
 
7953
7953
  _disabled: {
7954
- [vars$m.knobColor]: globalRefs$d.colors.surface.light,
7955
- [vars$m.trackBorderColor]: globalRefs$d.colors.surface.main,
7956
- [vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
7957
- [vars$m.labelTextColor]: refs.labelTextColor,
7954
+ [vars$n.knobColor]: globalRefs$e.colors.surface.light,
7955
+ [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
7956
+ [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
7957
+ [vars$n.labelTextColor]: refs.labelTextColor,
7958
7958
  _checked: {
7959
- [vars$m.knobColor]: globalRefs$d.colors.surface.light,
7960
- [vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
7959
+ [vars$n.knobColor]: globalRefs$e.colors.surface.light,
7960
+ [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
7961
7961
  },
7962
7962
  },
7963
7963
 
7964
7964
  _invalid: {
7965
- [vars$m.trackBorderColor]: globalRefs$d.colors.error.main,
7966
- [vars$m.knobColor]: globalRefs$d.colors.error.main,
7965
+ [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
7966
+ [vars$n.knobColor]: globalRefs$e.colors.error.main,
7967
7967
  },
7968
7968
  };
7969
7969
 
7970
7970
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
7971
7971
  __proto__: null,
7972
7972
  default: switchToggle,
7973
- vars: vars$m
7973
+ vars: vars$n
7974
7974
  });
7975
7975
 
7976
- const globalRefs$c = getThemeRefs(globals);
7976
+ const globalRefs$d = getThemeRefs(globals);
7977
7977
 
7978
7978
  const compVars$3 = ContainerClass.cssVarList;
7979
7979
 
@@ -7995,7 +7995,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
7995
7995
  horizontalAlignment,
7996
7996
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
7997
7997
  },
7998
- componentName$x
7998
+ componentName$y
7999
7999
  );
8000
8000
 
8001
8001
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -8005,8 +8005,8 @@ const container = {
8005
8005
 
8006
8006
  [compVars$3.hostWidth]: '100%',
8007
8007
  [compVars$3.boxShadow]: 'none',
8008
- [compVars$3.backgroundColor]: globalRefs$c.colors.surface.light,
8009
- [compVars$3.color]: globalRefs$c.colors.surface.contrast,
8008
+ [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
8009
+ [compVars$3.color]: globalRefs$d.colors.surface.contrast,
8010
8010
  [compVars$3.borderRadius]: '0px',
8011
8011
 
8012
8012
  verticalPadding: {
@@ -8053,34 +8053,34 @@ const container = {
8053
8053
 
8054
8054
  shadow: {
8055
8055
  sm: {
8056
- [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.sm} ${shadowColor$1}`,
8056
+ [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
8057
8057
  },
8058
8058
  md: {
8059
- [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.md} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.md} ${shadowColor$1}`,
8059
+ [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
8060
8060
  },
8061
8061
  lg: {
8062
- [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.lg} ${shadowColor$1}`,
8062
+ [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
8063
8063
  },
8064
8064
  xl: {
8065
- [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.xl} ${shadowColor$1}`,
8065
+ [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
8066
8066
  },
8067
8067
  '2xl': {
8068
8068
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
8069
- [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide['2xl']} ${shadowColor$1}`,
8069
+ [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
8070
8070
  },
8071
8071
  },
8072
8072
 
8073
8073
  borderRadius: {
8074
- sm: { [compVars$3.borderRadius]: globalRefs$c.radius.sm },
8075
- md: { [compVars$3.borderRadius]: globalRefs$c.radius.md },
8076
- lg: { [compVars$3.borderRadius]: globalRefs$c.radius.lg },
8077
- xl: { [compVars$3.borderRadius]: globalRefs$c.radius.xl },
8078
- '2xl': { [compVars$3.borderRadius]: globalRefs$c.radius['2xl'] },
8079
- '3xl': { [compVars$3.borderRadius]: globalRefs$c.radius['3xl'] },
8074
+ sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
8075
+ md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
8076
+ lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
8077
+ xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
8078
+ '2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
8079
+ '3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
8080
8080
  },
8081
8081
  };
8082
8082
 
8083
- const vars$l = {
8083
+ const vars$m = {
8084
8084
  ...compVars$3,
8085
8085
  ...helperVars$2,
8086
8086
  };
@@ -8088,154 +8088,154 @@ const vars$l = {
8088
8088
  var container$1 = /*#__PURE__*/Object.freeze({
8089
8089
  __proto__: null,
8090
8090
  default: container,
8091
- vars: vars$l
8091
+ vars: vars$m
8092
8092
  });
8093
8093
 
8094
- const vars$k = LogoClass.cssVarList;
8094
+ const vars$l = LogoClass.cssVarList;
8095
8095
 
8096
8096
  const logo$1 = {
8097
- [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
8097
+ [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
8098
8098
  };
8099
8099
 
8100
8100
  var logo$2 = /*#__PURE__*/Object.freeze({
8101
8101
  __proto__: null,
8102
8102
  default: logo$1,
8103
- vars: vars$k
8103
+ vars: vars$l
8104
8104
  });
8105
8105
 
8106
- const vars$j = TotpImageClass.cssVarList;
8106
+ const vars$k = TotpImageClass.cssVarList;
8107
8107
 
8108
8108
  const logo = {
8109
- [vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
8109
+ [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
8110
8110
  };
8111
8111
 
8112
8112
  var totpImage = /*#__PURE__*/Object.freeze({
8113
8113
  __proto__: null,
8114
8114
  default: logo,
8115
- vars: vars$j
8115
+ vars: vars$k
8116
8116
  });
8117
8117
 
8118
- const globalRefs$b = getThemeRefs(globals);
8119
- const vars$i = TextClass.cssVarList;
8118
+ const globalRefs$c = getThemeRefs(globals);
8119
+ const vars$j = TextClass.cssVarList;
8120
8120
 
8121
8121
  const text = {
8122
- [vars$i.hostDirection]: globalRefs$b.direction,
8123
- [vars$i.textLineHeight]: '1.35em',
8124
- [vars$i.textAlign]: 'left',
8125
- [vars$i.textColor]: globalRefs$b.colors.surface.dark,
8122
+ [vars$j.hostDirection]: globalRefs$c.direction,
8123
+ [vars$j.textLineHeight]: '1.35em',
8124
+ [vars$j.textAlign]: 'left',
8125
+ [vars$j.textColor]: globalRefs$c.colors.surface.dark,
8126
8126
  variant: {
8127
8127
  h1: {
8128
- [vars$i.fontSize]: globalRefs$b.typography.h1.size,
8129
- [vars$i.fontWeight]: globalRefs$b.typography.h1.weight,
8130
- [vars$i.fontFamily]: globalRefs$b.typography.h1.font,
8128
+ [vars$j.fontSize]: globalRefs$c.typography.h1.size,
8129
+ [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
8130
+ [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
8131
8131
  },
8132
8132
  h2: {
8133
- [vars$i.fontSize]: globalRefs$b.typography.h2.size,
8134
- [vars$i.fontWeight]: globalRefs$b.typography.h2.weight,
8135
- [vars$i.fontFamily]: globalRefs$b.typography.h2.font,
8133
+ [vars$j.fontSize]: globalRefs$c.typography.h2.size,
8134
+ [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
8135
+ [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
8136
8136
  },
8137
8137
  h3: {
8138
- [vars$i.fontSize]: globalRefs$b.typography.h3.size,
8139
- [vars$i.fontWeight]: globalRefs$b.typography.h3.weight,
8140
- [vars$i.fontFamily]: globalRefs$b.typography.h3.font,
8138
+ [vars$j.fontSize]: globalRefs$c.typography.h3.size,
8139
+ [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
8140
+ [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
8141
8141
  },
8142
8142
  subtitle1: {
8143
- [vars$i.fontSize]: globalRefs$b.typography.subtitle1.size,
8144
- [vars$i.fontWeight]: globalRefs$b.typography.subtitle1.weight,
8145
- [vars$i.fontFamily]: globalRefs$b.typography.subtitle1.font,
8143
+ [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
8144
+ [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
8145
+ [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
8146
8146
  },
8147
8147
  subtitle2: {
8148
- [vars$i.fontSize]: globalRefs$b.typography.subtitle2.size,
8149
- [vars$i.fontWeight]: globalRefs$b.typography.subtitle2.weight,
8150
- [vars$i.fontFamily]: globalRefs$b.typography.subtitle2.font,
8148
+ [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
8149
+ [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
8150
+ [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
8151
8151
  },
8152
8152
  body1: {
8153
- [vars$i.fontSize]: globalRefs$b.typography.body1.size,
8154
- [vars$i.fontWeight]: globalRefs$b.typography.body1.weight,
8155
- [vars$i.fontFamily]: globalRefs$b.typography.body1.font,
8153
+ [vars$j.fontSize]: globalRefs$c.typography.body1.size,
8154
+ [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
8155
+ [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
8156
8156
  },
8157
8157
  body2: {
8158
- [vars$i.fontSize]: globalRefs$b.typography.body2.size,
8159
- [vars$i.fontWeight]: globalRefs$b.typography.body2.weight,
8160
- [vars$i.fontFamily]: globalRefs$b.typography.body2.font,
8158
+ [vars$j.fontSize]: globalRefs$c.typography.body2.size,
8159
+ [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
8160
+ [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
8161
8161
  },
8162
8162
  },
8163
8163
 
8164
8164
  mode: {
8165
8165
  primary: {
8166
- [vars$i.textColor]: globalRefs$b.colors.primary.main,
8166
+ [vars$j.textColor]: globalRefs$c.colors.primary.main,
8167
8167
  },
8168
8168
  secondary: {
8169
- [vars$i.textColor]: globalRefs$b.colors.secondary.main,
8169
+ [vars$j.textColor]: globalRefs$c.colors.secondary.main,
8170
8170
  },
8171
8171
  error: {
8172
- [vars$i.textColor]: globalRefs$b.colors.error.main,
8172
+ [vars$j.textColor]: globalRefs$c.colors.error.main,
8173
8173
  },
8174
8174
  success: {
8175
- [vars$i.textColor]: globalRefs$b.colors.success.main,
8175
+ [vars$j.textColor]: globalRefs$c.colors.success.main,
8176
8176
  },
8177
8177
  },
8178
8178
 
8179
8179
  textAlign: {
8180
- right: { [vars$i.textAlign]: 'right' },
8181
- left: { [vars$i.textAlign]: 'left' },
8182
- center: { [vars$i.textAlign]: 'center' },
8180
+ right: { [vars$j.textAlign]: 'right' },
8181
+ left: { [vars$j.textAlign]: 'left' },
8182
+ center: { [vars$j.textAlign]: 'center' },
8183
8183
  },
8184
8184
 
8185
8185
  _fullWidth: {
8186
- [vars$i.hostWidth]: '100%',
8186
+ [vars$j.hostWidth]: '100%',
8187
8187
  },
8188
8188
 
8189
8189
  _italic: {
8190
- [vars$i.fontStyle]: 'italic',
8190
+ [vars$j.fontStyle]: 'italic',
8191
8191
  },
8192
8192
 
8193
8193
  _uppercase: {
8194
- [vars$i.textTransform]: 'uppercase',
8194
+ [vars$j.textTransform]: 'uppercase',
8195
8195
  },
8196
8196
 
8197
8197
  _lowercase: {
8198
- [vars$i.textTransform]: 'lowercase',
8198
+ [vars$j.textTransform]: 'lowercase',
8199
8199
  },
8200
8200
  };
8201
8201
 
8202
8202
  var text$1 = /*#__PURE__*/Object.freeze({
8203
8203
  __proto__: null,
8204
8204
  default: text,
8205
- vars: vars$i
8205
+ vars: vars$j
8206
8206
  });
8207
8207
 
8208
- const globalRefs$a = getThemeRefs(globals);
8209
- const vars$h = LinkClass.cssVarList;
8208
+ const globalRefs$b = getThemeRefs(globals);
8209
+ const vars$i = LinkClass.cssVarList;
8210
8210
 
8211
8211
  const link = {
8212
- [vars$h.hostDirection]: globalRefs$a.direction,
8213
- [vars$h.cursor]: 'pointer',
8212
+ [vars$i.hostDirection]: globalRefs$b.direction,
8213
+ [vars$i.cursor]: 'pointer',
8214
8214
 
8215
- [vars$h.textColor]: globalRefs$a.colors.primary.main,
8215
+ [vars$i.textColor]: globalRefs$b.colors.primary.main,
8216
8216
 
8217
8217
  textAlign: {
8218
- right: { [vars$h.textAlign]: 'right' },
8219
- left: { [vars$h.textAlign]: 'left' },
8220
- center: { [vars$h.textAlign]: 'center' },
8218
+ right: { [vars$i.textAlign]: 'right' },
8219
+ left: { [vars$i.textAlign]: 'left' },
8220
+ center: { [vars$i.textAlign]: 'center' },
8221
8221
  },
8222
8222
 
8223
8223
  _fullWidth: {
8224
- [vars$h.hostWidth]: '100%',
8224
+ [vars$i.hostWidth]: '100%',
8225
8225
  },
8226
8226
 
8227
8227
  mode: {
8228
8228
  primary: {
8229
- [vars$h.textColor]: globalRefs$a.colors.primary.main,
8229
+ [vars$i.textColor]: globalRefs$b.colors.primary.main,
8230
8230
  },
8231
8231
  secondary: {
8232
- [vars$h.textColor]: globalRefs$a.colors.secondary.main,
8232
+ [vars$i.textColor]: globalRefs$b.colors.secondary.main,
8233
8233
  },
8234
8234
  error: {
8235
- [vars$h.textColor]: globalRefs$a.colors.error.main,
8235
+ [vars$i.textColor]: globalRefs$b.colors.error.main,
8236
8236
  },
8237
8237
  success: {
8238
- [vars$h.textColor]: globalRefs$a.colors.success.main,
8238
+ [vars$i.textColor]: globalRefs$b.colors.success.main,
8239
8239
  },
8240
8240
  },
8241
8241
  };
@@ -8243,10 +8243,10 @@ const link = {
8243
8243
  var link$1 = /*#__PURE__*/Object.freeze({
8244
8244
  __proto__: null,
8245
8245
  default: link,
8246
- vars: vars$h
8246
+ vars: vars$i
8247
8247
  });
8248
8248
 
8249
- const globalRefs$9 = getThemeRefs(globals);
8249
+ const globalRefs$a = getThemeRefs(globals);
8250
8250
  const compVars$2 = DividerClass.cssVarList;
8251
8251
 
8252
8252
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -8254,18 +8254,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
8254
8254
  thickness: '2px',
8255
8255
  spacing: '10px',
8256
8256
  },
8257
- componentName$v
8257
+ componentName$w
8258
8258
  );
8259
8259
 
8260
8260
  const divider = {
8261
8261
  ...helperTheme$1,
8262
8262
 
8263
- [compVars$2.hostDirection]: globalRefs$9.direction,
8263
+ [compVars$2.hostDirection]: globalRefs$a.direction,
8264
8264
  [compVars$2.alignItems]: 'center',
8265
8265
  [compVars$2.flexDirection]: 'row',
8266
8266
  [compVars$2.alignSelf]: 'stretch',
8267
8267
  [compVars$2.hostWidth]: '100%',
8268
- [compVars$2.stripeColor]: globalRefs$9.colors.surface.main,
8268
+ [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
8269
8269
  [compVars$2.stripeColorOpacity]: '0.5',
8270
8270
  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
8271
8271
  [compVars$2.labelTextWidth]: 'fit-content',
@@ -8285,7 +8285,7 @@ const divider = {
8285
8285
  },
8286
8286
  };
8287
8287
 
8288
- const vars$g = {
8288
+ const vars$h = {
8289
8289
  ...compVars$2,
8290
8290
  ...helperVars$1,
8291
8291
  };
@@ -8293,100 +8293,100 @@ const vars$g = {
8293
8293
  var divider$1 = /*#__PURE__*/Object.freeze({
8294
8294
  __proto__: null,
8295
8295
  default: divider,
8296
- vars: vars$g
8296
+ vars: vars$h
8297
8297
  });
8298
8298
 
8299
- const vars$f = PasscodeClass.cssVarList;
8299
+ const vars$g = PasscodeClass.cssVarList;
8300
8300
 
8301
8301
  const passcode = {
8302
- [vars$f.hostDirection]: refs.direction,
8303
- [vars$f.fontFamily]: refs.fontFamily,
8304
- [vars$f.fontSize]: refs.fontSize,
8305
- [vars$f.labelTextColor]: refs.labelTextColor,
8306
- [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
8307
- [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
8308
- [vars$f.digitValueTextColor]: refs.valueTextColor,
8309
- [vars$f.digitPadding]: '0',
8310
- [vars$f.digitTextAlign]: 'center',
8311
- [vars$f.digitSpacing]: '4px',
8312
- [vars$f.hostWidth]: refs.width,
8313
- [vars$f.digitOutlineColor]: 'transparent',
8314
- [vars$f.digitOutlineWidth]: refs.outlineWidth,
8315
- [vars$f.focusedDigitFieldOutlineColor]: refs.outlineColor,
8316
- [vars$f.digitSize]: refs.inputHeight,
8302
+ [vars$g.hostDirection]: refs.direction,
8303
+ [vars$g.fontFamily]: refs.fontFamily,
8304
+ [vars$g.fontSize]: refs.fontSize,
8305
+ [vars$g.labelTextColor]: refs.labelTextColor,
8306
+ [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
8307
+ [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
8308
+ [vars$g.digitValueTextColor]: refs.valueTextColor,
8309
+ [vars$g.digitPadding]: '0',
8310
+ [vars$g.digitTextAlign]: 'center',
8311
+ [vars$g.digitSpacing]: '4px',
8312
+ [vars$g.hostWidth]: refs.width,
8313
+ [vars$g.digitOutlineColor]: 'transparent',
8314
+ [vars$g.digitOutlineWidth]: refs.outlineWidth,
8315
+ [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
8316
+ [vars$g.digitSize]: refs.inputHeight,
8317
8317
 
8318
8318
  _hideCursor: {
8319
- [vars$f.digitCaretTextColor]: 'transparent',
8319
+ [vars$g.digitCaretTextColor]: 'transparent',
8320
8320
  },
8321
8321
  };
8322
8322
 
8323
8323
  var passcode$1 = /*#__PURE__*/Object.freeze({
8324
8324
  __proto__: null,
8325
8325
  default: passcode,
8326
- vars: vars$f
8326
+ vars: vars$g
8327
8327
  });
8328
8328
 
8329
- const globalRefs$8 = getThemeRefs(globals);
8330
- const vars$e = LoaderLinearClass.cssVarList;
8329
+ const globalRefs$9 = getThemeRefs(globals);
8330
+ const vars$f = LoaderLinearClass.cssVarList;
8331
8331
 
8332
8332
  const loaderLinear = {
8333
- [vars$e.hostDisplay]: 'inline-block',
8334
- [vars$e.hostWidth]: '100%',
8333
+ [vars$f.hostDisplay]: 'inline-block',
8334
+ [vars$f.hostWidth]: '100%',
8335
8335
 
8336
- [vars$e.barColor]: globalRefs$8.colors.surface.contrast,
8337
- [vars$e.barWidth]: '20%',
8336
+ [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
8337
+ [vars$f.barWidth]: '20%',
8338
8338
 
8339
- [vars$e.barBackgroundColor]: globalRefs$8.colors.surface.main,
8340
- [vars$e.barBorderRadius]: '4px',
8339
+ [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
8340
+ [vars$f.barBorderRadius]: '4px',
8341
8341
 
8342
- [vars$e.animationDuration]: '2s',
8343
- [vars$e.animationTimingFunction]: 'linear',
8344
- [vars$e.animationIterationCount]: 'infinite',
8345
- [vars$e.verticalPadding]: '0.25em',
8342
+ [vars$f.animationDuration]: '2s',
8343
+ [vars$f.animationTimingFunction]: 'linear',
8344
+ [vars$f.animationIterationCount]: 'infinite',
8345
+ [vars$f.verticalPadding]: '0.25em',
8346
8346
 
8347
8347
  size: {
8348
- xs: { [vars$e.barHeight]: '2px' },
8349
- sm: { [vars$e.barHeight]: '4px' },
8350
- md: { [vars$e.barHeight]: '6px' },
8351
- lg: { [vars$e.barHeight]: '8px' },
8348
+ xs: { [vars$f.barHeight]: '2px' },
8349
+ sm: { [vars$f.barHeight]: '4px' },
8350
+ md: { [vars$f.barHeight]: '6px' },
8351
+ lg: { [vars$f.barHeight]: '8px' },
8352
8352
  },
8353
8353
 
8354
8354
  mode: {
8355
8355
  primary: {
8356
- [vars$e.barColor]: globalRefs$8.colors.primary.main,
8356
+ [vars$f.barColor]: globalRefs$9.colors.primary.main,
8357
8357
  },
8358
8358
  secondary: {
8359
- [vars$e.barColor]: globalRefs$8.colors.secondary.main,
8359
+ [vars$f.barColor]: globalRefs$9.colors.secondary.main,
8360
8360
  },
8361
8361
  },
8362
8362
 
8363
8363
  _hidden: {
8364
- [vars$e.hostDisplay]: 'none',
8364
+ [vars$f.hostDisplay]: 'none',
8365
8365
  },
8366
8366
  };
8367
8367
 
8368
8368
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
8369
8369
  __proto__: null,
8370
8370
  default: loaderLinear,
8371
- vars: vars$e
8371
+ vars: vars$f
8372
8372
  });
8373
8373
 
8374
- const globalRefs$7 = getThemeRefs(globals);
8374
+ const globalRefs$8 = getThemeRefs(globals);
8375
8375
  const compVars$1 = LoaderRadialClass.cssVarList;
8376
8376
 
8377
8377
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
8378
8378
  {
8379
- spinnerColor: globalRefs$7.colors.surface.contrast,
8379
+ spinnerColor: globalRefs$8.colors.surface.contrast,
8380
8380
  mode: {
8381
8381
  primary: {
8382
- spinnerColor: globalRefs$7.colors.primary.main,
8382
+ spinnerColor: globalRefs$8.colors.primary.main,
8383
8383
  },
8384
8384
  secondary: {
8385
- spinnerColor: globalRefs$7.colors.secondary.main,
8385
+ spinnerColor: globalRefs$8.colors.secondary.main,
8386
8386
  },
8387
8387
  },
8388
8388
  },
8389
- componentName$y
8389
+ componentName$z
8390
8390
  );
8391
8391
 
8392
8392
  const loaderRadial = {
@@ -8415,7 +8415,7 @@ const loaderRadial = {
8415
8415
  [compVars$1.hostDisplay]: 'none',
8416
8416
  },
8417
8417
  };
8418
- const vars$d = {
8418
+ const vars$e = {
8419
8419
  ...compVars$1,
8420
8420
  ...helperVars,
8421
8421
  };
@@ -8423,76 +8423,112 @@ const vars$d = {
8423
8423
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
8424
8424
  __proto__: null,
8425
8425
  default: loaderRadial,
8426
- vars: vars$d
8426
+ vars: vars$e
8427
8427
  });
8428
8428
 
8429
- const globalRefs$6 = getThemeRefs(globals);
8430
- const vars$c = ComboBoxClass.cssVarList;
8429
+ const globalRefs$7 = getThemeRefs(globals);
8430
+ const vars$d = ComboBoxClass.cssVarList;
8431
8431
 
8432
8432
  const comboBox = {
8433
- [vars$c.hostWidth]: refs.width,
8434
- [vars$c.hostDirection]: refs.direction,
8435
- [vars$c.fontSize]: refs.fontSize,
8436
- [vars$c.fontFamily]: refs.fontFamily,
8437
- [vars$c.labelTextColor]: refs.labelTextColor,
8438
- [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
8439
- [vars$c.inputBorderColor]: refs.borderColor,
8440
- [vars$c.inputBorderWidth]: refs.borderWidth,
8441
- [vars$c.inputBorderStyle]: refs.borderStyle,
8442
- [vars$c.inputBorderRadius]: refs.borderRadius,
8443
- [vars$c.inputOutlineColor]: refs.outlineColor,
8444
- [vars$c.inputOutlineOffset]: refs.outlineOffset,
8445
- [vars$c.inputOutlineWidth]: refs.outlineWidth,
8446
- [vars$c.inputOutlineStyle]: refs.outlineStyle,
8447
- [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
8448
- [vars$c.inputValueTextColor]: refs.valueTextColor,
8449
- [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
8450
- [vars$c.inputBackgroundColor]: refs.backgroundColor,
8451
- [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
8452
- [vars$c.inputHeight]: refs.inputHeight,
8453
- [vars$c.inputDropdownButtonColor]: globalRefs$6.colors.surface.contrast,
8454
- [vars$c.inputDropdownButtonCursor]: 'pointer',
8455
- [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
8456
- [vars$c.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
8457
- [vars$c.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
8458
- [vars$c.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
8433
+ [vars$d.hostWidth]: refs.width,
8434
+ [vars$d.hostDirection]: refs.direction,
8435
+ [vars$d.fontSize]: refs.fontSize,
8436
+ [vars$d.fontFamily]: refs.fontFamily,
8437
+ [vars$d.labelTextColor]: refs.labelTextColor,
8438
+ [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
8439
+ [vars$d.inputBorderColor]: refs.borderColor,
8440
+ [vars$d.inputBorderWidth]: refs.borderWidth,
8441
+ [vars$d.inputBorderStyle]: refs.borderStyle,
8442
+ [vars$d.inputBorderRadius]: refs.borderRadius,
8443
+ [vars$d.inputOutlineColor]: refs.outlineColor,
8444
+ [vars$d.inputOutlineOffset]: refs.outlineOffset,
8445
+ [vars$d.inputOutlineWidth]: refs.outlineWidth,
8446
+ [vars$d.inputOutlineStyle]: refs.outlineStyle,
8447
+ [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
8448
+ [vars$d.inputValueTextColor]: refs.valueTextColor,
8449
+ [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
8450
+ [vars$d.inputBackgroundColor]: refs.backgroundColor,
8451
+ [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
8452
+ [vars$d.inputHeight]: refs.inputHeight,
8453
+ [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
8454
+ [vars$d.inputDropdownButtonCursor]: 'pointer',
8455
+ [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
8456
+ [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
8457
+ [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
8458
+ [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
8459
8459
 
8460
8460
  _readonly: {
8461
- [vars$c.inputDropdownButtonCursor]: 'default',
8461
+ [vars$d.inputDropdownButtonCursor]: 'default',
8462
8462
  },
8463
8463
 
8464
8464
  // Overlay theme exposed via the component:
8465
- [vars$c.overlayFontSize]: refs.fontSize,
8466
- [vars$c.overlayFontFamily]: refs.fontFamily,
8467
- [vars$c.overlayCursor]: 'pointer',
8468
- [vars$c.overlayItemBoxShadow]: 'none',
8465
+ [vars$d.overlayFontSize]: refs.fontSize,
8466
+ [vars$d.overlayFontFamily]: refs.fontFamily,
8467
+ [vars$d.overlayCursor]: 'pointer',
8468
+ [vars$d.overlayItemBoxShadow]: 'none',
8469
8469
 
8470
8470
  // Overlay direct theme:
8471
- [vars$c.overlay.minHeight]: '400px',
8472
- [vars$c.overlay.margin]: '0',
8471
+ [vars$d.overlay.minHeight]: '400px',
8472
+ [vars$d.overlay.margin]: '0',
8473
8473
  };
8474
8474
 
8475
8475
  var comboBox$1 = /*#__PURE__*/Object.freeze({
8476
8476
  __proto__: null,
8477
8477
  comboBox: comboBox,
8478
8478
  default: comboBox,
8479
- vars: vars$c
8479
+ vars: vars$d
8480
8480
  });
8481
8481
 
8482
- const vars$b = ImageClass.cssVarList;
8482
+ const vars$c = ImageClass.cssVarList;
8483
8483
 
8484
8484
  const image = {};
8485
8485
 
8486
8486
  var image$1 = /*#__PURE__*/Object.freeze({
8487
8487
  __proto__: null,
8488
8488
  default: image,
8489
- vars: vars$b
8489
+ vars: vars$c
8490
8490
  });
8491
8491
 
8492
- const vars$a = PhoneFieldClass.cssVarList;
8492
+ const vars$b = PhoneFieldClass.cssVarList;
8493
8493
 
8494
8494
  const phoneField = {
8495
- [vars$a.hostWidth]: refs.width,
8495
+ [vars$b.hostWidth]: refs.width,
8496
+ [vars$b.hostDirection]: refs.direction,
8497
+ [vars$b.fontSize]: refs.fontSize,
8498
+ [vars$b.fontFamily]: refs.fontFamily,
8499
+ [vars$b.labelTextColor]: refs.labelTextColor,
8500
+ [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
8501
+ [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
8502
+ [vars$b.inputValueTextColor]: refs.valueTextColor,
8503
+ [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
8504
+ [vars$b.inputBorderStyle]: refs.borderStyle,
8505
+ [vars$b.inputBorderWidth]: refs.borderWidth,
8506
+ [vars$b.inputBorderColor]: refs.borderColor,
8507
+ [vars$b.inputBorderRadius]: refs.borderRadius,
8508
+ [vars$b.inputOutlineStyle]: refs.outlineStyle,
8509
+ [vars$b.inputOutlineWidth]: refs.outlineWidth,
8510
+ [vars$b.inputOutlineColor]: refs.outlineColor,
8511
+ [vars$b.inputOutlineOffset]: refs.outlineOffset,
8512
+ [vars$b.phoneInputWidth]: refs.minWidth,
8513
+ [vars$b.countryCodeInputWidth]: '5em',
8514
+ [vars$b.countryCodeDropdownWidth]: '20em',
8515
+
8516
+ // '@overlay': {
8517
+ // overlayItemBackgroundColor: 'red'
8518
+ // }
8519
+ };
8520
+
8521
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
8522
+ __proto__: null,
8523
+ default: phoneField,
8524
+ vars: vars$b
8525
+ });
8526
+
8527
+ const vars$a = PhoneFieldInputBoxClass.cssVarList;
8528
+
8529
+ const phoneInputBoxField = {
8530
+ [vars$a.hostWidth]: '16em',
8531
+ [vars$a.hostMinWidth]: refs.minWidth,
8496
8532
  [vars$a.hostDirection]: refs.direction,
8497
8533
  [vars$a.fontSize]: refs.fontSize,
8498
8534
  [vars$a.fontFamily]: refs.fontFamily,
@@ -8509,194 +8545,158 @@ const phoneField = {
8509
8545
  [vars$a.inputOutlineWidth]: refs.outlineWidth,
8510
8546
  [vars$a.inputOutlineColor]: refs.outlineColor,
8511
8547
  [vars$a.inputOutlineOffset]: refs.outlineOffset,
8512
- [vars$a.phoneInputWidth]: refs.minWidth,
8513
- [vars$a.countryCodeInputWidth]: '5em',
8514
- [vars$a.countryCodeDropdownWidth]: '20em',
8515
-
8516
- // '@overlay': {
8517
- // overlayItemBackgroundColor: 'red'
8518
- // }
8548
+ _fullWidth: {
8549
+ [vars$a.hostWidth]: refs.width,
8550
+ },
8519
8551
  };
8520
8552
 
8521
- var phoneField$1 = /*#__PURE__*/Object.freeze({
8553
+ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
8522
8554
  __proto__: null,
8523
- default: phoneField,
8555
+ default: phoneInputBoxField,
8524
8556
  vars: vars$a
8525
8557
  });
8526
8558
 
8527
- const vars$9 = PhoneFieldInputBoxClass.cssVarList;
8559
+ const vars$9 = NewPasswordClass.cssVarList;
8528
8560
 
8529
- const phoneInputBoxField = {
8530
- [vars$9.hostWidth]: '16em',
8561
+ const newPassword = {
8562
+ [vars$9.hostWidth]: refs.width,
8531
8563
  [vars$9.hostMinWidth]: refs.minWidth,
8532
8564
  [vars$9.hostDirection]: refs.direction,
8533
8565
  [vars$9.fontSize]: refs.fontSize,
8534
8566
  [vars$9.fontFamily]: refs.fontFamily,
8535
- [vars$9.labelTextColor]: refs.labelTextColor,
8536
- [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
8567
+ [vars$9.spaceBetweenInputs]: '1em',
8537
8568
  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
8538
- [vars$9.inputValueTextColor]: refs.valueTextColor,
8539
- [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
8540
- [vars$9.inputBorderStyle]: refs.borderStyle,
8541
- [vars$9.inputBorderWidth]: refs.borderWidth,
8542
- [vars$9.inputBorderColor]: refs.borderColor,
8543
- [vars$9.inputBorderRadius]: refs.borderRadius,
8544
- [vars$9.inputOutlineStyle]: refs.outlineStyle,
8545
- [vars$9.inputOutlineWidth]: refs.outlineWidth,
8546
- [vars$9.inputOutlineColor]: refs.outlineColor,
8547
- [vars$9.inputOutlineOffset]: refs.outlineOffset,
8548
- _fullWidth: {
8549
- [vars$9.hostWidth]: refs.width,
8550
- },
8551
- };
8552
-
8553
- var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
8554
- __proto__: null,
8555
- default: phoneInputBoxField,
8556
- vars: vars$9
8557
- });
8558
-
8559
- const vars$8 = NewPasswordClass.cssVarList;
8560
-
8561
- const newPassword = {
8562
- [vars$8.hostWidth]: refs.width,
8563
- [vars$8.hostMinWidth]: refs.minWidth,
8564
- [vars$8.hostDirection]: refs.direction,
8565
- [vars$8.fontSize]: refs.fontSize,
8566
- [vars$8.fontFamily]: refs.fontFamily,
8567
- [vars$8.spaceBetweenInputs]: '1em',
8568
- [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
8569
8569
 
8570
8570
  _required: {
8571
8571
  // NewPassword doesn't pass `required` attribute to its Password components.
8572
8572
  // That's why we fake the required indicator on each input.
8573
8573
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8574
- [vars$8.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8574
+ [vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8575
8575
  },
8576
8576
  };
8577
8577
 
8578
8578
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8579
8579
  __proto__: null,
8580
8580
  default: newPassword,
8581
- vars: vars$8
8581
+ vars: vars$9
8582
8582
  });
8583
8583
 
8584
- const vars$7 = UploadFileClass.cssVarList;
8584
+ const vars$8 = UploadFileClass.cssVarList;
8585
8585
 
8586
8586
  const uploadFile = {
8587
- [vars$7.hostDirection]: refs.direction,
8588
- [vars$7.labelTextColor]: refs.labelTextColor,
8589
- [vars$7.fontFamily]: refs.fontFamily,
8587
+ [vars$8.hostDirection]: refs.direction,
8588
+ [vars$8.labelTextColor]: refs.labelTextColor,
8589
+ [vars$8.fontFamily]: refs.fontFamily,
8590
8590
 
8591
- [vars$7.iconSize]: '2em',
8591
+ [vars$8.iconSize]: '2em',
8592
8592
 
8593
- [vars$7.hostPadding]: '0.75em',
8594
- [vars$7.gap]: '0.5em',
8593
+ [vars$8.hostPadding]: '0.75em',
8594
+ [vars$8.gap]: '0.5em',
8595
8595
 
8596
- [vars$7.fontSize]: '16px',
8597
- [vars$7.titleFontWeight]: '500',
8598
- [vars$7.lineHeight]: '1em',
8596
+ [vars$8.fontSize]: '16px',
8597
+ [vars$8.titleFontWeight]: '500',
8598
+ [vars$8.lineHeight]: '1em',
8599
8599
 
8600
- [vars$7.borderWidth]: refs.borderWidth,
8601
- [vars$7.borderColor]: refs.borderColor,
8602
- [vars$7.borderRadius]: refs.borderRadius,
8603
- [vars$7.borderStyle]: 'dashed',
8600
+ [vars$8.borderWidth]: refs.borderWidth,
8601
+ [vars$8.borderColor]: refs.borderColor,
8602
+ [vars$8.borderRadius]: refs.borderRadius,
8603
+ [vars$8.borderStyle]: 'dashed',
8604
8604
 
8605
8605
  _required: {
8606
- [vars$7.requiredIndicator]: refs.requiredIndicator,
8606
+ [vars$8.requiredIndicator]: refs.requiredIndicator,
8607
8607
  },
8608
8608
 
8609
8609
  size: {
8610
8610
  xs: {
8611
- [vars$7.hostHeight]: '196px',
8612
- [vars$7.hostWidth]: '200px',
8613
- [vars$7.titleFontSize]: '0.875em',
8614
- [vars$7.descriptionFontSize]: '0.875em',
8615
- [vars$7.lineHeight]: '1.25em',
8611
+ [vars$8.hostHeight]: '196px',
8612
+ [vars$8.hostWidth]: '200px',
8613
+ [vars$8.titleFontSize]: '0.875em',
8614
+ [vars$8.descriptionFontSize]: '0.875em',
8615
+ [vars$8.lineHeight]: '1.25em',
8616
8616
  },
8617
8617
  sm: {
8618
- [vars$7.hostHeight]: '216px',
8619
- [vars$7.hostWidth]: '230px',
8620
- [vars$7.titleFontSize]: '1em',
8621
- [vars$7.descriptionFontSize]: '0.875em',
8622
- [vars$7.lineHeight]: '1.25em',
8618
+ [vars$8.hostHeight]: '216px',
8619
+ [vars$8.hostWidth]: '230px',
8620
+ [vars$8.titleFontSize]: '1em',
8621
+ [vars$8.descriptionFontSize]: '0.875em',
8622
+ [vars$8.lineHeight]: '1.25em',
8623
8623
  },
8624
8624
  md: {
8625
- [vars$7.hostHeight]: '256px',
8626
- [vars$7.hostWidth]: '312px',
8627
- [vars$7.titleFontSize]: '1.125em',
8628
- [vars$7.descriptionFontSize]: '1em',
8629
- [vars$7.lineHeight]: '1.5em',
8625
+ [vars$8.hostHeight]: '256px',
8626
+ [vars$8.hostWidth]: '312px',
8627
+ [vars$8.titleFontSize]: '1.125em',
8628
+ [vars$8.descriptionFontSize]: '1em',
8629
+ [vars$8.lineHeight]: '1.5em',
8630
8630
  },
8631
8631
  lg: {
8632
- [vars$7.hostHeight]: '280px',
8633
- [vars$7.hostWidth]: '336px',
8634
- [vars$7.titleFontSize]: '1.125em',
8635
- [vars$7.descriptionFontSize]: '1.125em',
8636
- [vars$7.lineHeight]: '1.75em',
8632
+ [vars$8.hostHeight]: '280px',
8633
+ [vars$8.hostWidth]: '336px',
8634
+ [vars$8.titleFontSize]: '1.125em',
8635
+ [vars$8.descriptionFontSize]: '1.125em',
8636
+ [vars$8.lineHeight]: '1.75em',
8637
8637
  },
8638
8638
  },
8639
8639
 
8640
8640
  _fullWidth: {
8641
- [vars$7.hostWidth]: refs.width,
8641
+ [vars$8.hostWidth]: refs.width,
8642
8642
  },
8643
8643
  };
8644
8644
 
8645
8645
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8646
8646
  __proto__: null,
8647
8647
  default: uploadFile,
8648
- vars: vars$7
8648
+ vars: vars$8
8649
8649
  });
8650
8650
 
8651
- const globalRefs$5 = getThemeRefs(globals);
8651
+ const globalRefs$6 = getThemeRefs(globals);
8652
8652
 
8653
- const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
8653
+ const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
8654
8654
 
8655
8655
  const buttonSelectionGroupItem = {
8656
- [vars$6.hostDirection]: 'inherit',
8657
- [vars$6.backgroundColor]: globalRefs$5.colors.surface.light,
8658
- [vars$6.labelTextColor]: globalRefs$5.colors.surface.contrast,
8659
- [vars$6.borderColor]: globalRefs$5.colors.surface.main,
8660
- [vars$6.borderStyle]: 'solid',
8661
- [vars$6.borderRadius]: globalRefs$5.radius.sm,
8656
+ [vars$7.hostDirection]: 'inherit',
8657
+ [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
8658
+ [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
8659
+ [vars$7.borderColor]: globalRefs$6.colors.surface.main,
8660
+ [vars$7.borderStyle]: 'solid',
8661
+ [vars$7.borderRadius]: globalRefs$6.radius.sm,
8662
8662
 
8663
8663
  _hover: {
8664
- [vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8664
+ [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8665
8665
  },
8666
8666
 
8667
8667
  _selected: {
8668
- [vars$6.borderColor]: globalRefs$5.colors.surface.contrast,
8669
- [vars$6.backgroundColor]: globalRefs$5.colors.surface.contrast,
8670
- [vars$6.labelTextColor]: globalRefs$5.colors.surface.light,
8668
+ [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
8669
+ [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
8670
+ [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
8671
8671
  },
8672
8672
  };
8673
8673
 
8674
8674
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8675
8675
  __proto__: null,
8676
8676
  default: buttonSelectionGroupItem,
8677
- vars: vars$6
8677
+ vars: vars$7
8678
8678
  });
8679
8679
 
8680
- const globalRefs$4 = getThemeRefs(globals);
8681
- const vars$5 = ButtonSelectionGroupClass.cssVarList;
8680
+ const globalRefs$5 = getThemeRefs(globals);
8681
+ const vars$6 = ButtonSelectionGroupClass.cssVarList;
8682
8682
 
8683
8683
  const buttonSelectionGroup = {
8684
- [vars$5.hostDirection]: refs.direction,
8685
- [vars$5.fontFamily]: refs.fontFamily,
8686
- [vars$5.labelTextColor]: refs.labelTextColor,
8687
- [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
8688
- [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
8689
- [vars$5.itemsSpacing]: globalRefs$4.spacing.sm,
8690
- [vars$5.hostWidth]: refs.width,
8684
+ [vars$6.hostDirection]: refs.direction,
8685
+ [vars$6.fontFamily]: refs.fontFamily,
8686
+ [vars$6.labelTextColor]: refs.labelTextColor,
8687
+ [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
8688
+ [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
8689
+ [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
8690
+ [vars$6.hostWidth]: refs.width,
8691
8691
  };
8692
8692
 
8693
8693
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8694
8694
  __proto__: null,
8695
8695
  default: buttonSelectionGroup,
8696
- vars: vars$5
8696
+ vars: vars$6
8697
8697
  });
8698
8698
 
8699
- const componentName$2 = getComponentName('modal');
8699
+ const componentName$3 = getComponentName('modal');
8700
8700
 
8701
8701
  const customMixin = (superclass) =>
8702
8702
  class ModalMixinClass extends superclass {
@@ -8795,59 +8795,59 @@ const ModalClass = compose(
8795
8795
  wrappedEleName: 'vaadin-dialog',
8796
8796
  style: () => ``,
8797
8797
  excludeAttrsSync: ['tabindex', 'opened'],
8798
- componentName: componentName$2,
8798
+ componentName: componentName$3,
8799
8799
  })
8800
8800
  );
8801
8801
 
8802
- const globalRefs$3 = getThemeRefs(globals);
8802
+ const globalRefs$4 = getThemeRefs(globals);
8803
8803
 
8804
8804
  const compVars = ModalClass.cssVarList;
8805
8805
 
8806
8806
  const modal = {
8807
- [compVars.overlayBackgroundColor]: globalRefs$3.colors.surface.light,
8807
+ [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
8808
8808
  [compVars.overlayShadow]: 'none',
8809
8809
  [compVars.overlayWidth]: '700px',
8810
8810
  };
8811
8811
 
8812
- const vars$4 = {
8812
+ const vars$5 = {
8813
8813
  ...compVars,
8814
8814
  };
8815
8815
 
8816
8816
  var modal$1 = /*#__PURE__*/Object.freeze({
8817
8817
  __proto__: null,
8818
8818
  default: modal,
8819
- vars: vars$4
8819
+ vars: vars$5
8820
8820
  });
8821
8821
 
8822
- const globalRefs$2 = getThemeRefs(globals);
8823
- const vars$3 = GridClass.cssVarList;
8822
+ const globalRefs$3 = getThemeRefs(globals);
8823
+ const vars$4 = GridClass.cssVarList;
8824
8824
 
8825
8825
  const grid = {
8826
- [vars$3.hostWidth]: '100%',
8827
- [vars$3.hostHeight]: '100%',
8828
- [vars$3.hostMinHeight]: '400px',
8829
- [vars$3.backgroundColor]: globalRefs$2.colors.surface.light,
8826
+ [vars$4.hostWidth]: '100%',
8827
+ [vars$4.hostHeight]: '100%',
8828
+ [vars$4.hostMinHeight]: '400px',
8829
+ [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
8830
8830
 
8831
- [vars$3.fontSize]: refs.fontSize,
8832
- [vars$3.fontFamily]: refs.fontFamily,
8831
+ [vars$4.fontSize]: refs.fontSize,
8832
+ [vars$4.fontFamily]: refs.fontFamily,
8833
8833
 
8834
- [vars$3.sortIndicatorsColor]: globalRefs$2.colors.surface.main,
8835
- [vars$3.activeSortIndicator]: globalRefs$2.colors.surface.dark,
8836
- [vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
8834
+ [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
8835
+ [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
8836
+ [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
8837
8837
 
8838
- [vars$3.inputBorderWidth]: refs.borderWidth,
8839
- [vars$3.inputBorderStyle]: refs.borderStyle,
8840
- [vars$3.inputBorderRadius]: refs.borderRadius,
8841
- [vars$3.inputBorderColor]: 'transparent',
8838
+ [vars$4.inputBorderWidth]: refs.borderWidth,
8839
+ [vars$4.inputBorderStyle]: refs.borderStyle,
8840
+ [vars$4.inputBorderRadius]: refs.borderRadius,
8841
+ [vars$4.inputBorderColor]: 'transparent',
8842
8842
 
8843
- [vars$3.headerRowTextColor]: globalRefs$2.colors.surface.dark,
8844
- [vars$3.separatorColor]: globalRefs$2.colors.surface.main,
8843
+ [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
8844
+ [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
8845
8845
 
8846
- [vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
8847
- [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.contrast,
8846
+ [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
8847
+ [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
8848
8848
 
8849
8849
  _bordered: {
8850
- [vars$3.inputBorderColor]: refs.borderColor,
8850
+ [vars$4.inputBorderColor]: refs.borderColor,
8851
8851
  },
8852
8852
  };
8853
8853
 
@@ -8855,10 +8855,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
8855
8855
  __proto__: null,
8856
8856
  default: grid,
8857
8857
  grid: grid,
8858
- vars: vars$3
8858
+ vars: vars$4
8859
8859
  });
8860
8860
 
8861
- const componentName$1 = getComponentName('notification-card');
8861
+ const componentName$2 = getComponentName('notification-card');
8862
8862
 
8863
8863
  const notificationCardMixin = (superclass) =>
8864
8864
  class NotificationCardMixinClass extends superclass {
@@ -8966,54 +8966,54 @@ const NotificationCardClass = compose(
8966
8966
  }
8967
8967
  `,
8968
8968
  excludeAttrsSync: ['tabindex'],
8969
- componentName: componentName$1,
8969
+ componentName: componentName$2,
8970
8970
  })
8971
8971
  );
8972
8972
 
8973
- const globalRefs$1 = getThemeRefs(globals);
8974
- const vars$2 = NotificationCardClass.cssVarList;
8973
+ const globalRefs$2 = getThemeRefs(globals);
8974
+ const vars$3 = NotificationCardClass.cssVarList;
8975
8975
 
8976
8976
  const shadowColor = '#00000020';
8977
8977
 
8978
8978
  const notification = {
8979
- [vars$2.hostMinWidth]: '415px',
8980
- [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
8981
- [vars$2.fontSize]: globalRefs$1.typography.body1.size,
8982
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
8983
- [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
8984
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
8985
- [vars$2.verticalPadding]: '0.625em',
8986
- [vars$2.horizontalPadding]: '1.5em',
8987
- [vars$2.borderRadius]: globalRefs$1.radius.xs,
8979
+ [vars$3.hostMinWidth]: '415px',
8980
+ [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
8981
+ [vars$3.fontSize]: globalRefs$2.typography.body1.size,
8982
+ [vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
8983
+ [vars$3.textColor]: globalRefs$2.colors.surface.contrast,
8984
+ [vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
8985
+ [vars$3.verticalPadding]: '0.625em',
8986
+ [vars$3.horizontalPadding]: '1.5em',
8987
+ [vars$3.borderRadius]: globalRefs$2.radius.xs,
8988
8988
 
8989
8989
  _bordered: {
8990
- [vars$2.borderWidth]: globalRefs$1.border.sm,
8991
- [vars$2.borderStyle]: 'solid',
8992
- [vars$2.borderColor]: 'transparent',
8990
+ [vars$3.borderWidth]: globalRefs$2.border.sm,
8991
+ [vars$3.borderStyle]: 'solid',
8992
+ [vars$3.borderColor]: 'transparent',
8993
8993
  },
8994
8994
 
8995
8995
  size: {
8996
- xs: { [vars$2.fontSize]: '12px' },
8997
- sm: { [vars$2.fontSize]: '14px' },
8998
- md: { [vars$2.fontSize]: '16px' },
8999
- lg: { [vars$2.fontSize]: '18px' },
8996
+ xs: { [vars$3.fontSize]: '12px' },
8997
+ sm: { [vars$3.fontSize]: '14px' },
8998
+ md: { [vars$3.fontSize]: '16px' },
8999
+ lg: { [vars$3.fontSize]: '18px' },
9000
9000
  },
9001
9001
 
9002
9002
  mode: {
9003
9003
  primary: {
9004
- [vars$2.backgroundColor]: globalRefs$1.colors.primary.main,
9005
- [vars$2.textColor]: globalRefs$1.colors.primary.contrast,
9006
- [vars$2.borderColor]: globalRefs$1.colors.primary.light,
9004
+ [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
9005
+ [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
9006
+ [vars$3.borderColor]: globalRefs$2.colors.primary.light,
9007
9007
  },
9008
9008
  success: {
9009
- [vars$2.backgroundColor]: globalRefs$1.colors.success.main,
9010
- [vars$2.textColor]: globalRefs$1.colors.success.contrast,
9011
- [vars$2.borderColor]: globalRefs$1.colors.success.light,
9009
+ [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
9010
+ [vars$3.textColor]: globalRefs$2.colors.success.contrast,
9011
+ [vars$3.borderColor]: globalRefs$2.colors.success.light,
9012
9012
  },
9013
9013
  error: {
9014
- [vars$2.backgroundColor]: globalRefs$1.colors.error.main,
9015
- [vars$2.textColor]: globalRefs$1.colors.error.contrast,
9016
- [vars$2.borderColor]: globalRefs$1.colors.error.light,
9014
+ [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
9015
+ [vars$3.textColor]: globalRefs$2.colors.error.contrast,
9016
+ [vars$3.borderColor]: globalRefs$2.colors.error.light,
9017
9017
  },
9018
9018
  },
9019
9019
  };
@@ -9021,6 +9021,529 @@ const notification = {
9021
9021
  var notificationCard = /*#__PURE__*/Object.freeze({
9022
9022
  __proto__: null,
9023
9023
  default: notification,
9024
+ vars: vars$3
9025
+ });
9026
+
9027
+ const componentName$1 = getComponentName('multi-select-combo-box');
9028
+
9029
+ const MultiSelectComboBoxMixin = (superclass) =>
9030
+ class MultiSelectComboBoxMixinClass extends superclass {
9031
+ // eslint-disable-next-line class-methods-use-this
9032
+ #renderItem = ({ displayName, value, label }) => {
9033
+ return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
9034
+ };
9035
+
9036
+ #data;
9037
+
9038
+ get defaultValues() {
9039
+ const defaultValuesAttr = this.getAttribute('default-values');
9040
+ if (defaultValuesAttr) {
9041
+ try {
9042
+ const defaultValues = JSON.parse(defaultValuesAttr);
9043
+ if (this.isValidDataType(defaultValues)) {
9044
+ return defaultValues;
9045
+ }
9046
+ } catch (e) {
9047
+ // eslint-disable-next-line no-console
9048
+ console.error('could not parse data string from attribute "default-values" -', e.message);
9049
+ }
9050
+ }
9051
+ return [];
9052
+ }
9053
+
9054
+ get renderItem() {
9055
+ return this.#renderItem;
9056
+ }
9057
+
9058
+ set renderItem(renderFn) {
9059
+ this.#renderItem = renderFn;
9060
+ this.renderItems();
9061
+ }
9062
+
9063
+ get data() {
9064
+ if (this.#data) return this.#data;
9065
+
9066
+ const dataAttr = this.getAttribute('data');
9067
+
9068
+ if (dataAttr) {
9069
+ try {
9070
+ const data = JSON.parse(dataAttr);
9071
+ if (this.isValidDataType(data)) {
9072
+ return data;
9073
+ }
9074
+ } catch (e) {
9075
+ // eslint-disable-next-line no-console
9076
+ console.error('could not parse data string from attribute "data" -', e.message);
9077
+ }
9078
+ }
9079
+
9080
+ return [];
9081
+ }
9082
+
9083
+ set data(data) {
9084
+ if (this.isValidDataType(data)) {
9085
+ this.#data = data;
9086
+ this.renderItems();
9087
+ }
9088
+ }
9089
+
9090
+ get allowCustomValue() {
9091
+ return this.getAttribute('allow-custom-value') === 'true';
9092
+ }
9093
+
9094
+ // eslint-disable-next-line class-methods-use-this
9095
+ isValidDataType(data) {
9096
+ const isValid = Array.isArray(data);
9097
+ if (!isValid) {
9098
+ // eslint-disable-next-line no-console
9099
+ console.error('data and default-values must be an array, received:', data);
9100
+ }
9101
+
9102
+ return isValid;
9103
+ }
9104
+
9105
+ getItemsTemplate() {
9106
+ return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
9107
+ }
9108
+
9109
+ renderItems() {
9110
+ const template = this.getItemsTemplate();
9111
+ if (template) this.innerHTML = template;
9112
+ }
9113
+
9114
+ handleSelectedItems() {
9115
+ const currentSelected =
9116
+ this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
9117
+
9118
+ this.baseElement.selectedItems = [];
9119
+
9120
+ // if previously selected item ID exists in current children, set it as selected
9121
+ if (currentSelected.length > 0) {
9122
+ this.value = currentSelected;
9123
+ }
9124
+
9125
+ // otherwise, if default value is specified, set default value as selected item
9126
+ if (this.value.length === 0) {
9127
+ this.setDefaultValues();
9128
+ }
9129
+ }
9130
+
9131
+ // eslint-disable-next-line class-methods-use-this
9132
+ customValueTransformFn(val) {
9133
+ return val;
9134
+ }
9135
+
9136
+ // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
9137
+ // field that it searches the value, and the finaly display value of the input.
9138
+ // We provide a custom transform function to override that behavior.
9139
+ setComboBoxDescriptor() {
9140
+ const valueDescriptor = Object.getOwnPropertyDescriptor(
9141
+ this.inputElement.constructor.prototype,
9142
+ 'value'
9143
+ );
9144
+
9145
+ const comboBox = this;
9146
+
9147
+ Object.defineProperties(this.inputElement, {
9148
+ value: {
9149
+ ...valueDescriptor,
9150
+ set(val) {
9151
+ const transformedValue = comboBox.customValueTransformFn(val) || '';
9152
+
9153
+ if (transformedValue === this.value) {
9154
+ return;
9155
+ }
9156
+
9157
+ valueDescriptor.set.call(this, transformedValue);
9158
+ },
9159
+ },
9160
+ });
9161
+ }
9162
+
9163
+ // vaadin api is to set props on their combo box node,
9164
+ // in order to avoid it, we are passing the children of this component
9165
+ // to the items & renderer props, so it will be used as the combo box items
9166
+ #onChildrenChange() {
9167
+ const items = Array.from(this.children);
9168
+
9169
+ // we want the data-name attribute to be accessible as an object attribute
9170
+ if (items.length) {
9171
+ this.removeAttribute('has-no-options');
9172
+
9173
+ items.forEach((node) => {
9174
+ Object.defineProperty(node, 'data-name', {
9175
+ value: node.getAttribute('data-name'),
9176
+ configurable: true,
9177
+ writable: true,
9178
+ });
9179
+ Object.defineProperty(node, 'data-id', {
9180
+ value: node.getAttribute('data-id'),
9181
+ configurable: true,
9182
+ writable: true,
9183
+ });
9184
+ });
9185
+
9186
+ this.baseElement.items = items;
9187
+
9188
+ setTimeout(() => {
9189
+ // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
9190
+ this.handleSelectedItems();
9191
+ }, 0);
9192
+ } else {
9193
+ this.baseElement.items = [];
9194
+ this.setAttribute('has-no-options', '');
9195
+ }
9196
+
9197
+ // use vaadin combobox custom renderer to render options as HTML
9198
+ // and not via default renderer, which renders only the data-name's value
9199
+ // in its own HTML template
9200
+ this.baseElement.renderer = (root, combo, model) => {
9201
+ // eslint-disable-next-line no-param-reassign
9202
+ root.innerHTML = model.item.outerHTML;
9203
+ };
9204
+ }
9205
+
9206
+ // the default vaadin behavior is to attach the overlay to the body when opened
9207
+ // we do not want that because it's difficult to style the overlay in this way
9208
+ // so we override it to open inside the shadow DOM
9209
+ #overrideOverlaySettings() {
9210
+ const overlay = this.baseElement.shadowRoot
9211
+ .querySelector('vaadin-multi-select-combo-box-internal')
9212
+ .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
9213
+ overlay._attachOverlay = () => {
9214
+ overlay.bringToFront();
9215
+ };
9216
+ overlay._detachOverlay = () => {};
9217
+ overlay._enterModalState = () => {};
9218
+ }
9219
+
9220
+ #handleCustomValues() {
9221
+ if (this.allowCustomValue) {
9222
+ this.baseElement.addEventListener('custom-value-set', (e) => {
9223
+ const newItemHtml = this.#renderItem({
9224
+ label: e.detail,
9225
+ displayName: e.detail,
9226
+ value: e.detail,
9227
+ });
9228
+ this.innerHTML += newItemHtml;
9229
+ // The value needs to be set with a timeout because it needs to execute after
9230
+ // the custom value is added to items by the children change observer
9231
+ setTimeout(() => {
9232
+ this.value = [...this.value, e.detail];
9233
+ }, 0);
9234
+ });
9235
+ }
9236
+ }
9237
+
9238
+ init() {
9239
+ super.init?.();
9240
+
9241
+ // eslint-disable-next-line func-names
9242
+ this.getValidity = function () {
9243
+ if (!this.value.length && this.isRequired) {
9244
+ return {
9245
+ valueMissing: true,
9246
+ };
9247
+ }
9248
+ return {};
9249
+ };
9250
+
9251
+ this.setComboBoxDescriptor();
9252
+
9253
+ this.#overrideOverlaySettings();
9254
+
9255
+ this.#handleCustomValues();
9256
+
9257
+ this.renderItems();
9258
+
9259
+ observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
9260
+
9261
+ observeChildren(this, this.#onChildrenChange.bind(this));
9262
+
9263
+ // Note: we need to forward the `placeholder` because the vaadin component observes it and
9264
+ // tries to override it, causing us to lose the user set placeholder.
9265
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
9266
+
9267
+ this.setDefaultValues();
9268
+ }
9269
+
9270
+ setDefaultValues() {
9271
+ this.value = this.defaultValues;
9272
+ }
9273
+
9274
+ set value(vals) {
9275
+ if (vals && vals.length > 0) {
9276
+ const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
9277
+
9278
+ if (children?.length > 0) {
9279
+ this.baseElement.selectedItems = children;
9280
+ }
9281
+ } else {
9282
+ this.baseElement.selectedItems = [];
9283
+ }
9284
+ }
9285
+
9286
+ get value() {
9287
+ return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
9288
+ }
9289
+ };
9290
+
9291
+ const {
9292
+ host,
9293
+ inputField,
9294
+ inputElement,
9295
+ placeholder,
9296
+ toggle,
9297
+ label,
9298
+ requiredIndicator,
9299
+ helperText,
9300
+ errorMessage,
9301
+ chip,
9302
+ chipLabel,
9303
+ overflowChipFirstBorder,
9304
+ overflowChipSecondBorder,
9305
+ } = {
9306
+ host: { selector: () => ':host' },
9307
+ inputField: { selector: '::part(input-field)' },
9308
+ inputElement: { selector: 'input' },
9309
+ placeholder: { selector: '> input:placeholder-shown' },
9310
+ toggle: { selector: '::part(toggle-button)' },
9311
+ label: { selector: '::part(label)' },
9312
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
9313
+ helperText: { selector: '::part(helper-text)' },
9314
+ errorMessage: { selector: '::part(error-message)' },
9315
+ chip: { selector: 'vaadin-multi-select-combo-box-chip' },
9316
+ chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
9317
+ overflowChipFirstBorder: {
9318
+ selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
9319
+ },
9320
+ overflowChipSecondBorder: {
9321
+ selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
9322
+ },
9323
+ };
9324
+
9325
+ const MultiSelectComboBoxClass = compose(
9326
+ createStyleMixin({
9327
+ mappings: {
9328
+ hostWidth: { ...host, property: 'width' },
9329
+ hostDirection: { ...host, property: 'direction' },
9330
+ // we apply font-size also on the host so we can set its width with em
9331
+ fontSize: [{}, host],
9332
+ chipFontSize: { ...chipLabel, property: 'font-size' },
9333
+ fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
9334
+ labelTextColor: [
9335
+ { ...label, property: 'color' },
9336
+ { ...requiredIndicator, property: 'color' },
9337
+ ],
9338
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
9339
+ inputHeight: { ...inputField, property: 'min-height' },
9340
+ inputBackgroundColor: { ...inputField, property: 'background-color' },
9341
+ inputBorderColor: { ...inputField, property: 'border-color' },
9342
+ inputBorderWidth: { ...inputField, property: 'border-width' },
9343
+ inputBorderStyle: { ...inputField, property: 'border-style' },
9344
+ inputBorderRadius: { ...inputField, property: 'border-radius' },
9345
+ labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
9346
+ inputValueTextColor: { ...inputField, property: 'color' },
9347
+ inputPlaceholderTextColor: { ...placeholder, property: 'color' },
9348
+ inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
9349
+ inputDropdownButtonColor: { ...toggle, property: 'color' },
9350
+ inputDropdownButtonSize: { ...toggle, property: 'font-size' },
9351
+ inputDropdownButtonOffset: [
9352
+ { ...toggle, property: 'margin-right' },
9353
+ { ...toggle, property: 'margin-left' },
9354
+ ],
9355
+ inputOutlineColor: { ...inputField, property: 'outline-color' },
9356
+ inputOutlineWidth: { ...inputField, property: 'outline-width' },
9357
+ inputOutlineStyle: { ...inputField, property: 'outline-style' },
9358
+ inputOutlineOffset: { ...inputField, property: 'outline-offset' },
9359
+ inputHorizontalPadding: [
9360
+ { ...inputElement, property: 'padding-left' },
9361
+ { ...inputElement, property: 'padding-right' },
9362
+ { ...inputField, property: 'padding-inline-start' },
9363
+ ],
9364
+ inputVerticalPadding: [
9365
+ { ...inputField, property: 'padding-top' },
9366
+ { ...inputField, property: 'padding-bottom' },
9367
+ ],
9368
+ chipTextColor: { ...chipLabel, property: 'color' },
9369
+ chipBackgroundColor: [
9370
+ { ...chip, property: 'background-color' },
9371
+ { ...overflowChipFirstBorder, property: 'border-color' },
9372
+ { ...overflowChipSecondBorder, property: 'border-color' },
9373
+ ],
9374
+
9375
+ // we need to use the variables from the portal mixin
9376
+ // so we need to use an arrow function on the selector
9377
+ // for that to work, because ComboBox is not available
9378
+ // at this time.
9379
+ overlayBackground: {
9380
+ property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
9381
+ },
9382
+ overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
9383
+ overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
9384
+ overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
9385
+ overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
9386
+ overlayItemBoxShadow: {
9387
+ property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
9388
+ },
9389
+ overlayItemPaddingInlineStart: {
9390
+ property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
9391
+ },
9392
+ overlayItemPaddingInlineEnd: {
9393
+ property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
9394
+ },
9395
+ },
9396
+ }),
9397
+ draggableMixin,
9398
+ portalMixin({
9399
+ name: 'overlay',
9400
+ selector: 'vaadin-multi-select-combo-box-internal',
9401
+ mappings: {
9402
+ backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
9403
+ minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
9404
+ margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
9405
+ cursor: { selector: 'vaadin-multi-select-combo-box-item' },
9406
+ fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
9407
+ fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
9408
+ itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
9409
+ itemPaddingInlineStart: {
9410
+ selector: 'vaadin-multi-select-combo-box-item',
9411
+ property: 'padding-inline-start',
9412
+ },
9413
+ itemPaddingInlineEnd: {
9414
+ selector: 'vaadin-multi-select-combo-box-item',
9415
+ property: 'padding-inline-end',
9416
+ },
9417
+ },
9418
+ forward: {
9419
+ include: false,
9420
+ attributes: ['size'],
9421
+ },
9422
+ }),
9423
+ composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
9424
+ componentNameValidationMixin,
9425
+ MultiSelectComboBoxMixin
9426
+ )(
9427
+ createProxy({
9428
+ slots: ['', 'prefix'],
9429
+ wrappedEleName: 'vaadin-multi-select-combo-box',
9430
+ style: () => `
9431
+ :host {
9432
+ display: inline-flex;
9433
+ box-sizing: border-box;
9434
+ -webkit-mask-image: none;
9435
+ }
9436
+ ${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
9437
+ ${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
9438
+ ${resetInputPlaceholder('vaadin-multi-select-combo-box')}
9439
+ ${resetInputCursor('vaadin-multi-select-combo-box')}
9440
+
9441
+ vaadin-multi-select-combo-box {
9442
+ padding: 0;
9443
+ width: 100%;
9444
+ }
9445
+ vaadin-multi-select-combo-box::before {
9446
+ height: initial;
9447
+ }
9448
+ vaadin-multi-select-combo-box [slot="input"] {
9449
+ -webkit-mask-image: none;
9450
+ min-height: 0;
9451
+ align-self: center;
9452
+ box-sizing: border-box;
9453
+ }
9454
+
9455
+ ::part(input-field) {
9456
+ padding: 0;
9457
+ box-shadow: none;
9458
+ }
9459
+ ${resetInputLabelPosition('vaadin-multi-select-combo-box')}
9460
+ :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
9461
+ display: block;
9462
+ }
9463
+
9464
+ vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
9465
+ vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
9466
+ left: -4px;
9467
+ right: -4px;
9468
+ border-left-width: 0;
9469
+ border-inline-start-style: solid;
9470
+ border-inline-start-width: 2px;
9471
+ }
9472
+ vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
9473
+ left: -8px;
9474
+ right: -8px;
9475
+ }
9476
+
9477
+ :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
9478
+ display: none;
9479
+ }
9480
+ `,
9481
+ // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
9482
+ // with the same name. Including it will cause Vaadin to calculate NaN size,
9483
+ // and reset items to an empty array, and opening the list box with no items
9484
+ // to display.
9485
+ // Note: we exclude `placeholder` because the vaadin component observes it and
9486
+ // tries to override it, causing us to lose the user set placeholder.
9487
+ excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
9488
+ componentName: componentName$1,
9489
+ includeForwardProps: ['items', 'renderer', 'selectedItems'],
9490
+ })
9491
+ );
9492
+
9493
+ const globalRefs$1 = getThemeRefs(globals);
9494
+ const vars$2 = MultiSelectComboBoxClass.cssVarList;
9495
+
9496
+ const multiSelectComboBox = {
9497
+ [vars$2.hostWidth]: refs.width,
9498
+ [vars$2.hostDirection]: refs.direction,
9499
+ [vars$2.fontSize]: refs.fontSize,
9500
+ [vars$2.fontFamily]: refs.fontFamily,
9501
+ [vars$2.labelTextColor]: refs.labelTextColor,
9502
+ [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
9503
+ [vars$2.inputBorderColor]: refs.borderColor,
9504
+ [vars$2.inputBorderWidth]: refs.borderWidth,
9505
+ [vars$2.inputBorderStyle]: refs.borderStyle,
9506
+ [vars$2.inputBorderRadius]: refs.borderRadius,
9507
+ [vars$2.inputOutlineColor]: refs.outlineColor,
9508
+ [vars$2.inputOutlineOffset]: refs.outlineOffset,
9509
+ [vars$2.inputOutlineWidth]: refs.outlineWidth,
9510
+ [vars$2.inputOutlineStyle]: refs.outlineStyle,
9511
+ [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
9512
+ [vars$2.inputValueTextColor]: refs.valueTextColor,
9513
+ [vars$2.inputPlaceholderTextColor]: refs.placeholderTextColor,
9514
+ [vars$2.inputBackgroundColor]: refs.backgroundColor,
9515
+ [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
9516
+ [vars$2.inputVerticalPadding]: refs.verticalPadding,
9517
+ [vars$2.inputHeight]: refs.inputHeight,
9518
+ [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.contrast,
9519
+ [vars$2.inputDropdownButtonCursor]: 'pointer',
9520
+ [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
9521
+ [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
9522
+ [vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
9523
+ [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
9524
+ [vars$2.chipFontSize]: refs.chipFontSize,
9525
+ [vars$2.chipTextColor]: refs.valueTextColor,
9526
+ [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
9527
+
9528
+ _readonly: {
9529
+ [vars$2.inputDropdownButtonCursor]: 'default',
9530
+ },
9531
+
9532
+ // Overlay theme exposed via the component:
9533
+ [vars$2.overlayFontSize]: refs.fontSize,
9534
+ [vars$2.overlayFontFamily]: refs.fontFamily,
9535
+ [vars$2.overlayCursor]: 'pointer',
9536
+ [vars$2.overlayItemBoxShadow]: 'none',
9537
+
9538
+ // Overlay direct theme:
9539
+ [vars$2.overlay.minHeight]: '400px',
9540
+ [vars$2.overlay.margin]: '0',
9541
+ };
9542
+
9543
+ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
9544
+ __proto__: null,
9545
+ default: multiSelectComboBox,
9546
+ multiSelectComboBox: multiSelectComboBox,
9024
9547
  vars: vars$2
9025
9548
  });
9026
9549
 
@@ -9175,6 +9698,7 @@ const components = {
9175
9698
  modal: modal$1,
9176
9699
  grid: grid$1,
9177
9700
  notificationCard,
9701
+ multiSelectComboBox: multiSelectComboBox$1,
9178
9702
  badge: badge$1,
9179
9703
  };
9180
9704
 
@@ -9188,7 +9712,7 @@ const vars = Object.keys(components).reduce(
9188
9712
  );
9189
9713
 
9190
9714
  const defaultTheme = { globals, components: theme };
9191
- const themeVars = { globals: vars$v, components: vars };
9715
+ const themeVars = { globals: vars$w, components: vars };
9192
9716
 
9193
9717
  export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
9194
9718
  //# sourceMappingURL=index.esm.js.map