@descope/web-components-ui 1.0.218 → 1.0.220

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.
package/dist/index.esm.js CHANGED
@@ -1252,7 +1252,7 @@ const iconStyles = `
1252
1252
 
1253
1253
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1254
1254
 
1255
- const { host: host$f, label: label$b } = {
1255
+ const { host: host$f, label: label$9 } = {
1256
1256
  host: { selector: () => ':host' },
1257
1257
  label: { selector: '::part(label)' },
1258
1258
  };
@@ -1283,8 +1283,8 @@ const ButtonClass = compose(
1283
1283
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
1284
1284
 
1285
1285
  labelTextColor: { property: 'color' },
1286
- labelTextDecoration: { ...label$b, property: 'text-decoration' },
1287
- labelSpacing: { ...label$b, property: 'gap' },
1286
+ labelTextDecoration: { ...label$9, property: 'text-decoration' },
1287
+ labelSpacing: { ...label$9, property: 'gap' },
1288
1288
  },
1289
1289
  }),
1290
1290
  clickableMixin,
@@ -1553,7 +1553,6 @@ ${resetInputFieldDefaultWidth()}
1553
1553
  display: flex;
1554
1554
  box-sizing: border-box;
1555
1555
  }
1556
-
1557
1556
  vaadin-text-field {
1558
1557
  position: relative;
1559
1558
  padding: 0;
@@ -1565,8 +1564,8 @@ vaadin-text-field::before {
1565
1564
  margin: 0;
1566
1565
  }
1567
1566
  vaadin-text-field::part(label) {
1568
- position: absolute;
1569
- top: 0;
1567
+ position: absolute;
1568
+ top: 0;
1570
1569
  }
1571
1570
  vaadin-text-field::part(input-field) {
1572
1571
  padding: 0;
@@ -1574,38 +1573,22 @@ vaadin-text-field::part(input-field) {
1574
1573
  min-height: 0;
1575
1574
  }
1576
1575
  vaadin-text-field::part(input-field)::after {
1577
- background: none;
1576
+ background: none;
1578
1577
  }
1579
1578
  vaadin-text-field[focus-ring]::part(input-field) {
1580
1579
  box-shadow: none;
1581
1580
  }
1582
1581
 
1583
1582
  vaadin-checkbox [slot="label"] {
1584
- align-self: flex-start;
1585
- opacity: 0;
1586
- padding: 0;
1583
+ align-self: flex-start;
1584
+ padding: 0;
1587
1585
  }
1588
- [required] vaadin-checkbox [slot="label"] {
1586
+ [required] vaadin-checkbox [slot="label"]:not(:empty) {
1589
1587
  padding-right: 1em;
1590
1588
  }
1591
- vaadin-checkbox::part(checkbox) {
1592
- margin: 0;
1593
- }
1594
- vaadin-checkbox[focus-ring]::part(checkbox) {
1595
- box-shadow: none;
1596
- }
1597
-
1598
1589
  descope-boolean-field-internal {
1599
- -webkit-mask-image: none;
1600
- min-height: 0;
1601
- padding: 0;
1602
- }
1603
-
1604
- [slot="label"],
1605
- vaadin-checkbox,
1606
- vaadin-checkbox::part(checkbox) {
1607
- height: 100%;
1608
- cursor: pointer;
1590
+ -webkit-mask-image: none;
1591
+ min-height: initial;
1609
1592
  }
1610
1593
  `;
1611
1594
 
@@ -1616,19 +1599,17 @@ const {
1616
1599
  component: component$1,
1617
1600
  checkboxElement,
1618
1601
  checkboxSurface,
1619
- checkboxHiddenLabel: checkboxHiddenLabel$1,
1620
- label: label$a,
1602
+ checkboxLabel: checkboxLabel$1,
1621
1603
  requiredIndicator: requiredIndicator$a,
1622
1604
  helperText: helperText$8,
1623
1605
  errorMessage: errorMessage$a,
1624
1606
  } = {
1625
1607
  host: { selector: () => ':host' },
1626
- label: { selector: '::part(label)' },
1627
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
1608
+ requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
1628
1609
  component: { selector: 'vaadin-checkbox' },
1629
1610
  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
1630
1611
  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
1631
- checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
1612
+ checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
1632
1613
  helperText: { selector: '::part(helper-text)' },
1633
1614
  errorMessage: { selector: '::part(error-message)' },
1634
1615
  };
@@ -1638,25 +1619,17 @@ const CheckboxClass = compose(
1638
1619
  mappings: {
1639
1620
  hostWidth: { ...host$e, property: 'width' },
1640
1621
 
1641
- fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
1642
- fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
1622
+ fontSize: [host$e, checkboxElement, checkboxLabel$1],
1623
+ fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
1643
1624
 
1644
- labelTextColor: [
1645
- { ...label$a, property: 'color' },
1646
- { ...requiredIndicator$a, property: 'color' },
1647
- { ...label$a, property: '-webkit-text-fill-color' },
1648
- ],
1625
+ labelTextColor: { ...checkboxLabel$1, property: 'color' },
1626
+ labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
1627
+ labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
1628
+ labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
1649
1629
  labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1630
+
1650
1631
  errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1651
1632
 
1652
- labelFontWeight: [
1653
- { ...label$a, property: 'font-weight' },
1654
- { ...checkboxHiddenLabel$1, property: 'font-weight' },
1655
- ],
1656
- labelSpacing: [
1657
- { ...label$a, property: 'left' },
1658
- { ...checkboxHiddenLabel$1, property: 'padding-left' },
1659
- ],
1660
1633
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
1661
1634
  inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
1662
1635
 
@@ -1676,9 +1649,6 @@ const CheckboxClass = compose(
1676
1649
  { ...checkboxElement, property: 'height' },
1677
1650
  { ...checkboxSurface, property: 'font-size' },
1678
1651
  { ...component$1, property: 'font-size' },
1679
- { ...checkboxHiddenLabel$1, property: 'line-height' },
1680
- { ...label$a, property: 'margin-left' },
1681
- { ...label$a, property: 'line-height' },
1682
1652
  ],
1683
1653
  },
1684
1654
  }),
@@ -1692,17 +1662,33 @@ const CheckboxClass = compose(
1692
1662
  wrappedEleName: 'vaadin-text-field',
1693
1663
  style: () => `
1694
1664
  ${commonStyles}
1695
- vaadin-checkbox::part(checkbox)::after {
1696
- top: 0;
1697
- left: 0;
1698
- }
1665
+ ${useHostExternalPadding(CheckboxClass.cssVarList)}
1666
+
1667
+ :host {
1668
+ display: inline-flex;
1669
+ max-width: 100%;
1670
+ }
1699
1671
 
1700
- vaadin-text-field::part(label) {
1701
- width: calc(100% - var(${CheckboxClass.cssVarList.inputSize}))
1672
+ vaadin-text-field {
1673
+ width: 100%;
1702
1674
  }
1703
- ${useHostExternalPadding(CheckboxClass.cssVarList)}
1704
- `,
1705
- excludeAttrsSync: ['tabindex'],
1675
+
1676
+ descope-boolean-field-internal {
1677
+ padding: 0;
1678
+ width: 100%;
1679
+ height: 100%;
1680
+ }
1681
+
1682
+ vaadin-checkbox::part(checkbox) {
1683
+ margin: 0;
1684
+ }
1685
+
1686
+ vaadin-checkbox::part(checkbox)::after {
1687
+ top: 0;
1688
+ left: 0;
1689
+ }
1690
+ `,
1691
+ excludeAttrsSync: ['label', 'tabindex'],
1706
1692
  componentName: componentName$u,
1707
1693
  })
1708
1694
  );
@@ -1718,19 +1704,17 @@ const {
1718
1704
  component,
1719
1705
  checkboxElement: track,
1720
1706
  checkboxSurface: knob,
1721
- checkboxHiddenLabel,
1722
- label: label$9,
1707
+ checkboxLabel,
1723
1708
  requiredIndicator: requiredIndicator$9,
1724
1709
  helperText: helperText$7,
1725
1710
  errorMessage: errorMessage$9,
1726
1711
  } = {
1727
1712
  host: { selector: () => ':host' },
1728
- label: { selector: '::part(label)' },
1729
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
1713
+ requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
1730
1714
  component: { selector: 'vaadin-checkbox' },
1731
1715
  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
1732
1716
  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
1733
- checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
1717
+ checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
1734
1718
  helperText: { selector: '::part(helper-text)' },
1735
1719
  errorMessage: { selector: '::part(error-message)' },
1736
1720
  };
@@ -1739,8 +1723,18 @@ const SwitchToggleClass = compose(
1739
1723
  createStyleMixin({
1740
1724
  mappings: {
1741
1725
  hostWidth: { ...host$d, property: 'width' },
1742
- fontSize: [component, label$9, checkboxHiddenLabel],
1743
- fontFamily: [label$9, helperText$7, errorMessage$9],
1726
+
1727
+ fontSize: [component, checkboxLabel, checkboxLabel],
1728
+ fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
1729
+
1730
+ labelTextColor: { ...checkboxLabel, property: 'color' },
1731
+ labelSpacing: { ...checkboxLabel, property: 'padding-left' },
1732
+ labelLineHeight: { ...checkboxLabel, property: 'line-height' },
1733
+ labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
1734
+ labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1735
+
1736
+ errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1737
+
1744
1738
  trackBorderWidth: { ...track, property: 'border-width' },
1745
1739
  trackBorderStyle: { ...track, property: 'border-style' },
1746
1740
  trackBorderColor: { ...track, property: 'border-color' },
@@ -1763,25 +1757,6 @@ const SwitchToggleClass = compose(
1763
1757
  knobTopOffset: { ...knob, property: 'top' },
1764
1758
  knobLeftOffset: { ...knob, property: 'left' },
1765
1759
 
1766
- labelSpacing: [
1767
- { ...label$9, property: 'padding-left' },
1768
- { ...checkboxHiddenLabel, property: 'padding-left' },
1769
- ],
1770
- labelLineHeight: [
1771
- { ...label$9, property: 'line-height' },
1772
- { ...checkboxHiddenLabel, property: 'line-height' },
1773
- ],
1774
- labelFontWeight: [
1775
- { ...label$9, property: 'font-weight' },
1776
- { ...checkboxHiddenLabel, property: 'font-weight' },
1777
- ],
1778
- labelTextColor: [
1779
- { ...label$9, property: 'color' },
1780
- { ...requiredIndicator$9, property: 'color' },
1781
- { ...label$9, property: '-webkit-text-fill-color' },
1782
- ],
1783
- labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1784
- errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1785
1760
  inputOutlineWidth: { ...track, property: 'outline-width' },
1786
1761
  inputOutlineOffset: { ...track, property: 'outline-offset' },
1787
1762
  inputOutlineColor: { ...track, property: 'outline-color' },
@@ -1799,21 +1774,48 @@ const SwitchToggleClass = compose(
1799
1774
  style: () => `
1800
1775
  ${commonStyles}
1801
1776
  ${useHostExternalPadding(SwitchToggleClass.cssVarList)}
1802
- vaadin-text-field::part(label) {
1803
- left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${
1804
- SwitchToggleClass.cssVarList.trackBorderWidth
1805
- }) * 2);
1777
+
1778
+ :host {
1779
+ display: inline-flex;
1780
+ max-width: 100%;
1781
+ }
1782
+
1783
+ descope-boolean-field-internal {
1784
+ padding: 0;
1785
+ width: 100%;
1786
+ }
1787
+
1788
+ vaadin-text-field::part(input-field) {
1789
+ cursor: pointer;
1790
+ }
1791
+
1792
+ vaadin-checkbox {
1793
+ cursor: pointer;
1794
+ }
1795
+
1796
+ vaadin-checkbox [slot="label"]:not(:empty) {
1797
+ cursor: pointer;
1806
1798
  }
1807
- vaadin-checkbox[active]::part(checkbox) {
1799
+
1800
+ vaadin-checkbox::part(checkbox) {
1801
+ margin: 0;
1802
+ }
1803
+
1804
+ vaadin-checkbox::part(checkbox)::before {
1805
+ content: '';
1806
+ }
1807
+
1808
+ vaadin-checkbox[active]::part(checkbox) {
1808
1809
  transform: none;
1809
1810
  }
1810
- vaadin-checkbox::part(checkbox)::after {
1811
+
1812
+ vaadin-checkbox::part(checkbox)::after {
1811
1813
  position: absolute;
1812
1814
  opacity: 1;
1813
1815
  content: '';
1814
1816
  }
1815
1817
  `,
1816
- excludeAttrsSync: ['tabindex'],
1818
+ excludeAttrsSync: ['label', 'tabindex'],
1817
1819
  componentName: componentName$t,
1818
1820
  })
1819
1821
  );
@@ -2570,6 +2572,7 @@ class PasscodeInternal extends BaseInputClass$4 {
2570
2572
  input.addEventListener('change', (e) => {
2571
2573
  if (currentInput !== e.target) {
2572
2574
  this.parseInputValue(input);
2575
+ this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
2573
2576
  }
2574
2577
  });
2575
2578
 
@@ -2708,13 +2711,13 @@ const customMixin$4 = (superclass) =>
2708
2711
  const template = document.createElement('template');
2709
2712
 
2710
2713
  template.innerHTML = `
2711
- <${componentName$i}
2712
- bordered="true"
2713
- name="code"
2714
- tabindex="-1"
2715
- slot="input"
2716
- ><slot></slot></${componentName$i}>
2717
- `;
2714
+ <${componentName$i}
2715
+ bordered="true"
2716
+ name="code"
2717
+ tabindex="-1"
2718
+ slot="input"
2719
+ ><slot></slot></${componentName$i}>
2720
+ `;
2718
2721
 
2719
2722
  this.baseElement.appendChild(template.content.cloneNode(true));
2720
2723
 
@@ -6489,7 +6492,7 @@ const ButtonSelectionGroupClass = compose(
6489
6492
  padding: 0;
6490
6493
  width: 100%;
6491
6494
  height: 100%;
6492
- display:inline-block;
6495
+ display: inline-block;
6493
6496
  min-height: initial;
6494
6497
  }
6495
6498
 
@@ -7315,6 +7318,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
7315
7318
  });
7316
7319
 
7317
7320
  const vars$j = CheckboxClass.cssVarList;
7321
+ const checkboxSize = '1.35em';
7318
7322
 
7319
7323
  const checkbox = {
7320
7324
  [vars$j.hostWidth]: refs.width,
@@ -7323,7 +7327,8 @@ const checkbox = {
7323
7327
  [vars$j.labelTextColor]: refs.labelTextColor,
7324
7328
  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7325
7329
  [vars$j.labelFontWeight]: '400',
7326
- [vars$j.labelSpacing]: '0.75em',
7330
+ [vars$j.labelLineHeight]: checkboxSize,
7331
+ [vars$j.labelSpacing]: '1em',
7327
7332
  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7328
7333
  [vars$j.inputOutlineWidth]: refs.outlineWidth,
7329
7334
  [vars$j.inputOutlineOffset]: refs.outlineOffset,
@@ -7334,7 +7339,7 @@ const checkbox = {
7334
7339
  [vars$j.inputBorderWidth]: refs.borderWidth,
7335
7340
  [vars$j.inputBorderStyle]: refs.borderStyle,
7336
7341
  [vars$j.inputBackgroundColor]: refs.backgroundColor,
7337
- [vars$j.inputSize]: '2em',
7342
+ [vars$j.inputSize]: checkboxSize,
7338
7343
 
7339
7344
  _checked: {
7340
7345
  [vars$j.inputValueTextColor]: refs.valueTextColor,
@@ -7358,6 +7363,7 @@ const globalRefs$9 = getThemeRefs(globals);
7358
7363
  const vars$i = SwitchToggleClass.cssVarList;
7359
7364
 
7360
7365
  const switchToggle = {
7366
+ [vars$i.hostWidth]: refs.width,
7361
7367
  [vars$i.fontSize]: refs.fontSize,
7362
7368
  [vars$i.fontFamily]: refs.fontFamily,
7363
7369
 
@@ -7383,13 +7389,11 @@ const switchToggle = {
7383
7389
 
7384
7390
  [vars$i.labelTextColor]: refs.labelTextColor,
7385
7391
  [vars$i.labelFontWeight]: '400',
7386
- [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
7387
- [vars$i.labelSpacing]: '0.25em',
7392
+ [vars$i.labelLineHeight]: '1.35em',
7393
+ [vars$i.labelSpacing]: '1em',
7388
7394
  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7389
7395
  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7390
7396
 
7391
- [vars$i.hostWidth]: refs.width,
7392
-
7393
7397
  _checked: {
7394
7398
  [vars$i.trackBorderColor]: refs.borderColor,
7395
7399
  [vars$i.trackBackgroundColor]: refs.backgroundColor,
@@ -7567,7 +7571,7 @@ const globalRefs$7 = getThemeRefs(globals);
7567
7571
  const vars$e = TextClass.cssVarList;
7568
7572
 
7569
7573
  const text = {
7570
- [vars$e.textLineHeight]: '1em',
7574
+ [vars$e.textLineHeight]: '1.35em',
7571
7575
  [vars$e.textAlign]: 'left',
7572
7576
  [vars$e.textColor]: globalRefs$7.colors.surface.dark,
7573
7577
  variant: {