@lukso/web-components 1.180.1 → 1.181.0

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

@@ -682,6 +682,15 @@ exports.LuksoIcon = class LuksoIcon extends index.TailwindStyledElement(style) {
       }
     }
   }
+  /**
+   * Wrap a color token so --lukso-icon-color (or --lukso-icon-secondary-color)
+   * takes precedence when set, falling back to the original token.
+   * Icon SVGs render: var(--<returned string>)
+   * Result: var(--lukso-icon-color, var(--neutral-20))
+   */
+  wrapColor(token, cssVar) {
+    return `${cssVar}, var(--${token})`;
+  }
   render() {
     if (!this.color) {
       this.color = DEFAULT_COLOR;
@@ -694,6 +703,8 @@ exports.LuksoIcon = class LuksoIcon extends index.TailwindStyledElement(style) {
       console.warn(`Size ${this.size} not found`);
       return lit.html``;
     }
+    const color = this.wrapColor(this.color, "lukso-icon-color");
+    const secondaryColor = this.secondaryColor ? this.wrapColor(this.secondaryColor, "lukso-icon-secondary-color") : void 0;
     if (this.pack === "vuesax") {
       if (!this.svgContent) {
         if (!this.failedLoadAttempt) {
@@ -721,9 +732,9 @@ exports.LuksoIcon = class LuksoIcon extends index.TailwindStyledElement(style) {
         ${icon({
         width: size.width,
         height: size.height,
-        color: this.color,
+        color,
         strokeWidth: size.strokeWidth,
-        secondaryColor: this.secondaryColor
+        secondaryColor
       })}
       `;
     }

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

@@ -33,6 +33,13 @@ export declare class LuksoIcon extends LuksoIcon_base {
     private processVuesaxSvg;
     willUpdate(changedProperties: PropertyValueMap<this>): void;
     updated(changedProperties: PropertyValueMap<this>): Promise<void>;
+    /**
+     * Wrap a color token so --lukso-icon-color (or --lukso-icon-secondary-color)
+     * takes precedence when set, falling back to the original token.
+     * Icon SVGs render: var(--<returned string>)
+     * Result: var(--lukso-icon-color, var(--neutral-20))
+     */
+    private wrapColor;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAiQjD,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,UAAU,CAAA;AAEd,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE3C,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAA;;AA2Qb,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,MAAY;IAGhB,IAAI,EAAE,QAAQ,CAAe;IAG7B,KAAK,SAAgB;IAGrB,cAAc,MAAY;IAG1B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAY;IAGtC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAY;IAG5C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,KAAK,CA+BZ;IAID,OAAO,CAAC,UAAU,CAGhB;IAEF;;;;;;;;OAQG;YACW,OAAO;IAsCrB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAmExB,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAS9C,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IA8CvD,MAAM;CAkEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAiQjD,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,UAAU,CAAA;AAEd,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE3C,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAA;;AA2Qb,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,MAAY;IAGhB,IAAI,EAAE,QAAQ,CAAe;IAG7B,KAAK,SAAgB;IAGrB,cAAc,MAAY;IAG1B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAY;IAGtC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAY;IAG5C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,KAAK,CA+BZ;IAID,OAAO,CAAC,UAAU,CAGhB;IAEF;;;;;;;;OAQG;YACW,OAAO;IAsCrB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAmExB,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAS9C,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IA8CvD;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IAMjB,MAAM;CAyEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -676,6 +676,15 @@ let LuksoIcon = class extends TailwindStyledElement(style) {
       }
     }
   }
+  /**
+   * Wrap a color token so --lukso-icon-color (or --lukso-icon-secondary-color)
+   * takes precedence when set, falling back to the original token.
+   * Icon SVGs render: var(--<returned string>)
+   * Result: var(--lukso-icon-color, var(--neutral-20))
+   */
+  wrapColor(token, cssVar) {
+    return `${cssVar}, var(--${token})`;
+  }
   render() {
     if (!this.color) {
       this.color = DEFAULT_COLOR;
@@ -688,6 +697,8 @@ let LuksoIcon = class extends TailwindStyledElement(style) {
       console.warn(`Size ${this.size} not found`);
       return html``;
     }
+    const color = this.wrapColor(this.color, "lukso-icon-color");
+    const secondaryColor = this.secondaryColor ? this.wrapColor(this.secondaryColor, "lukso-icon-secondary-color") : void 0;
     if (this.pack === "vuesax") {
       if (!this.svgContent) {
         if (!this.failedLoadAttempt) {
@@ -715,9 +726,9 @@ let LuksoIcon = class extends TailwindStyledElement(style) {
         ${icon({
         width: size.width,
         height: size.height,
-        color: this.color,
+        color,
         strokeWidth: size.strokeWidth,
-        secondaryColor: this.secondaryColor
+        secondaryColor
       })}
       `;
     }

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

@@ -43,4 +43,6 @@ export declare const VuesaxBoldIcon: StoryObj;
 export declare const VuesaxColoredIcon: StoryObj;
 /** Test story for Vuesax large icon */
 export declare const VuesaxLargeIcon: StoryObj;
+/** Test story for CSS variable override on lukso pack icon */
+export declare const CSSVariableOverride: StoryObj;
 //# sourceMappingURL=lukso-icon.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/lukso-icon.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AAEpE,OAAO,SAAS,CAAA;AAEhB;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IA8FX,CAAA;AAED,eAAe,IAAI,CAAA;AAqBnB,yFAAyF;AACzF,eAAO,MAAM,WAAW,KAAoB,CAAA;AAE5C,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,iDAAiD;AACjD,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,iDAAiD;AACjD,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,oDAAoD;AACpD,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,0EAA0E;AAC1E,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,KAAoB,CAAA;AAOnD,qHAAqH;AACrH,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,uKAAuK;AACvK,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,6CAA6C;AAC7C,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,4CAS9B,CAAA;AACD,yCAAyC;AACzC,eAAO,MAAM,QAAQ,EAAE,QAsBtB,CAAA;AAED,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,QAuB7B,CAAA;AAED,0CAA0C;AAC1C,eAAO,MAAM,aAAa,EAAE,QAuB3B,CAAA;AAED,wCAAwC;AACxC,eAAO,MAAM,gBAAgB,EAAE,QAuB9B,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,cAAc,EAAE,QAwB5B,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,EAAE,QAwB/B,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,eAAe,EAAE,QAwB7B,CAAA"}
+{"version":3,"file":"lukso-icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/lukso-icon.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AAEpE,OAAO,SAAS,CAAA;AAEhB;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IA8FX,CAAA;AAED,eAAe,IAAI,CAAA;AAqBnB,yFAAyF;AACzF,eAAO,MAAM,WAAW,KAAoB,CAAA;AAE5C,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,iDAAiD;AACjD,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,iDAAiD;AACjD,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,oDAAoD;AACpD,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,0EAA0E;AAC1E,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,KAAoB,CAAA;AAOnD,qHAAqH;AACrH,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,uKAAuK;AACvK,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,6CAA6C;AAC7C,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,4CAS9B,CAAA;AACD,yCAAyC;AACzC,eAAO,MAAM,QAAQ,EAAE,QAsBtB,CAAA;AAED,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,QAuB7B,CAAA;AAED,0CAA0C;AAC1C,eAAO,MAAM,aAAa,EAAE,QAuB3B,CAAA;AAED,wCAAwC;AACxC,eAAO,MAAM,gBAAgB,EAAE,QAuB9B,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,cAAc,EAAE,QAwB5B,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,EAAE,QAwB/B,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,eAAe,EAAE,QAwB7B,CAAA;AAED,8DAA8D;AAC9D,eAAO,MAAM,mBAAmB,EAAE,QAqBjC,CAAA"}

package/dist/components/lukso-modal/style.css.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  z-index: 1011 !important;\n  backdrop-filter: blur(8px) !important;\n  background: rgb(196 202 206 / 60%) !important;\n  pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n  background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n  background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n  pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n   so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n  --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n  --lukso-modal-resolved-bg: var(\n    --lukso-modal-dark-bg,\n    #121b21\n  ); /* neutral-10 */\n}\n";
+const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  z-index: 1011 !important;\n  backdrop-filter: blur(8px) !important;\n  background: rgb(196 202 206 / 60%) !important;\n  pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n  background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n  background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n  pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n   so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n  --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n  --lukso-modal-resolved-bg: var(\n    --lukso-modal-dark-bg,\n    var(--lukso-modal-bg, #121b21)\n  ); /* neutral-10 */\n}\n";
 
 module.exports = style;

package/dist/components/lukso-modal/style.css.js

@@ -1,3 +1,3 @@
-const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  z-index: 1011 !important;\n  backdrop-filter: blur(8px) !important;\n  background: rgb(196 202 206 / 60%) !important;\n  pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n  background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n  background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n  pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n   so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n  --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n  --lukso-modal-resolved-bg: var(\n    --lukso-modal-dark-bg,\n    #121b21\n  ); /* neutral-10 */\n}\n";
+const style = "/**\n * backdrop-filter must be applied at :host level (Light DOM) because it cannot blur content\n * across the Shadow DOM boundary. pointer-events: none allows backdrop clicks while children remain interactive.\n */\n:host([is-open]) {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  z-index: 1011 !important;\n  backdrop-filter: blur(8px) !important;\n  background: rgb(196 202 206 / 60%) !important;\n  pointer-events: none !important;\n}\n\n/* Light theme backdrop */\n:host([is-open]:not([theme='dark'])) {\n  background: rgb(196 202 206 / 60%) !important;\n}\n\n/* Dark theme backdrop with reduced opacity */\n:host([is-open][theme='dark']) {\n  background: rgb(196 202 206 / 10%) !important;\n}\n\n/* Re-enable pointer events for modal content */\n:host([is-open]) > * {\n  pointer-events: auto !important;\n}\n\n/* Dialog panel custom properties — defaults are inlined as var() fallbacks\n   so inherited values from parent elements are not blocked by :host. */\n:host(:not([theme='dark'])) {\n  --lukso-modal-resolved-bg: var(--lukso-modal-bg, #f8fafb); /* neutral-98 */\n}\n\n:host([theme='dark']) {\n  --lukso-modal-resolved-bg: var(\n    --lukso-modal-dark-bg,\n    var(--lukso-modal-bg, #121b21)\n  ); /* neutral-10 */\n}\n";
 
 export { style as default };

package/package.json

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