@descope/web-components-ui 1.0.101 → 1.0.102

package/dist/index.esm.js

@@ -349,7 +349,10 @@ const createStyleMixin =
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else style?.removeProperty(varName);
+				else { 
+					style?.removeProperty(varName);
+					this.removeAttribute(attrName);
+				}
 			}
 
 			#updateOverridesStyle(attrs = []) {
@@ -498,6 +501,27 @@ const hoverableMixin = (superclass) =>
 		}
 	};
 
+const booleanAttributesList = [
+  'readonly',
+  'focused',
+  'invalid',
+  'has-label',
+  'required',
+  'disabled',
+  'checked',
+  'has-helper',
+  'has-value',
+  'step-buttons-visible',
+  'hover',
+  'has-error-message',
+  'focus-ring',
+  'opened',
+  'active'
+];
+
+const isBooleanAttribute = (attr) => {
+  return booleanAttributesList.includes(attr)
+};
 // we want all the valueless attributes to have "true" value
 // and all the falsy attribute to be removed
 const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
@@ -508,10 +532,14 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
       attrs.forEach(attr => {
         const attrVal = this.getAttribute(attr);
 
-        if (attrVal === '') {
-          this.setAttribute(attr, 'true');
-        } else if (attrVal === 'false') {
-          this.removeAttribute(attr);
+        if (isBooleanAttribute(attr)) {
+          if (attrVal === '') {
+            this.setAttribute(attr, 'true');
+          } else if (attrVal === 'false') {
+            this.removeAttribute(attr);
+          }
+        } else if (!attrVal) {
+          console.warn(`attribute "${attr}" has no value, should it be added to the boolean attributes list?`);
         }
       }), {});
   }
@@ -5814,7 +5842,6 @@ const vars$8 = Text.cssVarList;
 
 const text = {
 	[vars$8.lineHeight]: '1em',
-	[vars$8.display]: 'inline-block',
 	[vars$8.textAlign]: 'left',
 	[vars$8.color]: globalRefs$8.colors.surface.dark,
 	variant: {
@@ -5875,7 +5902,6 @@ const text = {
 	},
 	_fullWidth: {
 		[vars$8.width]: '100%',
-		[vars$8.display]: 'block'
 	},
 	_italic: {
 		[vars$8.fontStyle]: 'italic'