@descope/web-components-ui 1.0.175 → 1.0.177

package/dist/index.d.ts

@@ -47,7 +47,6 @@ export type Theme = {
     logo: Record<string, any>;
     container: Record<string, any>;
     link: Record<string, any>;
-    button: Record<string, any>;
     text: Record<string, any>;
     inputWrapper: Record<string, any>;
   };

package/dist/index.esm.js

@@ -1252,7 +1252,6 @@ const ButtonClass = compose(
       borderWidth: {},
 
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
 
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
@@ -1277,6 +1276,10 @@ const ButtonClass = compose(
 			vaadin-button {
 				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
 			}
+			[square="true"]:not([full-width="true"]) {
+				width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+        padding: 0;
+			}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$t,
@@ -4535,7 +4538,7 @@ const componentName$8 = getComponentName('phone-field-internal');
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
-const mapAttrs = {
+const mapAttrs$1 = {
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
 };
@@ -4715,7 +4718,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
       if (attrName === 'default-code' && newValue) {
         this.handleDefaultCountryCode(newValue);
       } else if (inputRelatedAttrs$1.includes(attrName)) {
-        const attr = mapAttrs[attrName] || attrName;
+        const attr = mapAttrs$1[attrName] || attrName;
 
         if (commonAttrs$1.includes(attrName)) {
           this.inputs.forEach((input) => input.setAttribute(attr, newValue));
@@ -4966,7 +4969,17 @@ const getCountryByCodeId = (countryCode) => {
 
 const componentName$6 = getComponentName('phone-field-internal-input-box');
 
-const observedAttributes$2 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'placeholder'];
+const observedAttributes$2 = [
+  'disabled',
+  'size',
+  'bordered',
+  'invalid',
+  'readonly',
+  'phone-input-placeholder',
+];
+const mapAttrs = {
+  'phone-input-placeholder': 'placeholder',
+};
 
 const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
 
@@ -5101,7 +5114,8 @@ class PhoneFieldInternal extends BaseInputClass$2 {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
     if (oldValue !== newValue && observedAttributes$2.includes(attrName)) {
-      this.phoneNumberInput.setAttribute(attrName, newValue);
+      const attr = mapAttrs[attrName] || attrName;
+      this.phoneNumberInput.setAttribute(attr, newValue);
     }
   }
 }
@@ -5143,6 +5157,7 @@ const customMixin$1 = (superclass) =>
           'maxlength',
           'default-code',
           'disabled',
+          'phone-input-placeholder',
         ],
       });
     }
@@ -6305,9 +6320,6 @@ const mode = {
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
 
-const verticalPaddingRatio = 3;
-const horizontalPaddingRatio = 2;
-
 const button = {
   ...helperTheme$3,
 
@@ -6315,6 +6327,7 @@ const button = {
 
   [compVars$3.cursor]: 'pointer',
   [compVars$3.hostHeight]: '3em',
+  [compVars$3.hostWidth]: 'auto',
 
   [compVars$3.borderRadius]: globalRefs$b.radius.sm,
   [compVars$3.borderWidth]: globalRefs$b.border.xs,
@@ -6323,8 +6336,7 @@ const button = {
 
   [compVars$3.labelSpacing]: '0.25em',
 
-  [compVars$3.verticalPadding]: `calc(var(${compVars$3.fontSize}) / ${verticalPaddingRatio})`,
-  [compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
+  [compVars$3.verticalPadding]: '1em',
 
   [compVars$3.outlineWidth]: globals.border.sm,
   [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
@@ -6338,6 +6350,12 @@ const button = {
     lg: { [compVars$3.fontSize]: '18px' },
   },
 
+  _square: {
+    [compVars$3.hostHeight]: '3em',
+    [compVars$3.hostWidth]: '3em',
+    [compVars$3.verticalPadding]: '0',
+  },
+
   _fullWidth: {
     [compVars$3.hostWidth]: '100%',
   },