@transcodes/ui-components 0.3.6 → 0.4.0

package/dist/primitives/tc-page-decoration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-page-decoration.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-page-decoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAClB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CACxD;IAEZ,OAAgB,MAAM,4BA8FpB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"tc-page-decoration.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-page-decoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAClB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CACxD;IACgB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA8FpB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/primitives/tc-page-decoration.js

@@ -1,18 +1,19 @@
-import { css as b, LitElement as c, html as d } from "lit";
-import { property as m, customElement as p } from "lit/decorators.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (s, e, o, t) => {
-  for (var r = t > 1 ? void 0 : t ? f(e, o) : e, i = s.length - 1, n; i >= 0; i--)
-    (n = s[i]) && (r = (t ? n(e, o, r) : n(r)) || r);
-  return t && r && u(e, o, r), r;
+import { css as c, LitElement as d, html as m } from "lit";
+import { property as b, customElement as p } from "lit/decorators.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+import { sharedStyles as u } from "../styles/shared.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (l, t, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? h(t, o) : t, i = l.length - 1, s; i >= 0; i--)
+    (s = l[i]) && (r = (a ? s(t, o, r) : s(r)) || r);
+  return a && r && f(t, o, r), r;
 };
-let a = class extends c {
+let e = class extends d {
   constructor() {
-    super(...arguments), this.variant = "primary";
+    super(...arguments), this.variant = "primary", this.sx = {};
   }
   render() {
-    return d`
-      <div part="decoration" class="decoration">
+    return m`
+      <div part="decoration" class="decoration" style=${v(this.sx)}>
         <div part="blob" class="blob blob-1"></div>
         <div part="blob" class="blob blob-2"></div>
         <div part="blob" class="blob blob-3"></div>
@@ -20,9 +21,9 @@ let a = class extends c {
     `;
   }
 };
-a.styles = [
-  v,
-  b`
+e.styles = [
+  u,
+  c`
     :host {
       position: absolute;
       inset: 0;
@@ -115,12 +116,15 @@ a.styles = [
     }
   `
 ];
-l([
-  m({ type: String })
-], a.prototype, "variant", 2);
-a = l([
+n([
+  b({ type: String })
+], e.prototype, "variant", 2);
+n([
+  b({ type: Object })
+], e.prototype, "sx", 2);
+e = n([
   p("tc-page-decoration")
-], a);
+], e);
 export {
-  a as TcPageDecoration
+  e as TcPageDecoration
 };

package/dist/primitives/tc-section.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A section container with flex column layout.
  *
@@ -6,8 +7,7 @@ import { LitElement } from 'lit';
  * @csspart section - The section element
  */
 export declare class TcSection extends LitElement {
-    gap: string;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/primitives/tc-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-section.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,GAAG,SAAqB;IACxB,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BAapB;IAEO,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-section.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAapB;IAEO,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-section.js

@@ -1,28 +1,28 @@
-import { css as m, LitElement as a, html as y } from "lit";
-import { property as l, customElement as f } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-var d = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (s, r, p, o) => {
-  for (var t = o > 1 ? void 0 : o ? x(r, p) : r, i = s.length - 1, c; i >= 0; i--)
-    (c = s[i]) && (t = (o ? c(r, p, t) : c(t)) || t);
-  return o && t && d(r, p, t), t;
+import { css as p, LitElement as m, html as a } from "lit";
+import { property as f, customElement as d } from "lit/decorators.js";
+import { styleMap as x } from "lit/directives/style-map.js";
+var y = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (e, s, c, r) => {
+  for (var t = r > 1 ? void 0 : r ? h(s, c) : s, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (t = (r ? l(s, c, t) : l(t)) || t);
+  return r && t && y(s, c, t), t;
 };
-let e = class extends a {
+let o = class extends m {
   constructor() {
-    super(...arguments), this.gap = "var(--space-md)", this.sx = {};
+    super(...arguments), this.sx = {};
   }
   render() {
-    const s = {
-      gap: this.gap,
+    const e = {
+      gap: "var(--space-md)",
       ...this.sx
     };
-    return y`
-      <section part="section" class="section" style=${h(s)}>
+    return a`
+      <section part="section" class="section" style=${x(e)}>
         <slot></slot>
       </section>
     `;
   }
 };
-e.styles = m`
+o.styles = p`
     :host {
       display: block;
       width: 100%;
@@ -37,14 +37,11 @@ e.styles = m`
     }
   `;
 n([
-  l({ type: String })
-], e.prototype, "gap", 2);
-n([
-  l({ type: Object })
-], e.prototype, "sx", 2);
-e = n([
-  f("tc-section")
-], e);
+  f({ type: Object })
+], o.prototype, "sx", 2);
+o = n([
+  d("tc-section")
+], o);
 export {
-  e as TcSection
+  o as TcSection
 };

package/dist/primitives/tc-spinner.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A loading spinner with responsive sizing.
  * Uses spin animation from design-tokens.
@@ -8,7 +9,7 @@ import { LitElement } from 'lit';
 export declare class TcSpinner extends LitElement {
     private mobile;
     size: 'sm' | 'md' | 'lg' | 'auto';
-    color: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

package/dist/primitives/tc-spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAO,CAAC,MAAM,CAAwD;IAE1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC3C,KAAK,SAA2B;IAE5D,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAO,CAAC,MAAM,CAAwD;IAE1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC3C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-spinner.js

@@ -1,31 +1,34 @@
-import { css as d, LitElement as h, html as v } from "lit";
-import { property as l, customElement as m } from "lit/decorators.js";
+import { css as d, LitElement as h, html as m } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
+import { styleMap as b } from "lit/directives/style-map.js";
 import { MatchMediaController as c } from "../controllers/match-media.controller.js";
-import { sharedStyles as b } from "../styles/shared.js";
-var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (e, s, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? z(s, n) : s, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (r = (t ? a(s, n, r) : a(r)) || r);
-  return t && r && w(s, n, r), r;
+import { sharedStyles as w } from "../styles/shared.js";
+var z = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (r, i, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? y(i, s) : i, o = r.length - 1, a; o >= 0; o--)
+    (a = r[o]) && (e = (n ? a(i, s, e) : a(e)) || e);
+  return n && e && z(i, s, e), e;
 };
-let i = class extends h {
+let t = class extends h {
   constructor() {
-    super(...arguments), this.mobile = new c(this, "(max-width: 768px)"), this.size = "auto", this.color = "var(--accent-primary)";
+    super(...arguments), this.mobile = new c(this, "(max-width: 768px)"), this.size = "auto", this.sx = {};
   }
   render() {
-    let e;
-    return this.size === "auto" ? e = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : e = `spinner--${this.size}`, v`
+    let r;
+    this.size === "auto" ? r = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : r = `spinner--${this.size}`;
+    const s = { ...{ "--spinner-color": "var(--accent-primary)" }, ...this.sx };
+    return m`
       <div
         part="spinner"
-        class="spinner ${e}"
-        style="--spinner-color: ${this.color};"
+        class="spinner ${r}"
+        style=${b(s)}
         role="progressbar"
         aria-label="Loading"
       ></div>
     `;
   }
 };
-i.styles = [
-  b,
+t.styles = [
+  w,
   d`
       :host {
         display: inline-flex;
@@ -75,13 +78,13 @@ i.styles = [
 ];
 p([
   l({ type: String })
-], i.prototype, "size", 2);
+], t.prototype, "size", 2);
 p([
-  l({ type: String })
-], i.prototype, "color", 2);
-i = p([
-  m("tc-spinner")
-], i);
+  l({ type: Object })
+], t.prototype, "sx", 2);
+t = p([
+  v("tc-spinner")
+], t);
 export {
-  i as TcSpinner
+  t as TcSpinner
 };

package/dist/primitives/tc-symbol.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A circular symbol/avatar component.
  *
@@ -6,9 +7,7 @@ import { LitElement } from 'lit';
  * @csspart symbol - The symbol container
  */
 export declare class TcSymbol extends LitElement {
-    size: string;
-    background: string;
-    color: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/primitives/tc-symbol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-symbol.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,IAAI,SAAU;IACd,UAAU,SAAwB;IAClC,KAAK,SAAqB;IAEtD,OAAgB,MAAM,0BAmBpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tc-symbol.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAmBpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/primitives/tc-symbol.js

@@ -1,27 +1,29 @@
-import { css as y, LitElement as m, html as p } from "lit";
-import { property as a, customElement as b } from "lit/decorators.js";
-var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (c, e, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? u(e, l) : e, i = c.length - 1, n; i >= 0; i--)
-    (n = c[i]) && (r = (o ? n(e, l, r) : n(r)) || r);
-  return o && r && f(e, l, r), r;
+import { css as a, LitElement as y, html as c } from "lit";
+import { property as b, customElement as p } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (o, s, l, t) => {
+  for (var e = t > 1 ? void 0 : t ? u(s, l) : s, m = o.length - 1, i; m >= 0; m--)
+    (i = o[m]) && (e = (t ? i(s, l, e) : i(e)) || e);
+  return t && e && v(s, l, e), e;
 };
-let t = class extends m {
+let r = class extends y {
   constructor() {
-    super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
+    super(...arguments), this.sx = {};
   }
   render() {
-    return p`
-      <div
-        part="symbol"
-        class="symbol"
-        style="--symbol-size: ${this.size}; --symbol-bg: ${this.background}; --symbol-color: ${this.color};"
-      >
+    const s = { ...{
+      "--symbol-size": "3rem",
+      "--symbol-bg": "var(--paper-cream)",
+      "--symbol-color": "var(--ink-dark)"
+    }, ...this.sx };
+    return c`
+      <div part="symbol" class="symbol" style=${f(s)}>
         <slot></slot>
       </div>
     `;
   }
 };
-t.styles = y`
+r.styles = a`
     :host {
       display: inline-flex;
       align-items: center;
@@ -41,18 +43,12 @@ t.styles = y`
       font-weight: 600;
     }
   `;
-s([
-  a({ type: String })
-], t.prototype, "size", 2);
-s([
-  a({ type: String })
-], t.prototype, "background", 2);
-s([
-  a({ type: String })
-], t.prototype, "color", 2);
-t = s([
-  b("tc-symbol")
-], t);
+n([
+  b({ type: Object })
+], r.prototype, "sx", 2);
+r = n([
+  p("tc-symbol")
+], r);
 export {
-  t as TcSymbol
+  r as TcSymbol
 };

package/dist/primitives/tc-text.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 type TextTag = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
 type TextSize = 'sm' | 'base' | 'lg' | 'xl' | '2xl';
 type TextWeight = '400' | '500' | '600' | '700';
@@ -16,7 +17,7 @@ export declare class TcText extends LitElement {
     size?: TextSize;
     weight?: TextWeight;
     color?: TextColor | string;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     private getColorClass;
     private getColorStyle;

package/dist/primitives/tc-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-text.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAMtC,KAAK,OAAO,GACR,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAC;AAEZ,KAAK,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACpD,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChD,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,4BA2EpB;IAEF,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAgBZ,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-text.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,OAAO,GACR,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAC;AAEZ,KAAK,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACpD,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChD,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA2EpB;IAEF,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAgBZ,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-toast.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A toast notification component with auto-dismiss and animation.
  *
@@ -13,6 +14,7 @@ export declare class TcToast extends LitElement {
     duration: number;
     autoDismiss: boolean;
     dismissible: boolean;
+    sx: SxProps;
     private animation;
     private dismissTimer?;
     static styles: import('lit').CSSResult[];

package/dist/primitives/tc-toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IAEhD,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IACpB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-toast.js

@@ -1,15 +1,16 @@
 import { css as h, LitElement as m, html as d } from "lit";
-import { property as o, customElement as p } from "lit/decorators.js";
-import { AnimationController as u } from "../controllers/animation.controller.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (c, e, r, a) => {
-  for (var t = a > 1 ? void 0 : a ? f(e, r) : e, n = c.length - 1, l; n >= 0; n--)
-    (l = c[n]) && (t = (a ? l(e, r, t) : l(t)) || t);
-  return a && t && y(e, r, t), t;
+import { property as e, customElement as p } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { AnimationController as v } from "../controllers/animation.controller.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (c, a, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? b(a, r) : a, n = c.length - 1, l; n >= 0; n--)
+    (l = c[n]) && (s = (o ? l(a, r, s) : l(s)) || s);
+  return o && s && f(a, r, s), s;
 };
-let s = class extends m {
+let t = class extends m {
   constructor() {
-    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new u(this, {
+    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.sx = {}, this.animation = new v(this, {
       showDuration: 300,
       hideDuration: 200
     });
@@ -47,7 +48,13 @@ let s = class extends m {
   }
   render() {
     return d`
-      <div part="toast" class="toast toast--${this.variant}" role="alert" aria-live="polite">
+      <div
+        part="toast"
+        class="toast toast--${this.variant}"
+        role="alert"
+        aria-live="polite"
+        style=${u(this.sx)}
+      >
         <div part="content" class="content">
           <slot></slot>
         </div>
@@ -75,8 +82,8 @@ let s = class extends m {
     `;
   }
 };
-s.styles = [
-  v,
+t.styles = [
+  y,
   h`
     :host {
       display: block;
@@ -170,20 +177,23 @@ s.styles = [
   `
 ];
 i([
-  o({ type: String })
-], s.prototype, "variant", 2);
+  e({ type: String })
+], t.prototype, "variant", 2);
 i([
-  o({ type: Number })
-], s.prototype, "duration", 2);
+  e({ type: Number })
+], t.prototype, "duration", 2);
 i([
-  o({ type: Boolean, attribute: "auto-dismiss" })
-], s.prototype, "autoDismiss", 2);
+  e({ type: Boolean, attribute: "auto-dismiss" })
+], t.prototype, "autoDismiss", 2);
 i([
-  o({ type: Boolean })
-], s.prototype, "dismissible", 2);
-s = i([
+  e({ type: Boolean })
+], t.prototype, "dismissible", 2);
+i([
+  e({ type: Object })
+], t.prototype, "sx", 2);
+t = i([
   p("tc-toast")
-], s);
+], t);
 export {
-  s as TcToast
+  t as TcToast
 };

package/dist/screens/tc-error-screen.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A full-screen error state with animated icon, message, and retry action.
  *
@@ -16,6 +17,7 @@ export declare class TcErrorScreen extends LitElement {
     retryLabel: string;
     showRetry: boolean;
     autoAnimate: boolean;
+    sx: SxProps;
     private isAnimated;
     private animation;
     static styles: import('lit').CSSResult;

package/dist/screens/tc-error-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/screens/tc-error-screen.js

@@ -1,19 +1,20 @@
-import { css as p, LitElement as d, html as m } from "lit";
-import { property as i, state as h, customElement as y } from "lit/decorators.js";
-import { AnimationController as u } from "../controllers/animation.controller.js";
+import { css as m, LitElement as d, html as p } from "lit";
+import { property as a, state as y, customElement as h } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { AnimationController as g } from "../controllers/animation.controller.js";
 import "../primitives/tc-icon.js";
 import "../primitives/tc-text.js";
 import "../primitives/tc-button.js";
 import "../primitives/tc-container.js";
 import "../primitives/tc-section.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (a, n, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? f(n, o) : n, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (e = (s ? l(n, o, e) : l(e)) || e);
-  return s && e && g(n, o, e), e;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (i, n, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(n, o) : n, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (r = (s ? l(n, o, r) : l(r)) || r);
+  return s && r && f(n, o, r), r;
 };
 let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.isAnimated = !1, this.animation = new u(this, {
+    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new g(this, {
       showDuration: 600,
       hideDuration: 300
     });
@@ -35,15 +36,15 @@ let t = class extends d {
     );
   }
   render() {
-    const a = this.isAnimated ? "animated" : "";
-    return m`
-      <div part="screen" class="screen">
+    const i = this.isAnimated ? "animated" : "";
+    return p`
+      <div part="screen" class="screen" style=${u(this.sx)}>
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container ${a}">
-              <tc-icon name="alert-circle" size="var(--size-icon-xl)"></tc-icon>
+            <div part="icon" class="icon-container ${i}">
+              <tc-icon name="alert-circle" .sx=${{ "--icon-size": "var(--size-icon-xl)" }}></tc-icon>
             </div>
-            <tc-section gap="var(--space-sm)" class="text-content ${a}">
+            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${i}">
               <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
                 ${this.title}
               </tc-text>
@@ -51,8 +52,8 @@ let t = class extends d {
                 ${this.message}
               </tc-text>
             </tc-section>
-            ${this.showRetry ? m`
-                  <div part="action" class="action ${a}">
+            ${this.showRetry ? p`
+                  <div part="action" class="action ${i}">
                     <tc-button variant="primary" @tc-click=${this.handleRetry}>
                       ${this.retryLabel}
                     </tc-button>
@@ -64,7 +65,7 @@ let t = class extends d {
     `;
   }
 };
-t.styles = p`
+t.styles = m`
     :host {
       display: flex;
       align-items: center;
@@ -148,26 +149,29 @@ t.styles = p`
       transform: translateY(0);
     }
   `;
-r([
-  i({ type: String })
+e([
+  a({ type: String })
 ], t.prototype, "title", 2);
-r([
-  i({ type: String })
+e([
+  a({ type: String })
 ], t.prototype, "message", 2);
-r([
-  i({ type: String, attribute: "retry-label" })
+e([
+  a({ type: String, attribute: "retry-label" })
 ], t.prototype, "retryLabel", 2);
-r([
-  i({ type: Boolean, attribute: "show-retry" })
+e([
+  a({ type: Boolean, attribute: "show-retry" })
 ], t.prototype, "showRetry", 2);
-r([
-  i({ type: Boolean, attribute: "auto-animate" })
+e([
+  a({ type: Boolean, attribute: "auto-animate" })
 ], t.prototype, "autoAnimate", 2);
-r([
-  h()
+e([
+  a({ type: Object })
+], t.prototype, "sx", 2);
+e([
+  y()
 ], t.prototype, "isAnimated", 2);
-t = r([
-  y("tc-error-screen")
+t = e([
+  h("tc-error-screen")
 ], t);
 export {
   t as TcErrorScreen

package/dist/screens/tc-loading-screen.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A full-screen loading state with spinner and optional message.
  *
@@ -10,6 +11,7 @@ import { LitElement } from 'lit';
 export declare class TcLoadingScreen extends LitElement {
     message: string;
     spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
+    sx: SxProps;
     private loading;
     static styles: import('lit').CSSResult;
     connectedCallback(): void;

package/dist/screens/tc-loading-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IAElB,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IACU,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}