@descope/web-components-ui 1.0.113 → 1.0.115

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -19,63 +19,68 @@ const {
 	checkboxSurface,
 	checkboxHiddenLabel,
 	label,
-	requiredIndicator
+	requiredIndicator,
+	helperText,
+	errorMessage
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	component: { selector: 'vaadin-checkbox' },
 	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' },
 };
 
 export const CheckboxClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
-			cursor: component,
+			hostWidth: { ...host, property: 'width' },
 
-			// Checkbox
-			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
-			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
-
-			checkboxSize: [
-				{ ...checkboxElement, property: 'width' },
-				{ ...label, property: 'margin-left' },
-				{ ...checkboxElement, property: 'height' },
-				{ ...checkboxSurface, property: 'font-size' },
-				{ ...component, property: 'font-size' },
-				{ ...label, property: 'line-height' },
-				{ ...checkboxHiddenLabel, property: 'line-height' }
-			],
-
-			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
-			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
-			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
-			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
-
-			// Checkmark
-			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
-
-			// Label
-			labelFontSize: [
+			fontSize: [
 				{ ...host, property: 'font-size' },
 				{ ...checkboxElement, property: 'font-size' },
 				{ ...label, property: 'font-size' },
 				{ ...checkboxHiddenLabel, property: 'font-size' }
 			],
+			fontFamily: [
+				{ ...label, property: 'font-family' },
+				{ ...checkboxHiddenLabel, property: 'font-family' },
+				{ ...helperText, property: 'font-family' },
+				{ ...errorMessage, property: 'font-family' }
+			],
+
+			labelTextColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' },
+			],
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
 			labelFontWeight: [
 				{ ...label, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
-			labelMargin: [
+			labelSpacing: [
 				{ ...label, property: 'left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' },
+			inputValueTextColor: { ...checkboxSurface, property: 'color' },
+			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
+			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+			inputSize: [
+				{ ...checkboxElement, property: 'width' },
+				{ ...label, property: 'margin-left' },
+				{ ...checkboxElement, property: 'height' },
+				{ ...checkboxSurface, property: 'font-size' },
+				{ ...component, property: 'font-size' },
+				{ ...label, property: 'line-height' },
+				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 		},
 	}),
@@ -87,12 +92,10 @@ export const CheckboxClass = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
-		style: `
+		style: () => `
 		${commonStyles}
-
-		vaadin-checkbox [slot="label"] {
-			height: 100%;
-			cursor: pointer;
+		vaadin-text-field {
+			padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -20,32 +20,39 @@ const {
 	checkboxHiddenLabel,
 	label,
 	requiredIndicator,
+	helperText,
+	errorMessage
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	component: { selector: 'vaadin-checkbox' },
 	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' },
 };
 
 export const SwitchToggleClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
-			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label, checkboxHiddenLabel],
-
-			// Track
+			hostWidth: { ...host, property: 'width' },
+			fontSize: [
+				{ ...component, property: 'font-size' },
+				{ ...label, property: 'font-size' },
+				{ ...checkboxHiddenLabel, property: 'font-size' },
+			],
+			fontFamily: [
+				{ ...label, property: 'font-family' },
+				{ ...helperText, property: 'font-family' },
+				{ ...errorMessage, property: 'font-family' }
+			],
 			trackBorderWidth: { ...track, property: 'border-width' },
 			trackBorderStyle: { ...track, property: 'border-style' },
 			trackBorderColor: { ...track, property: 'border-color' },
-
-			// Checkbox
 			trackBackgroundColor: { ...track, property: 'background-color' },
-			trackRadius: { ...track, property: 'border-radius' },
-
+			trackBorderRadius: { ...track, property: 'border-radius' },
 			trackWidth: [
 				{ ...track, property: 'width' },
 			],
@@ -53,25 +60,19 @@ export const SwitchToggleClass = compose(
 				{ ...knob, property: 'font-size' },
 				{ ...track, property: 'height' }
 			],
-			switchOutlineWidth: { ...track, property: 'outline-width' },
-			switchOutlineOffset: { ...track, property: 'outline-offset' },
-			switchOutlineColor: { ...track, property: 'outline-color' },
-			switchOutlineStyle: { ...track, property: 'outline-style' },
 
-			// Knob
 			knobSize: [
 				{ ...knob, property: 'width' },
 				{ ...knob, property: 'height' },
 			],
 			knobTextColor: { ...knob, property: 'color' },
 			knobRadius: { ...knob, property: 'border-radius' },
-			knobTransition: { ...knob, property: 'transition' },
+			knobTransitionDuration: { ...knob, property: 'transition' },
 			knobColor: { ...knob, property: 'background-color' },
 			knobTopOffset: { ...knob, property: 'top' },
-			knobPosition: { ...knob, property: 'left' },
+			knobLeftOffset: { ...knob, property: 'left' },
 
-			// Label
-			labelMargin: [
+			labelSpacing: [
 				{ ...label, property: 'padding-left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
@@ -87,6 +88,11 @@ export const SwitchToggleClass = compose(
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' },
 			],
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+			inputOutlineWidth: { ...track, property: 'outline-width' },
+			inputOutlineOffset: { ...track, property: 'outline-offset' },
+			inputOutlineColor: { ...track, property: 'outline-color' },
+			inputOutlineStyle: { ...track, property: 'outline-style' },
 		},
 	}),
 	draggableMixin,
@@ -98,26 +104,26 @@ export const SwitchToggleClass = compose(
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
-		${commonStyles}
-
-		vaadin-text-field::part(label) {
-			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
-		}
-
-		vaadin-checkbox[active]::part(checkbox) {
-			transform: none;
-		}
-		vaadin-checkbox[checked]::part(checkbox) {
-			background: none;
-		}
-		vaadin-checkbox::part(checkbox)::after {
-			position: absolute;
-			opacity: 1;
-			content: '';
-		}
+			${commonStyles}
+			:host {
+				padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
+			}
+			vaadin-text-field::part(label) {
+				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
+			}
+			vaadin-checkbox[active]::part(checkbox) {
+				transform: none;
+			}
+			vaadin-checkbox[checked]::part(checkbox) {
+				background: none;
+			}
+			vaadin-checkbox::part(checkbox)::after {
+				position: absolute;
+				opacity: 1;
+				content: '';
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
-

package/src/components/descope-button/ButtonClass.js

@@ -12,12 +12,14 @@ export const componentName = getComponentName('button');
 const resetStyles = `
 	:host {
 		display: inline-block;
+		box-sizing: border-box;
 	}
 	vaadin-button {
 		margin: 0;
 		min-width: 0;
 		width: 100%;
 		height: auto;
+		box-shadow: none;
 	}
 	vaadin-button::part(label) {
 		padding: 0;
@@ -47,17 +49,23 @@ const { host, label } = {
 export const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
-			color: {},
-			textDecoration: label,
-			fontSize: {},
+			hostWidth: { ...host, property: 'width' },
+			fontSize: { property: 'font-size' },
+			fontFamily: { property: 'font-family' },
+
 			cursor: {},
 			backgroundColor: {},
+
+			outlineOffset: {},
+			outlineColor: {},
+			outlineStyle: {},
+			outlineWidth: {},
+
 			borderRadius: {},
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
-			width: host,
-			gap: label,
+
 			verticalPadding: [
 				{ property: 'padding-top' },
 				{ property: 'padding-bottom' },
@@ -65,7 +73,12 @@ export const ButtonClass = compose(
 			horizontalPadding: [
 				{ property: 'padding-left' },
 				{ property: 'padding-right' },
-			]
+			],
+
+			labelTextColor: { property: 'color' },
+			labelTextDecoration: { ...label, property: 'text-decoration' },
+			labelSpacing: { ...label, property: 'gap' },
+
 		}
 	}),
 	draggableMixin,
@@ -79,6 +92,9 @@ export const ButtonClass = compose(
 			${iconStyles}
 			${loadingIndicatorStyles}
 			${editorOverrides}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -1,5 +1,6 @@
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { resetInputCursor, resetInputPlaceholder, resetInputReadonlyStyle } from '../../helpers/themeHelpers/resetHelpers';
 import {
 	createStyleMixin,
 	draggableMixin,
@@ -11,7 +12,6 @@ import {
 
 export const componentName = getComponentName('combo-box');
 
-
 const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
 	constructor() {
 		super();
@@ -64,16 +64,22 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 
 const {
 	host,
-	input,
+	inputField,
 	placeholder,
 	toggle,
-	label
+	label,
+	requiredIndicator,
+	helperText,
+	errorMessage
 } = {
 	host: { selector: () => ':host' },
-	input: { selector: '::part(input-field)' },
+	inputField: { selector: '::part(input-field)' },
 	placeholder: { selector: '> input:placeholder-shown' },
 	toggle: { selector: '::part(toggle-button)' },
-	label: { selector: '::part(label)' }
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 }
 
 // const { slotted, selected } = {
@@ -84,27 +90,38 @@ const {
 export const ComboBoxClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
-			height: input,
-			padding: input,
-
-			inputBackgroundColor: { ...input, property: 'background-color' },
-			boxShadow: input,
-
-			borderColor: input,
-			borderWidth: input,
-			borderStyle: input,
-			borderRadius: input,
-
-			color: [label, input],
-
+			hostWidth: { ...host, property: 'width' },
 			// we apply font-size also on the host so we can set its width with em
-			fontSize: [{}, host],
-
-			placeholderColor: { ...placeholder, property: 'color' },
-
-			toggleCursor: { ...toggle, property: 'cursor' },
-			toggleColor: { ...toggle, property: 'color' },
+			fontSize: [
+				{ property: 'font-size' },
+				{ ...host, property: 'font-size' }
+			],
+			fontFamily: [
+				label,
+				placeholder,
+				inputField,
+				helperText,
+				errorMessage
+			],
+			labelTextColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' }
+			],
+			inputHeight: { ...inputField, property: 'height' },
+			inputBackgroundColor: { ...inputField, property: 'background-color' },
+			inputBorderColor: { ...inputField, property: 'border-color' },
+			inputBorderWidth: { ...inputField, property: 'border-width' },
+			inputBorderStyle: { ...inputField, property: 'border-style' },
+			inputBorderRadius: { ...inputField, property: 'border-radius' },
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+			inputValueTextColor: { ...inputField, property: 'color' },
+			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+			inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
+			inputDropdownButtonColor: { ...toggle, property: 'color' },
+			inputOutlineColor: { ...inputField, property: 'outline-color' },
+			inputOutlineWidth: { ...inputField, property: 'outline-width' },
+			inputOutlineStyle: { ...inputField, property: 'outline-style' },
+			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
 			// we need to use the variables from the portal mixin
 			// so we need to use an arrow function on the selector
@@ -140,28 +157,24 @@ export const ComboBoxClass = compose(
 			display: inline-flex;
 			box-sizing: border-box;
 			-webkit-mask-image: none;
+			padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
 		}
 		vaadin-combo-box {
 			padding: 0;
+			width: 100%;
 		}
 		vaadin-combo-box [slot="input"] {
 			-webkit-mask-image: none;
 			min-height: 0;
 		}
+
 		vaadin-combo-box::part(input-field) {
-			-webkit-mask-image: none;
-			border-radius: 0;
 			padding: 0;
 		}
-		vaadin-combo-box::part(input-field)::after {
-			opacity: 0;
-		}
-		vaadin-combo-box[readonly]::part(input-field)::after {
-			border: none;
-		}
-		vaadin-combo-box[readonly] > input:placeholder-shown {
-			opacity: 1;
-		}		
+
+		${resetInputReadonlyStyle('vaadin-combo-box')}
+		${resetInputPlaceholder('vaadin-combo-box')}
+		${resetInputCursor('vaadin-combo-box')}
 		`,
 		// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
 		// with the same name. Including it will cause Vaadin to calculate NaN size,

package/src/components/descope-container/ContainerClass.js

@@ -20,11 +20,11 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: ':host
 				width: 100%;
 				height: 100%;
 				display: flex;
-				overflow: hidden;
+				overflow: auto;
 			}
 			:host {
 				display: inline-block;
-				overflow: auto;
+				overflow: hidden;
 			}
 		</style>
 		<slot></slot>
@@ -35,8 +35,8 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: ':host
 export const ContainerClass = compose(
 	createStyleMixin({
 		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
+			hostHeight: { selector: () => ':host', property: 'height' },
+			hostWidth: { selector: () => ':host', property: 'width' },
 
 			verticalPadding: [
 				{ property: 'padding-top' },

package/src/components/descope-divider/DividerClass.js

@@ -13,77 +13,96 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
 		super();
 
 		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > div {
-				display: flex;
-				height: 100%;
-				width: 100%;
-			}
-			:host > div::before,
-			:host > div::after {
-				content: '';
-				flex-grow: 1;
-			}
-
-			descope-text {
-				flex-grow: 0;
-				flex-shrink: 0;
-				min-width: fit-content;
-			}
-
-			:host(:empty) descope-text {
-				display: none;
-			}
-
-			:host([vertical="true"]) div {
-				width: fit-content;
-			}
-
-		</style>
-		<div>
-			<descope-text>
-				<slot></slot>
-			</descope-text>
-		</div>
-	`;
+			<style>
+				:host {
+					display: inline-block;
+				}
+				:host > div {
+					display: flex;
+					height: 100%;
+					width: 100%;
+				}
+				:host > div::before,
+				:host > div::after {
+					content: '';
+					flex-grow: 1;
+				}
+				descope-text {
+					flex-grow: 0;
+					flex-shrink: 0;
+				}
+				:host(:empty) descope-text {
+					display: none;
+				}
+				:host([vertical="true"]) div {
+					width: fit-content;
+				}
+			</style>
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
 
 		this.textComponent = this.shadowRoot.querySelector('descope-text');
 
 		forwardAttrs(this, this.textComponent, {
 			includeAttrs: ['mode', 'variant', 'italic']
-		})
+		});
 	}
 }
 
-const selectors = {
-	root: { selector: '' },
+const {
+	host,
+	before,
+	after,
+	text,
+} = {
+	host: { selector: () => ':host' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
 	text: { selector: 'descope-text' },
-	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text, host } = selectors;
-
 export const DividerClass = compose(
 	createStyleMixin({
 		mappings: {
-			maxTextWidth: { ...text, property: 'max-width' },
-			minHeight: root,
-			alignItems: root,
-			alignSelf: root,
-			flexDirection: root,
-			textPadding: { ...text, property: 'padding' },
-			width: host,
-			padding: host,
-			backgroundColor: [before, after],
-			opacity: [before, after],
-			textWidth: { ...text, property: 'width' },
-			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
-			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
+			hostWidth: { ...host, property: 'width' },
+			hostPadding: { ...host, property: 'padding' },
+
+			minHeight: {},
+			alignItems: {},
+			alignSelf: {},
+			flexDirection: {},
+
+			labelTextWidth: { ...text, property: 'width' },
+			labelTextMaxWidth: { ...text, property: 'max-width' },
+			labelTextVerticalSpacing: [
+				{ ...text, property: 'padding-top' },
+				{ ...text, property: 'padding-bottom' }
+			],
+			labelTextHorizontalSpacing: [
+				{ ...text, property: 'padding-right' },
+				{ ...text, property: 'padding-left' }
+			],
+
+			stripeColor: [
+				{ ...before, property: 'background-color' },
+				{ ...after, property: 'background-color' }
+			],
+			stripeHorizontalThickness: [
+				{ ...before, property: 'height' },
+				{ ...after, property: 'height' }
+			],
+			stripeVerticalThickness: [
+				{ ...before, property: 'width' },
+				{ ...after, property: 'width' }
+			],
+			stripeColorOpacity: [
+				{ ...before, property: 'opacity' },
+				{ ...after, property: 'opacity' }
+			],
 		},
 	}),
 	draggableMixin,