@descope/web-components-ui 1.0.114 → 1.0.116

package/src/mixins/createStyleMixin/index.js

@@ -6,14 +6,15 @@ import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
 
-
 export const createStyleMixin =
-	({ mappings = {} }) => (superclass) =>
-		class CustomStyleMixinClass extends superclass {
+	({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
+		const componentName = componentNameOverride || superclass.componentName;
+
+		return class CustomStyleMixinClass extends superclass {
 			static get cssVarList() {
 				return {
 					...superclass.cssVarList,
-					...createCssVarsList(superclass.componentName, {
+					...createCssVarsList(componentName, {
 						...mappings,
 					})
 				};
@@ -52,30 +53,32 @@ export const createStyleMixin =
 				this.#createOverridesStyle();
 			}
 
-			get componentTheme() {
-				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			get #componentTheme() {
+				return componentsThemeManager.currentTheme?.[componentName] || ''
 			}
 
 			#onComponentThemeChange() {
-				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection]
+				this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection]
 			}
 
 			#createComponentTheme() {
 				this.#themeStyleEle = document.createElement('style');
-				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
 				this.#rootElement.prepend(this.#themeStyleEle);
 				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
 				this.#onComponentThemeChange()
 			}
 
 			#createOverridesStyle() {
-				this.#overrideStyleEle = document.createElement('style');
-				this.#overrideStyleEle.id = 'style-mixin-overrides';
+				if (this.#styleAttributes.length) {
+					this.#overrideStyleEle = document.createElement('style');
+					this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
 
-				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+					const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
 
-				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-				this.#rootElement.append(this.#overrideStyleEle);
+					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+					this.#rootElement.append(this.#overrideStyleEle);
+				}
 			}
 
 			#setAttrOverride(attrName, value) {
@@ -83,37 +86,44 @@ export const createStyleMixin =
 				if (!style) return;
 
 				const varName = getCssVarName(
-					superclass.componentName,
+					componentName,
 					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else { 
+				else {
 					style?.removeProperty(varName);
 					this.removeAttribute(attrName)
 				}
 			}
 
 			#updateOverridesStyle(attrs = []) {
+				let shouldUpdate = false;
+
 				for (const attr of attrs) {
 					if (this.#styleAttributes.includes(attr)) {
 						this.#setAttrOverride(attr, this.getAttribute(attr));
+						shouldUpdate = true;
 					}
 				}
 
-				// we are rewriting the style back to the style tag
-				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
+				if (shouldUpdate) {
+					// we are rewriting the style back to the style tag
+					this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
+				}
 			}
 
 			#createMappingStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-mappings'
-				themeStyle.innerHTML = createStyle(
-					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
-					this.#baseSelector,
-					mappings
-				);
-				this.#rootElement.prepend(themeStyle);
+				if (Object.keys(mappings).length) {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = `style-mixin-mappings__${componentName}`
+					themeStyle.innerHTML = createStyle(
+						kebabCaseJoin(componentName, this.#componentNameSuffix),
+						this.#baseSelector,
+						mappings
+					);
+					this.#rootElement.prepend(themeStyle);
+				}
 			}
 
 			#addClassName(className) {
@@ -123,7 +133,7 @@ export const createStyleMixin =
 			init() {
 				super.init?.();
 				if (this.shadowRoot.isConnected) {
-					this.#addClassName(superclass.componentName)
+					this.#addClassName(componentName)
 
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
 					observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
@@ -135,4 +145,5 @@ export const createStyleMixin =
 
 				this.#disconnectThemeManager?.();
 			}
-		};
+		}
+	};

package/src/mixins/inputValidationMixin.js

@@ -53,13 +53,16 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
       stepMismatch,
       tooShort,
       tooLong,
+      rangeOverflow,
+      rangeUnderflow,
+      badInput,
       customError
     } = flags;
     switch (true) {
       case valueMissing:
         return this.getAttribute(errorAttributes.valueMissing) ||
           this.defaultErrorMsgValueMissing
-      case patternMismatch || typeMismatch || stepMismatch:
+      case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
       case tooShort:

package/src/mixins/proxyInputMixin.js

@@ -1,5 +1,7 @@
-import { forwardAttrs } from "../helpers/componentHelpers";
+import { compose } from "../helpers";
+import { forwardAttrs, getComponentName } from "../helpers/componentHelpers";
 import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createStyleMixin } from "./createStyleMixin";
 import { inputValidationMixin } from "./inputValidationMixin";
 
 const errorAttrs = ['invalid', 'required'];
@@ -30,7 +32,7 @@ const getNestedInput = (ele) => {
 	}
 }
 
-export const proxyInputMixin = (superclass) =>
+const proxyInputMixin = (superclass) =>
 	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
 		static get observedAttributes() {
 			return [...superclass.observedAttributes || [], ...errorAttrs];
@@ -131,6 +133,12 @@ export const proxyInputMixin = (superclass) =>
 			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-			forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']})
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] })
 		}
 	};
+
+const composedProxyInputMixin = compose(
+	proxyInputMixin,
+	createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }))
+
+export { composedProxyInputMixin as proxyInputMixin }

package/src/theme/components/button.js

@@ -21,6 +21,8 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme,
 
+	[compVars.fontFamily]: globalRefs.fonts.font1.family,
+
 	[compVars.cursor]: 'pointer',
 
 	[compVars.borderRadius]: globalRefs.radius.sm,
@@ -28,21 +30,26 @@ const button = {
 	[compVars.borderStyle]: 'solid',
 	[compVars.borderColor]: 'transparent',
 
-	[compVars.gap]: '0.25em',
+	[compVars.labelSpacing]: '0.25em',
 
 	[compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
 	[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
 
+	[compVars.outlineWidth]: globals.border.sm,
+	[compVars.outlineOffset]: '1px',
+	[compVars.outlineStyle]: 'solid',
+	[compVars.outlineColor]: 'transparent',
+
 	size: {
-		xs: { [compVars.fontSize]: '12px' },
-		sm: { [compVars.fontSize]: '14px' },
-		md: { [compVars.fontSize]: '18px' },
-		lg: { [compVars.fontSize]: '22px' },
-		xl: { [compVars.fontSize]: '26px' }
+		xs: { [compVars.fontSize]: '8px' },
+		sm: { [compVars.fontSize]: '10px' },
+		md: { [compVars.fontSize]: '14px' },
+		lg: { [compVars.fontSize]: '20px' },
+		xl: { [compVars.fontSize]: '25px' }
 	},
 
 	_fullWidth: {
-		[compVars.width]: '100%'
+		[compVars.hostWidth]: '100%'
 	},
 
 	_loading: {
@@ -51,7 +58,7 @@ const button = {
 
 	variant: {
 		contained: {
-			[compVars.color]: helperRefs.contrast,
+			[compVars.labelTextColor]: helperRefs.contrast,
 			[compVars.backgroundColor]: helperRefs.main,
 			_hover: {
 				[compVars.backgroundColor]: helperRefs.dark
@@ -62,28 +69,36 @@ const button = {
 		},
 
 		outline: {
-			[compVars.color]: helperRefs.main,
+			[compVars.labelTextColor]: helperRefs.main,
 			[compVars.borderColor]: 'currentColor',
 			_hover: {
-				[compVars.color]: helperRefs.dark,
+				[compVars.labelTextColor]: helperRefs.dark,
 			},
 			_active: {
-				[compVars.color]: helperRefs.light,
+				[compVars.labelTextColor]: helperRefs.light,
 			}
 		},
 
 		link: {
-			[compVars.color]: helperRefs.main,
+			[compVars.labelTextColor]: helperRefs.main,
 			_hover: {
-				[compVars.color]: helperRefs.main,
-				[compVars.textDecoration]: 'underline'
+				[compVars.labelTextColor]: helperRefs.main,
+				[compVars.labelTextDecoration]: 'underline'
 			},
 			_active: {
-				[compVars.color]: helperRefs.dark
+				[compVars.labelTextColor]: helperRefs.dark
 			}
 		}
+	},
+
+	_focused: {
+		[compVars.outlineColor]: globals.colors.surface.main,
 	}
 };
 
 export default button;
-export const vars = { ...compVars, ...helperVars }
+
+export const vars = {
+	...compVars,
+	...helperVars
+};

package/src/theme/components/checkbox.js

@@ -1,65 +1,36 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
+import { refs } from './inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
 const vars = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
-	[vars.cursor]: 'pointer',
-
-	[vars.checkboxRadius]: globalRefs.radius.xs,
-	[vars.checkboxSize]: '2em',
-
-	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
-	[vars.labelMargin]: '0.5em',
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars.labelFontWeight]: '400',
-
-	size: {
-		xs: {
-			[vars.labelFontSize]: '8px',
-		},
-		sm: {
-			[vars.labelFontSize]: '10px',
-		},
-		md: {
-			[vars.labelFontSize]: '14px',
-		},
-		lg: {
-			[vars.labelFontSize]: '20px',
-		},
-		xl: {
-			[vars.labelFontSize]: '25px',
-		}
-	},
-
-	_fullWidth: {
-		[vars.width]: '100%',
-	},
+	[vars.labelSpacing]: '0.5em',
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
+	[vars.inputSize]: '2em',
 
 	_checked: {
-		[vars.checkboxBackgroundColor]: globalRefs.colors.primary.main,
-		[vars.checkmarkTextColor]: globalRefs.colors.primary.contrast,
+		[vars.inputBackgroundColor]: globalRefs.colors.primary.main,
+		[vars.inputValueTextColor]: globalRefs.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
+		[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
 	},
-
-	_focused: {
-		[vars.checkboxOutlineWidth]: '2px',
-		[vars.checkboxOutlineOffset]: '1px',
-		[vars.checkboxOutlineColor]: globalRefs.colors.primary.main,
-		[vars.checkboxOutlineStyle]: 'solid'
-	},
-
-	_invalid: {
-		[vars.checkboxOutlineColor]: globalRefs.colors.error.main,
-		[vars.labelTextColor]: globalRefs.colors.error.main
-	},
-
 };
 
 export default checkbox;
-export { vars }
+export { vars }

package/src/theme/components/comboBox.js

@@ -1,56 +1,44 @@
 import globals from '../globals';
 import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
 import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
-
 const vars = ComboBoxClass.cssVarList;
 
 export const comboBox = {
-	[vars.borderColor]: globalRefs.colors.surface.main,
-	[vars.borderWidth]: '1px',
-	[vars.borderStyle]: 'solid',
-	[vars.cursor]: 'pointer',
-	[vars.padding]: '0',
-	[vars.placeholderColor]: globalRefs.colors.surface.main,
-	[vars.toggleColor]: globalRefs.colors.surface.contrast,
-	[vars.toggleCursor]: 'pointer',
-	[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
-	[vars.padding]: `0 ${globalRefs.spacing.xs}`,
-
-	[vars.height]: '2em',
-
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputBorderColor]: refs.borderColor,
+	[vars.inputBorderWidth]: refs.borderWidth,
+	[vars.inputBorderStyle]: refs.borderStyle,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputHeight]: refs.inputHeight,
+	[vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+	[vars.inputDropdownButtonCursor]: 'pointer',
 
 	_readonly: {
-		[vars.toggleCursor]: 'default',
+		[vars.inputDropdownButtonCursor]: 'default'
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs.colors.error.main,
-		[vars.placeholderColor]: globalRefs.colors.error.light,
-		[vars.toggleColor]: globalRefs.colors.error.main,
+		[vars.inputDropdownButtonColor]: globalRefs.colors.error.main
 	},
+
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
 	// [vars.overlayBorder]: `2px solid red`,
 };
 
 export default comboBox;
-export { vars }
+export { vars }

package/src/theme/components/container.js

@@ -8,13 +8,13 @@ const compVars = ContainerClass.cssVarList
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
-	center: { verticalAlignment: 'center' },
+	center: { verticalAlignment: 'safe center' },
 	end: { verticalAlignment: 'end' },
 }
 
 const horizontalAlignment = {
 	start: { horizontalAlignment: 'start' },
-	center: { horizontalAlignment: 'center' },
+	center: { horizontalAlignment: 'safe center' },
 	end: { horizontalAlignment: 'end' },
 }
 
@@ -25,22 +25,28 @@ const [helperTheme, helperRefs, helperVars] =
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
 	}, componentName)
 
+const { shadowColor } = helperRefs;
+
 const container = {
 	...helperTheme,
-	[compVars.width]: '100%',
+
+	[compVars.hostWidth]: '100%',
 	[compVars.boxShadow]: 'none',
 	[compVars.backgroundColor]: globalRefs.colors.surface.light,
 	[compVars.color]: globalRefs.colors.surface.contrast,
+
 	verticalPadding: {
 		sm: { [compVars.verticalPadding]: '5px' },
 		md: { [compVars.verticalPadding]: '10px' },
 		lg: { [compVars.verticalPadding]: '20px' },
 	},
+
 	horizontalPadding: {
 		sm: { [compVars.horizontalPadding]: '5px' },
 		md: { [compVars.horizontalPadding]: '10px' },
 		lg: { [compVars.horizontalPadding]: '20px' },
 	},
+
 	direction: {
 		row: {
 			[compVars.flexDirection]: 'row',
@@ -48,72 +54,53 @@ const container = {
 			[compVars.justifyContent]: helperRefs.horizontalAlignment,
 			[compVars.flexWrap]: 'wrap',
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: {
+					[helperVars.horizontalAlignment]: 'space-between'
+				},
 			}
 		},
-
 		column: {
 			[compVars.flexDirection]: 'column',
 			[compVars.alignItems]: helperRefs.horizontalAlignment,
 			[compVars.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+				spaceBetween: {
+					[helperVars.verticalAlignment]: 'space-between'
+				}
 			}
 		},
 	},
 
 	spaceBetween: {
-		sm: {
-			[compVars.gap]: '10px'
-		},
-		md: {
-			[compVars.gap]: '20px'
-		},
-		lg: {
-			[compVars.gap]: '30px'
-		}
+		sm: { [compVars.gap]: '10px' },
+		md: { [compVars.gap]: '20px' },
+		lg: { [compVars.gap]: '30px' }
 	},
 
 	shadow: {
-		sm: {
-			[compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
-		},
-		md: {
-			[compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
-		},
-		lg: {
-			[compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
-		},
-		xl: {
-			[compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
-		},
+		sm: { [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}` },
+		md: { [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}` },
+		lg: { [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}` },
+		xl: { [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}` },
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`
 		},
 	},
 
 	borderRadius: {
-		sm: {
-			[compVars.borderRadius]: globalRefs.radius.sm
-		},
-		md: {
-			[compVars.borderRadius]: globalRefs.radius.md
-		},
-		lg: {
-			[compVars.borderRadius]: globalRefs.radius.lg
-		},
-		xl: {
-			[compVars.borderRadius]: globalRefs.radius.xl
-		},
-		'2xl': {
-			[compVars.borderRadius]: globalRefs.radius['2xl']
-		},
-		'3xl': {
-			[compVars.borderRadius]: globalRefs.radius['3xl']
-		},
+		sm: { [compVars.borderRadius]: globalRefs.radius.sm },
+		md: { [compVars.borderRadius]: globalRefs.radius.md },
+		lg: { [compVars.borderRadius]: globalRefs.radius.lg },
+		xl: { [compVars.borderRadius]: globalRefs.radius.xl },
+		'2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
+		'3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
 	}
 };
 
 export default container;
-export const vars = { ...compVars, ...helperVars }
+
+export const vars = {
+	...compVars,
+	...helperVars
+};

package/src/theme/components/divider.js

@@ -1,37 +1,48 @@
+import globals from '../globals';
 import { componentName, DividerClass } from '../../components/descope-divider/DividerClass';
 import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
-import globals from '../globals';
 
 const globalRefs = getThemeRefs(globals);
-
 const compVars = DividerClass.cssVarList;
 
-const thickness = '2px'
-const textPaddingSize = '10px'
-const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, componentName);
+const [
+	helperTheme,
+	helperRefs,
+	helperVars
+] = createHelperVars({
+	thickness: '2px',
+	spacing: '10px'
+}, componentName);
 
 const divider = {
 	...helperTheme,
+
 	[compVars.alignItems]: 'center',
-	[compVars.dividerHeight]: helperRefs.thickness,
-	[compVars.backgroundColor]: globalRefs.colors.surface.main,
-	[compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[compVars.width]: '100%',
 	[compVars.flexDirection]: 'row',
-	[compVars.alignSelf]: 'strech',
-	[compVars.textWidth]: 'fit-content',
-	[compVars.maxTextWidth]: 'calc(100% - 100px)',
+	[compVars.alignSelf]: 'stretch',
+	[compVars.hostWidth]: '100%',
+	[compVars.stripeColor]: globalRefs.colors.surface.main,
+	[compVars.stripeColorOpacity]: '0.5',
+	[compVars.stripeHorizontalThickness]: helperRefs.thickness,
+	[compVars.labelTextWidth]: 'fit-content',
+	[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
+	[compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
+
 	_vertical: {
-		[compVars.padding]: `0 calc(${thickness} * 3)`,
-		[compVars.width]: 'fit-content',
-		[compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[compVars.flexDirection]: 'column',
 		[compVars.minHeight]: '200px',
-		[compVars.textWidth]: 'fit-content',
-		[compVars.dividerWidth]: helperRefs.thickness,
-		[compVars.maxTextWidth]: '100%',
+		[compVars.flexDirection]: 'column',
+		[compVars.hostWidth]: 'fit-content',
+		[compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
+		[compVars.stripeVerticalThickness]: helperRefs.thickness,
+		[compVars.labelTextWidth]: 'fit-content',
+		[compVars.labelTextMaxWidth]: '100%',
+		[compVars.labelTextVerticalSpacing]: helperRefs.spacing,
 	}
 };
 
 export default divider;
-export const vars = { ...compVars, ...helperVars }
+
+export const vars = {
+	...compVars,
+	...helperVars
+};