@descope/web-components-ui 1.0.177 → 1.0.179

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/cjs/index.cjs.js +1082 -687
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1166 -772
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/2481.js +1 -1
  7. package/dist/umd/descope-button-index-js.js +1 -1
  8. package/dist/umd/descope-combo-box-index-js.js +1 -1
  9. package/dist/umd/descope-date-picker-index-js.js +1 -1
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-number-field-index-js.js +1 -1
  12. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-single-select-descope-select-item-index-js.js +1 -0
  15. package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +1 -0
  16. package/dist/umd/descope-single-select-index-js.js +1 -0
  17. package/dist/umd/descope-upload-file-index-js.js +1 -1
  18. package/dist/umd/index.js +1 -1
  19. package/package.json +4 -4
  20. package/src/components/descope-button/ButtonClass.js +1 -1
  21. package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
  22. package/src/components/descope-date-picker/index.js +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +2 -2
  24. package/src/components/descope-number-field/NumberFieldClass.js +1 -1
  25. package/src/components/descope-passcode/PasscodeClass.js +1 -1
  26. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -4
  27. package/src/components/descope-password/PasswordClass.js +2 -2
  28. package/src/components/descope-single-select/SingleSelectClass.js +130 -0
  29. package/src/components/descope-single-select/descope-select-item/SelectItemClass.js +102 -0
  30. package/src/components/descope-single-select/descope-select-item/index.js +6 -0
  31. package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js +137 -0
  32. package/src/components/descope-single-select/descope-single-select-internal/index.js +6 -0
  33. package/src/components/descope-single-select/index.js +6 -0
  34. package/src/index.cjs.js +3 -0
  35. package/src/index.js +2 -0
  36. package/src/mixins/createProxy.js +7 -2
  37. package/src/theme/components/index.js +4 -0
  38. package/src/theme/components/single-select/selectItem.js +27 -0
  39. package/src/theme/components/single-select/singleSelect.js +19 -0
@@ -496,7 +496,7 @@ const globals = {
496
496
  shadow,
497
497
  fonts,
498
498
  };
499
- const vars$p = getThemeVars(globals);
499
+ const vars$r = getThemeVars(globals);
500
500
 
501
501
  const createCssVarFallback = (first, ...rest) =>
502
502
  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -992,8 +992,13 @@ const createProxy = ({
992
992
  super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
993
993
  <style id="create-proxy">${isFunction(style) ? style() : style}</style>
994
994
  <${wrappedEleName}>
995
- <slot></slot>
996
- ${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
995
+ ${slots
996
+ .map(
997
+ (
998
+ slot // when slot is an empty string, we will create the default slot (without a name)
999
+ ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
1000
+ )
1001
+ .join('')}
997
1002
  </${wrappedEleName}>
998
1003
  `;
999
1004
  }
@@ -1507,7 +1512,7 @@ const clickableMixin = (superclass) =>
1507
1512
  }
1508
1513
  };
1509
1514
 
1510
- const componentName$t = getComponentName('button');
1515
+ const componentName$w = getComponentName('button');
1511
1516
 
1512
1517
  const resetStyles = `
1513
1518
  :host {
@@ -1545,7 +1550,7 @@ const iconStyles = `
1545
1550
 
1546
1551
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1547
1552
 
1548
- const { host: host$e, label: label$a } = {
1553
+ const { host: host$f, label: label$b } = {
1549
1554
  host: { selector: () => ':host' },
1550
1555
  label: { selector: '::part(label)' },
1551
1556
  };
@@ -1555,7 +1560,7 @@ let loadingIndicatorStyles;
1555
1560
  const ButtonClass = compose(
1556
1561
  createStyleMixin({
1557
1562
  mappings: {
1558
- hostWidth: { ...host$e, property: 'width' },
1563
+ hostWidth: { ...host$f, property: 'width' },
1559
1564
  hostHeight: { property: 'height' },
1560
1565
  fontSize: {},
1561
1566
  fontFamily: {},
@@ -1576,8 +1581,8 @@ const ButtonClass = compose(
1576
1581
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
1577
1582
 
1578
1583
  labelTextColor: { property: 'color' },
1579
- labelTextDecoration: { ...label$a, property: 'text-decoration' },
1580
- labelSpacing: { ...label$a, property: 'gap' },
1584
+ labelTextDecoration: { ...label$b, property: 'text-decoration' },
1585
+ labelSpacing: { ...label$b, property: 'gap' },
1581
1586
  },
1582
1587
  }),
1583
1588
  clickableMixin,
@@ -1585,7 +1590,7 @@ const ButtonClass = compose(
1585
1590
  componentNameValidationMixin
1586
1591
  )(
1587
1592
  createProxy({
1588
- slots: ['prefix', 'label', 'suffix'],
1593
+ slots: ['', 'prefix', 'label', 'suffix'],
1589
1594
  wrappedEleName: 'vaadin-button',
1590
1595
  style: () => `
1591
1596
  ${resetStyles}
@@ -1604,7 +1609,7 @@ const ButtonClass = compose(
1604
1609
  }
1605
1610
  `,
1606
1611
  excludeAttrsSync: ['tabindex'],
1607
- componentName: componentName$t,
1612
+ componentName: componentName$w,
1608
1613
  })
1609
1614
  );
1610
1615
 
@@ -1641,30 +1646,30 @@ loadingIndicatorStyles = `
1641
1646
  }
1642
1647
  `;
1643
1648
 
1644
- const globalRefs$b = getThemeRefs(globals);
1649
+ const globalRefs$d = getThemeRefs(globals);
1645
1650
  const compVars$3 = ButtonClass.cssVarList;
1646
1651
 
1647
1652
  const mode = {
1648
- primary: globalRefs$b.colors.primary,
1649
- secondary: globalRefs$b.colors.secondary,
1650
- success: globalRefs$b.colors.success,
1651
- error: globalRefs$b.colors.error,
1652
- surface: globalRefs$b.colors.surface,
1653
+ primary: globalRefs$d.colors.primary,
1654
+ secondary: globalRefs$d.colors.secondary,
1655
+ success: globalRefs$d.colors.success,
1656
+ error: globalRefs$d.colors.error,
1657
+ surface: globalRefs$d.colors.surface,
1653
1658
  };
1654
1659
 
1655
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
1660
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
1656
1661
 
1657
1662
  const button = {
1658
1663
  ...helperTheme$3,
1659
1664
 
1660
- [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
1665
+ [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
1661
1666
 
1662
1667
  [compVars$3.cursor]: 'pointer',
1663
1668
  [compVars$3.hostHeight]: '3em',
1664
1669
  [compVars$3.hostWidth]: 'auto',
1665
1670
 
1666
- [compVars$3.borderRadius]: globalRefs$b.radius.sm,
1667
- [compVars$3.borderWidth]: globalRefs$b.border.xs,
1671
+ [compVars$3.borderRadius]: globalRefs$d.radius.sm,
1672
+ [compVars$3.borderWidth]: globalRefs$d.border.xs,
1668
1673
  [compVars$3.borderStyle]: 'solid',
1669
1674
  [compVars$3.borderColor]: 'transparent',
1670
1675
 
@@ -1738,11 +1743,11 @@ const button = {
1738
1743
  },
1739
1744
 
1740
1745
  _focused: {
1741
- [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
1746
+ [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
1742
1747
  },
1743
1748
  };
1744
1749
 
1745
- const vars$o = {
1750
+ const vars$q = {
1746
1751
  ...compVars$3,
1747
1752
  ...helperVars$3,
1748
1753
  };
@@ -1750,10 +1755,10 @@ const vars$o = {
1750
1755
  var button$1 = /*#__PURE__*/Object.freeze({
1751
1756
  __proto__: null,
1752
1757
  default: button,
1753
- vars: vars$o
1758
+ vars: vars$q
1754
1759
  });
1755
1760
 
1756
- const { host: host$d, label: label$9, placeholder: placeholder$2, requiredIndicator: requiredIndicator$9, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$9 } =
1761
+ const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
1757
1762
  {
1758
1763
  host: { selector: () => ':host' },
1759
1764
  label: { selector: '::part(label)' },
@@ -1767,24 +1772,24 @@ const { host: host$d, label: label$9, placeholder: placeholder$2, requiredIndica
1767
1772
 
1768
1773
  var textFieldMappings = {
1769
1774
  // we apply font-size also on the host so we can set its width with em
1770
- fontSize: [{}, host$d],
1771
- fontFamily: [label$9, inputField$5, helperText$8, errorMessage$9],
1775
+ fontSize: [{}, host$e],
1776
+ fontFamily: [label$a, inputField$5, helperText$8, errorMessage$a],
1772
1777
 
1773
- hostWidth: { ...host$d, property: 'width' },
1774
- hostMinWidth: { ...host$d, property: 'min-width' },
1778
+ hostWidth: { ...host$e, property: 'width' },
1779
+ hostMinWidth: { ...host$e, property: 'min-width' },
1775
1780
 
1776
1781
  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
1777
1782
 
1778
1783
  labelTextColor: [
1779
- { ...label$9, property: 'color' },
1780
- { ...requiredIndicator$9, property: 'color' },
1784
+ { ...label$a, property: 'color' },
1785
+ { ...requiredIndicator$a, property: 'color' },
1781
1786
  ],
1782
- errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1787
+ errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1783
1788
 
1784
1789
  inputValueTextColor: { ...inputField$5, property: 'color' },
1785
1790
  inputCaretTextColor: { ...input, property: 'color' },
1786
1791
 
1787
- labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1792
+ labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1788
1793
 
1789
1794
  inputBorderColor: { ...inputField$5, property: 'border-color' },
1790
1795
  inputBorderWidth: { ...inputField$5, property: 'border-width' },
@@ -1908,11 +1913,11 @@ const resetInputOverrides = (name, cssVarList) => `
1908
1913
  ${resetInputFieldUnderlayingBorder(name)}
1909
1914
  `;
1910
1915
 
1911
- const componentName$s = getComponentName('text-field');
1916
+ const componentName$v = getComponentName('text-field');
1912
1917
 
1913
1918
  const observedAttrs = ['type'];
1914
1919
 
1915
- const customMixin$5 = (superclass) =>
1920
+ const customMixin$6 = (superclass) =>
1916
1921
  class TextFieldClass extends superclass {
1917
1922
  static get observedAttributes() {
1918
1923
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -1939,7 +1944,7 @@ const TextFieldClass = compose(
1939
1944
  draggableMixin,
1940
1945
  composedProxyInputMixin,
1941
1946
  componentNameValidationMixin,
1942
- customMixin$5
1947
+ customMixin$6
1943
1948
  )(
1944
1949
  createProxy({
1945
1950
  slots: ['prefix', 'suffix'],
@@ -1956,26 +1961,26 @@ const TextFieldClass = compose(
1956
1961
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
1957
1962
  `,
1958
1963
  excludeAttrsSync: ['tabindex'],
1959
- componentName: componentName$s,
1964
+ componentName: componentName$v,
1960
1965
  })
1961
1966
  );
1962
1967
 
1963
- const componentName$r = getComponentName('input-wrapper');
1964
- const globalRefs$a = getThemeRefs(globals);
1968
+ const componentName$u = getComponentName('input-wrapper');
1969
+ const globalRefs$c = getThemeRefs(globals);
1965
1970
 
1966
- const [theme$1, refs, vars$n] = createHelperVars(
1971
+ const [theme$1, refs, vars$p] = createHelperVars(
1967
1972
  {
1968
- labelTextColor: globalRefs$a.colors.surface.contrast,
1969
- valueTextColor: globalRefs$a.colors.surface.contrast,
1970
- placeholderTextColor: globalRefs$a.colors.surface.main,
1973
+ labelTextColor: globalRefs$c.colors.surface.contrast,
1974
+ valueTextColor: globalRefs$c.colors.surface.contrast,
1975
+ placeholderTextColor: globalRefs$c.colors.surface.main,
1971
1976
  requiredIndicator: "'*'",
1972
- errorMessageTextColor: globalRefs$a.colors.error.main,
1977
+ errorMessageTextColor: globalRefs$c.colors.error.main,
1973
1978
 
1974
- borderWidth: globalRefs$a.border.xs,
1975
- borderRadius: globalRefs$a.radius.xs,
1979
+ borderWidth: globalRefs$c.border.xs,
1980
+ borderRadius: globalRefs$c.radius.xs,
1976
1981
  borderColor: 'transparent',
1977
1982
 
1978
- outlineWidth: globalRefs$a.border.sm,
1983
+ outlineWidth: globalRefs$c.border.sm,
1979
1984
  outlineStyle: 'solid',
1980
1985
  outlineColor: 'transparent',
1981
1986
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -1986,9 +1991,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
1986
1991
  horizontalPadding: '0.5em',
1987
1992
  verticalPadding: '0.5em',
1988
1993
 
1989
- backgroundColor: globalRefs$a.colors.surface.light,
1994
+ backgroundColor: globalRefs$c.colors.surface.light,
1990
1995
 
1991
- fontFamily: globalRefs$a.fonts.font1.family,
1996
+ fontFamily: globalRefs$c.fonts.font1.family,
1992
1997
 
1993
1998
  size: {
1994
1999
  xs: { fontSize: '12px' },
@@ -2002,69 +2007,69 @@ const [theme$1, refs, vars$n] = createHelperVars(
2002
2007
  },
2003
2008
 
2004
2009
  _focused: {
2005
- outlineColor: globalRefs$a.colors.surface.main,
2010
+ outlineColor: globalRefs$c.colors.surface.main,
2006
2011
  _invalid: {
2007
- outlineColor: globalRefs$a.colors.error.main,
2012
+ outlineColor: globalRefs$c.colors.error.main,
2008
2013
  },
2009
2014
  },
2010
2015
 
2011
2016
  _bordered: {
2012
- outlineWidth: globalRefs$a.border.xs,
2013
- borderColor: globalRefs$a.colors.surface.main,
2017
+ outlineWidth: globalRefs$c.border.xs,
2018
+ borderColor: globalRefs$c.colors.surface.main,
2014
2019
  borderStyle: 'solid',
2015
2020
  _invalid: {
2016
- borderColor: globalRefs$a.colors.error.main,
2021
+ borderColor: globalRefs$c.colors.error.main,
2017
2022
  },
2018
2023
  },
2019
2024
 
2020
2025
  _disabled: {
2021
- labelTextColor: globalRefs$a.colors.surface.main,
2022
- borderColor: globalRefs$a.colors.surface.main,
2023
- valueTextColor: globalRefs$a.colors.surface.dark,
2024
- placeholderTextColor: globalRefs$a.colors.surface.dark,
2025
- backgroundColor: globalRefs$a.colors.surface.main,
2026
+ labelTextColor: globalRefs$c.colors.surface.main,
2027
+ borderColor: globalRefs$c.colors.surface.main,
2028
+ valueTextColor: globalRefs$c.colors.surface.dark,
2029
+ placeholderTextColor: globalRefs$c.colors.surface.dark,
2030
+ backgroundColor: globalRefs$c.colors.surface.main,
2026
2031
  },
2027
2032
  },
2028
- componentName$r
2033
+ componentName$u
2029
2034
  );
2030
2035
 
2031
2036
  var inputWrapper = /*#__PURE__*/Object.freeze({
2032
2037
  __proto__: null,
2033
2038
  default: theme$1,
2034
2039
  refs: refs,
2035
- vars: vars$n
2040
+ vars: vars$p
2036
2041
  });
2037
2042
 
2038
- const vars$m = TextFieldClass.cssVarList;
2043
+ const vars$o = TextFieldClass.cssVarList;
2039
2044
 
2040
2045
  const textField = {
2041
- [vars$m.hostWidth]: refs.width,
2042
- [vars$m.hostMinWidth]: refs.minWidth,
2043
- [vars$m.fontSize]: refs.fontSize,
2044
- [vars$m.fontFamily]: refs.fontFamily,
2045
- [vars$m.labelTextColor]: refs.labelTextColor,
2046
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
2047
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
2048
- [vars$m.inputValueTextColor]: refs.valueTextColor,
2049
- [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
2050
- [vars$m.inputBorderWidth]: refs.borderWidth,
2051
- [vars$m.inputBorderStyle]: refs.borderStyle,
2052
- [vars$m.inputBorderColor]: refs.borderColor,
2053
- [vars$m.inputBorderRadius]: refs.borderRadius,
2054
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
2055
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
2056
- [vars$m.inputOutlineColor]: refs.outlineColor,
2057
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
2058
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
2059
- [vars$m.inputHeight]: refs.inputHeight,
2060
- [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
2046
+ [vars$o.hostWidth]: refs.width,
2047
+ [vars$o.hostMinWidth]: refs.minWidth,
2048
+ [vars$o.fontSize]: refs.fontSize,
2049
+ [vars$o.fontFamily]: refs.fontFamily,
2050
+ [vars$o.labelTextColor]: refs.labelTextColor,
2051
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
2052
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
2053
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
2054
+ [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
2055
+ [vars$o.inputBorderWidth]: refs.borderWidth,
2056
+ [vars$o.inputBorderStyle]: refs.borderStyle,
2057
+ [vars$o.inputBorderColor]: refs.borderColor,
2058
+ [vars$o.inputBorderRadius]: refs.borderRadius,
2059
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
2060
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
2061
+ [vars$o.inputOutlineColor]: refs.outlineColor,
2062
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
2063
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
2064
+ [vars$o.inputHeight]: refs.inputHeight,
2065
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
2061
2066
  };
2062
2067
 
2063
2068
  var textField$1 = /*#__PURE__*/Object.freeze({
2064
2069
  __proto__: null,
2065
2070
  default: textField,
2066
2071
  textField: textField,
2067
- vars: vars$m
2072
+ vars: vars$o
2068
2073
  });
2069
2074
 
2070
2075
  const passwordDraggableMixin = (superclass) =>
@@ -2101,18 +2106,18 @@ const passwordDraggableMixin = (superclass) =>
2101
2106
  }
2102
2107
  };
2103
2108
 
2104
- const componentName$q = getComponentName('password');
2109
+ const componentName$t = getComponentName('password');
2105
2110
 
2106
2111
  const {
2107
- host: host$c,
2112
+ host: host$d,
2108
2113
  inputField: inputField$4,
2109
2114
  inputElement: inputElement$1,
2110
2115
  inputElementPlaceholder,
2111
2116
  revealButtonContainer,
2112
2117
  revealButtonIcon,
2113
- label: label$8,
2114
- requiredIndicator: requiredIndicator$8,
2115
- errorMessage: errorMessage$8,
2118
+ label: label$9,
2119
+ requiredIndicator: requiredIndicator$9,
2120
+ errorMessage: errorMessage$9,
2116
2121
  helperText: helperText$7,
2117
2122
  } = {
2118
2123
  host: { selector: () => ':host' },
@@ -2130,10 +2135,10 @@ const {
2130
2135
  const PasswordClass = compose(
2131
2136
  createStyleMixin({
2132
2137
  mappings: {
2133
- hostWidth: { ...host$c, property: 'width' },
2134
- hostMinWidth: { ...host$c, property: 'min-width' },
2135
- fontSize: [{}, host$c],
2136
- fontFamily: [label$8, inputField$4, errorMessage$8, helperText$7],
2138
+ hostWidth: { ...host$d, property: 'width' },
2139
+ hostMinWidth: { ...host$d, property: 'min-width' },
2140
+ fontSize: [{}, host$d],
2141
+ fontFamily: [label$9, inputField$4, errorMessage$9, helperText$7],
2137
2142
  inputHeight: { ...inputField$4, property: 'height' },
2138
2143
  inputHorizontalPadding: [
2139
2144
  { ...inputElement$1, property: 'padding-left' },
@@ -2152,11 +2157,11 @@ const PasswordClass = compose(
2152
2157
  inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
2153
2158
 
2154
2159
  labelTextColor: [
2155
- { ...label$8, property: 'color' },
2156
- { ...requiredIndicator$8, property: 'color' },
2160
+ { ...label$9, property: 'color' },
2161
+ { ...requiredIndicator$9, property: 'color' },
2157
2162
  ],
2158
- labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2159
- errorMessageTextColor: { ...errorMessage$8, property: 'color' },
2163
+ labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
2164
+ errorMessageTextColor: { ...errorMessage$9, property: 'color' },
2160
2165
 
2161
2166
  inputValueTextColor: [
2162
2167
  { ...inputElement$1, property: 'color' },
@@ -2177,7 +2182,7 @@ const PasswordClass = compose(
2177
2182
  passwordDraggableMixin
2178
2183
  )(
2179
2184
  createProxy({
2180
- slots: ['suffix'],
2185
+ slots: ['', 'suffix'],
2181
2186
  wrappedEleName: 'vaadin-password-field',
2182
2187
  style: () => `
2183
2188
  :host {
@@ -2202,7 +2207,7 @@ const PasswordClass = compose(
2202
2207
  }
2203
2208
  vaadin-password-field[focus-ring]::part(input-field) {
2204
2209
  box-shadow: none;
2205
- }
2210
+ }
2206
2211
  vaadin-password-field > input {
2207
2212
  min-height: 0;
2208
2213
  -webkit-mask-image: none;
@@ -2229,44 +2234,44 @@ const PasswordClass = compose(
2229
2234
  }
2230
2235
  `,
2231
2236
  excludeAttrsSync: ['tabindex'],
2232
- componentName: componentName$q,
2237
+ componentName: componentName$t,
2233
2238
  })
2234
2239
  );
2235
2240
 
2236
- const globalRefs$9 = getThemeRefs(globals);
2237
- const vars$l = PasswordClass.cssVarList;
2241
+ const globalRefs$b = getThemeRefs(globals);
2242
+ const vars$n = PasswordClass.cssVarList;
2238
2243
 
2239
2244
  const password = {
2240
- [vars$l.hostWidth]: refs.width,
2241
- [vars$l.fontSize]: refs.fontSize,
2242
- [vars$l.fontFamily]: refs.fontFamily,
2243
- [vars$l.labelTextColor]: refs.labelTextColor,
2244
- [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
2245
- [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
2246
- [vars$l.inputHeight]: refs.inputHeight,
2247
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
2248
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
2249
- [vars$l.inputValueTextColor]: refs.valueTextColor,
2250
- [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
2251
- [vars$l.inputBorderWidth]: refs.borderWidth,
2252
- [vars$l.inputBorderStyle]: refs.borderStyle,
2253
- [vars$l.inputBorderColor]: refs.borderColor,
2254
- [vars$l.inputBorderRadius]: refs.borderRadius,
2255
- [vars$l.inputOutlineWidth]: refs.outlineWidth,
2256
- [vars$l.inputOutlineStyle]: refs.outlineStyle,
2257
- [vars$l.inputOutlineColor]: refs.outlineColor,
2258
- [vars$l.inputOutlineOffset]: refs.outlineOffset,
2259
- [vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
2260
- [vars$l.revealButtonSize]: refs.toggleButtonSize,
2245
+ [vars$n.hostWidth]: refs.width,
2246
+ [vars$n.fontSize]: refs.fontSize,
2247
+ [vars$n.fontFamily]: refs.fontFamily,
2248
+ [vars$n.labelTextColor]: refs.labelTextColor,
2249
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
2250
+ [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
2251
+ [vars$n.inputHeight]: refs.inputHeight,
2252
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
2253
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
2254
+ [vars$n.inputValueTextColor]: refs.valueTextColor,
2255
+ [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
2256
+ [vars$n.inputBorderWidth]: refs.borderWidth,
2257
+ [vars$n.inputBorderStyle]: refs.borderStyle,
2258
+ [vars$n.inputBorderColor]: refs.borderColor,
2259
+ [vars$n.inputBorderRadius]: refs.borderRadius,
2260
+ [vars$n.inputOutlineWidth]: refs.outlineWidth,
2261
+ [vars$n.inputOutlineStyle]: refs.outlineStyle,
2262
+ [vars$n.inputOutlineColor]: refs.outlineColor,
2263
+ [vars$n.inputOutlineOffset]: refs.outlineOffset,
2264
+ [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
2265
+ [vars$n.revealButtonSize]: refs.toggleButtonSize,
2261
2266
  };
2262
2267
 
2263
2268
  var password$1 = /*#__PURE__*/Object.freeze({
2264
2269
  __proto__: null,
2265
2270
  default: password,
2266
- vars: vars$l
2271
+ vars: vars$n
2267
2272
  });
2268
2273
 
2269
- const componentName$p = getComponentName('number-field');
2274
+ const componentName$s = getComponentName('number-field');
2270
2275
 
2271
2276
  const NumberFieldClass = compose(
2272
2277
  createStyleMixin({
@@ -2277,7 +2282,7 @@ const NumberFieldClass = compose(
2277
2282
  componentNameValidationMixin
2278
2283
  )(
2279
2284
  createProxy({
2280
- slots: ['prefix', 'suffix'],
2285
+ slots: ['', 'prefix', 'suffix'],
2281
2286
  wrappedEleName: 'vaadin-number-field',
2282
2287
  style: () => `
2283
2288
  :host {
@@ -2291,44 +2296,44 @@ const NumberFieldClass = compose(
2291
2296
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2292
2297
  `,
2293
2298
  excludeAttrsSync: ['tabindex'],
2294
- componentName: componentName$p,
2299
+ componentName: componentName$s,
2295
2300
  })
2296
2301
  );
2297
2302
 
2298
- const vars$k = NumberFieldClass.cssVarList;
2303
+ const vars$m = NumberFieldClass.cssVarList;
2299
2304
 
2300
2305
  const numberField = {
2301
- [vars$k.hostWidth]: refs.width,
2302
- [vars$k.hostMinWidth]: refs.minWidth,
2303
- [vars$k.fontSize]: refs.fontSize,
2304
- [vars$k.fontFamily]: refs.fontFamily,
2305
- [vars$k.labelTextColor]: refs.labelTextColor,
2306
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
2307
- [vars$k.inputValueTextColor]: refs.valueTextColor,
2308
- [vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
2309
- [vars$k.inputBorderWidth]: refs.borderWidth,
2310
- [vars$k.inputBorderStyle]: refs.borderStyle,
2311
- [vars$k.inputBorderColor]: refs.borderColor,
2312
- [vars$k.inputBorderRadius]: refs.borderRadius,
2313
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
2314
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
2315
- [vars$k.inputOutlineColor]: refs.outlineColor,
2316
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
2317
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
2318
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
2319
- [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
2320
- [vars$k.inputHeight]: refs.inputHeight,
2306
+ [vars$m.hostWidth]: refs.width,
2307
+ [vars$m.hostMinWidth]: refs.minWidth,
2308
+ [vars$m.fontSize]: refs.fontSize,
2309
+ [vars$m.fontFamily]: refs.fontFamily,
2310
+ [vars$m.labelTextColor]: refs.labelTextColor,
2311
+ [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
2312
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
2313
+ [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
2314
+ [vars$m.inputBorderWidth]: refs.borderWidth,
2315
+ [vars$m.inputBorderStyle]: refs.borderStyle,
2316
+ [vars$m.inputBorderColor]: refs.borderColor,
2317
+ [vars$m.inputBorderRadius]: refs.borderRadius,
2318
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
2319
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
2320
+ [vars$m.inputOutlineColor]: refs.outlineColor,
2321
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
2322
+ [vars$m.inputBackgroundColor]: refs.backgroundColor,
2323
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
2324
+ [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
2325
+ [vars$m.inputHeight]: refs.inputHeight,
2321
2326
  };
2322
2327
 
2323
2328
  var numberField$1 = /*#__PURE__*/Object.freeze({
2324
2329
  __proto__: null,
2325
2330
  default: numberField,
2326
- vars: vars$k
2331
+ vars: vars$m
2327
2332
  });
2328
2333
 
2329
- const componentName$o = getComponentName('email-field');
2334
+ const componentName$r = getComponentName('email-field');
2330
2335
 
2331
- const customMixin$4 = (superclass) =>
2336
+ const customMixin$5 = (superclass) =>
2332
2337
  class EmailFieldMixinClass extends superclass {
2333
2338
  init() {
2334
2339
  super.init?.();
@@ -2342,10 +2347,10 @@ const EmailFieldClass = compose(
2342
2347
  draggableMixin,
2343
2348
  composedProxyInputMixin,
2344
2349
  componentNameValidationMixin,
2345
- customMixin$4
2350
+ customMixin$5
2346
2351
  )(
2347
2352
  createProxy({
2348
- slots: ['suffix'],
2353
+ slots: ['', 'suffix'],
2349
2354
  wrappedEleName: 'vaadin-email-field',
2350
2355
  style: () => `
2351
2356
  :host {
@@ -2356,55 +2361,55 @@ const EmailFieldClass = compose(
2356
2361
  }))
2357
2362
  }
2358
2363
  ${useHostExternalPadding(EmailFieldClass.cssVarList)}
2359
- ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2364
+ ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2360
2365
  `,
2361
2366
  excludeAttrsSync: ['tabindex'],
2362
- componentName: componentName$o,
2367
+ componentName: componentName$r,
2363
2368
  })
2364
2369
  );
2365
2370
 
2366
- const vars$j = EmailFieldClass.cssVarList;
2371
+ const vars$l = EmailFieldClass.cssVarList;
2367
2372
 
2368
2373
  const emailField = {
2369
- [vars$j.hostWidth]: refs.width,
2370
- [vars$j.hostMinWidth]: refs.minWidth,
2371
- [vars$j.fontSize]: refs.fontSize,
2372
- [vars$j.fontFamily]: refs.fontFamily,
2373
- [vars$j.labelTextColor]: refs.labelTextColor,
2374
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
2375
- [vars$j.inputValueTextColor]: refs.valueTextColor,
2376
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
2377
- [vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
2378
- [vars$j.inputBorderWidth]: refs.borderWidth,
2379
- [vars$j.inputBorderStyle]: refs.borderStyle,
2380
- [vars$j.inputBorderColor]: refs.borderColor,
2381
- [vars$j.inputBorderRadius]: refs.borderRadius,
2382
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
2383
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
2384
- [vars$j.inputOutlineColor]: refs.outlineColor,
2385
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
2386
- [vars$j.inputBackgroundColor]: refs.backgroundColor,
2387
- [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
2388
- [vars$j.inputHeight]: refs.inputHeight,
2374
+ [vars$l.hostWidth]: refs.width,
2375
+ [vars$l.hostMinWidth]: refs.minWidth,
2376
+ [vars$l.fontSize]: refs.fontSize,
2377
+ [vars$l.fontFamily]: refs.fontFamily,
2378
+ [vars$l.labelTextColor]: refs.labelTextColor,
2379
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
2380
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
2381
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
2382
+ [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
2383
+ [vars$l.inputBorderWidth]: refs.borderWidth,
2384
+ [vars$l.inputBorderStyle]: refs.borderStyle,
2385
+ [vars$l.inputBorderColor]: refs.borderColor,
2386
+ [vars$l.inputBorderRadius]: refs.borderRadius,
2387
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
2388
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
2389
+ [vars$l.inputOutlineColor]: refs.outlineColor,
2390
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
2391
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
2392
+ [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
2393
+ [vars$l.inputHeight]: refs.inputHeight,
2389
2394
  };
2390
2395
 
2391
2396
  var emailField$1 = /*#__PURE__*/Object.freeze({
2392
2397
  __proto__: null,
2393
2398
  default: emailField,
2394
- vars: vars$j
2399
+ vars: vars$l
2395
2400
  });
2396
2401
 
2397
- const componentName$n = getComponentName('text-area');
2402
+ const componentName$q = getComponentName('text-area');
2398
2403
 
2399
2404
  const {
2400
- host: host$b,
2401
- label: label$7,
2405
+ host: host$c,
2406
+ label: label$8,
2402
2407
  placeholder: placeholder$1,
2403
2408
  inputField: inputField$3,
2404
2409
  textArea: textArea$2,
2405
- requiredIndicator: requiredIndicator$7,
2410
+ requiredIndicator: requiredIndicator$8,
2406
2411
  helperText: helperText$6,
2407
- errorMessage: errorMessage$7,
2412
+ errorMessage: errorMessage$8,
2408
2413
  } = {
2409
2414
  host: { selector: () => ':host' },
2410
2415
  label: { selector: '::part(label)' },
@@ -2419,16 +2424,16 @@ const {
2419
2424
  const TextAreaClass = compose(
2420
2425
  createStyleMixin({
2421
2426
  mappings: {
2422
- hostWidth: { ...host$b, property: 'width' },
2423
- hostMinWidth: { ...host$b, property: 'min-width' },
2424
- fontSize: [host$b, textArea$2],
2425
- fontFamily: [label$7, inputField$3, helperText$6, errorMessage$7],
2427
+ hostWidth: { ...host$c, property: 'width' },
2428
+ hostMinWidth: { ...host$c, property: 'min-width' },
2429
+ fontSize: [host$c, textArea$2],
2430
+ fontFamily: [label$8, inputField$3, helperText$6, errorMessage$8],
2426
2431
  labelTextColor: [
2427
- { ...label$7, property: 'color' },
2428
- { ...requiredIndicator$7, property: 'color' },
2432
+ { ...label$8, property: 'color' },
2433
+ { ...requiredIndicator$8, property: 'color' },
2429
2434
  ],
2430
- labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
2431
- errorMessageTextColor: { ...errorMessage$7, property: 'color' },
2435
+ labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2436
+ errorMessageTextColor: { ...errorMessage$8, property: 'color' },
2432
2437
  inputBackgroundColor: { ...inputField$3, property: 'background-color' },
2433
2438
  inputValueTextColor: { ...textArea$2, property: 'color' },
2434
2439
  inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
@@ -2466,48 +2471,48 @@ const TextAreaClass = compose(
2466
2471
  ${resetInputCursor('vaadin-text-area')}
2467
2472
  `,
2468
2473
  excludeAttrsSync: ['tabindex'],
2469
- componentName: componentName$n,
2474
+ componentName: componentName$q,
2470
2475
  })
2471
2476
  );
2472
2477
 
2473
- const globalRefs$8 = getThemeRefs(globals);
2474
- const vars$i = TextAreaClass.cssVarList;
2478
+ const globalRefs$a = getThemeRefs(globals);
2479
+ const vars$k = TextAreaClass.cssVarList;
2475
2480
 
2476
2481
  const textArea = {
2477
- [vars$i.hostWidth]: refs.width,
2478
- [vars$i.hostMinWidth]: refs.minWidth,
2479
- [vars$i.fontSize]: globalRefs$8.typography.body2.size,
2480
- [vars$i.fontFamily]: refs.fontFamily,
2481
- [vars$i.labelTextColor]: refs.labelTextColor,
2482
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
2483
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
2484
- [vars$i.inputBackgroundColor]: refs.backgroundColor,
2485
- [vars$i.inputValueTextColor]: refs.valueTextColor,
2486
- [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
2487
- [vars$i.inputBorderRadius]: refs.borderRadius,
2488
- [vars$i.inputBorderWidth]: refs.borderWidth,
2489
- [vars$i.inputBorderStyle]: refs.borderStyle,
2490
- [vars$i.inputBorderColor]: refs.borderColor,
2491
- [vars$i.inputOutlineWidth]: refs.outlineWidth,
2492
- [vars$i.inputOutlineStyle]: refs.outlineStyle,
2493
- [vars$i.inputOutlineColor]: refs.outlineColor,
2494
- [vars$i.inputOutlineOffset]: refs.outlineOffset,
2495
- [vars$i.inputResizeType]: 'vertical',
2496
- [vars$i.inputMinHeight]: '5em',
2482
+ [vars$k.hostWidth]: refs.width,
2483
+ [vars$k.hostMinWidth]: refs.minWidth,
2484
+ [vars$k.fontSize]: globalRefs$a.typography.body2.size,
2485
+ [vars$k.fontFamily]: refs.fontFamily,
2486
+ [vars$k.labelTextColor]: refs.labelTextColor,
2487
+ [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
2488
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
2489
+ [vars$k.inputBackgroundColor]: refs.backgroundColor,
2490
+ [vars$k.inputValueTextColor]: refs.valueTextColor,
2491
+ [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
2492
+ [vars$k.inputBorderRadius]: refs.borderRadius,
2493
+ [vars$k.inputBorderWidth]: refs.borderWidth,
2494
+ [vars$k.inputBorderStyle]: refs.borderStyle,
2495
+ [vars$k.inputBorderColor]: refs.borderColor,
2496
+ [vars$k.inputOutlineWidth]: refs.outlineWidth,
2497
+ [vars$k.inputOutlineStyle]: refs.outlineStyle,
2498
+ [vars$k.inputOutlineColor]: refs.outlineColor,
2499
+ [vars$k.inputOutlineOffset]: refs.outlineOffset,
2500
+ [vars$k.inputResizeType]: 'vertical',
2501
+ [vars$k.inputMinHeight]: '5em',
2497
2502
 
2498
2503
  _disabled: {
2499
- [vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
2504
+ [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
2500
2505
  },
2501
2506
 
2502
2507
  _readonly: {
2503
- [vars$i.inputResizeType]: 'none',
2508
+ [vars$k.inputResizeType]: 'none',
2504
2509
  },
2505
2510
  };
2506
2511
 
2507
2512
  var textArea$1 = /*#__PURE__*/Object.freeze({
2508
2513
  __proto__: null,
2509
2514
  default: textArea,
2510
- vars: vars$i
2515
+ vars: vars$k
2511
2516
  });
2512
2517
 
2513
2518
  const createBaseInputClass = (...args) =>
@@ -2518,9 +2523,9 @@ const createBaseInputClass = (...args) =>
2518
2523
  inputEventsDispatchingMixin
2519
2524
  )(createBaseClass(...args));
2520
2525
 
2521
- const componentName$m = getComponentName('boolean-field-internal');
2526
+ const componentName$p = getComponentName('boolean-field-internal');
2522
2527
 
2523
- createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
2528
+ createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
2524
2529
 
2525
2530
  const booleanFieldMixin = (superclass) =>
2526
2531
  class BooleanFieldMixinClass extends superclass {
@@ -2529,14 +2534,14 @@ const booleanFieldMixin = (superclass) =>
2529
2534
 
2530
2535
  const template = document.createElement('template');
2531
2536
  template.innerHTML = `
2532
- <${componentName$m}
2537
+ <${componentName$p}
2533
2538
  tabindex="-1"
2534
2539
  slot="input"
2535
- ></${componentName$m}>
2540
+ ></${componentName$p}>
2536
2541
  `;
2537
2542
 
2538
2543
  this.baseElement.appendChild(template.content.cloneNode(true));
2539
- this.inputElement = this.shadowRoot.querySelector(componentName$m);
2544
+ this.inputElement = this.shadowRoot.querySelector(componentName$p);
2540
2545
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
2541
2546
 
2542
2547
  forwardAttrs(this, this.inputElement, {
@@ -2615,18 +2620,18 @@ vaadin-checkbox::part(checkbox) {
2615
2620
  }
2616
2621
  `;
2617
2622
 
2618
- const componentName$l = getComponentName('checkbox');
2623
+ const componentName$o = getComponentName('checkbox');
2619
2624
 
2620
2625
  const {
2621
- host: host$a,
2626
+ host: host$b,
2622
2627
  component: component$1,
2623
2628
  checkboxElement,
2624
2629
  checkboxSurface,
2625
2630
  checkboxHiddenLabel: checkboxHiddenLabel$1,
2626
- label: label$6,
2627
- requiredIndicator: requiredIndicator$6,
2631
+ label: label$7,
2632
+ requiredIndicator: requiredIndicator$7,
2628
2633
  helperText: helperText$5,
2629
- errorMessage: errorMessage$6,
2634
+ errorMessage: errorMessage$7,
2630
2635
  } = {
2631
2636
  host: { selector: () => ':host' },
2632
2637
  label: { selector: '::part(label)' },
@@ -2642,25 +2647,25 @@ const {
2642
2647
  const CheckboxClass = compose(
2643
2648
  createStyleMixin({
2644
2649
  mappings: {
2645
- hostWidth: { ...host$a, property: 'width' },
2650
+ hostWidth: { ...host$b, property: 'width' },
2646
2651
 
2647
- fontSize: [host$a, checkboxElement, label$6, checkboxHiddenLabel$1],
2648
- fontFamily: [label$6, checkboxHiddenLabel$1, helperText$5, errorMessage$6],
2652
+ fontSize: [host$b, checkboxElement, label$7, checkboxHiddenLabel$1],
2653
+ fontFamily: [label$7, checkboxHiddenLabel$1, helperText$5, errorMessage$7],
2649
2654
 
2650
2655
  labelTextColor: [
2651
- { ...label$6, property: 'color' },
2652
- { ...requiredIndicator$6, property: 'color' },
2653
- { ...label$6, property: '-webkit-text-fill-color' },
2656
+ { ...label$7, property: 'color' },
2657
+ { ...requiredIndicator$7, property: 'color' },
2658
+ { ...label$7, property: '-webkit-text-fill-color' },
2654
2659
  ],
2655
- labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
2656
- errorMessageTextColor: { ...errorMessage$6, property: 'color' },
2660
+ labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
2661
+ errorMessageTextColor: { ...errorMessage$7, property: 'color' },
2657
2662
 
2658
2663
  labelFontWeight: [
2659
- { ...label$6, property: 'font-weight' },
2664
+ { ...label$7, property: 'font-weight' },
2660
2665
  { ...checkboxHiddenLabel$1, property: 'font-weight' },
2661
2666
  ],
2662
2667
  labelSpacing: [
2663
- { ...label$6, property: 'left' },
2668
+ { ...label$7, property: 'left' },
2664
2669
  { ...checkboxHiddenLabel$1, property: 'padding-left' },
2665
2670
  ],
2666
2671
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
@@ -2683,8 +2688,8 @@ const CheckboxClass = compose(
2683
2688
  { ...checkboxSurface, property: 'font-size' },
2684
2689
  { ...component$1, property: 'font-size' },
2685
2690
  { ...checkboxHiddenLabel$1, property: 'line-height' },
2686
- { ...label$6, property: 'margin-left' },
2687
- { ...label$6, property: 'line-height' },
2691
+ { ...label$7, property: 'margin-left' },
2692
+ { ...label$7, property: 'line-height' },
2688
2693
  ],
2689
2694
  },
2690
2695
  }),
@@ -2705,60 +2710,60 @@ const CheckboxClass = compose(
2705
2710
  ${useHostExternalPadding(CheckboxClass.cssVarList)}
2706
2711
  `,
2707
2712
  excludeAttrsSync: ['tabindex'],
2708
- componentName: componentName$l,
2713
+ componentName: componentName$o,
2709
2714
  })
2710
2715
  );
2711
2716
 
2712
- const vars$h = CheckboxClass.cssVarList;
2717
+ const vars$j = CheckboxClass.cssVarList;
2713
2718
 
2714
2719
  const checkbox = {
2715
- [vars$h.hostWidth]: refs.width,
2716
- [vars$h.fontSize]: refs.fontSize,
2717
- [vars$h.fontFamily]: refs.fontFamily,
2718
- [vars$h.labelTextColor]: refs.labelTextColor,
2719
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
2720
- [vars$h.labelFontWeight]: '400',
2721
- [vars$h.labelSpacing]: '0.75em',
2722
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
2723
- [vars$h.inputOutlineWidth]: refs.outlineWidth,
2724
- [vars$h.inputOutlineOffset]: refs.outlineOffset,
2725
- [vars$h.inputOutlineColor]: refs.outlineColor,
2726
- [vars$h.inputOutlineStyle]: refs.outlineStyle,
2727
- [vars$h.inputBorderRadius]: refs.borderRadius,
2728
- [vars$h.inputBorderColor]: refs.borderColor,
2729
- [vars$h.inputBorderWidth]: refs.borderWidth,
2730
- [vars$h.inputBorderStyle]: refs.borderStyle,
2731
- [vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
2732
- [vars$h.inputSize]: '2em',
2720
+ [vars$j.hostWidth]: refs.width,
2721
+ [vars$j.fontSize]: refs.fontSize,
2722
+ [vars$j.fontFamily]: refs.fontFamily,
2723
+ [vars$j.labelTextColor]: refs.labelTextColor,
2724
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
2725
+ [vars$j.labelFontWeight]: '400',
2726
+ [vars$j.labelSpacing]: '0.75em',
2727
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
2728
+ [vars$j.inputOutlineWidth]: refs.outlineWidth,
2729
+ [vars$j.inputOutlineOffset]: refs.outlineOffset,
2730
+ [vars$j.inputOutlineColor]: refs.outlineColor,
2731
+ [vars$j.inputOutlineStyle]: refs.outlineStyle,
2732
+ [vars$j.inputBorderRadius]: refs.borderRadius,
2733
+ [vars$j.inputBorderColor]: refs.borderColor,
2734
+ [vars$j.inputBorderWidth]: refs.borderWidth,
2735
+ [vars$j.inputBorderStyle]: refs.borderStyle,
2736
+ [vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
2737
+ [vars$j.inputSize]: '2em',
2733
2738
 
2734
2739
  _checked: {
2735
- [vars$h.inputBackgroundColor]: refs.backgroundColor,
2736
- [vars$h.inputValueTextColor]: refs.valueTextColor,
2740
+ [vars$j.inputBackgroundColor]: refs.backgroundColor,
2741
+ [vars$j.inputValueTextColor]: refs.valueTextColor,
2737
2742
  },
2738
2743
 
2739
2744
  _disabled: {
2740
- [vars$h.labelTextColor]: refs.labelTextColor,
2745
+ [vars$j.labelTextColor]: refs.labelTextColor,
2741
2746
  },
2742
2747
  };
2743
2748
 
2744
2749
  var checkbox$1 = /*#__PURE__*/Object.freeze({
2745
2750
  __proto__: null,
2746
2751
  default: checkbox,
2747
- vars: vars$h
2752
+ vars: vars$j
2748
2753
  });
2749
2754
 
2750
- const componentName$k = getComponentName('switch-toggle');
2755
+ const componentName$n = getComponentName('switch-toggle');
2751
2756
 
2752
2757
  const {
2753
- host: host$9,
2758
+ host: host$a,
2754
2759
  component,
2755
2760
  checkboxElement: track,
2756
2761
  checkboxSurface: knob,
2757
2762
  checkboxHiddenLabel,
2758
- label: label$5,
2759
- requiredIndicator: requiredIndicator$5,
2763
+ label: label$6,
2764
+ requiredIndicator: requiredIndicator$6,
2760
2765
  helperText: helperText$4,
2761
- errorMessage: errorMessage$5,
2766
+ errorMessage: errorMessage$6,
2762
2767
  } = {
2763
2768
  host: { selector: () => ':host' },
2764
2769
  label: { selector: '::part(label)' },
@@ -2774,9 +2779,9 @@ const {
2774
2779
  const SwitchToggleClass = compose(
2775
2780
  createStyleMixin({
2776
2781
  mappings: {
2777
- hostWidth: { ...host$9, property: 'width' },
2778
- fontSize: [component, label$5, checkboxHiddenLabel],
2779
- fontFamily: [label$5, helperText$4, errorMessage$5],
2782
+ hostWidth: { ...host$a, property: 'width' },
2783
+ fontSize: [component, label$6, checkboxHiddenLabel],
2784
+ fontFamily: [label$6, helperText$4, errorMessage$6],
2780
2785
  trackBorderWidth: { ...track, property: 'border-width' },
2781
2786
  trackBorderStyle: { ...track, property: 'border-style' },
2782
2787
  trackBorderColor: { ...track, property: 'border-color' },
@@ -2800,24 +2805,24 @@ const SwitchToggleClass = compose(
2800
2805
  knobLeftOffset: { ...knob, property: 'left' },
2801
2806
 
2802
2807
  labelSpacing: [
2803
- { ...label$5, property: 'padding-left' },
2808
+ { ...label$6, property: 'padding-left' },
2804
2809
  { ...checkboxHiddenLabel, property: 'padding-left' },
2805
2810
  ],
2806
2811
  labelLineHeight: [
2807
- { ...label$5, property: 'line-height' },
2812
+ { ...label$6, property: 'line-height' },
2808
2813
  { ...checkboxHiddenLabel, property: 'line-height' },
2809
2814
  ],
2810
2815
  labelFontWeight: [
2811
- { ...label$5, property: 'font-weight' },
2816
+ { ...label$6, property: 'font-weight' },
2812
2817
  { ...checkboxHiddenLabel, property: 'font-weight' },
2813
2818
  ],
2814
2819
  labelTextColor: [
2815
- { ...label$5, property: 'color' },
2816
- { ...requiredIndicator$5, property: 'color' },
2817
- { ...label$5, property: '-webkit-text-fill-color' },
2820
+ { ...label$6, property: 'color' },
2821
+ { ...requiredIndicator$6, property: 'color' },
2822
+ { ...label$6, property: '-webkit-text-fill-color' },
2818
2823
  ],
2819
- labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
2820
- errorMessageTextColor: { ...errorMessage$5, property: 'color' },
2824
+ labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
2825
+ errorMessageTextColor: { ...errorMessage$6, property: 'color' },
2821
2826
  inputOutlineWidth: { ...track, property: 'outline-width' },
2822
2827
  inputOutlineOffset: { ...track, property: 'outline-offset' },
2823
2828
  inputOutlineColor: { ...track, property: 'outline-color' },
@@ -2850,83 +2855,83 @@ const SwitchToggleClass = compose(
2850
2855
  }
2851
2856
  `,
2852
2857
  excludeAttrsSync: ['tabindex'],
2853
- componentName: componentName$k,
2858
+ componentName: componentName$n,
2854
2859
  })
2855
2860
  );
2856
2861
 
2857
2862
  const knobMargin = '2px';
2858
2863
  const checkboxHeight = '1.25em';
2859
2864
 
2860
- const globalRefs$7 = getThemeRefs(globals);
2861
- const vars$g = SwitchToggleClass.cssVarList;
2865
+ const globalRefs$9 = getThemeRefs(globals);
2866
+ const vars$i = SwitchToggleClass.cssVarList;
2862
2867
 
2863
2868
  const switchToggle = {
2864
- [vars$g.fontSize]: refs.fontSize,
2865
- [vars$g.fontFamily]: refs.fontFamily,
2866
-
2867
- [vars$g.inputOutlineWidth]: refs.outlineWidth,
2868
- [vars$g.inputOutlineOffset]: refs.outlineOffset,
2869
- [vars$g.inputOutlineColor]: refs.outlineColor,
2870
- [vars$g.inputOutlineStyle]: refs.outlineStyle,
2871
-
2872
- [vars$g.trackBorderStyle]: refs.borderStyle,
2873
- [vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
2874
- [vars$g.trackBorderColor]: refs.borderColor,
2875
- [vars$g.trackBackgroundColor]: 'none',
2876
- [vars$g.trackBorderRadius]: globalRefs$7.radius.md,
2877
- [vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
2878
- [vars$g.trackHeight]: checkboxHeight,
2879
-
2880
- [vars$g.knobSize]: `calc(1em - ${knobMargin})`,
2881
- [vars$g.knobRadius]: '50%',
2882
- [vars$g.knobTopOffset]: '1px',
2883
- [vars$g.knobLeftOffset]: knobMargin,
2884
- [vars$g.knobColor]: refs.valueTextColor,
2885
- [vars$g.knobTransitionDuration]: '0.3s',
2886
-
2887
- [vars$g.labelTextColor]: refs.labelTextColor,
2888
- [vars$g.labelFontWeight]: '400',
2889
- [vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
2890
- [vars$g.labelSpacing]: '0.25em',
2891
- [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
2892
- [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
2893
-
2894
- [vars$g.hostWidth]: refs.width,
2869
+ [vars$i.fontSize]: refs.fontSize,
2870
+ [vars$i.fontFamily]: refs.fontFamily,
2871
+
2872
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
2873
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
2874
+ [vars$i.inputOutlineColor]: refs.outlineColor,
2875
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
2876
+
2877
+ [vars$i.trackBorderStyle]: refs.borderStyle,
2878
+ [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
2879
+ [vars$i.trackBorderColor]: refs.borderColor,
2880
+ [vars$i.trackBackgroundColor]: 'none',
2881
+ [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
2882
+ [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
2883
+ [vars$i.trackHeight]: checkboxHeight,
2884
+
2885
+ [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
2886
+ [vars$i.knobRadius]: '50%',
2887
+ [vars$i.knobTopOffset]: '1px',
2888
+ [vars$i.knobLeftOffset]: knobMargin,
2889
+ [vars$i.knobColor]: refs.valueTextColor,
2890
+ [vars$i.knobTransitionDuration]: '0.3s',
2891
+
2892
+ [vars$i.labelTextColor]: refs.labelTextColor,
2893
+ [vars$i.labelFontWeight]: '400',
2894
+ [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
2895
+ [vars$i.labelSpacing]: '0.25em',
2896
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
2897
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
2898
+
2899
+ [vars$i.hostWidth]: refs.width,
2895
2900
 
2896
2901
  _checked: {
2897
- [vars$g.trackBorderColor]: refs.borderColor,
2898
- [vars$g.trackBackgroundColor]: refs.backgroundColor,
2899
- [vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
2900
- [vars$g.knobColor]: refs.valueTextColor,
2901
- [vars$g.knobTextColor]: refs.valueTextColor,
2902
+ [vars$i.trackBorderColor]: refs.borderColor,
2903
+ [vars$i.trackBackgroundColor]: refs.backgroundColor,
2904
+ [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
2905
+ [vars$i.knobColor]: refs.valueTextColor,
2906
+ [vars$i.knobTextColor]: refs.valueTextColor,
2902
2907
  },
2903
2908
 
2904
2909
  _disabled: {
2905
- [vars$g.knobColor]: globalRefs$7.colors.surface.light,
2906
- [vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
2907
- [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
2908
- [vars$g.labelTextColor]: refs.labelTextColor,
2910
+ [vars$i.knobColor]: globalRefs$9.colors.surface.light,
2911
+ [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
2912
+ [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
2913
+ [vars$i.labelTextColor]: refs.labelTextColor,
2909
2914
  _checked: {
2910
- [vars$g.knobColor]: globalRefs$7.colors.surface.light,
2911
- [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
2915
+ [vars$i.knobColor]: globalRefs$9.colors.surface.light,
2916
+ [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
2912
2917
  },
2913
2918
  },
2914
2919
 
2915
2920
  _invalid: {
2916
- [vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
2917
- [vars$g.knobColor]: globalRefs$7.colors.error.main,
2921
+ [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
2922
+ [vars$i.knobColor]: globalRefs$9.colors.error.main,
2918
2923
  },
2919
2924
  };
2920
2925
 
2921
2926
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
2922
2927
  __proto__: null,
2923
2928
  default: switchToggle,
2924
- vars: vars$g
2929
+ vars: vars$i
2925
2930
  });
2926
2931
 
2927
- const componentName$j = getComponentName('container');
2932
+ const componentName$m = getComponentName('container');
2928
2933
 
2929
- class RawContainer extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
2934
+ class RawContainer extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > slot' }) {
2930
2935
  constructor() {
2931
2936
  super();
2932
2937
 
@@ -2978,7 +2983,7 @@ const ContainerClass = compose(
2978
2983
  componentNameValidationMixin
2979
2984
  )(RawContainer);
2980
2985
 
2981
- const globalRefs$6 = getThemeRefs(globals);
2986
+ const globalRefs$8 = getThemeRefs(globals);
2982
2987
 
2983
2988
  const compVars$2 = ContainerClass.cssVarList;
2984
2989
 
@@ -3000,7 +3005,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
3000
3005
  horizontalAlignment,
3001
3006
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
3002
3007
  },
3003
- componentName$j
3008
+ componentName$m
3004
3009
  );
3005
3010
 
3006
3011
  const { shadowColor } = helperRefs$2;
@@ -3010,8 +3015,8 @@ const container = {
3010
3015
 
3011
3016
  [compVars$2.hostWidth]: '100%',
3012
3017
  [compVars$2.boxShadow]: 'none',
3013
- [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
3014
- [compVars$2.color]: globalRefs$6.colors.surface.contrast,
3018
+ [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
3019
+ [compVars$2.color]: globalRefs$8.colors.surface.contrast,
3015
3020
 
3016
3021
  verticalPadding: {
3017
3022
  sm: { [compVars$2.verticalPadding]: '5px' },
@@ -3057,34 +3062,34 @@ const container = {
3057
3062
 
3058
3063
  shadow: {
3059
3064
  sm: {
3060
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
3065
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
3061
3066
  },
3062
3067
  md: {
3063
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
3068
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
3064
3069
  },
3065
3070
  lg: {
3066
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
3071
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
3067
3072
  },
3068
3073
  xl: {
3069
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
3074
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
3070
3075
  },
3071
3076
  '2xl': {
3072
3077
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
3073
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
3078
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
3074
3079
  },
3075
3080
  },
3076
3081
 
3077
3082
  borderRadius: {
3078
- sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
3079
- md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
3080
- lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
3081
- xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
3082
- '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
3083
- '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
3083
+ sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
3084
+ md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
3085
+ lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
3086
+ xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
3087
+ '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
3088
+ '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
3084
3089
  },
3085
3090
  };
3086
3091
 
3087
- const vars$f = {
3092
+ const vars$h = {
3088
3093
  ...compVars$2,
3089
3094
  ...helperVars$2,
3090
3095
  };
@@ -3092,7 +3097,7 @@ const vars$f = {
3092
3097
  var container$1 = /*#__PURE__*/Object.freeze({
3093
3098
  __proto__: null,
3094
3099
  default: container,
3095
- vars: vars$f
3100
+ vars: vars$h
3096
3101
  });
3097
3102
 
3098
3103
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -3145,49 +3150,49 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
3145
3150
  return CssVarImageClass;
3146
3151
  };
3147
3152
 
3148
- const componentName$i = getComponentName('logo');
3153
+ const componentName$l = getComponentName('logo');
3149
3154
 
3150
3155
  const LogoClass = createCssVarImageClass({
3151
- componentName: componentName$i,
3156
+ componentName: componentName$l,
3152
3157
  varName: 'url',
3153
3158
  fallbackVarName: 'fallbackUrl',
3154
3159
  });
3155
3160
 
3156
- const vars$e = LogoClass.cssVarList;
3161
+ const vars$g = LogoClass.cssVarList;
3157
3162
 
3158
3163
  const logo$1 = {
3159
- [vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
3164
+ [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
3160
3165
  };
3161
3166
 
3162
3167
  var logo$2 = /*#__PURE__*/Object.freeze({
3163
3168
  __proto__: null,
3164
3169
  default: logo$1,
3165
- vars: vars$e
3170
+ vars: vars$g
3166
3171
  });
3167
3172
 
3168
- const componentName$h = getComponentName('totp-image');
3173
+ const componentName$k = getComponentName('totp-image');
3169
3174
 
3170
3175
  const TotpImageClass = createCssVarImageClass({
3171
- componentName: componentName$h,
3176
+ componentName: componentName$k,
3172
3177
  varName: 'url',
3173
3178
  fallbackVarName: 'fallbackUrl',
3174
3179
  });
3175
3180
 
3176
- const vars$d = TotpImageClass.cssVarList;
3181
+ const vars$f = TotpImageClass.cssVarList;
3177
3182
 
3178
3183
  const logo = {
3179
- [vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
3184
+ [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
3180
3185
  };
3181
3186
 
3182
3187
  var totpImage = /*#__PURE__*/Object.freeze({
3183
3188
  __proto__: null,
3184
3189
  default: logo,
3185
- vars: vars$d
3190
+ vars: vars$f
3186
3191
  });
3187
3192
 
3188
- const componentName$g = getComponentName('text');
3193
+ const componentName$j = getComponentName('text');
3189
3194
 
3190
- class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
3195
+ class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
3191
3196
  constructor() {
3192
3197
  super();
3193
3198
 
@@ -3229,98 +3234,98 @@ const TextClass = compose(
3229
3234
  componentNameValidationMixin
3230
3235
  )(RawText);
3231
3236
 
3232
- const globalRefs$5 = getThemeRefs(globals);
3233
- const vars$c = TextClass.cssVarList;
3237
+ const globalRefs$7 = getThemeRefs(globals);
3238
+ const vars$e = TextClass.cssVarList;
3234
3239
 
3235
3240
  const text$2 = {
3236
- [vars$c.textLineHeight]: '1em',
3237
- [vars$c.textAlign]: 'left',
3238
- [vars$c.textColor]: globalRefs$5.colors.surface.dark,
3241
+ [vars$e.textLineHeight]: '1em',
3242
+ [vars$e.textAlign]: 'left',
3243
+ [vars$e.textColor]: globalRefs$7.colors.surface.dark,
3239
3244
  variant: {
3240
3245
  h1: {
3241
- [vars$c.fontSize]: globalRefs$5.typography.h1.size,
3242
- [vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
3243
- [vars$c.fontFamily]: globalRefs$5.typography.h1.font,
3246
+ [vars$e.fontSize]: globalRefs$7.typography.h1.size,
3247
+ [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
3248
+ [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
3244
3249
  },
3245
3250
  h2: {
3246
- [vars$c.fontSize]: globalRefs$5.typography.h2.size,
3247
- [vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
3248
- [vars$c.fontFamily]: globalRefs$5.typography.h2.font,
3251
+ [vars$e.fontSize]: globalRefs$7.typography.h2.size,
3252
+ [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
3253
+ [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
3249
3254
  },
3250
3255
  h3: {
3251
- [vars$c.fontSize]: globalRefs$5.typography.h3.size,
3252
- [vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
3253
- [vars$c.fontFamily]: globalRefs$5.typography.h3.font,
3256
+ [vars$e.fontSize]: globalRefs$7.typography.h3.size,
3257
+ [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
3258
+ [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
3254
3259
  },
3255
3260
  subtitle1: {
3256
- [vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
3257
- [vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
3258
- [vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
3261
+ [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
3262
+ [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
3263
+ [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
3259
3264
  },
3260
3265
  subtitle2: {
3261
- [vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
3262
- [vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
3263
- [vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
3266
+ [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
3267
+ [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
3268
+ [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
3264
3269
  },
3265
3270
  body1: {
3266
- [vars$c.fontSize]: globalRefs$5.typography.body1.size,
3267
- [vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
3268
- [vars$c.fontFamily]: globalRefs$5.typography.body1.font,
3271
+ [vars$e.fontSize]: globalRefs$7.typography.body1.size,
3272
+ [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
3273
+ [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
3269
3274
  },
3270
3275
  body2: {
3271
- [vars$c.fontSize]: globalRefs$5.typography.body2.size,
3272
- [vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
3273
- [vars$c.fontFamily]: globalRefs$5.typography.body2.font,
3276
+ [vars$e.fontSize]: globalRefs$7.typography.body2.size,
3277
+ [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
3278
+ [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
3274
3279
  },
3275
3280
  },
3276
3281
 
3277
3282
  mode: {
3278
3283
  primary: {
3279
- [vars$c.textColor]: globalRefs$5.colors.primary.main,
3284
+ [vars$e.textColor]: globalRefs$7.colors.primary.main,
3280
3285
  },
3281
3286
  secondary: {
3282
- [vars$c.textColor]: globalRefs$5.colors.secondary.main,
3287
+ [vars$e.textColor]: globalRefs$7.colors.secondary.main,
3283
3288
  },
3284
3289
  error: {
3285
- [vars$c.textColor]: globalRefs$5.colors.error.main,
3290
+ [vars$e.textColor]: globalRefs$7.colors.error.main,
3286
3291
  },
3287
3292
  success: {
3288
- [vars$c.textColor]: globalRefs$5.colors.success.main,
3293
+ [vars$e.textColor]: globalRefs$7.colors.success.main,
3289
3294
  },
3290
3295
  },
3291
3296
 
3292
3297
  textAlign: {
3293
- right: { [vars$c.textAlign]: 'right' },
3294
- left: { [vars$c.textAlign]: 'left' },
3295
- center: { [vars$c.textAlign]: 'center' },
3298
+ right: { [vars$e.textAlign]: 'right' },
3299
+ left: { [vars$e.textAlign]: 'left' },
3300
+ center: { [vars$e.textAlign]: 'center' },
3296
3301
  },
3297
3302
 
3298
3303
  _fullWidth: {
3299
- [vars$c.hostWidth]: '100%',
3304
+ [vars$e.hostWidth]: '100%',
3300
3305
  },
3301
3306
 
3302
3307
  _italic: {
3303
- [vars$c.fontStyle]: 'italic',
3308
+ [vars$e.fontStyle]: 'italic',
3304
3309
  },
3305
3310
 
3306
3311
  _uppercase: {
3307
- [vars$c.textTransform]: 'uppercase',
3312
+ [vars$e.textTransform]: 'uppercase',
3308
3313
  },
3309
3314
 
3310
3315
  _lowercase: {
3311
- [vars$c.textTransform]: 'lowercase',
3316
+ [vars$e.textTransform]: 'lowercase',
3312
3317
  },
3313
3318
  };
3314
3319
 
3315
3320
  var text$3 = /*#__PURE__*/Object.freeze({
3316
3321
  __proto__: null,
3317
3322
  default: text$2,
3318
- vars: vars$c
3323
+ vars: vars$e
3319
3324
  });
3320
3325
 
3321
- const componentName$f = getComponentName('link');
3326
+ const componentName$i = getComponentName('link');
3322
3327
 
3323
- class RawLink extends createBaseClass({ componentName: componentName$f, baseSelector: ':host a' }) {
3328
+ class RawLink extends createBaseClass({ componentName: componentName$i, baseSelector: ':host a' }) {
3324
3329
  constructor() {
3325
3330
  super();
3326
3331
 
@@ -3366,12 +3371,12 @@ const selectors$1 = {
3366
3371
  text: { selector: () => TextClass.componentName },
3367
3372
  };
3368
3373
 
3369
- const { anchor, text: text$1, host: host$8, wrapper: wrapper$1 } = selectors$1;
3374
+ const { anchor, text: text$1, host: host$9, wrapper: wrapper$1 } = selectors$1;
3370
3375
 
3371
3376
  const LinkClass = compose(
3372
3377
  createStyleMixin({
3373
3378
  mappings: {
3374
- hostWidth: { ...host$8, property: 'width' },
3379
+ hostWidth: { ...host$9, property: 'width' },
3375
3380
  textAlign: wrapper$1,
3376
3381
  textColor: [
3377
3382
  { ...anchor, property: 'color' },
@@ -3384,36 +3389,36 @@ const LinkClass = compose(
3384
3389
  componentNameValidationMixin
3385
3390
  )(RawLink);
3386
3391
 
3387
- const globalRefs$4 = getThemeRefs(globals);
3388
- const vars$b = LinkClass.cssVarList;
3392
+ const globalRefs$6 = getThemeRefs(globals);
3393
+ const vars$d = LinkClass.cssVarList;
3389
3394
 
3390
3395
  const link = {
3391
- [vars$b.cursor]: 'pointer',
3396
+ [vars$d.cursor]: 'pointer',
3392
3397
 
3393
- [vars$b.textColor]: globalRefs$4.colors.primary.main,
3398
+ [vars$d.textColor]: globalRefs$6.colors.primary.main,
3394
3399
 
3395
3400
  textAlign: {
3396
- right: { [vars$b.textAlign]: 'right' },
3397
- left: { [vars$b.textAlign]: 'left' },
3398
- center: { [vars$b.textAlign]: 'center' },
3401
+ right: { [vars$d.textAlign]: 'right' },
3402
+ left: { [vars$d.textAlign]: 'left' },
3403
+ center: { [vars$d.textAlign]: 'center' },
3399
3404
  },
3400
3405
 
3401
3406
  _fullWidth: {
3402
- [vars$b.hostWidth]: '100%',
3407
+ [vars$d.hostWidth]: '100%',
3403
3408
  },
3404
3409
 
3405
3410
  mode: {
3406
3411
  primary: {
3407
- [vars$b.textColor]: globalRefs$4.colors.primary.main,
3412
+ [vars$d.textColor]: globalRefs$6.colors.primary.main,
3408
3413
  },
3409
3414
  secondary: {
3410
- [vars$b.textColor]: globalRefs$4.colors.secondary.main,
3415
+ [vars$d.textColor]: globalRefs$6.colors.secondary.main,
3411
3416
  },
3412
3417
  error: {
3413
- [vars$b.textColor]: globalRefs$4.colors.error.main,
3418
+ [vars$d.textColor]: globalRefs$6.colors.error.main,
3414
3419
  },
3415
3420
  success: {
3416
- [vars$b.textColor]: globalRefs$4.colors.success.main,
3421
+ [vars$d.textColor]: globalRefs$6.colors.success.main,
3417
3422
  },
3418
3423
  },
3419
3424
  };
@@ -3421,11 +3426,11 @@ const link = {
3421
3426
  var link$1 = /*#__PURE__*/Object.freeze({
3422
3427
  __proto__: null,
3423
3428
  default: link,
3424
- vars: vars$b
3429
+ vars: vars$d
3425
3430
  });
3426
3431
 
3427
- const componentName$e = getComponentName('divider');
3428
- class RawDivider extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
3432
+ const componentName$h = getComponentName('divider');
3433
+ class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
3429
3434
  constructor() {
3430
3435
  super();
3431
3436
 
@@ -3470,7 +3475,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$e, baseS
3470
3475
  }
3471
3476
  }
3472
3477
 
3473
- const { host: host$7, before, after: after$1, text } = {
3478
+ const { host: host$8, before, after: after$1, text } = {
3474
3479
  host: { selector: () => ':host' },
3475
3480
  before: { selector: '::before' },
3476
3481
  after: { selector: '::after' },
@@ -3480,8 +3485,8 @@ const { host: host$7, before, after: after$1, text } = {
3480
3485
  const DividerClass = compose(
3481
3486
  createStyleMixin({
3482
3487
  mappings: {
3483
- hostWidth: { ...host$7, property: 'width' },
3484
- hostPadding: { ...host$7, property: 'padding' },
3488
+ hostWidth: { ...host$8, property: 'width' },
3489
+ hostPadding: { ...host$8, property: 'padding' },
3485
3490
 
3486
3491
  minHeight: {},
3487
3492
  alignItems: {},
@@ -3521,7 +3526,7 @@ const DividerClass = compose(
3521
3526
  componentNameValidationMixin
3522
3527
  )(RawDivider);
3523
3528
 
3524
- const globalRefs$3 = getThemeRefs(globals);
3529
+ const globalRefs$5 = getThemeRefs(globals);
3525
3530
  const compVars$1 = DividerClass.cssVarList;
3526
3531
 
3527
3532
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -3529,7 +3534,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
3529
3534
  thickness: '2px',
3530
3535
  spacing: '10px',
3531
3536
  },
3532
- componentName$e
3537
+ componentName$h
3533
3538
  );
3534
3539
 
3535
3540
  const divider = {
@@ -3539,7 +3544,7 @@ const divider = {
3539
3544
  [compVars$1.flexDirection]: 'row',
3540
3545
  [compVars$1.alignSelf]: 'stretch',
3541
3546
  [compVars$1.hostWidth]: '100%',
3542
- [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
3547
+ [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
3543
3548
  [compVars$1.stripeColorOpacity]: '0.5',
3544
3549
  [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
3545
3550
  [compVars$1.labelTextWidth]: 'fit-content',
@@ -3558,7 +3563,7 @@ const divider = {
3558
3563
  },
3559
3564
  };
3560
3565
 
3561
- const vars$a = {
3566
+ const vars$c = {
3562
3567
  ...compVars$1,
3563
3568
  ...helperVars$1,
3564
3569
  };
@@ -3566,20 +3571,20 @@ const vars$a = {
3566
3571
  var divider$1 = /*#__PURE__*/Object.freeze({
3567
3572
  __proto__: null,
3568
3573
  default: divider,
3569
- vars: vars$a
3574
+ vars: vars$c
3570
3575
  });
3571
3576
 
3572
3577
  /* eslint-disable no-param-reassign */
3573
3578
 
3574
- const componentName$d = getComponentName('passcode-internal');
3579
+ const componentName$g = getComponentName('passcode-internal');
3575
3580
 
3576
- createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
3581
+ createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
3577
3582
 
3578
- const componentName$c = getComponentName('passcode');
3583
+ const componentName$f = getComponentName('passcode');
3579
3584
 
3580
3585
  const observedAttributes$3 = ['digits'];
3581
3586
 
3582
- const customMixin$3 = (superclass) =>
3587
+ const customMixin$4 = (superclass) =>
3583
3588
  class PasscodeMixinClass extends superclass {
3584
3589
  static get observedAttributes() {
3585
3590
  return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -3594,17 +3599,17 @@ const customMixin$3 = (superclass) =>
3594
3599
  const template = document.createElement('template');
3595
3600
 
3596
3601
  template.innerHTML = `
3597
- <${componentName$d}
3602
+ <${componentName$g}
3598
3603
  bordered="true"
3599
3604
  name="code"
3600
3605
  tabindex="-1"
3601
3606
  slot="input"
3602
- ></${componentName$d}>
3607
+ ><slot></slot></${componentName$g}>
3603
3608
  `;
3604
3609
 
3605
3610
  this.baseElement.appendChild(template.content.cloneNode(true));
3606
3611
 
3607
- this.inputElement = this.shadowRoot.querySelector(componentName$d);
3612
+ this.inputElement = this.shadowRoot.querySelector(componentName$g);
3608
3613
 
3609
3614
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
3610
3615
  }
@@ -3619,13 +3624,13 @@ const customMixin$3 = (superclass) =>
3619
3624
  };
3620
3625
 
3621
3626
  const {
3622
- host: host$6,
3627
+ host: host$7,
3623
3628
  digitField,
3624
- label: label$4,
3625
- requiredIndicator: requiredIndicator$4,
3626
- internalWrapper,
3629
+ label: label$5,
3630
+ requiredIndicator: requiredIndicator$5,
3631
+ internalWrapper: internalWrapper$1,
3627
3632
  focusedDigitField,
3628
- errorMessage: errorMessage$4,
3633
+ errorMessage: errorMessage$5,
3629
3634
  } = {
3630
3635
  host: { selector: () => ':host' },
3631
3636
  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -3641,15 +3646,15 @@ const textVars$2 = TextFieldClass.cssVarList;
3641
3646
  const PasscodeClass = compose(
3642
3647
  createStyleMixin({
3643
3648
  mappings: {
3644
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$6],
3649
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
3645
3650
  hostWidth: { property: 'width' },
3646
- fontFamily: host$6,
3651
+ fontFamily: host$7,
3647
3652
  labelTextColor: [
3648
- { ...label$4, property: 'color' },
3649
- { ...requiredIndicator$4, property: 'color' },
3653
+ { ...label$5, property: 'color' },
3654
+ { ...requiredIndicator$5, property: 'color' },
3650
3655
  ],
3651
- labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
3652
- errorMessageTextColor: { ...errorMessage$4, property: 'color' },
3656
+ labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
3657
+ errorMessageTextColor: { ...errorMessage$5, property: 'color' },
3653
3658
  digitValueTextColor: {
3654
3659
  selector: TextFieldClass.componentName,
3655
3660
  property: textVars$2.inputValueTextColor,
@@ -3661,7 +3666,7 @@ const PasscodeClass = compose(
3661
3666
  digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
3662
3667
  digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
3663
3668
  digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
3664
- digitSpacing: { ...internalWrapper, property: 'gap' },
3669
+ digitSpacing: { ...internalWrapper$1, property: 'gap' },
3665
3670
  digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
3666
3671
  digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
3667
3672
 
@@ -3671,7 +3676,7 @@ const PasscodeClass = compose(
3671
3676
  draggableMixin,
3672
3677
  composedProxyInputMixin,
3673
3678
  componentNameValidationMixin,
3674
- customMixin$3
3679
+ customMixin$4
3675
3680
  )(
3676
3681
  createProxy({
3677
3682
  slots: [],
@@ -3742,44 +3747,44 @@ const PasscodeClass = compose(
3742
3747
  ${resetInputCursor('vaadin-text-field')}
3743
3748
  `,
3744
3749
  excludeAttrsSync: ['tabindex'],
3745
- componentName: componentName$c,
3750
+ componentName: componentName$f,
3746
3751
  })
3747
3752
  );
3748
3753
 
3749
- const vars$9 = PasscodeClass.cssVarList;
3754
+ const vars$b = PasscodeClass.cssVarList;
3750
3755
 
3751
3756
  const passcode = {
3752
- [vars$9.fontFamily]: refs.fontFamily,
3753
- [vars$9.fontSize]: refs.fontSize,
3754
- [vars$9.labelTextColor]: refs.labelTextColor,
3755
- [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
3756
- [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
3757
- [vars$9.digitValueTextColor]: refs.valueTextColor,
3758
- [vars$9.digitPadding]: '0',
3759
- [vars$9.digitTextAlign]: 'center',
3760
- [vars$9.digitSpacing]: '4px',
3761
- [vars$9.hostWidth]: refs.width,
3762
- [vars$9.digitOutlineColor]: 'transparent',
3763
- [vars$9.digitOutlineWidth]: refs.outlineWidth,
3764
- [vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
3765
- [vars$9.digitSize]: refs.inputHeight,
3757
+ [vars$b.fontFamily]: refs.fontFamily,
3758
+ [vars$b.fontSize]: refs.fontSize,
3759
+ [vars$b.labelTextColor]: refs.labelTextColor,
3760
+ [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
3761
+ [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
3762
+ [vars$b.digitValueTextColor]: refs.valueTextColor,
3763
+ [vars$b.digitPadding]: '0',
3764
+ [vars$b.digitTextAlign]: 'center',
3765
+ [vars$b.digitSpacing]: '4px',
3766
+ [vars$b.hostWidth]: refs.width,
3767
+ [vars$b.digitOutlineColor]: 'transparent',
3768
+ [vars$b.digitOutlineWidth]: refs.outlineWidth,
3769
+ [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
3770
+ [vars$b.digitSize]: refs.inputHeight,
3766
3771
 
3767
3772
  _hideCursor: {
3768
- [vars$9.digitCaretTextColor]: 'transparent',
3773
+ [vars$b.digitCaretTextColor]: 'transparent',
3769
3774
  },
3770
3775
  };
3771
3776
 
3772
3777
  var passcode$1 = /*#__PURE__*/Object.freeze({
3773
3778
  __proto__: null,
3774
3779
  default: passcode,
3775
- vars: vars$9
3780
+ vars: vars$b
3776
3781
  });
3777
3782
 
3778
- const componentName$b = getComponentName('loader-linear');
3783
+ const componentName$e = getComponentName('loader-linear');
3779
3784
 
3780
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
3785
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
3781
3786
  static get componentName() {
3782
- return componentName$b;
3787
+ return componentName$e;
3783
3788
  }
3784
3789
 
3785
3790
  constructor() {
@@ -3815,18 +3820,18 @@ const selectors = {
3815
3820
  host: { selector: () => ':host' },
3816
3821
  };
3817
3822
 
3818
- const { after, host: host$5 } = selectors;
3823
+ const { after, host: host$6 } = selectors;
3819
3824
 
3820
3825
  const LoaderLinearClass = compose(
3821
3826
  createStyleMixin({
3822
3827
  mappings: {
3823
3828
  hostDisplay: {},
3824
- hostWidth: { ...host$5, property: 'width' },
3829
+ hostWidth: { ...host$6, property: 'width' },
3825
3830
  barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
3826
3831
  barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
3827
3832
  verticalPadding: [
3828
- { ...host$5, property: 'padding-top' },
3829
- { ...host$5, property: 'padding-bottom' },
3833
+ { ...host$6, property: 'padding-top' },
3834
+ { ...host$6, property: 'padding-bottom' },
3830
3835
  ],
3831
3836
  barBackgroundColor: { property: 'background-color' },
3832
3837
  barColor: { ...after, property: 'background-color' },
@@ -3840,54 +3845,54 @@ const LoaderLinearClass = compose(
3840
3845
  componentNameValidationMixin
3841
3846
  )(RawLoaderLinear);
3842
3847
 
3843
- const globalRefs$2 = getThemeRefs(globals);
3844
- const vars$8 = LoaderLinearClass.cssVarList;
3848
+ const globalRefs$4 = getThemeRefs(globals);
3849
+ const vars$a = LoaderLinearClass.cssVarList;
3845
3850
 
3846
3851
  const loaderLinear = {
3847
- [vars$8.hostDisplay]: 'inline-block',
3848
- [vars$8.hostWidth]: '100%',
3852
+ [vars$a.hostDisplay]: 'inline-block',
3853
+ [vars$a.hostWidth]: '100%',
3849
3854
 
3850
- [vars$8.barColor]: globalRefs$2.colors.surface.contrast,
3851
- [vars$8.barWidth]: '20%',
3855
+ [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
3856
+ [vars$a.barWidth]: '20%',
3852
3857
 
3853
- [vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
3854
- [vars$8.barBorderRadius]: '4px',
3858
+ [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
3859
+ [vars$a.barBorderRadius]: '4px',
3855
3860
 
3856
- [vars$8.animationDuration]: '2s',
3857
- [vars$8.animationTimingFunction]: 'linear',
3858
- [vars$8.animationIterationCount]: 'infinite',
3859
- [vars$8.verticalPadding]: '0.25em',
3861
+ [vars$a.animationDuration]: '2s',
3862
+ [vars$a.animationTimingFunction]: 'linear',
3863
+ [vars$a.animationIterationCount]: 'infinite',
3864
+ [vars$a.verticalPadding]: '0.25em',
3860
3865
 
3861
3866
  size: {
3862
- xs: { [vars$8.barHeight]: '2px' },
3863
- sm: { [vars$8.barHeight]: '4px' },
3864
- md: { [vars$8.barHeight]: '6px' },
3865
- lg: { [vars$8.barHeight]: '8px' },
3867
+ xs: { [vars$a.barHeight]: '2px' },
3868
+ sm: { [vars$a.barHeight]: '4px' },
3869
+ md: { [vars$a.barHeight]: '6px' },
3870
+ lg: { [vars$a.barHeight]: '8px' },
3866
3871
  },
3867
3872
 
3868
3873
  mode: {
3869
3874
  primary: {
3870
- [vars$8.barColor]: globalRefs$2.colors.primary.main,
3875
+ [vars$a.barColor]: globalRefs$4.colors.primary.main,
3871
3876
  },
3872
3877
  secondary: {
3873
- [vars$8.barColor]: globalRefs$2.colors.secondary.main,
3878
+ [vars$a.barColor]: globalRefs$4.colors.secondary.main,
3874
3879
  },
3875
3880
  },
3876
3881
 
3877
3882
  _hidden: {
3878
- [vars$8.hostDisplay]: 'none',
3883
+ [vars$a.hostDisplay]: 'none',
3879
3884
  },
3880
3885
  };
3881
3886
 
3882
3887
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
3883
3888
  __proto__: null,
3884
3889
  default: loaderLinear,
3885
- vars: vars$8
3890
+ vars: vars$a
3886
3891
  });
3887
3892
 
3888
- const componentName$a = getComponentName('loader-radial');
3893
+ const componentName$d = getComponentName('loader-radial');
3889
3894
 
3890
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > div' }) {
3895
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
3891
3896
  constructor() {
3892
3897
  super();
3893
3898
 
@@ -3931,22 +3936,22 @@ const LoaderRadialClass = compose(
3931
3936
  componentNameValidationMixin
3932
3937
  )(RawLoaderRadial);
3933
3938
 
3934
- const globalRefs$1 = getThemeRefs(globals);
3939
+ const globalRefs$3 = getThemeRefs(globals);
3935
3940
  const compVars = LoaderRadialClass.cssVarList;
3936
3941
 
3937
3942
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
3938
3943
  {
3939
- spinnerColor: globalRefs$1.colors.surface.contrast,
3944
+ spinnerColor: globalRefs$3.colors.surface.contrast,
3940
3945
  mode: {
3941
3946
  primary: {
3942
- spinnerColor: globalRefs$1.colors.primary.main,
3947
+ spinnerColor: globalRefs$3.colors.primary.main,
3943
3948
  },
3944
3949
  secondary: {
3945
- spinnerColor: globalRefs$1.colors.secondary.main,
3950
+ spinnerColor: globalRefs$3.colors.secondary.main,
3946
3951
  },
3947
3952
  },
3948
3953
  },
3949
- componentName$a
3954
+ componentName$d
3950
3955
  );
3951
3956
 
3952
3957
  const loaderRadial = {
@@ -3975,7 +3980,7 @@ const loaderRadial = {
3975
3980
  [compVars.hostDisplay]: 'none',
3976
3981
  },
3977
3982
  };
3978
- const vars$7 = {
3983
+ const vars$9 = {
3979
3984
  ...compVars,
3980
3985
  ...helperVars,
3981
3986
  };
@@ -3983,10 +3988,10 @@ const vars$7 = {
3983
3988
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
3984
3989
  __proto__: null,
3985
3990
  default: loaderRadial,
3986
- vars: vars$7
3991
+ vars: vars$9
3987
3992
  });
3988
3993
 
3989
- const componentName$9 = getComponentName('combo-box');
3994
+ const componentName$c = getComponentName('combo-box');
3990
3995
 
3991
3996
  const ComboBoxMixin = (superclass) =>
3992
3997
  class ComboBoxMixinClass extends superclass {
@@ -4038,15 +4043,15 @@ const ComboBoxMixin = (superclass) =>
4038
4043
  };
4039
4044
 
4040
4045
  const {
4041
- host: host$4,
4046
+ host: host$5,
4042
4047
  inputField: inputField$2,
4043
4048
  inputElement,
4044
4049
  placeholder,
4045
4050
  toggle,
4046
- label: label$3,
4047
- requiredIndicator: requiredIndicator$3,
4051
+ label: label$4,
4052
+ requiredIndicator: requiredIndicator$4,
4048
4053
  helperText: helperText$3,
4049
- errorMessage: errorMessage$3,
4054
+ errorMessage: errorMessage$4,
4050
4055
  } = {
4051
4056
  host: { selector: () => ':host' },
4052
4057
  inputField: { selector: '::part(input-field)' },
@@ -4067,22 +4072,22 @@ const {
4067
4072
  const ComboBoxClass = compose(
4068
4073
  createStyleMixin({
4069
4074
  mappings: {
4070
- hostWidth: { ...host$4, property: 'width' },
4075
+ hostWidth: { ...host$5, property: 'width' },
4071
4076
  // we apply font-size also on the host so we can set its width with em
4072
- fontSize: [{}, host$4],
4073
- fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
4077
+ fontSize: [{}, host$5],
4078
+ fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
4074
4079
  labelTextColor: [
4075
- { ...label$3, property: 'color' },
4076
- { ...requiredIndicator$3, property: 'color' },
4080
+ { ...label$4, property: 'color' },
4081
+ { ...requiredIndicator$4, property: 'color' },
4077
4082
  ],
4078
- errorMessageTextColor: { ...errorMessage$3, property: 'color' },
4083
+ errorMessageTextColor: { ...errorMessage$4, property: 'color' },
4079
4084
  inputHeight: { ...inputField$2, property: 'height' },
4080
4085
  inputBackgroundColor: { ...inputField$2, property: 'background-color' },
4081
4086
  inputBorderColor: { ...inputField$2, property: 'border-color' },
4082
4087
  inputBorderWidth: { ...inputField$2, property: 'border-width' },
4083
4088
  inputBorderStyle: { ...inputField$2, property: 'border-style' },
4084
4089
  inputBorderRadius: { ...inputField$2, property: 'border-radius' },
4085
- labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
4090
+ labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
4086
4091
  inputValueTextColor: { ...inputField$2, property: 'color' },
4087
4092
  inputPlaceholderTextColor: { ...placeholder, property: 'color' },
4088
4093
  inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
@@ -4130,7 +4135,7 @@ const ComboBoxClass = compose(
4130
4135
  ComboBoxMixin
4131
4136
  )(
4132
4137
  createProxy({
4133
- slots: ['prefix'],
4138
+ slots: ['', 'prefix'],
4134
4139
  wrappedEleName: 'vaadin-combo-box',
4135
4140
  style: () => `
4136
4141
  :host {
@@ -4166,45 +4171,45 @@ const ComboBoxClass = compose(
4166
4171
  // and reset items to an empty array, and opening the list box with no items
4167
4172
  // to display.
4168
4173
  excludeAttrsSync: ['tabindex', 'size'],
4169
- componentName: componentName$9,
4174
+ componentName: componentName$c,
4170
4175
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
4171
4176
  })
4172
4177
  );
4173
4178
 
4174
- const globalRefs = getThemeRefs(globals);
4175
- const vars$6 = ComboBoxClass.cssVarList;
4179
+ const globalRefs$2 = getThemeRefs(globals);
4180
+ const vars$8 = ComboBoxClass.cssVarList;
4176
4181
 
4177
4182
  const comboBox = {
4178
- [vars$6.hostWidth]: refs.width,
4179
- [vars$6.fontSize]: refs.fontSize,
4180
- [vars$6.fontFamily]: refs.fontFamily,
4181
- [vars$6.labelTextColor]: refs.labelTextColor,
4182
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
4183
- [vars$6.inputBorderColor]: refs.borderColor,
4184
- [vars$6.inputBorderWidth]: refs.borderWidth,
4185
- [vars$6.inputBorderStyle]: refs.borderStyle,
4186
- [vars$6.inputBorderRadius]: refs.borderRadius,
4187
- [vars$6.inputOutlineColor]: refs.outlineColor,
4188
- [vars$6.inputOutlineOffset]: refs.outlineOffset,
4189
- [vars$6.inputOutlineWidth]: refs.outlineWidth,
4190
- [vars$6.inputOutlineStyle]: refs.outlineStyle,
4191
- [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
4192
- [vars$6.inputValueTextColor]: refs.valueTextColor,
4193
- [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
4194
- [vars$6.inputBackgroundColor]: refs.backgroundColor,
4195
- [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
4196
- [vars$6.inputHeight]: refs.inputHeight,
4197
- [vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
4198
- [vars$6.inputDropdownButtonCursor]: 'pointer',
4199
- [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
4200
- [vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
4183
+ [vars$8.hostWidth]: refs.width,
4184
+ [vars$8.fontSize]: refs.fontSize,
4185
+ [vars$8.fontFamily]: refs.fontFamily,
4186
+ [vars$8.labelTextColor]: refs.labelTextColor,
4187
+ [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
4188
+ [vars$8.inputBorderColor]: refs.borderColor,
4189
+ [vars$8.inputBorderWidth]: refs.borderWidth,
4190
+ [vars$8.inputBorderStyle]: refs.borderStyle,
4191
+ [vars$8.inputBorderRadius]: refs.borderRadius,
4192
+ [vars$8.inputOutlineColor]: refs.outlineColor,
4193
+ [vars$8.inputOutlineOffset]: refs.outlineOffset,
4194
+ [vars$8.inputOutlineWidth]: refs.outlineWidth,
4195
+ [vars$8.inputOutlineStyle]: refs.outlineStyle,
4196
+ [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
4197
+ [vars$8.inputValueTextColor]: refs.valueTextColor,
4198
+ [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
4199
+ [vars$8.inputBackgroundColor]: refs.backgroundColor,
4200
+ [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
4201
+ [vars$8.inputHeight]: refs.inputHeight,
4202
+ [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
4203
+ [vars$8.inputDropdownButtonCursor]: 'pointer',
4204
+ [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
4205
+ [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
4201
4206
 
4202
4207
  _readonly: {
4203
- [vars$6.inputDropdownButtonCursor]: 'default',
4208
+ [vars$8.inputDropdownButtonCursor]: 'default',
4204
4209
  },
4205
4210
 
4206
- [vars$6.overlay.minHeight]: '400px',
4207
- [vars$6.overlay.margin]: '0 auto',
4211
+ [vars$8.overlay.minHeight]: '400px',
4212
+ [vars$8.overlay.margin]: '0 auto',
4208
4213
 
4209
4214
  // [vars.overlayCursor]: 'pointer',
4210
4215
  // [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -4215,14 +4220,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
4215
4220
  __proto__: null,
4216
4221
  comboBox: comboBox,
4217
4222
  default: comboBox,
4218
- vars: vars$6
4223
+ vars: vars$8
4219
4224
  });
4220
4225
 
4221
4226
  const observedAttributes$2 = ['src', 'alt'];
4222
4227
 
4223
- const componentName$8 = getComponentName('image');
4228
+ const componentName$b = getComponentName('image');
4224
4229
 
4225
- const BaseClass$1 = createBaseClass({ componentName: componentName$8, baseSelector: ':host > img' });
4230
+ const BaseClass$1 = createBaseClass({ componentName: componentName$b, baseSelector: ':host > img' });
4226
4231
  class RawImage extends BaseClass$1 {
4227
4232
  static get observedAttributes() {
4228
4233
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -4262,14 +4267,14 @@ const ImageClass = compose(
4262
4267
  draggableMixin
4263
4268
  )(RawImage);
4264
4269
 
4265
- const vars$5 = ImageClass.cssVarList;
4270
+ const vars$7 = ImageClass.cssVarList;
4266
4271
 
4267
4272
  const image = {};
4268
4273
 
4269
4274
  var image$1 = /*#__PURE__*/Object.freeze({
4270
4275
  __proto__: null,
4271
4276
  default: image,
4272
- vars: vars$5
4277
+ vars: vars$7
4273
4278
  });
4274
4279
 
4275
4280
  var CountryCodes = [
@@ -5485,16 +5490,16 @@ var CountryCodes = [
5485
5490
  },
5486
5491
  ].sort((a, b) => (a.name < b.name ? -1 : 1));
5487
5492
 
5488
- const componentName$7 = getComponentName('phone-field-internal');
5493
+ const componentName$a = getComponentName('phone-field-internal');
5489
5494
 
5490
- createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
5495
+ createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
5491
5496
 
5492
5497
  const textVars$1 = TextFieldClass.cssVarList;
5493
5498
  const comboVars = ComboBoxClass.cssVarList;
5494
5499
 
5495
- const componentName$6 = getComponentName('phone-field');
5500
+ const componentName$9 = getComponentName('phone-field');
5496
5501
 
5497
- const customMixin$2 = (superclass) =>
5502
+ const customMixin$3 = (superclass) =>
5498
5503
  class PhoneFieldMixinClass extends superclass {
5499
5504
  static get CountryCodes() {
5500
5505
  return CountryCodes;
@@ -5506,15 +5511,15 @@ const customMixin$2 = (superclass) =>
5506
5511
  const template = document.createElement('template');
5507
5512
 
5508
5513
  template.innerHTML = `
5509
- <${componentName$7}
5514
+ <${componentName$a}
5510
5515
  tabindex="-1"
5511
5516
  slot="input"
5512
- ></${componentName$7}>
5517
+ ></${componentName$a}>
5513
5518
  `;
5514
5519
 
5515
5520
  this.baseElement.appendChild(template.content.cloneNode(true));
5516
5521
 
5517
- this.inputElement = this.shadowRoot.querySelector(componentName$7);
5522
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
5518
5523
 
5519
5524
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5520
5525
  includeAttrs: [
@@ -5534,14 +5539,14 @@ const customMixin$2 = (superclass) =>
5534
5539
  };
5535
5540
 
5536
5541
  const {
5537
- host: host$3,
5538
- label: label$2,
5539
- requiredIndicator: requiredIndicator$2,
5542
+ host: host$4,
5543
+ label: label$3,
5544
+ requiredIndicator: requiredIndicator$3,
5540
5545
  inputField: inputField$1,
5541
5546
  countryCodeInput,
5542
5547
  phoneInput: phoneInput$1,
5543
5548
  separator,
5544
- errorMessage: errorMessage$2,
5549
+ errorMessage: errorMessage$3,
5545
5550
  helperText: helperText$2,
5546
5551
  } = {
5547
5552
  host: { selector: () => ':host' },
@@ -5559,7 +5564,7 @@ const PhoneFieldClass = compose(
5559
5564
  createStyleMixin({
5560
5565
  mappings: {
5561
5566
  fontSize: [
5562
- host$3,
5567
+ host$4,
5563
5568
  inputField$1,
5564
5569
  {
5565
5570
  selector: TextFieldClass.componentName,
@@ -5571,8 +5576,8 @@ const PhoneFieldClass = compose(
5571
5576
  },
5572
5577
  ],
5573
5578
  fontFamily: [
5574
- label$2,
5575
- errorMessage$2,
5579
+ label$3,
5580
+ errorMessage$3,
5576
5581
  helperText$2,
5577
5582
  {
5578
5583
  ...countryCodeInput,
@@ -5580,7 +5585,7 @@ const PhoneFieldClass = compose(
5580
5585
  },
5581
5586
  ],
5582
5587
  hostWidth: [
5583
- { ...host$3, property: 'width' },
5588
+ { ...host$4, property: 'width' },
5584
5589
  { ...phoneInput$1, property: 'width' },
5585
5590
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
5586
5591
  ],
@@ -5607,11 +5612,11 @@ const PhoneFieldClass = compose(
5607
5612
  phoneInputWidth: { ...phoneInput$1, property: 'width' },
5608
5613
 
5609
5614
  labelTextColor: [
5610
- { ...label$2, property: 'color' },
5611
- { ...requiredIndicator$2, property: 'color' },
5615
+ { ...label$3, property: 'color' },
5616
+ { ...requiredIndicator$3, property: 'color' },
5612
5617
  ],
5613
- labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
5614
- errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5618
+ labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
5619
+ errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5615
5620
 
5616
5621
  inputValueTextColor: [
5617
5622
  { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -5633,7 +5638,7 @@ const PhoneFieldClass = compose(
5633
5638
  }),
5634
5639
  draggableMixin,
5635
5640
  composedProxyInputMixin,
5636
- customMixin$2
5641
+ customMixin$3
5637
5642
  )(
5638
5643
  createProxy({
5639
5644
  slots: [],
@@ -5709,32 +5714,32 @@ const PhoneFieldClass = compose(
5709
5714
  }
5710
5715
  `,
5711
5716
  excludeAttrsSync: ['tabindex'],
5712
- componentName: componentName$6,
5717
+ componentName: componentName$9,
5713
5718
  })
5714
5719
  );
5715
5720
 
5716
- const vars$4 = PhoneFieldClass.cssVarList;
5721
+ const vars$6 = PhoneFieldClass.cssVarList;
5717
5722
 
5718
5723
  const phoneField = {
5719
- [vars$4.hostWidth]: refs.width,
5720
- [vars$4.fontSize]: refs.fontSize,
5721
- [vars$4.fontFamily]: refs.fontFamily,
5722
- [vars$4.labelTextColor]: refs.labelTextColor,
5723
- [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
5724
- [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
5725
- [vars$4.inputValueTextColor]: refs.valueTextColor,
5726
- [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
5727
- [vars$4.inputBorderStyle]: refs.borderStyle,
5728
- [vars$4.inputBorderWidth]: refs.borderWidth,
5729
- [vars$4.inputBorderColor]: refs.borderColor,
5730
- [vars$4.inputBorderRadius]: refs.borderRadius,
5731
- [vars$4.inputOutlineStyle]: refs.outlineStyle,
5732
- [vars$4.inputOutlineWidth]: refs.outlineWidth,
5733
- [vars$4.inputOutlineColor]: refs.outlineColor,
5734
- [vars$4.inputOutlineOffset]: refs.outlineOffset,
5735
- [vars$4.phoneInputWidth]: refs.minWidth,
5736
- [vars$4.countryCodeInputWidth]: '5em',
5737
- [vars$4.countryCodeDropdownWidth]: '20em',
5724
+ [vars$6.hostWidth]: refs.width,
5725
+ [vars$6.fontSize]: refs.fontSize,
5726
+ [vars$6.fontFamily]: refs.fontFamily,
5727
+ [vars$6.labelTextColor]: refs.labelTextColor,
5728
+ [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
5729
+ [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
5730
+ [vars$6.inputValueTextColor]: refs.valueTextColor,
5731
+ [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
5732
+ [vars$6.inputBorderStyle]: refs.borderStyle,
5733
+ [vars$6.inputBorderWidth]: refs.borderWidth,
5734
+ [vars$6.inputBorderColor]: refs.borderColor,
5735
+ [vars$6.inputBorderRadius]: refs.borderRadius,
5736
+ [vars$6.inputOutlineStyle]: refs.outlineStyle,
5737
+ [vars$6.inputOutlineWidth]: refs.outlineWidth,
5738
+ [vars$6.inputOutlineColor]: refs.outlineColor,
5739
+ [vars$6.inputOutlineOffset]: refs.outlineOffset,
5740
+ [vars$6.phoneInputWidth]: refs.minWidth,
5741
+ [vars$6.countryCodeInputWidth]: '5em',
5742
+ [vars$6.countryCodeDropdownWidth]: '20em',
5738
5743
 
5739
5744
  // '@overlay': {
5740
5745
  // overlayItemBackgroundColor: 'red'
@@ -5744,18 +5749,18 @@ const phoneField = {
5744
5749
  var phoneField$1 = /*#__PURE__*/Object.freeze({
5745
5750
  __proto__: null,
5746
5751
  default: phoneField,
5747
- vars: vars$4
5752
+ vars: vars$6
5748
5753
  });
5749
5754
 
5750
- const componentName$5 = getComponentName('phone-field-internal-input-box');
5755
+ const componentName$8 = getComponentName('phone-field-internal-input-box');
5751
5756
 
5752
- createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
5757
+ createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
5753
5758
 
5754
5759
  const textVars = TextFieldClass.cssVarList;
5755
5760
 
5756
- const componentName$4 = getComponentName('phone-input-box-field');
5761
+ const componentName$7 = getComponentName('phone-input-box-field');
5757
5762
 
5758
- const customMixin$1 = (superclass) =>
5763
+ const customMixin$2 = (superclass) =>
5759
5764
  class PhoneInputBoxFieldMixinClass extends superclass {
5760
5765
  static get CountryCodes() {
5761
5766
  return CountryCodes;
@@ -5767,15 +5772,15 @@ const customMixin$1 = (superclass) =>
5767
5772
  const template = document.createElement('template');
5768
5773
 
5769
5774
  template.innerHTML = `
5770
- <${componentName$5}
5775
+ <${componentName$8}
5771
5776
  tabindex="-1"
5772
5777
  slot="input"
5773
- ></${componentName$5}>
5778
+ ></${componentName$8}>
5774
5779
  `;
5775
5780
 
5776
5781
  this.baseElement.appendChild(template.content.cloneNode(true));
5777
5782
 
5778
- this.inputElement = this.shadowRoot.querySelector(componentName$5);
5783
+ this.inputElement = this.shadowRoot.querySelector(componentName$8);
5779
5784
 
5780
5785
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5781
5786
  includeAttrs: [
@@ -5792,7 +5797,7 @@ const customMixin$1 = (superclass) =>
5792
5797
  }
5793
5798
  };
5794
5799
 
5795
- const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
5800
+ const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
5796
5801
  host: { selector: () => ':host' },
5797
5802
  label: { selector: '::part(label)' },
5798
5803
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5806,16 +5811,16 @@ const PhoneFieldInputBoxClass = compose(
5806
5811
  createStyleMixin({
5807
5812
  mappings: {
5808
5813
  fontSize: [
5809
- host$2,
5814
+ host$3,
5810
5815
  inputField,
5811
5816
  {
5812
5817
  selector: TextFieldClass.componentName,
5813
5818
  property: TextFieldClass.cssVarList.fontSize,
5814
5819
  },
5815
5820
  ],
5816
- fontFamily: [label$1, errorMessage$1, helperText$1],
5817
- hostWidth: { ...host$2, property: 'width' },
5818
- hostMinWidth: { ...host$2, property: 'min-width' },
5821
+ fontFamily: [label$2, errorMessage$2, helperText$1],
5822
+ hostWidth: { ...host$3, property: 'width' },
5823
+ hostMinWidth: { ...host$3, property: 'min-width' },
5819
5824
 
5820
5825
  inputBorderStyle: { ...inputField, property: 'border-style' },
5821
5826
  inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -5823,11 +5828,11 @@ const PhoneFieldInputBoxClass = compose(
5823
5828
  inputBorderRadius: { ...inputField, property: 'border-radius' },
5824
5829
 
5825
5830
  labelTextColor: [
5826
- { ...label$1, property: 'color' },
5827
- { ...requiredIndicator$1, property: 'color' },
5831
+ { ...label$2, property: 'color' },
5832
+ { ...requiredIndicator$2, property: 'color' },
5828
5833
  ],
5829
- labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
5830
- errorMessageTextColor: { ...errorMessage$1, property: 'color' },
5834
+ labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
5835
+ errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5831
5836
 
5832
5837
  inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
5833
5838
 
@@ -5841,7 +5846,7 @@ const PhoneFieldInputBoxClass = compose(
5841
5846
  }),
5842
5847
  draggableMixin,
5843
5848
  composedProxyInputMixin,
5844
- customMixin$1
5849
+ customMixin$2
5845
5850
  )(
5846
5851
  createProxy({
5847
5852
  slots: [],
@@ -5907,46 +5912,46 @@ const PhoneFieldInputBoxClass = compose(
5907
5912
  }
5908
5913
  `,
5909
5914
  excludeAttrsSync: ['tabindex'],
5910
- componentName: componentName$4,
5915
+ componentName: componentName$7,
5911
5916
  })
5912
5917
  );
5913
5918
 
5914
- const vars$3 = PhoneFieldInputBoxClass.cssVarList;
5919
+ const vars$5 = PhoneFieldInputBoxClass.cssVarList;
5915
5920
 
5916
5921
  const phoneInputBoxField = {
5917
- [vars$3.hostWidth]: '16em',
5918
- [vars$3.hostMinWidth]: refs.minWidth,
5919
- [vars$3.fontSize]: refs.fontSize,
5920
- [vars$3.fontFamily]: refs.fontFamily,
5921
- [vars$3.labelTextColor]: refs.labelTextColor,
5922
- [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
5923
- [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
5924
- [vars$3.inputValueTextColor]: refs.valueTextColor,
5925
- [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
5926
- [vars$3.inputBorderStyle]: refs.borderStyle,
5927
- [vars$3.inputBorderWidth]: refs.borderWidth,
5928
- [vars$3.inputBorderColor]: refs.borderColor,
5929
- [vars$3.inputBorderRadius]: refs.borderRadius,
5930
- [vars$3.inputOutlineStyle]: refs.outlineStyle,
5931
- [vars$3.inputOutlineWidth]: refs.outlineWidth,
5932
- [vars$3.inputOutlineColor]: refs.outlineColor,
5933
- [vars$3.inputOutlineOffset]: refs.outlineOffset,
5922
+ [vars$5.hostWidth]: '16em',
5923
+ [vars$5.hostMinWidth]: refs.minWidth,
5924
+ [vars$5.fontSize]: refs.fontSize,
5925
+ [vars$5.fontFamily]: refs.fontFamily,
5926
+ [vars$5.labelTextColor]: refs.labelTextColor,
5927
+ [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
5928
+ [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
5929
+ [vars$5.inputValueTextColor]: refs.valueTextColor,
5930
+ [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
5931
+ [vars$5.inputBorderStyle]: refs.borderStyle,
5932
+ [vars$5.inputBorderWidth]: refs.borderWidth,
5933
+ [vars$5.inputBorderColor]: refs.borderColor,
5934
+ [vars$5.inputBorderRadius]: refs.borderRadius,
5935
+ [vars$5.inputOutlineStyle]: refs.outlineStyle,
5936
+ [vars$5.inputOutlineWidth]: refs.outlineWidth,
5937
+ [vars$5.inputOutlineColor]: refs.outlineColor,
5938
+ [vars$5.inputOutlineOffset]: refs.outlineOffset,
5934
5939
  _fullWidth: {
5935
- [vars$3.hostWidth]: refs.width,
5940
+ [vars$5.hostWidth]: refs.width,
5936
5941
  },
5937
5942
  };
5938
5943
 
5939
5944
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
5940
5945
  __proto__: null,
5941
5946
  default: phoneInputBoxField,
5942
- vars: vars$3
5947
+ vars: vars$5
5943
5948
  });
5944
5949
 
5945
- const componentName$3 = getComponentName('new-password-internal');
5950
+ const componentName$6 = getComponentName('new-password-internal');
5946
5951
 
5947
- const componentName$2 = getComponentName('new-password');
5952
+ const componentName$5 = getComponentName('new-password');
5948
5953
 
5949
- const customMixin = (superclass) =>
5954
+ const customMixin$1 = (superclass) =>
5950
5955
  class NewPasswordMixinClass extends superclass {
5951
5956
  init() {
5952
5957
  super.init?.();
@@ -5954,16 +5959,16 @@ const customMixin = (superclass) =>
5954
5959
  const template = document.createElement('template');
5955
5960
 
5956
5961
  template.innerHTML = `
5957
- <${componentName$3}
5962
+ <${componentName$6}
5958
5963
  name="new-password"
5959
5964
  tabindex="-1"
5960
5965
  slot="input"
5961
- ></${componentName$3}>
5966
+ ></${componentName$6}>
5962
5967
  `;
5963
5968
 
5964
5969
  this.baseElement.appendChild(template.content.cloneNode(true));
5965
5970
 
5966
- this.inputElement = this.shadowRoot.querySelector(componentName$3);
5971
+ this.inputElement = this.shadowRoot.querySelector(componentName$6);
5967
5972
 
5968
5973
  forwardAttrs(this, this.inputElement, {
5969
5974
  includeAttrs: [
@@ -5984,7 +5989,7 @@ const customMixin = (superclass) =>
5984
5989
  }
5985
5990
  };
5986
5991
 
5987
- const { host: host$1, label, internalInputsWrapper, errorMessage, helperText } = {
5992
+ const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
5988
5993
  host: { selector: () => ':host' },
5989
5994
  label: { selector: '::part(label)' },
5990
5995
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5996,24 +6001,24 @@ const NewPasswordClass = compose(
5996
6001
  createStyleMixin({
5997
6002
  mappings: {
5998
6003
  fontSize: [
5999
- host$1,
6004
+ host$2,
6000
6005
  {},
6001
6006
  {
6002
6007
  selector: PasswordClass.componentName,
6003
6008
  property: PasswordClass.cssVarList.fontSize,
6004
6009
  },
6005
6010
  ],
6006
- fontFamily: [label, errorMessage, helperText],
6007
- errorMessageTextColor: { ...errorMessage, property: 'color' },
6008
- hostWidth: { ...host$1, property: 'width' },
6009
- hostMinWidth: { ...host$1, property: 'min-width' },
6010
- inputsRequiredIndicator: { ...host$1, property: 'content' },
6011
+ fontFamily: [label$1, errorMessage$1, helperText],
6012
+ errorMessageTextColor: { ...errorMessage$1, property: 'color' },
6013
+ hostWidth: { ...host$2, property: 'width' },
6014
+ hostMinWidth: { ...host$2, property: 'min-width' },
6015
+ inputsRequiredIndicator: { ...host$2, property: 'content' },
6011
6016
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
6012
6017
  },
6013
6018
  }),
6014
6019
  draggableMixin,
6015
6020
  composedProxyInputMixin,
6016
- customMixin
6021
+ customMixin$1
6017
6022
  )(
6018
6023
  createProxy({
6019
6024
  slots: [],
@@ -6062,32 +6067,32 @@ const NewPasswordClass = compose(
6062
6067
  },
6063
6068
  `,
6064
6069
  excludeAttrsSync: ['tabindex'],
6065
- componentName: componentName$2,
6070
+ componentName: componentName$5,
6066
6071
  })
6067
6072
  );
6068
6073
 
6069
- const vars$2 = NewPasswordClass.cssVarList;
6074
+ const vars$4 = NewPasswordClass.cssVarList;
6070
6075
 
6071
6076
  const newPassword = {
6072
- [vars$2.hostWidth]: refs.width,
6073
- [vars$2.hostMinWidth]: refs.minWidth,
6074
- [vars$2.fontSize]: refs.fontSize,
6075
- [vars$2.fontFamily]: refs.fontFamily,
6076
- [vars$2.spaceBetweenInputs]: '1em',
6077
- [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
6077
+ [vars$4.hostWidth]: refs.width,
6078
+ [vars$4.hostMinWidth]: refs.minWidth,
6079
+ [vars$4.fontSize]: refs.fontSize,
6080
+ [vars$4.fontFamily]: refs.fontFamily,
6081
+ [vars$4.spaceBetweenInputs]: '1em',
6082
+ [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
6078
6083
 
6079
6084
  _required: {
6080
6085
  // NewPassword doesn't pass `required` attribute to its Password components.
6081
6086
  // That's why we fake the required indicator on each input.
6082
6087
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
6083
- [vars$2.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
6088
+ [vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
6084
6089
  },
6085
6090
  };
6086
6091
 
6087
6092
  var newPassword$1 = /*#__PURE__*/Object.freeze({
6088
6093
  __proto__: null,
6089
6094
  default: newPassword,
6090
- vars: vars$2
6095
+ vars: vars$4
6091
6096
  });
6092
6097
 
6093
6098
  const getFileBase64 = (fileObj) => {
@@ -6102,7 +6107,7 @@ const getFilename = (fileObj) => {
6102
6107
  return fileObj.name.replace(/^.*\\/, '');
6103
6108
  };
6104
6109
 
6105
- const componentName$1 = getComponentName('upload-file');
6110
+ const componentName$4 = getComponentName('upload-file');
6106
6111
 
6107
6112
  const observedAttributes$1 = [
6108
6113
  'title',
@@ -6117,7 +6122,7 @@ const observedAttributes$1 = [
6117
6122
  'icon',
6118
6123
  ];
6119
6124
 
6120
- const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
6125
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
6121
6126
 
6122
6127
  class RawUploadFile extends BaseInputClass {
6123
6128
  static get observedAttributes() {
@@ -6279,7 +6284,7 @@ class RawUploadFile extends BaseInputClass {
6279
6284
  }
6280
6285
  }
6281
6286
 
6282
- const { host, wrapper, icon, title, description, requiredIndicator } = {
6287
+ const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
6283
6288
  host: { selector: () => ':host' },
6284
6289
  wrapper: { selector: () => ':host > div' },
6285
6290
  icon: { selector: () => '.icon' },
@@ -6298,8 +6303,8 @@ const UploadFileClass = compose(
6298
6303
  borderWidth: {},
6299
6304
  borderStyle: {},
6300
6305
  borderRadius: {},
6301
- hostHeight: { ...host, property: 'height' },
6302
- hostWidth: { ...host, property: 'width' },
6306
+ hostHeight: { ...host$1, property: 'height' },
6307
+ hostWidth: { ...host$1, property: 'width' },
6303
6308
  hostPadding: { property: 'padding' },
6304
6309
  gap: { ...wrapper },
6305
6310
  lineHeight: { ...wrapper, property: 'line-height' },
@@ -6311,76 +6316,461 @@ const UploadFileClass = compose(
6311
6316
  { ...description, property: 'color' },
6312
6317
  ],
6313
6318
  iconSize: { ...icon, property: 'width' },
6314
- requiredIndicator: { ...requiredIndicator, property: 'content' },
6319
+ requiredIndicator: { ...requiredIndicator$1, property: 'content' },
6315
6320
  },
6316
6321
  }),
6317
6322
  draggableMixin,
6318
6323
  componentNameValidationMixin
6319
6324
  )(RawUploadFile);
6320
6325
 
6321
- const vars$1 = UploadFileClass.cssVarList;
6326
+ const vars$3 = UploadFileClass.cssVarList;
6322
6327
 
6323
6328
  const uploadFile = {
6324
- [vars$1.labelTextColor]: refs.labelTextColor,
6325
- [vars$1.fontFamily]: refs.fontFamily,
6329
+ [vars$3.labelTextColor]: refs.labelTextColor,
6330
+ [vars$3.fontFamily]: refs.fontFamily,
6326
6331
 
6327
- [vars$1.iconSize]: '2em',
6332
+ [vars$3.iconSize]: '2em',
6328
6333
 
6329
- [vars$1.hostPadding]: '0.75em',
6330
- [vars$1.gap]: '0.5em',
6334
+ [vars$3.hostPadding]: '0.75em',
6335
+ [vars$3.gap]: '0.5em',
6331
6336
 
6332
- [vars$1.fontSize]: '16px',
6333
- [vars$1.titleFontWeight]: '500',
6334
- [vars$1.lineHeight]: '1em',
6337
+ [vars$3.fontSize]: '16px',
6338
+ [vars$3.titleFontWeight]: '500',
6339
+ [vars$3.lineHeight]: '1em',
6335
6340
 
6336
- [vars$1.borderWidth]: refs.borderWidth,
6337
- [vars$1.borderColor]: refs.borderColor,
6338
- [vars$1.borderRadius]: refs.borderRadius,
6339
- [vars$1.borderStyle]: 'dashed',
6341
+ [vars$3.borderWidth]: refs.borderWidth,
6342
+ [vars$3.borderColor]: refs.borderColor,
6343
+ [vars$3.borderRadius]: refs.borderRadius,
6344
+ [vars$3.borderStyle]: 'dashed',
6340
6345
 
6341
6346
  _required: {
6342
- [vars$1.requiredIndicator]: refs.requiredIndicator,
6347
+ [vars$3.requiredIndicator]: refs.requiredIndicator,
6343
6348
  },
6344
6349
 
6345
6350
  size: {
6346
6351
  xs: {
6347
- [vars$1.hostHeight]: '196px',
6348
- [vars$1.hostWidth]: '200px',
6349
- [vars$1.titleFontSize]: '0.875em',
6350
- [vars$1.descriptionFontSize]: '0.875em',
6351
- [vars$1.lineHeight]: '1.25em',
6352
+ [vars$3.hostHeight]: '196px',
6353
+ [vars$3.hostWidth]: '200px',
6354
+ [vars$3.titleFontSize]: '0.875em',
6355
+ [vars$3.descriptionFontSize]: '0.875em',
6356
+ [vars$3.lineHeight]: '1.25em',
6352
6357
  },
6353
6358
  sm: {
6354
- [vars$1.hostHeight]: '216px',
6355
- [vars$1.hostWidth]: '230px',
6356
- [vars$1.titleFontSize]: '1em',
6357
- [vars$1.descriptionFontSize]: '0.875em',
6358
- [vars$1.lineHeight]: '1.25em',
6359
+ [vars$3.hostHeight]: '216px',
6360
+ [vars$3.hostWidth]: '230px',
6361
+ [vars$3.titleFontSize]: '1em',
6362
+ [vars$3.descriptionFontSize]: '0.875em',
6363
+ [vars$3.lineHeight]: '1.25em',
6359
6364
  },
6360
6365
  md: {
6361
- [vars$1.hostHeight]: '256px',
6362
- [vars$1.hostWidth]: '312px',
6363
- [vars$1.titleFontSize]: '1.125em',
6364
- [vars$1.descriptionFontSize]: '1em',
6365
- [vars$1.lineHeight]: '1.5em',
6366
+ [vars$3.hostHeight]: '256px',
6367
+ [vars$3.hostWidth]: '312px',
6368
+ [vars$3.titleFontSize]: '1.125em',
6369
+ [vars$3.descriptionFontSize]: '1em',
6370
+ [vars$3.lineHeight]: '1.5em',
6366
6371
  },
6367
6372
  lg: {
6368
- [vars$1.hostHeight]: '280px',
6369
- [vars$1.hostWidth]: '336px',
6370
- [vars$1.titleFontSize]: '1.125em',
6371
- [vars$1.descriptionFontSize]: '1.125em',
6372
- [vars$1.lineHeight]: '1.75em',
6373
+ [vars$3.hostHeight]: '280px',
6374
+ [vars$3.hostWidth]: '336px',
6375
+ [vars$3.titleFontSize]: '1.125em',
6376
+ [vars$3.descriptionFontSize]: '1.125em',
6377
+ [vars$3.lineHeight]: '1.75em',
6373
6378
  },
6374
6379
  },
6375
6380
 
6376
6381
  _fullWidth: {
6377
- [vars$1.hostWidth]: refs.width,
6382
+ [vars$3.hostWidth]: refs.width,
6378
6383
  },
6379
6384
  };
6380
6385
 
6381
6386
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
6382
6387
  __proto__: null,
6383
6388
  default: uploadFile,
6389
+ vars: vars$3
6390
+ });
6391
+
6392
+ const componentName$3 = getComponentName('select-item');
6393
+
6394
+ class RawSelectItem extends createBaseClass({
6395
+ componentName: componentName$3,
6396
+ baseSelector: ':host > descope-button',
6397
+ }) {
6398
+ get size() {
6399
+ return this.getAttribute('size') || 'md';
6400
+ }
6401
+
6402
+ get variant() {
6403
+ return this.getAttribute('variant') || 'contained';
6404
+ }
6405
+
6406
+ get value() {
6407
+ return this.getAttribute('value') || '';
6408
+ }
6409
+
6410
+ set value(value) {
6411
+ this.setAttribute('value', value);
6412
+ }
6413
+
6414
+ constructor() {
6415
+ super();
6416
+
6417
+ this.attachShadow({ mode: 'open' }).innerHTML = `
6418
+ <style>
6419
+ descope-button {
6420
+ max-width: 100%;
6421
+ }
6422
+ descope-button > slot {
6423
+ width: 100%;
6424
+ overflow: hidden;
6425
+ text-overflow: ellipsis;
6426
+ display: inline-block;
6427
+ }
6428
+ :host {
6429
+ display: inline-block;
6430
+ max-width: 100%
6431
+ }
6432
+ </style>
6433
+ <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
6434
+ <slot></slot>
6435
+ </descope-button>
6436
+ `;
6437
+
6438
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
6439
+ }
6440
+
6441
+ handleFocus() {
6442
+ this.shadowRoot.querySelector('descope-button')?.focus();
6443
+ }
6444
+
6445
+ focus() {
6446
+ this.handleFocus();
6447
+ }
6448
+
6449
+ init() {
6450
+ super.init();
6451
+ this.addEventListener('focus', (e) => {
6452
+ // we want to ignore focus events we are dispatching
6453
+ if (e.isTrusted) {
6454
+ this.handleFocus();
6455
+ }
6456
+ });
6457
+ }
6458
+ }
6459
+
6460
+ const SelectItemClass = compose(
6461
+ createStyleMixin({
6462
+ mappings: {
6463
+ backgroundColor: {
6464
+ selector: () => ButtonClass.componentName,
6465
+ property: ButtonClass.cssVarList.backgroundColor,
6466
+ },
6467
+ labelTextColor: {
6468
+ selector: () => ButtonClass.componentName,
6469
+ property: ButtonClass.cssVarList.labelTextColor,
6470
+ },
6471
+ borderColor: {
6472
+ selector: () => ButtonClass.componentName,
6473
+ property: ButtonClass.cssVarList.borderColor,
6474
+ },
6475
+ borderStyle: {
6476
+ selector: () => ButtonClass.componentName,
6477
+ property: ButtonClass.cssVarList.borderStyle,
6478
+ },
6479
+ borderRadius: {
6480
+ selector: () => ButtonClass.componentName,
6481
+ property: ButtonClass.cssVarList.borderRadius,
6482
+ },
6483
+ },
6484
+ }),
6485
+ draggableMixin,
6486
+ componentNameValidationMixin
6487
+ )(RawSelectItem);
6488
+
6489
+ const globalRefs$1 = getThemeRefs(globals);
6490
+
6491
+ const vars$2 = SelectItemClass.cssVarList;
6492
+
6493
+ const selectItem = {
6494
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
6495
+ [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
6496
+ [vars$2.borderColor]: globalRefs$1.colors.surface.main,
6497
+ [vars$2.borderStyle]: 'solid',
6498
+ [vars$2.borderRadius]: globalRefs$1.radius.sm,
6499
+
6500
+ _hover: {
6501
+ [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
6502
+ },
6503
+
6504
+ _selected: {
6505
+ [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
6506
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
6507
+ [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
6508
+ },
6509
+ };
6510
+
6511
+ var selectItem$1 = /*#__PURE__*/Object.freeze({
6512
+ __proto__: null,
6513
+ default: selectItem,
6514
+ vars: vars$2
6515
+ });
6516
+
6517
+ const componentName$2 = getComponentName('single-select-internal');
6518
+
6519
+ class SingleSelectInternalClass extends createBaseInputClass({
6520
+ componentName: componentName$2,
6521
+ baseSelector: 'slot',
6522
+ }) {
6523
+ constructor() {
6524
+ super();
6525
+
6526
+ this.innerHTML = `
6527
+ <style>
6528
+ slot {
6529
+ box-sizing: border-box;
6530
+ width: 100%;
6531
+ display: flex;
6532
+ flex-wrap: wrap;
6533
+ }
6534
+ </style>
6535
+ <slot part="wrapper"></slot>
6536
+ `;
6537
+ }
6538
+
6539
+ #dispatchChange = createDispatchEvent.bind(this, 'change');
6540
+
6541
+ get items() {
6542
+ return this.querySelector('slot').assignedElements();
6543
+ }
6544
+
6545
+ get isReadonly() {
6546
+ return this.getAttribute('readonly') === 'true';
6547
+ }
6548
+
6549
+ getSelectedNode() {
6550
+ return this.items.find((item) => item.hasAttribute('selected'));
6551
+ }
6552
+
6553
+ get size() {
6554
+ return this.getAttribute('size') || 'md';
6555
+ }
6556
+
6557
+ removeSelected() {
6558
+ this.getSelectedNode()?.removeAttribute('selected');
6559
+ }
6560
+
6561
+ onNodeClick(e) {
6562
+ if (!this.isReadonly) {
6563
+ this.setSelected(e.target);
6564
+ this.#dispatchChange();
6565
+ }
6566
+ }
6567
+
6568
+ setSelected(node) {
6569
+ if (node !== this.getSelectedNode()) {
6570
+ this.removeSelected();
6571
+ node?.setAttribute('selected', 'true');
6572
+ }
6573
+ }
6574
+
6575
+ get value() {
6576
+ return this.getSelectedNode()?.value;
6577
+ }
6578
+
6579
+ set value(value) {
6580
+ const node = this.items.find((child) => child.value === value);
6581
+ this.setSelected(node);
6582
+ }
6583
+
6584
+ get defaultValue() {
6585
+ return this.getAttribute('default-value');
6586
+ }
6587
+
6588
+ setDefaultValue() {
6589
+ // we want to defer this action until all attributes are synched
6590
+ setTimeout(() => {
6591
+ if (this.defaultValue) {
6592
+ this.value = this.defaultValue;
6593
+ this.setCustomValidity();
6594
+ }
6595
+ });
6596
+ }
6597
+
6598
+ onSizeChange() {
6599
+ this.items.forEach((item) => {
6600
+ item.setAttribute('size', this.size);
6601
+ });
6602
+ }
6603
+
6604
+ getValidity() {
6605
+ if (this.isRequired && !this.value) {
6606
+ return { valueMissing: true };
6607
+ }
6608
+
6609
+ return {};
6610
+ }
6611
+
6612
+ onObservedAttributeChange(attrs) {
6613
+ attrs.forEach((attr) => {
6614
+ switch (attr) {
6615
+ case 'size':
6616
+ this.onSizeChange();
6617
+ break;
6618
+ }
6619
+ });
6620
+ }
6621
+
6622
+ init() {
6623
+ // we are adding listeners before calling to super because it's stopping the events
6624
+ this.addEventListener('focus', (e) => {
6625
+ // we want to ignore focus events we are dispatching
6626
+ if (e.isTrusted) {
6627
+ this.items[0].focus();
6628
+ }
6629
+ });
6630
+
6631
+ super.init?.();
6632
+ this.setDefaultValue();
6633
+
6634
+ observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
6635
+
6636
+ observeChildren(this, ({ addedNodes }) => {
6637
+ addedNodes.forEach((node) => {
6638
+ node.addEventListener('click', this.onNodeClick.bind(this));
6639
+ node.setAttribute('size', this.size);
6640
+ });
6641
+ });
6642
+ }
6643
+ }
6644
+
6645
+ const componentName$1 = getComponentName('single-select');
6646
+
6647
+ const customMixin = (superclass) =>
6648
+ class SingleSelectMixinClass extends superclass {
6649
+ init() {
6650
+ super.init?.();
6651
+ const template = document.createElement('template');
6652
+
6653
+ template.innerHTML = `
6654
+ <${componentName$2}
6655
+ name="single-select"
6656
+ slot="input"
6657
+ tabindex="-1"
6658
+ >
6659
+ <slot></slot>
6660
+ </${componentName$2}>
6661
+ `;
6662
+
6663
+ this.baseElement.appendChild(template.content.cloneNode(true));
6664
+
6665
+ this.inputElement = this.shadowRoot.querySelector(componentName$2);
6666
+
6667
+ forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
6668
+ }
6669
+ };
6670
+
6671
+ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
6672
+ host: { selector: () => ':host' },
6673
+ label: { selector: '::part(label)' },
6674
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
6675
+ internalWrapper: { selector: 'descope-single-select-internal slot' },
6676
+ errorMessage: { selector: '::part(error-message)' },
6677
+ };
6678
+
6679
+ const SingleSelectClass = compose(
6680
+ createStyleMixin({
6681
+ mappings: {
6682
+ hostWidth: { ...host, property: 'width' },
6683
+ fontFamily: host,
6684
+ labelTextColor: [
6685
+ { ...label, property: 'color' },
6686
+ { ...requiredIndicator, property: 'color' },
6687
+ ],
6688
+ labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
6689
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
6690
+ itemsSpacing: { ...internalWrapper, property: 'gap' },
6691
+ },
6692
+ }),
6693
+ draggableMixin,
6694
+ composedProxyInputMixin,
6695
+ componentNameValidationMixin,
6696
+ customMixin
6697
+ )(
6698
+ createProxy({
6699
+ slots: [],
6700
+ wrappedEleName: 'vaadin-text-field',
6701
+ style: () => `
6702
+ :host {
6703
+ display: inline-flex;
6704
+ max-width: 100%;
6705
+ }
6706
+ ${resetInputFieldDefaultWidth()}
6707
+ :host::after {
6708
+ background-color: transparent;
6709
+ }
6710
+ :host::part(input-field)::after {
6711
+ background-color: transparent;
6712
+ }
6713
+
6714
+ descope-single-select-internal {
6715
+ -webkit-mask-image: none;
6716
+ padding: 0;
6717
+ width: 100%;
6718
+ height: 100%;
6719
+ display:inline-block;
6720
+ min-height: initial;
6721
+ }
6722
+
6723
+ vaadin-text-field::part(input-field) {
6724
+ background-color: transparent;
6725
+ padding: 0;
6726
+ overflow: hidden;
6727
+ -webkit-mask-image: none;
6728
+ }
6729
+
6730
+ vaadin-text-field {
6731
+ margin: 0;
6732
+ padding: 0;
6733
+ width: 100%
6734
+ }
6735
+
6736
+ vaadin-text-field::before {
6737
+ height: 0;
6738
+ }
6739
+
6740
+ vaadin-text-field[readonly] > input:placeholder-shown {
6741
+ opacity: 1;
6742
+ }
6743
+
6744
+ vaadin-text-field[readonly]::part(input-field)::after {
6745
+ border: 0 solid;
6746
+ }
6747
+
6748
+ vaadin-text-field::part(input-field) {
6749
+ box-shadow: none;
6750
+ }
6751
+
6752
+ ${resetInputCursor('vaadin-text-field')}
6753
+ `,
6754
+ excludeAttrsSync: ['tabindex'],
6755
+ componentName: componentName$1,
6756
+ })
6757
+ );
6758
+
6759
+ const globalRefs = getThemeRefs(globals);
6760
+ const vars$1 = SingleSelectClass.cssVarList;
6761
+
6762
+ const singleSelect = {
6763
+ [vars$1.fontFamily]: refs.fontFamily,
6764
+ [vars$1.labelTextColor]: refs.labelTextColor,
6765
+ [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
6766
+ [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
6767
+ [vars$1.itemsSpacing]: globalRefs.spacing.sm,
6768
+ [vars$1.hostWidth]: refs.width,
6769
+ };
6770
+
6771
+ var singleSelect$1 = /*#__PURE__*/Object.freeze({
6772
+ __proto__: null,
6773
+ default: singleSelect,
6384
6774
  vars: vars$1
6385
6775
  });
6386
6776
 
@@ -6409,6 +6799,8 @@ const components = {
6409
6799
  newPassword: newPassword$1,
6410
6800
  inputWrapper,
6411
6801
  uploadFile: uploadFile$1,
6802
+ selectItem: selectItem$1,
6803
+ singleSelect: singleSelect$1,
6412
6804
  };
6413
6805
 
6414
6806
  const theme = Object.keys(components).reduce(
@@ -6421,7 +6813,7 @@ const vars = Object.keys(components).reduce(
6421
6813
  );
6422
6814
 
6423
6815
  const defaultTheme = { globals, components: theme };
6424
- const themeVars = { globals: vars$p, components: vars };
6816
+ const themeVars = { globals: vars$r, components: vars };
6425
6817
 
6426
6818
  const componentName = getComponentName('recaptcha');
6427
6819
 
@@ -6595,11 +6987,14 @@ exports.PasswordClass = PasswordClass;
6595
6987
  exports.PhoneFieldClass = PhoneFieldClass;
6596
6988
  exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
6597
6989
  exports.RecaptchaClass = RecaptchaClass;
6990
+ exports.SelectItemClass = SelectItemClass;
6991
+ exports.SingleSelectClass = SingleSelectClass;
6598
6992
  exports.SwitchToggleClass = SwitchToggleClass;
6599
6993
  exports.TextAreaClass = TextAreaClass;
6600
6994
  exports.TextClass = TextClass;
6601
6995
  exports.TextFieldClass = TextFieldClass;
6602
6996
  exports.TotpImageClass = TotpImageClass;
6997
+ exports.UploadFileClass = UploadFileClass;
6603
6998
  exports.componentsThemeManager = componentsThemeManager;
6604
6999
  exports.createComponentsTheme = createComponentsTheme;
6605
7000
  exports.createHelperVars = createHelperVars;