@transcodes/ui-components 0.3.5 → 0.4.0

package/dist/primitives/tc-item.js

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

package/dist/primitives/tc-otp-input.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * OTP (One-Time Password) input component with individual cells and progress indicator.
  * Uses shake animation from design-tokens.
@@ -15,6 +16,7 @@ export declare class TcOtpInput extends LitElement {
     error: boolean;
     disabled: boolean;
     showProgress: boolean;
+    sx: SxProps;
     private values;
     static styles: import('lit').CSSResult[];
     connectedCallback(): void;

package/dist/primitives/tc-otp-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-otp-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACZ,MAAM,SAAK;IACV,KAAK,UAAS;IACd,QAAQ,UAAS;IACW,YAAY,UAAQ;IAEpE,OAAO,CAAC,MAAM,CAAgB;IAEvC,OAAgB,MAAM,4BAyFpB;IAEO,iBAAiB;IAKjB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,SAAS;IASjB,kDAAkD;IAClD,KAAK;IAML,uBAAuB;IACvB,KAAK;IAKL,gCAAgC;IAChC,QAAQ,IAAI,MAAM;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"tc-otp-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACZ,MAAM,SAAK;IACV,KAAK,UAAS;IACd,QAAQ,UAAS;IACW,YAAY,UAAQ;IACjD,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,MAAM,CAAgB;IAEvC,OAAgB,MAAM,4BA2FpB;IAEO,iBAAiB;IAKjB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,SAAS;IASjB,kDAAkD;IAClD,KAAK;IAML,uBAAuB;IACvB,KAAK;IAKL,gCAAgC;IAChC,QAAQ,IAAI,MAAM;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/primitives/tc-otp-input.js

@@ -1,14 +1,15 @@
-import { LitElement as u, html as h, css as p } from "lit";
+import { css as u, LitElement as p, html as h } from "lit";
 import { property as c, state as d, customElement as v } from "lit/decorators.js";
-import { sharedStyles as m } from "../styles/shared.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? f(e, s) : e, o = t.length - 1, l; o >= 0; o--)
+import { styleMap as m } from "lit/directives/style-map.js";
+import { sharedStyles as g } from "../styles/shared.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? b(e, s) : e, o = t.length - 1, l; o >= 0; o--)
     (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
-  return r && a && g(e, s, a), a;
+  return r && a && f(e, s, a), a;
 };
-let i = class extends u {
+let i = class extends p {
   constructor() {
-    super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.values = [];
+    super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.sx = {}, this.values = [];
   }
   connectedCallback() {
     super.connectedCallback(), this.values = new Array(this.length).fill("");
@@ -16,7 +17,7 @@ let i = class extends u {
   render() {
     const e = this.values.filter((s) => s.length > 0).length / this.length * 100;
     return h`
-      <div class="container">
+      <div class="container" style=${m(this.sx)}>
         <div part="cells" class="cells" role="group" aria-label="OTP input">
           ${this.values.map((s, r) => {
       const o = [
@@ -118,10 +119,12 @@ let i = class extends u {
   }
 };
 i.styles = [
-  m,
-  p`
+  g,
+  u`
       :host {
         display: block;
+        width: 100%;
+        min-width: 0;
       }
 
       .container {
@@ -177,7 +180,7 @@ i.styles = [
       /* Progress bar */
       .progress {
         width: 100%;
-        max-width: 12rem;
+        max-width: var(--size-progress-bar-width);
         height: var(--size-border-width-heavy);
         background: var(--paper-warm);
         border-radius: var(--radius-full);
@@ -219,6 +222,9 @@ n([
 n([
   c({ type: Boolean, attribute: "show-progress" })
 ], i.prototype, "showProgress", 2);
+n([
+  c({ type: Object })
+], i.prototype, "sx", 2);
 n([
   d()
 ], i.prototype, "values", 2);

package/dist/{widgets → primitives}/tc-page-decoration.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * Decorative floating blob background for pages.
  * Uses CSS custom properties for color variants and inkFloat/inkDrift animations from design-tokens.
@@ -8,6 +9,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcPageDecoration extends LitElement {
     variant: 'primary' | 'success' | 'error';
+    sx: SxProps;
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -0,0 +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,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/{widgets → primitives}/tc-page-decoration.js

@@ -1,18 +1,19 @@
-import { LitElement as c, html as b, css 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 b`
-      <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,14 +21,14 @@ let a = class extends c {
     `;
   }
 };
-a.styles = [
-  v,
-  d`
+e.styles = [
+  u,
+  c`
     :host {
-      position: fixed;
+      position: absolute;
       inset: 0;
-      pointer-events: none;
       z-index: 0;
+      pointer-events: none;
       overflow: hidden;
     }
 
@@ -38,7 +39,7 @@ a.styles = [
 
     .blob {
       position: absolute;
-      border-radius: 50%;
+      border-radius: var(--radius-full);
       opacity: 0.35;
       filter: blur(0.0625rem);
     }
@@ -87,8 +88,8 @@ a.styles = [
     }
 
     .blob-3 {
-      width: 20rem;
-      height: 20rem;
+      width: var(--size-decoration-blob);
+      height: var(--size-decoration-blob);
       bottom: -8rem;
       left: 20%;
       animation: decorFloat 14s ease-in-out infinite 2s;
@@ -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,0BAWpB;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,48 +1,47 @@
-import { LitElement as a, html as m, css as y } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, l = (s, r, p, o) => {
-  for (var t = o > 1 ? void 0 : o ? d(r, p) : r, c = s.length - 1, i; c >= 0; c--)
-    (i = s[c]) && (t = (o ? i(r, p, t) : i(t)) || t);
-  return o && t && u(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 m`
-      <section part="section" class="section" style=${h(s)}>
+    return a`
+      <section part="section" class="section" style=${x(e)}>
         <slot></slot>
       </section>
     `;
   }
 };
-e.styles = y`
+o.styles = p`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     .section {
       display: flex;
       flex-direction: column;
       width: 100%;
+      box-sizing: border-box;
     }
   `;
-l([
-  n({ type: String })
-], e.prototype, "gap", 2);
-l([
-  n({ type: Object })
-], e.prototype, "sx", 2);
-e = l([
-  f("tc-section")
-], e);
+n([
+  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,32 +1,35 @@
-import { LitElement as d, html as h, css as m } from "lit";
-import { property as l, customElement as c } from "lit/decorators.js";
-import { MatchMediaController as v } from "../controllers/match-media.controller.js";
-import { sharedStyles as b } from "../styles/shared.js";
-var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (e, s, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? z(s, n) : s, o = e.length - 1, p; o >= 0; o--)
-    (p = e[o]) && (r = (t ? p(s, n, r) : p(r)) || r);
-  return t && r && w(s, n, r), r;
+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 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 d {
+let t = class extends h {
   constructor() {
-    super(...arguments), this.mobile = new v(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}`, h`
+    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,
-  m`
+t.styles = [
+  w,
+  d`
       :host {
         display: inline-flex;
         align-items: center;
@@ -35,7 +38,7 @@ i.styles = [
 
       .spinner {
         display: block;
-        border-radius: 50%;
+        border-radius: var(--radius-full);
         border-style: solid;
         border-color: var(--paper-cream);
         border-top-color: var(--spinner-color);
@@ -67,21 +70,21 @@ i.styles = [
       }
 
       .spinner--auto-desktop {
-        width: 5rem;
-        height: 5rem;
+        width: var(--size-spinner-xl);
+        height: var(--size-spinner-xl);
         border-width: var(--size-border-width-bold);
       }
     `
 ];
-a([
+p([
   l({ type: String })
-], i.prototype, "size", 2);
-a([
-  l({ type: String })
-], i.prototype, "color", 2);
-i = a([
-  c("tc-spinner")
-], i);
+], t.prototype, "size", 2);
+p([
+  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,0BAiBpB;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,29 +1,33 @@
-import { LitElement as m, html as p, css as c } from "lit";
-import { property as a, customElement as b } from "lit/decorators.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (y, t, l, e) => {
-  for (var r = e > 1 ? void 0 : e ? f(t, l) : t, i = y.length - 1, n; i >= 0; i--)
-    (n = y[i]) && (r = (e ? n(t, l, r) : n(r)) || r);
-  return e && r && v(t, 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 o = 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>
     `;
   }
 };
-o.styles = c`
+r.styles = a`
     :host {
       display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .symbol {
@@ -39,18 +43,12 @@ o.styles = c`
       font-weight: 600;
     }
   `;
-s([
-  a({ type: String })
-], o.prototype, "size", 2);
-s([
-  a({ type: String })
-], o.prototype, "background", 2);
-s([
-  a({ type: String })
-], o.prototype, "color", 2);
-o = s([
-  b("tc-symbol")
-], o);
+n([
+  b({ type: Object })
+], r.prototype, "sx", 2);
+r = n([
+  p("tc-symbol")
+], r);
 export {
-  o 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-text.js

@@ -1,4 +1,4 @@
-import { LitElement as x, css as p } from "lit";
+import { css as x, LitElement as p } from "lit";
 import { property as a, customElement as g } from "lit/decorators.js";
 import { styleMap as h } from "lit/directives/style-map.js";
 import { unsafeStatic as f, html as m } from "lit/static-html.js";
@@ -8,7 +8,7 @@ var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (r, o, s
     (l = r[c]) && (e = (i ? l(o, s, e) : l(e)) || e);
   return i && e && v(o, s, e), e;
 };
-let t = class extends x {
+let t = class extends p {
   constructor() {
     super(...arguments), this.tag = "p", this.sx = {};
   }
@@ -48,7 +48,7 @@ let t = class extends x {
 };
 t.styles = [
   y,
-  p`
+  x`
       :host {
         display: contents;
       }

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[];