@lukso/web-components 1.65.0 → 1.66.0

package/dist/components/lukso-navbar/index.cjs

@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 require('../../style-map-c86dd6e2.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-e9668573.cjs');
+require('../../index-98e8e0d5.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-navbar/index.js

@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 import '../../style-map-9fdda015.js';
 import '../../directive-2bb7789e.js';
-import '../../index-5e194caf.js';
+import '../../index-1765cfe1.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-tag/index.cjs

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const shared_tailwindElement_index = require('../../index-688c3040.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c86dd6e2.cjs');
-const index = require('../../index-e9668573.cjs');
+const index = require('../../index-e8741080.cjs');
+const index$1 = require('../../index-98e8e0d5.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -27,42 +27,55 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
     this.size = "small";
     this.isRounded = false;
     this.backgroundColor = "";
+    this.borderColor = "";
     this.textColor = "";
-    this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
-    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
-    this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
-    this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
+    this.tagStyles = index.se({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
+      },
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
   }
-  padding() {
-    if (this.size === "x-small" && !this.isRounded) {
-      return "px-1";
+  resolveBorderColor() {
+    if (this.borderColor) {
+      return this.borderColor;
     }
-    if (this.size === "small" && this.isRounded) {
-      return "px-3";
+    if (this.backgroundColor) {
+      return this.backgroundColor;
     }
-    if (this.size === "large") {
-      return "px-4";
-    }
-    return "px-2";
   }
   render() {
+    const tagStyles = this.tagStyles({
+      size: this.size,
+      isRounded: this.isRounded
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="tag"
-        class=${index.customClassMap({
-      [this.defaultStyles]: true,
-      [this.padding()]: true,
-      ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
-      ["rounded-4"]: !this.isRounded && this.size === "x-small",
-      [this.extraSmallStyles]: this.size === "x-small",
-      [this.smallStyles]: this.size === "small",
-      [this.largeStyles]: this.size === "large"
-    })}
-        style=${styleMap.o({
-      backgroundColor: `var(--${this.backgroundColor})`,
-      borderColor: `var(--${this.backgroundColor})`,
-      color: `var(--${this.textColor})`
+        class=${tagStyles}
+        style=${index$1.customStyleMap({
+      [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
+      [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
+      [`color: var(--${this.textColor})`]: !!this.textColor
     })}
       >
         <slot></slot>
@@ -79,6 +92,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "background-color" })
 ], exports.LuksoTag.prototype, "backgroundColor", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "border-color" })
+], exports.LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "text-color" })
 ], exports.LuksoTag.prototype, "textColor", 2);

package/dist/components/lukso-tag/index.d.ts

@@ -4,12 +4,10 @@ export declare class LuksoTag extends LuksoTag_base {
     size: TagSizes;
     isRounded: boolean;
     backgroundColor: string;
+    borderColor: string;
     textColor: string;
-    private defaultStyles;
-    private extraSmallStyles;
-    private smallStyles;
-    private largeStyles;
-    private padding;
+    private tagStyles;
+    private resolveBorderColor;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/lukso-tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;;AAEpD,qBACa,QAAS,SAAQ,aAA4B;IAExD,IAAI,EAAE,QAAQ,CAAU;IAGxB,SAAS,UAAQ;IAGjB,eAAe,SAAK;IAGpB,SAAS,SAAK;IAEd,OAAO,CAAC,aAAa,CAAqF;IAC1G,OAAO,CAAC,gBAAgB,CAAmD;IAC3E,OAAO,CAAC,WAAW,CAAuC;IAC1D,OAAO,CAAC,WAAW,CAAuC;IAE1D,OAAO,CAAC,OAAO;IAgBf,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAA;KACtB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;;AAEpD,qBACa,QAAS,SAAQ,aAA4B;IAExD,IAAI,EAAE,QAAQ,CAAU;IAGxB,SAAS,UAAQ;IAGjB,eAAe,SAAK;IAGpB,WAAW,SAAK;IAGhB,SAAS,SAAK;IAEd,OAAO,CAAC,SAAS,CAyBf;IAEF,OAAO,CAAC,kBAAkB;IAU1B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAA;KACtB;CACF"}

package/dist/components/lukso-tag/index.js

@@ -1,7 +1,7 @@
 import { T as TailwindStyledElement, x } from '../../index-3527fb14.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-9fdda015.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { s as se } from '../../index-c55a1069.js';
+import { c as customStyleMap } from '../../index-1765cfe1.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -23,42 +23,55 @@ let LuksoTag = class extends TailwindStyledElement(style) {
     this.size = "small";
     this.isRounded = false;
     this.backgroundColor = "";
+    this.borderColor = "";
     this.textColor = "";
-    this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
-    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
-    this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
-    this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
+    this.tagStyles = se({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
+      },
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
   }
-  padding() {
-    if (this.size === "x-small" && !this.isRounded) {
-      return "px-1";
+  resolveBorderColor() {
+    if (this.borderColor) {
+      return this.borderColor;
     }
-    if (this.size === "small" && this.isRounded) {
-      return "px-3";
+    if (this.backgroundColor) {
+      return this.backgroundColor;
     }
-    if (this.size === "large") {
-      return "px-4";
-    }
-    return "px-2";
   }
   render() {
+    const tagStyles = this.tagStyles({
+      size: this.size,
+      isRounded: this.isRounded
+    });
     return x`
       <div
         data-testid="tag"
-        class=${customClassMap({
-      [this.defaultStyles]: true,
-      [this.padding()]: true,
-      ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
-      ["rounded-4"]: !this.isRounded && this.size === "x-small",
-      [this.extraSmallStyles]: this.size === "x-small",
-      [this.smallStyles]: this.size === "small",
-      [this.largeStyles]: this.size === "large"
-    })}
-        style=${o({
-      backgroundColor: `var(--${this.backgroundColor})`,
-      borderColor: `var(--${this.backgroundColor})`,
-      color: `var(--${this.textColor})`
+        class=${tagStyles}
+        style=${customStyleMap({
+      [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
+      [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
+      [`color: var(--${this.textColor})`]: !!this.textColor
     })}
       >
         <slot></slot>
@@ -75,6 +88,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "background-color" })
 ], LuksoTag.prototype, "backgroundColor", 2);
+__decorateClass([
+  n({ type: String, attribute: "border-color" })
+], LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
   n({ type: String, attribute: "text-color" })
 ], LuksoTag.prototype, "textColor", 2);

package/dist/components/lukso-tag/lukso-tag.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
 /**  Documentation and examples of `lukso-tag` component. */
 declare const meta: Meta;
 export default meta;
@@ -10,7 +10,7 @@ export declare const LargeTag: any;
 export declare const ExtraSmallTag: any;
 /** You can create "pill" tags when adding `is-rounded` property. */
 export declare const RoundedTag: any;
-/** You can change color of the tag to any from the palette with `text-color` and `background-color` property. */
+/** You can change color of the tag to any from the palette with `text-color`, `background-color` and 'border-color` property. */
 export declare const CustomColorTag: any;
 /** Tags can have icons inside. Please check `lukso-icon` component for more details about using icons. */
 export declare const IconTag: any;

package/dist/components/lukso-tag/lukso-tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/lukso-tag.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,4DAA4D;AAC5D,QAAA,MAAM,IAAI,EAAE,IAyEX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAQ3C,oFAAoF;AACpF,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAYzC,yCAAyC;AACzC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAY9C,oEAAoE;AACpE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAW3C,iHAAiH;AACjH,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,0GAA0G;AAC1G,eAAO,MAAM,OAAO,KAAoB,CAAA"}
+{"version":3,"file":"lukso-tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/lukso-tag.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,4DAA4D;AAC5D,QAAA,MAAM,IAAI,EAAE,IAqFX,CAAA;AAED,eAAe,IAAI,CAAA;AAmBnB,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAQ3C,oFAAoF;AACpF,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAYzC,yCAAyC;AACzC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAY9C,oEAAoE;AACpE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAW3C,iIAAiI;AACjI,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,0GAA0G;AAC1G,eAAO,MAAM,OAAO,KAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "type": "module",
   "files": [
     "dist",