@descope/web-components-ui 1.0.288 → 1.0.289

package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),c=o(9690);const a=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:a,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,i.oP)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const u=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>c.n.componentName,property:c.n.cssVarList.hostDirection},backgroundColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.labelTextColor},borderColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderColor},borderStyle:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderStyle},borderRadius:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderRadius},outlineColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.outlineColor}}}),s.e4,s.Ae)(l);o(2018),customElements.define(a,u)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>p});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),c=o(9690);const a=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:a,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,i.oP)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const p=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>c.n.componentName,property:c.n.cssVarList.hostDirection},backgroundColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.labelTextColor},borderColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderColor},borderWidth:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderWidth},borderStyle:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderStyle},borderRadius:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderRadius},outlineColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.outlineColor}}}),s.e4,s.Ae)(l);o(2018),customElements.define(a,p)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.288",
+  "version": "1.0.289",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js

@@ -92,6 +92,10 @@ export const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderColor,
       },
+      borderWidth: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderWidth,
+      },
       borderStyle: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderStyle,

package/src/index.d.ts

@@ -51,6 +51,8 @@ export type Theme = {
     typography: Record<string, any>;
     shadow: Record<string, string>;
     spacing: Record<string, string>;
+    radius: Record<string, string>;
+    border: Record<string, string>;
   };
   components: {
     button: Record<string, any>;
@@ -60,5 +62,6 @@ export type Theme = {
     link: Record<string, any>;
     text: Record<string, any>;
     inputWrapper: Record<string, any>;
+    buttonSelectionGroupItem: Record<string, any>;
   };
 };

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -14,6 +14,7 @@ const buttonSelectionGroupItem = {
   [vars.borderStyle]: 'solid',
   [vars.borderRadius]: globalRefs.radius.sm,
   [vars.outlineColor]: 'transparent',
+  [vars.borderWidth]: globalRefs.border.xs,
 
   _hover: {
     [vars.backgroundColor]: globalRefs.colors.surface.highlight,