@descope/web-components-ui 1.0.176 → 1.0.177

package/dist/cjs/index.cjs.js

@@ -1574,7 +1574,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' },
@@ -1599,6 +1598,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,
@@ -1651,9 +1654,6 @@ const mode = {
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
 
-const verticalPaddingRatio = 3;
-const horizontalPaddingRatio = 2;
-
 const button = {
   ...helperTheme$3,
 
@@ -1661,6 +1661,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,
@@ -1669,8 +1670,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
@@ -1684,6 +1684,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%',
   },