@transcodes/ui-components 0.3.5 → 0.4.0

package/dist/primitives/tc-callout.js

@@ -1,26 +1,27 @@
-import { LitElement as c, html as m, css as p } from "lit";
-import { property as v, customElement as d } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { sharedStyles as f } from "../styles/shared.js";
-var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (n, e, s, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(e, s) : e, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (t = (r ? a(e, s, t) : a(t)) || t);
-  return r && t && h(e, s, t), t;
+import { css as p, LitElement as m, html as v } from "lit";
+import { property as c, customElement as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (s, e, i, r) => {
+  for (var t = r > 1 ? void 0 : r ? g(e, i) : e, n = s.length - 1, a; n >= 0; n--)
+    (a = s[n]) && (t = (r ? a(e, i, t) : a(t)) || t);
+  return r && t && h(e, i, t), t;
 };
-let o = class extends c {
+let o = class extends m {
   constructor() {
-    super(...arguments), this.variant = "info";
+    super(...arguments), this.variant = "info", this.sx = {};
   }
   render() {
-    const n = this.variant === "error", e = {
-      notice: !n,
+    const s = this.variant === "error", e = {
+      notice: !s,
       "notice-info": this.variant === "info",
       "notice-success": this.variant === "success",
       "notice-warning": this.variant === "warning",
-      "error-message": n
+      "error-message": s
     };
-    return m`
-      <div part="callout" class=${u(e)} role="alert">
+    return v`
+      <div part="callout" class=${f(e)} style=${u(this.sx)} role="alert">
         <div class="callout-inner">
           <div part="icon" class="callout-icon">
             <slot name="icon"></slot>
@@ -34,11 +35,12 @@ let o = class extends c {
   }
 };
 o.styles = [
-  f,
+  y,
   p`
       :host {
         display: block;
         width: 100%;
+        min-width: 0;
       }
 
       /* Override animation from design-tokens for immediate display */
@@ -76,8 +78,11 @@ o.styles = [
     `
 ];
 l([
-  v({ type: String })
+  c({ type: String })
 ], o.prototype, "variant", 2);
+l([
+  c({ type: Object })
+], o.prototype, "sx", 2);
 o = l([
   d("tc-callout")
 ], o);

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Card component with layered shadows and optional inner border effect.
  * Uses design-tokens .card class.
@@ -8,7 +9,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcCard extends LitElement {
     noBorder: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tc-card.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACiB,QAAQ,UAAS;IAC1C,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,4BAmCpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-card.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACiB,QAAQ,UAAS;IAC1C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAoCpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-card.js

@@ -1,14 +1,14 @@
-import { LitElement as p, html as l, css as f } from "lit";
+import { css as p, LitElement as l, html as f } from "lit";
 import { property as c, customElement as m } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { styleMap as u } from "lit/directives/style-map.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
+import { styleMap as h } from "lit/directives/style-map.js";
+import { sharedStyles as u } from "../styles/shared.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
   for (var e = s > 1 ? void 0 : s ? y(o, n) : o, a = t.length - 1, i; a >= 0; a--)
     (i = t[a]) && (e = (s ? i(o, n, e) : i(e)) || e);
-  return s && e && h(o, n, e), e;
+  return s && e && v(o, n, e), e;
 };
-let r = class extends p {
+let r = class extends l {
   constructor() {
     super(...arguments), this.noBorder = !1, this.sx = {};
   }
@@ -17,8 +17,8 @@ let r = class extends p {
       card: !0,
       "card--no-border": this.noBorder
     };
-    return l`
-      <div part="card" class=${b(t)} style=${u(this.sx)}>
+    return f`
+      <div part="card" class=${b(t)} style=${h(this.sx)}>
         <div class="card-content">
           <slot></slot>
         </div>
@@ -27,10 +27,11 @@ let r = class extends p {
   }
 };
 r.styles = [
-  v,
-  f`
+  u,
+  p`
       :host {
         display: block;
+        min-width: 0;
       }
 
       /* Inner border effect using mask - extends design-tokens .card */

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A chip/tag component for labels and badges.
  *
@@ -8,6 +9,7 @@ import { LitElement } from 'lit';
 export declare class TcChip extends LitElement {
     variant: 'default' | 'success' | 'error' | 'info';
     size: 'sm' | 'md';
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tc-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,OAAO,EAC/B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAErD,OAAgB,MAAM,4BA8CpB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,OAAO,EAC/B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-chip.js

@@ -1,18 +1,23 @@
-import { LitElement as l, html as h, css as d } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
+import { css as l, LitElement as h, html as d } from "lit";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { styleMap as m } from "lit/directives/style-map.js";
 import { sharedStyles as v } from "../styles/shared.js";
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, i, s, t) => {
-  for (var r = t > 1 ? void 0 : t ? u(i, s) : i, a = o.length - 1, p; a >= 0; a--)
-    (p = o[a]) && (r = (t ? p(i, s, r) : p(r)) || r);
-  return t && r && m(i, s, r), r;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (n, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(t, a) : t, p = n.length - 1, o; p >= 0; p--)
+    (o = n[p]) && (r = (s ? o(t, a, r) : o(r)) || r);
+  return s && r && u(t, a, r), r;
 };
-let e = class extends l {
+let e = class extends h {
   constructor() {
-    super(...arguments), this.variant = "default", this.size = "md";
+    super(...arguments), this.variant = "default", this.size = "md", this.sx = {};
   }
   render() {
-    return h`
-      <span part="chip" class="chip chip--${this.variant} chip--${this.size}">
+    return d`
+      <span
+        part="chip"
+        class="chip chip--${this.variant} chip--${this.size}"
+        style=${m(this.sx)}
+      >
         <slot></slot>
       </span>
     `;
@@ -20,9 +25,11 @@ let e = class extends l {
 };
 e.styles = [
   v,
-  d`
+  l`
       :host {
         display: inline-flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .chip {
@@ -65,13 +72,16 @@ e.styles = [
       }
     `
 ];
-c([
-  n({ type: String })
+i([
+  c({ type: String })
 ], e.prototype, "variant", 2);
-c([
-  n({ type: String })
+i([
+  c({ type: String })
 ], e.prototype, "size", 2);
-e = c([
+i([
+  c({ type: Object })
+], e.prototype, "sx", 2);
+e = i([
   f("tc-chip")
 ], e);
 export {

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A flex container component with column layout by default.
  *
@@ -7,7 +8,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcContainer extends LitElement {
     wide: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     private defaultStyles;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"tc-container.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACd,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAgB,MAAM,0BAgBpB;IAEO,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"tc-container.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACd,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/primitives/tc-container.js

@@ -1,12 +1,12 @@
-import { LitElement as p, html as d, css as m } from "lit";
-import { property as c, customElement as f } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (r, i, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? y(i, o) : i, n = r.length - 1, a; n >= 0; n--)
+import { css as p, LitElement as d, html as m } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, i, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? x(i, o) : i, n = r.length - 1, a; n >= 0; n--)
     (a = r[n]) && (t = (s ? a(i, o, t) : a(t)) || t);
   return s && t && w(i, o, t), t;
 };
-let e = class extends p {
+let e = class extends d {
   constructor() {
     super(...arguments), this.wide = !1, this.sx = {}, this.defaultStyles = {
       display: "flex",
@@ -20,21 +20,22 @@ let e = class extends p {
       ...this.defaultStyles,
       ...this.sx
     };
-    return d`
+    return m`
       <div
         part="container"
         class="container ${this.wide ? "container--wide" : ""}"
-        style=${h(r)}
+        style=${f(r)}
       >
         <slot></slot>
       </div>
     `;
   }
 };
-e.styles = m`
+e.styles = p`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     .container {
@@ -42,6 +43,7 @@ e.styles = m`
       width: 100%;
       max-width: var(--container-max-width);
       margin: 0 auto;
+      box-sizing: border-box;
     }
 
     .container--wide {
@@ -55,7 +57,7 @@ l([
   c({ type: Object })
 ], e.prototype, "sx", 2);
 e = l([
-  f("tc-container")
+  h("tc-container")
 ], e);
 export {
   e as TcContainer

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A horizontal divider line with optional text.
  *
@@ -8,9 +9,8 @@ import { LitElement } from 'lit';
  * @csspart text - The text element (text mode)
  */
 export declare class TcDivider extends LitElement {
-    color: string;
-    spacing: string;
     text: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tc-divider.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,KAAK,SAAsB;IAC3B,OAAO,SAAqB;IAC5B,IAAI,SAAM;IAEtC,OAAgB,MAAM,0BAoCpB;IAEO,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tc-divider.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAM;IACV,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-divider.js

@@ -1,31 +1,36 @@
-import { LitElement as c, html as p, css as v } from "lit";
-import { property as l, customElement as h } from "lit/decorators.js";
-var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? m(t, o) : t, d = e.length - 1, a; d >= 0; d--)
-    (a = e[d]) && (r = (s ? a(t, o, r) : a(r)) || r);
-  return s && r && g(t, o, r), r;
+import { css as c, LitElement as m, html as l } from "lit";
+import { property as p, customElement as h } from "lit/decorators.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (s, e, d, t) => {
+  for (var r = t > 1 ? void 0 : t ? f(e, d) : e, n = s.length - 1, o; n >= 0; n--)
+    (o = s[n]) && (r = (t ? o(e, d, r) : o(r)) || r);
+  return t && r && x(e, d, r), r;
 };
-let i = class extends c {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
+    super(...arguments), this.text = "", this.sx = {};
   }
   render() {
-    const e = `--divider-color: ${this.color}; --divider-spacing: ${this.spacing};`;
-    return this.text ? p`
-        <div part="container" class="divider-container" style=${e}>
+    const e = { ...{
+      "--divider-color": "var(--ink-faint)",
+      "--divider-spacing": "var(--space-md)"
+    }, ...this.sx };
+    return this.text ? l`
+        <div part="container" class="divider-container" style=${v(e)}>
           <hr part="line" class="divider-line" />
           <span part="text" class="divider-text">${this.text}</span>
           <hr part="line" class="divider-line" />
         </div>
-      ` : p`
-      <hr part="divider" class="divider" style=${e} />
+      ` : l`
+      <hr part="divider" class="divider" style=${v(e)} />
     `;
   }
 };
-i.styles = v`
+i.styles = c`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     /* Simple divider (no text) */
@@ -59,16 +64,13 @@ i.styles = v`
       font-family: var(--font-body);
     }
   `;
-n([
-  l({ type: String })
-], i.prototype, "color", 2);
-n([
-  l({ type: String })
-], i.prototype, "spacing", 2);
-n([
-  l({ type: String })
+a([
+  p({ type: String })
 ], i.prototype, "text", 2);
-i = n([
+a([
+  p({ type: Object })
+], i.prototype, "sx", 2);
+i = a([
   h("tc-divider")
 ], i);
 export {

package/dist/primitives/tc-error-message.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A simplified error/warning/info message component.
  * Wraps tc-callout with appropriate icon and text styling.
@@ -10,6 +11,7 @@ import { LitElement } from 'lit';
 export declare class TcErrorMessage extends LitElement {
     variant: 'warning' | 'info' | 'error';
     message: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     private getIconName;
     private getIconColor;

package/dist/primitives/tc-error-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-error-message.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-error-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;IAChB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAW;IAChD,OAAO,SAAM;IAEzC,OAAgB,MAAM,0BAapB;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAWX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"tc-error-message.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-error-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;IAChB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAW;IAChD,OAAO,SAAM;IACb,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAcpB;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAWX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/primitives/tc-error-message.js

@@ -1,13 +1,16 @@
-import { LitElement as m, html as p, css as g } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (c, r, a, s) => {
-  for (var t = s > 1 ? void 0 : s ? v(r, a) : r, n = c.length - 1, i; n >= 0; n--)
-    (i = c[n]) && (t = (s ? i(r, a, t) : i(t)) || t);
-  return s && t && h(r, a, t), t;
+import { css as p, LitElement as m, html as g } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import "./tc-callout.js";
+import "./tc-icon.js";
+import "./tc-text.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, r, i, s) => {
+  for (var t = s > 1 ? void 0 : s ? v(r, i) : r, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (t = (s ? o(r, i, t) : o(t)) || t);
+  return s && t && h(r, i, t), t;
 };
 let e = class extends m {
   constructor() {
-    super(...arguments), this.variant = "error", this.message = "";
+    super(...arguments), this.variant = "error", this.message = "", this.sx = {};
   }
   getIconName() {
     switch (this.variant) {
@@ -30,13 +33,13 @@ let e = class extends m {
     }
   }
   render() {
-    return this.message ? p`
-      <tc-callout part="callout" variant=${this.variant}>
+    return this.message ? g`
+      <tc-callout part="callout" variant=${this.variant} .sx=${this.sx}>
         <tc-icon
           slot="icon"
           part="icon"
           name=${this.getIconName()}
-          size="1.25rem"
+          size="var(--size-icon-action)"
           color=${this.getIconColor()}
         ></tc-icon>
         <tc-text part="message" class="message-text" size="sm">
@@ -46,10 +49,11 @@ let e = class extends m {
     ` : null;
   }
 };
-e.styles = g`
+e.styles = p`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     tc-callout::part(callout) {
@@ -60,13 +64,16 @@ e.styles = g`
       line-height: 1.4;
     }
   `;
-o([
-  l({ type: String })
+a([
+  c({ type: String })
 ], e.prototype, "variant", 2);
-o([
-  l({ type: String })
+a([
+  c({ type: String })
 ], e.prototype, "message", 2);
-e = o([
+a([
+  c({ type: Object })
+], e.prototype, "sx", 2);
+e = a([
   u("tc-error-message")
 ], e);
 export {

package/dist/primitives/tc-form-header.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Form header component with animated title, subtitle, and optional notice.
  * Uses design-tokens form classes (.form-title, .form-subtitle).
@@ -13,7 +14,7 @@ export declare class TcFormHeader extends LitElement {
     subtitle: string;
     notice: string;
     noAnimation: boolean;
-    sx: Record<string, string | number>;
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

package/dist/primitives/tc-form-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-form-header.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-form-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IACgB,WAAW,UAAS;IAChD,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,4BAoEpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"tc-form-header.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-form-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IACgB,WAAW,UAAS;IAChD,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAsEpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/primitives/tc-form-header.js

@@ -1,20 +1,20 @@
-import { LitElement as p, html as n, css as c } from "lit";
+import { css as p, LitElement as c, html as n } from "lit";
 import { property as r, customElement as f } from "lit/decorators.js";
-import { styleMap as u } from "lit/directives/style-map.js";
-import { sharedStyles as h } from "../styles/shared.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+import { sharedStyles as u } from "../styles/shared.js";
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (i, o, m, s) => {
   for (var e = s > 1 ? void 0 : s ? b(o, m) : o, l = i.length - 1, d; l >= 0; l--)
     (d = i[l]) && (e = (s ? d(o, m, e) : d(e)) || e);
   return s && e && v(o, m, e), e;
 };
-let t = class extends p {
+let t = class extends c {
   constructor() {
     super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
   }
   render() {
     const i = !this.noAnimation;
     return n`
-      <header part="header" class="header" style=${u(this.sx)}>
+      <header part="header" class="header" style=${h(this.sx)}>
         ${this.title ? n`<h1 part="title" class="form-title ${i ? "form-title--animated" : ""}">
               ${this.title}
             </h1>` : ""}
@@ -29,10 +29,12 @@ let t = class extends p {
   }
 };
 t.styles = [
-  h,
-  c`
+  u,
+  p`
       :host {
         display: block;
+        width: 100%;
+        min-width: 0;
         text-align: center;
       }
 

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

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
+import { SxProps } from '../types.js';
 export type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off' | 'apple' | 'google' | 'windows' | 'samsung' | 'phone' | 'success' | 'lock' | 'person' | 'device' | 'totp' | 'email-otp' | 'qrcode' | 'key';
 /**
  * An icon component with built-in icon set.
@@ -7,8 +8,7 @@ export type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' |
  */
 export declare class TcIcon extends LitElement {
     name: IconName;
-    size: string;
-    color: string;
+    sx: SxProps;
     static styles: import('lit').CSSResult;
     render(): TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tc-icon.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,aAAa,GACb,OAAO,GACP,GAAG,GACH,OAAO,GACP,eAAe,GACf,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GAEV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GAET,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GAER,MAAM,GACN,WAAW,GACX,QAAQ,GACR,KAAK,CAAC;AAwCV;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,CAAU;IACxB,IAAI,SAAY;IAChB,KAAK,SAAkB;IAEnD,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-icon.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,aAAa,GACb,OAAO,GACP,GAAG,GACH,OAAO,GACP,eAAe,GACf,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GAEV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GAET,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GAER,MAAM,GACN,WAAW,GACX,QAAQ,GACR,KAAK,CAAC;AAwCV;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,CAAU;IACxB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}