@descope/web-components-ui 1.0.239 → 1.0.240

Sign up to get free protection for your applications and to get access to all the features.
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