@descope/web-components-ui 1.0.217 → 1.0.219

package/dist/index.esm.js

@@ -1252,7 +1252,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$f, label: label$b } = {
+const { host: host$f, label: label$9 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
 };
@@ -1283,8 +1283,8 @@ const ButtonClass = compose(
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
 
       labelTextColor: { property: 'color' },
-      labelTextDecoration: { ...label$b, property: 'text-decoration' },
-      labelSpacing: { ...label$b, property: 'gap' },
+      labelTextDecoration: { ...label$9, property: 'text-decoration' },
+      labelSpacing: { ...label$9, property: 'gap' },
     },
   }),
   clickableMixin,
@@ -1553,7 +1553,6 @@ ${resetInputFieldDefaultWidth()}
 	display: flex;
 	box-sizing: border-box;
 }
-
 vaadin-text-field {
 	position: relative;
 	padding: 0;
@@ -1565,8 +1564,8 @@ vaadin-text-field::before {
 	margin: 0;
 }
 vaadin-text-field::part(label) {
-    position: absolute;
-    top: 0;
+  position: absolute;
+  top: 0;
 }
 vaadin-text-field::part(input-field) {
 	padding: 0;
@@ -1574,38 +1573,22 @@ vaadin-text-field::part(input-field) {
 	min-height: 0;
 }
 vaadin-text-field::part(input-field)::after {
-    background: none;
+  background: none;
 }
 vaadin-text-field[focus-ring]::part(input-field) {
 	box-shadow: none;
 }
 
 vaadin-checkbox [slot="label"] {
-    align-self: flex-start;
-    opacity: 0;
-    padding: 0;
+  align-self: flex-start;
+  padding: 0;
 }
-[required] vaadin-checkbox [slot="label"] {
+[required] vaadin-checkbox [slot="label"]:not(:empty) {
 	padding-right: 1em;
 }
-vaadin-checkbox::part(checkbox) {
-	margin: 0;
-}
-vaadin-checkbox[focus-ring]::part(checkbox) {
-	box-shadow: none;
-}
-
 descope-boolean-field-internal {
-	-webkit-mask-image: none;
-	min-height: 0;
-	padding: 0;
-}
-
-[slot="label"],
-vaadin-checkbox,
-vaadin-checkbox::part(checkbox) {
-	height: 100%;
-	cursor: pointer;
+  -webkit-mask-image: none;
+  min-height: initial;
 }
 `;
 
@@ -1616,19 +1599,17 @@ const {
   component: component$1,
   checkboxElement,
   checkboxSurface,
-  checkboxHiddenLabel: checkboxHiddenLabel$1,
-  label: label$a,
+  checkboxLabel: checkboxLabel$1,
   requiredIndicator: requiredIndicator$a,
   helperText: helperText$8,
   errorMessage: errorMessage$a,
 } = {
   host: { selector: () => ':host' },
-  label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-  checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+  checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
 };
@@ -1638,25 +1619,17 @@ const CheckboxClass = compose(
     mappings: {
       hostWidth: { ...host$e, property: 'width' },
 
-      fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
-      fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
+      fontSize: [host$e, checkboxElement, checkboxLabel$1],
+      fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
 
-      labelTextColor: [
-        { ...label$a, property: 'color' },
-        { ...requiredIndicator$a, property: 'color' },
-        { ...label$a, property: '-webkit-text-fill-color' },
-      ],
+      labelTextColor: { ...checkboxLabel$1, property: 'color' },
+      labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
+      labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
+      labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
+
       errorMessageTextColor: { ...errorMessage$a, property: 'color' },
 
-      labelFontWeight: [
-        { ...label$a, property: 'font-weight' },
-        { ...checkboxHiddenLabel$1, property: 'font-weight' },
-      ],
-      labelSpacing: [
-        { ...label$a, property: 'left' },
-        { ...checkboxHiddenLabel$1, property: 'padding-left' },
-      ],
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
 
@@ -1676,9 +1649,6 @@ const CheckboxClass = compose(
         { ...checkboxElement, property: 'height' },
         { ...checkboxSurface, property: 'font-size' },
         { ...component$1, property: 'font-size' },
-        { ...checkboxHiddenLabel$1, property: 'line-height' },
-        { ...label$a, property: 'margin-left' },
-        { ...label$a, property: 'line-height' },
       ],
     },
   }),
@@ -1692,17 +1662,33 @@ const CheckboxClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => `
 			${commonStyles}
-      vaadin-checkbox::part(checkbox)::after {
-				top: 0;
-				left: 0;
-			}
+      ${useHostExternalPadding(CheckboxClass.cssVarList)}
+      
+      :host {
+				display: inline-flex;
+				max-width: 100%;
+      }
 
-      vaadin-text-field::part(label) {
-        width: calc(100% - var(${CheckboxClass.cssVarList.inputSize}))
+      vaadin-text-field {
+        width: 100%;
       }
-			${useHostExternalPadding(CheckboxClass.cssVarList)}
-		`,
-    excludeAttrsSync: ['tabindex'],
+
+      descope-boolean-field-internal {
+				padding: 0;
+				width: 100%;
+        height: 100%;
+      }
+
+      vaadin-checkbox::part(checkbox) {
+        margin: 0;
+      }
+
+      vaadin-checkbox::part(checkbox)::after {
+        top: 0;
+        left: 0;
+      }
+    `,
+    excludeAttrsSync: ['label', 'tabindex'],
     componentName: componentName$u,
   })
 );
@@ -1718,19 +1704,17 @@ const {
   component,
   checkboxElement: track,
   checkboxSurface: knob,
-  checkboxHiddenLabel,
-  label: label$9,
+  checkboxLabel,
   requiredIndicator: requiredIndicator$9,
   helperText: helperText$7,
   errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
-  label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-  checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+  checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
 };
@@ -1739,8 +1723,18 @@ const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$d, property: 'width' },
-      fontSize: [component, label$9, checkboxHiddenLabel],
-      fontFamily: [label$9, helperText$7, errorMessage$9],
+
+      fontSize: [component, checkboxLabel, checkboxLabel],
+      fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
+
+      labelTextColor: { ...checkboxLabel, property: 'color' },
+      labelSpacing: { ...checkboxLabel, property: 'padding-left' },
+      labelLineHeight: { ...checkboxLabel, property: 'line-height' },
+      labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
+      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
+
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
       trackBorderColor: { ...track, property: 'border-color' },
@@ -1763,25 +1757,6 @@ const SwitchToggleClass = compose(
       knobTopOffset: { ...knob, property: 'top' },
       knobLeftOffset: { ...knob, property: 'left' },
 
-      labelSpacing: [
-        { ...label$9, property: 'padding-left' },
-        { ...checkboxHiddenLabel, property: 'padding-left' },
-      ],
-      labelLineHeight: [
-        { ...label$9, property: 'line-height' },
-        { ...checkboxHiddenLabel, property: 'line-height' },
-      ],
-      labelFontWeight: [
-        { ...label$9, property: 'font-weight' },
-        { ...checkboxHiddenLabel, property: 'font-weight' },
-      ],
-      labelTextColor: [
-        { ...label$9, property: 'color' },
-        { ...requiredIndicator$9, property: 'color' },
-        { ...label$9, property: '-webkit-text-fill-color' },
-      ],
-      labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
       inputOutlineWidth: { ...track, property: 'outline-width' },
       inputOutlineOffset: { ...track, property: 'outline-offset' },
       inputOutlineColor: { ...track, property: 'outline-color' },
@@ -1799,21 +1774,48 @@ const SwitchToggleClass = compose(
     style: () => `
 			${commonStyles}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
-			vaadin-text-field::part(label) {
-				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${
-          SwitchToggleClass.cssVarList.trackBorderWidth
-        }) * 2);
+
+      :host {
+				display: inline-flex;
+				max-width: 100%;
+      }
+
+      descope-boolean-field-internal {
+				padding: 0;
+        width: 100%;
+      }
+
+      vaadin-text-field::part(input-field) {
+        cursor: pointer;
+      }
+
+      vaadin-checkbox {
+        cursor: pointer;
+      }
+
+      vaadin-checkbox [slot="label"]:not(:empty) {
+        cursor: pointer;
+			}
+
+      vaadin-checkbox::part(checkbox) {
+        margin: 0;
 			}
-			vaadin-checkbox[active]::part(checkbox) {
+
+      vaadin-checkbox::part(checkbox)::before {
+        content: '';
+			}
+
+      vaadin-checkbox[active]::part(checkbox) {
 				transform: none;
 			}
-			vaadin-checkbox::part(checkbox)::after {
+
+      vaadin-checkbox::part(checkbox)::after {
 				position: absolute;
 				opacity: 1;
 				content: '';
 			}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['label', 'tabindex'],
     componentName: componentName$t,
   })
 );
@@ -3166,7 +3168,7 @@ const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
-      return `<span data-name="${label}" data-id="${value}">${displayName}</span>`;
+      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
     };
 
     #data;
@@ -6489,7 +6491,7 @@ const ButtonSelectionGroupClass = compose(
 				padding: 0;
 				width: 100%;
 				height: 100%;
-        display:inline-block;
+        display: inline-block;
 				min-height: initial;
 			}
 
@@ -7315,6 +7317,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
 });
 
 const vars$j = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
 const checkbox = {
   [vars$j.hostWidth]: refs.width,
@@ -7323,7 +7326,8 @@ const checkbox = {
   [vars$j.labelTextColor]: refs.labelTextColor,
   [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$j.labelFontWeight]: '400',
-  [vars$j.labelSpacing]: '0.75em',
+  [vars$j.labelLineHeight]: checkboxSize,
+  [vars$j.labelSpacing]: '1em',
   [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$j.inputOutlineWidth]: refs.outlineWidth,
   [vars$j.inputOutlineOffset]: refs.outlineOffset,
@@ -7334,7 +7338,7 @@ const checkbox = {
   [vars$j.inputBorderWidth]: refs.borderWidth,
   [vars$j.inputBorderStyle]: refs.borderStyle,
   [vars$j.inputBackgroundColor]: refs.backgroundColor,
-  [vars$j.inputSize]: '2em',
+  [vars$j.inputSize]: checkboxSize,
 
   _checked: {
     [vars$j.inputValueTextColor]: refs.valueTextColor,
@@ -7358,6 +7362,7 @@ const globalRefs$9 = getThemeRefs(globals);
 const vars$i = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
+  [vars$i.hostWidth]: refs.width,
   [vars$i.fontSize]: refs.fontSize,
   [vars$i.fontFamily]: refs.fontFamily,
 
@@ -7383,13 +7388,11 @@ const switchToggle = {
 
   [vars$i.labelTextColor]: refs.labelTextColor,
   [vars$i.labelFontWeight]: '400',
-  [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-  [vars$i.labelSpacing]: '0.25em',
+  [vars$i.labelLineHeight]: '1.35em',
+  [vars$i.labelSpacing]: '1em',
   [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
 
-  [vars$i.hostWidth]: refs.width,
-
   _checked: {
     [vars$i.trackBorderColor]: refs.borderColor,
     [vars$i.trackBackgroundColor]: refs.backgroundColor,
@@ -7567,7 +7570,7 @@ const globalRefs$7 = getThemeRefs(globals);
 const vars$e = TextClass.cssVarList;
 
 const text = {
-  [vars$e.textLineHeight]: '1em',
+  [vars$e.textLineHeight]: '1.35em',
   [vars$e.textAlign]: 'left',
   [vars$e.textColor]: globalRefs$7.colors.surface.dark,
   variant: {