@descope/web-components-ui 1.0.218 → 1.0.220

package/dist/cjs/index.cjs.js

@@ -2380,7 +2380,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)' },
 };
@@ -2411,8 +2411,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,
@@ -2588,7 +2588,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$q
 });
 
-const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
+const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
   {
     host: { selector: () => ':host' },
     label: { selector: '::part(label)' },
@@ -2603,7 +2603,7 @@ const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndica
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
   fontSize: [{}, host$e],
-  fontFamily: [label$a, inputField$5, helperText$8, errorMessage$a],
+  fontFamily: [label$8, inputField$5, helperText$8, errorMessage$a],
 
   hostWidth: { ...host$e, property: 'width' },
   hostMinWidth: { ...host$e, property: 'min-width' },
@@ -2611,7 +2611,7 @@ var textFieldMappings = {
   inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
   labelTextColor: [
-    { ...label$a, property: 'color' },
+    { ...label$8, property: 'color' },
     { ...requiredIndicator$a, property: 'color' },
   ],
   errorMessageTextColor: { ...errorMessage$a, property: 'color' },
@@ -2946,7 +2946,7 @@ const {
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
-  label: label$9,
+  label: label$7,
   requiredIndicator: requiredIndicator$9,
   errorMessage: errorMessage$9,
   helperText: helperText$7,
@@ -2969,7 +2969,7 @@ const PasswordClass = compose(
       hostWidth: { ...host$d, property: 'width' },
       hostMinWidth: { ...host$d, property: 'min-width' },
       fontSize: [{}, host$d],
-      fontFamily: [label$9, inputField$4, errorMessage$9, helperText$7],
+      fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
       inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$1, property: 'padding-left' },
@@ -2988,7 +2988,7 @@ const PasswordClass = compose(
       inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
 
       labelTextColor: [
-        { ...label$9, property: 'color' },
+        { ...label$7, property: 'color' },
         { ...requiredIndicator$9, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
@@ -3236,7 +3236,7 @@ const componentName$q = getComponentName('text-area');
 
 const {
   host: host$c,
-  label: label$8,
+  label: label$6,
   placeholder: placeholder$1,
   inputField: inputField$3,
   textArea: textArea$2,
@@ -3260,9 +3260,9 @@ const TextAreaClass = compose(
       hostWidth: { ...host$c, property: 'width' },
       hostMinWidth: { ...host$c, property: 'min-width' },
       fontSize: [host$c, textArea$2],
-      fontFamily: [label$8, inputField$3, helperText$6, errorMessage$8],
+      fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
       labelTextColor: [
-        { ...label$8, property: 'color' },
+        { ...label$6, property: 'color' },
         { ...requiredIndicator$8, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
@@ -3398,7 +3398,6 @@ ${resetInputFieldDefaultWidth()}
 	display: flex;
 	box-sizing: border-box;
 }
-
 vaadin-text-field {
 	position: relative;
 	padding: 0;
@@ -3410,8 +3409,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;
@@ -3419,38 +3418,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;
 }
 `;
 
@@ -3461,19 +3444,17 @@ const {
   component: component$1,
   checkboxElement,
   checkboxSurface,
-  checkboxHiddenLabel: checkboxHiddenLabel$1,
-  label: label$7,
+  checkboxLabel: checkboxLabel$1,
   requiredIndicator: requiredIndicator$7,
   helperText: helperText$5,
   errorMessage: errorMessage$7,
 } = {
   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)' },
 };
@@ -3483,25 +3464,17 @@ const CheckboxClass = compose(
     mappings: {
       hostWidth: { ...host$b, property: 'width' },
 
-      fontSize: [host$b, checkboxElement, label$7, checkboxHiddenLabel$1],
-      fontFamily: [label$7, checkboxHiddenLabel$1, helperText$5, errorMessage$7],
+      fontSize: [host$b, checkboxElement, checkboxLabel$1],
+      fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
 
-      labelTextColor: [
-        { ...label$7, property: 'color' },
-        { ...requiredIndicator$7, property: 'color' },
-        { ...label$7, 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$7, property: 'content' },
+
       errorMessageTextColor: { ...errorMessage$7, property: 'color' },
 
-      labelFontWeight: [
-        { ...label$7, property: 'font-weight' },
-        { ...checkboxHiddenLabel$1, property: 'font-weight' },
-      ],
-      labelSpacing: [
-        { ...label$7, property: 'left' },
-        { ...checkboxHiddenLabel$1, property: 'padding-left' },
-      ],
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
 
@@ -3521,9 +3494,6 @@ const CheckboxClass = compose(
         { ...checkboxElement, property: 'height' },
         { ...checkboxSurface, property: 'font-size' },
         { ...component$1, property: 'font-size' },
-        { ...checkboxHiddenLabel$1, property: 'line-height' },
-        { ...label$7, property: 'margin-left' },
-        { ...label$7, property: 'line-height' },
       ],
     },
   }),
@@ -3537,22 +3507,39 @@ 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$o,
   })
 );
 
 const vars$j = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
 const checkbox = {
   [vars$j.hostWidth]: refs.width,
@@ -3561,7 +3548,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,
@@ -3572,7 +3560,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,
@@ -3596,19 +3584,17 @@ const {
   component,
   checkboxElement: track,
   checkboxSurface: knob,
-  checkboxHiddenLabel,
-  label: label$6,
+  checkboxLabel,
   requiredIndicator: requiredIndicator$6,
   helperText: helperText$4,
   errorMessage: errorMessage$6,
 } = {
   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)' },
 };
@@ -3617,8 +3603,18 @@ const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$a, property: 'width' },
-      fontSize: [component, label$6, checkboxHiddenLabel],
-      fontFamily: [label$6, helperText$4, errorMessage$6],
+
+      fontSize: [component, checkboxLabel, checkboxLabel],
+      fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
+
+      labelTextColor: { ...checkboxLabel, property: 'color' },
+      labelSpacing: { ...checkboxLabel, property: 'padding-left' },
+      labelLineHeight: { ...checkboxLabel, property: 'line-height' },
+      labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
+      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
       trackBorderColor: { ...track, property: 'border-color' },
@@ -3641,25 +3637,6 @@ const SwitchToggleClass = compose(
       knobTopOffset: { ...knob, property: 'top' },
       knobLeftOffset: { ...knob, property: 'left' },
 
-      labelSpacing: [
-        { ...label$6, property: 'padding-left' },
-        { ...checkboxHiddenLabel, property: 'padding-left' },
-      ],
-      labelLineHeight: [
-        { ...label$6, property: 'line-height' },
-        { ...checkboxHiddenLabel, property: 'line-height' },
-      ],
-      labelFontWeight: [
-        { ...label$6, property: 'font-weight' },
-        { ...checkboxHiddenLabel, property: 'font-weight' },
-      ],
-      labelTextColor: [
-        { ...label$6, property: 'color' },
-        { ...requiredIndicator$6, property: 'color' },
-        { ...label$6, property: '-webkit-text-fill-color' },
-      ],
-      labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
       inputOutlineWidth: { ...track, property: 'outline-width' },
       inputOutlineOffset: { ...track, property: 'outline-offset' },
       inputOutlineColor: { ...track, property: 'outline-color' },
@@ -3677,21 +3654,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[active]::part(checkbox) {
+
+      vaadin-checkbox::part(checkbox) {
+        margin: 0;
+			}
+
+      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$n,
   })
 );
@@ -3703,6 +3707,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,
 
@@ -3728,13 +3733,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,
@@ -4095,7 +4098,7 @@ const globalRefs$7 = getThemeRefs(globals);
 const vars$e = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$e.textLineHeight]: '1em',
+  [vars$e.textLineHeight]: '1.35em',
   [vars$e.textAlign]: 'left',
   [vars$e.textColor]: globalRefs$7.colors.surface.dark,
   variant: {
@@ -4456,13 +4459,13 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$g}
-				bordered="true"
-				name="code"
-				tabindex="-1"
-				slot="input"
-			><slot></slot></${componentName$g}>
-			`;
+      <${componentName$g}
+        bordered="true"
+        name="code"
+        tabindex="-1"
+        slot="input"
+      ><slot></slot></${componentName$g}>
+      `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
@@ -7847,7 +7850,7 @@ const ButtonSelectionGroupClass = compose(
 				padding: 0;
 				width: 100%;
 				height: 100%;
-        display:inline-block;
+        display: inline-block;
 				min-height: initial;
 			}