@transcodes/ui-components 0.3.5 → 0.3.6

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.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;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,KAAK,SAAsB;IAC3B,OAAO,SAAqB;IAC5B,IAAI,SAAM;IAEtC,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-divider.js

@@ -1,11 +1,11 @@
-import { LitElement as c, html as p, css as v } from "lit";
+import { css as c, LitElement as v, html as p } 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;
 };
-let i = class extends c {
+let i = class extends v {
   constructor() {
     super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
   }
@@ -22,10 +22,11 @@ let i = class extends c {
     `;
   }
 };
-i.styles = v`
+i.styles = c`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     /* Simple divider (no text) */

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,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,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,11 +1,14 @@
-import { LitElement as m, html as p, css as g } from "lit";
+import { css as m, LitElement as p, html 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 "./tc-callout.js";
+import "./tc-icon.js";
+import "./tc-text.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (c, r, s, a) => {
+  for (var t = a > 1 ? void 0 : a ? v(r, s) : r, i = c.length - 1, n; i >= 0; i--)
+    (n = c[i]) && (t = (a ? n(r, s, t) : n(t)) || t);
+  return a && t && h(r, s, t), t;
 };
-let e = class extends m {
+let e = class extends p {
   constructor() {
     super(...arguments), this.variant = "error", this.message = "";
   }
@@ -30,13 +33,13 @@ let e = class extends m {
     }
   }
   render() {
-    return this.message ? p`
+    return this.message ? g`
       <tc-callout part="callout" variant=${this.variant}>
         <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 = m`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     tc-callout::part(callout) {

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;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,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.js

@@ -1,4 +1,4 @@
-import { LitElement as a, html as o, css as p } from "lit";
+import { html as o, css as a, LitElement as p } from "lit";
 import { property as h, customElement as g } from "lit/decorators.js";
 var d = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, t, s, i) => {
   for (var e = i > 1 ? void 0 : i ? x(t, s) : t, v = r.length - 1, c; v >= 0; v--)
@@ -42,7 +42,7 @@ const z = {
   qrcode: o`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM15 19h2v2h-2zM17 17h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2zM19 19h2v2h-2z"/><path d="M6 6h2v2H6zM6 16h2v2H6zM16 6h2v2h-2z"/></svg>`,
   key: o`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/></svg>`
 };
-let l = class extends a {
+let l = class extends p {
   constructor() {
     super(...arguments), this.name = "info", this.size = "1.5rem", this.color = "currentColor";
   }
@@ -59,7 +59,7 @@ let l = class extends a {
     ` : (console.warn(`Icon "${this.name}" not found`), o``);
   }
 };
-l.styles = p`
+l.styles = a`
     :host {
       display: inline-flex;
       align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"tc-input-with-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input-with-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACO,SAAS,SAAM;IAChB,QAAQ,SAAM;IACX,WAAW,EAC9D,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IAEd,OAAO,CAAC,OAAO,CACiC;IAChD,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA2GpB;IAEO,MAAM;IAoEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
+{"version":3,"file":"tc-input-with-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input-with-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACO,SAAS,SAAM;IAChB,QAAQ,SAAM;IACX,WAAW,EAC9D,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IAEd,OAAO,CAAC,OAAO,CACiC;IAChD,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IAoEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/primitives/tc-input-with-chip.js

@@ -1,13 +1,15 @@
-import { LitElement as h, html as n, css as b } from "lit";
-import { property as a, state as u, customElement as v } from "lit/decorators.js";
+import { css as h, LitElement as v, html as n } from "lit";
+import { property as a, state as u, customElement as b } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { sharedStyles as f } from "../styles/shared.js";
+import "./tc-chip.js";
+import "./tc-icon.js";
 var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, s, p) => {
   for (var o = p > 1 ? void 0 : p ? y(i, s) : i, l = t.length - 1, c; l >= 0; l--)
     (c = t[l]) && (o = (p ? c(i, s, o) : c(o)) || o);
   return p && o && m(i, s, o), o;
 };
-let e = class extends h {
+let e = class extends v {
   constructor() {
     super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.readonly = !1, this.chipLabel = "", this.chipIcon = "", this.chipVariant = "default", this.inputId = `tc-input-chip-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
   }
@@ -95,9 +97,11 @@ let e = class extends h {
 };
 e.styles = [
   f,
-  b`
+  h`
       :host {
         display: block;
+        width: 100%;
+        min-width: 0;
       }
 
       .field-group {
@@ -125,7 +129,7 @@ e.styles = [
 
       .input-container:focus-within {
         border-color: var(--accent-primary);
-        box-shadow: 0 0 0 3px var(--alpha-primary10);
+        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--alpha-primary10);
       }
 
       .input-container.has-error {
@@ -134,7 +138,7 @@ e.styles = [
       }
 
       .input-container.has-error:focus-within {
-        box-shadow: 0 0 0 3px var(--error-border);
+        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--error-border);
       }
 
       .input {
@@ -184,7 +188,7 @@ e.styles = [
       @keyframes slideDown {
         from {
           opacity: 0;
-          transform: translateY(-0.25rem);
+          transform: translateY(calc(-1 * var(--offset-slide-up-sm)));
         }
         to {
           opacity: 1;
@@ -235,7 +239,7 @@ r([
   u()
 ], e.prototype, "isFocused", 2);
 e = r([
-  v("tc-input-with-chip")
+  b("tc-input-with-chip")
 ], e);
 export {
   e as TcInputWithChip

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

@@ -1 +1 @@
-{"version":3,"file":"tc-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,KAAK,SAAM;IACX,IAAI,SAAU;IACd,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,IAAI,SAAM;IACV,YAAY,SAAM;IAClB,SAAS,SAAM;IACf,SAAS,SAAK;IACd,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAE5D,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA2GpB;IAEO,MAAM;IA+Df,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tc-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,KAAK,SAAM;IACX,IAAI,SAAU;IACd,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,IAAI,SAAM;IACV,YAAY,SAAM;IAClB,SAAS,SAAM;IACf,SAAS,SAAK;IACd,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAE5D,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IA+Df,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-input.js

@@ -1,14 +1,14 @@
-import { LitElement as c, html as d, css as m } from "lit";
+import { css as c, LitElement as m, html as d } from "lit";
 import { property as i, state as h, customElement as b } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { sharedStyles as v } from "../styles/shared.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+import { sharedStyles as y } from "../styles/shared.js";
 var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, o, n, a) => {
   for (var s = a > 1 ? void 0 : a ? g(o, n) : o, l = e.length - 1, p; l >= 0; l--)
     (p = e[l]) && (s = (a ? p(o, n, s) : p(s)) || s);
   return a && s && f(o, n, s), s;
 };
-let t = class extends c {
+let t = class extends m {
   constructor() {
     super(...arguments), this.label = "", this.type = "text", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.required = !1, this.name = "", this.autocomplete = "", this.inputmode = "", this.maxlength = 0, this.sx = {}, this.inputId = `tc-input-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
   }
@@ -44,7 +44,7 @@ let t = class extends c {
             maxlength=${this.maxlength || ""}
             aria-invalid=${e ? "true" : "false"}
             aria-describedby=${e ? `${this.inputId}-error` : ""}
-            style=${y(this.sx)}
+            style=${v(this.sx)}
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
@@ -105,10 +105,12 @@ let t = class extends c {
   }
 };
 t.styles = [
-  v,
-  m`
+  y,
+  c`
       :host {
         display: block;
+        width: 100%;
+        min-width: 0;
       }
 
       /* Extend design-tokens .field-group */
@@ -171,7 +173,7 @@ t.styles = [
 
       .input.has-error:focus {
         border-color: var(--error-base);
-        box-shadow: 0 0 0 0.1875rem var(--error-border);
+        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--error-border);
       }
 
       .input-wrapper.has-error .ink-line {
@@ -192,7 +194,7 @@ t.styles = [
       @keyframes slideDown {
         from {
           opacity: 0;
-          transform: translateY(-0.25rem);
+          transform: translateY(calc(-1 * var(--offset-slide-up-sm)));
         }
         to {
           opacity: 1;

package/dist/primitives/tc-item-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-item-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,GAAG,SAAqB;IACxB,OAAO,SAAqB;IAC3B,QAAQ,UAAS;IACQ,SAAS,UAAQ;IAC3C,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BAqFpB;IAEF,OAAO,CAAC,WAAW;IAWV,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"tc-item-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,GAAG,SAAqB;IACxB,OAAO,SAAqB;IAC3B,QAAQ,UAAS;IACQ,SAAS,UAAQ;IAC3C,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BAsFpB;IAEF,OAAO,CAAC,WAAW;IAWV,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/primitives/tc-item-button.js

@@ -1,12 +1,12 @@
-import { LitElement as c, html as d, css as f } from "lit";
-import { property as o, customElement as u } from "lit/decorators.js";
+import { css as c, LitElement as f, html as d } from "lit";
+import { property as i, customElement as u } from "lit/decorators.js";
 import { styleMap as h } from "lit/directives/style-map.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (i, s, a, n) => {
-  for (var e = n > 1 ? void 0 : n ? b(s, a) : s, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (e = (n ? p(s, a, e) : p(e)) || e);
-  return n && e && m(s, a, e), e;
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (o, s, a, n) => {
+  for (var e = n > 1 ? void 0 : n ? m(s, a) : s, l = o.length - 1, p; l >= 0; l--)
+    (p = o[l]) && (e = (n ? p(s, a, e) : p(e)) || e);
+  return n && e && b(s, a, e), e;
 };
-let t = class extends c {
+let t = class extends f {
   constructor() {
     super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.disabled = !1, this.showArrow = !0, this.sx = {};
   }
@@ -19,7 +19,7 @@ let t = class extends c {
     );
   }
   render() {
-    const i = {
+    const o = {
       "--item-padding": this.padding,
       "--item-gap": this.gap,
       ...this.sx
@@ -29,7 +29,7 @@ let t = class extends c {
         part="button"
         class="button"
         ?disabled=${this.disabled}
-        style=${h(i)}
+        style=${h(o)}
         @click=${this.handleClick}
       >
         <div part="prefix" class="prefix">
@@ -59,10 +59,11 @@ let t = class extends c {
     `;
   }
 };
-t.styles = f`
+t.styles = c`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     .button {
@@ -123,8 +124,8 @@ t.styles = f`
 
     .arrow {
       flex-shrink: 0;
-      width: 1.25rem;
-      height: 1.25rem;
+      width: var(--size-icon-action);
+      height: var(--size-icon-action);
       color: var(--ink-light);
       transition: var(--transition-fast);
     }
@@ -146,19 +147,19 @@ t.styles = f`
     }
   `;
 r([
-  o({ type: String })
+  i({ type: String })
 ], t.prototype, "gap", 2);
 r([
-  o({ type: String })
+  i({ type: String })
 ], t.prototype, "padding", 2);
 r([
-  o({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "disabled", 2);
 r([
-  o({ type: Boolean, attribute: "show-arrow" })
+  i({ type: Boolean, attribute: "show-arrow" })
 ], t.prototype, "showArrow", 2);
 r([
-  o({ type: Object })
+  i({ type: Object })
 ], t.prototype, "sx", 2);
 t = r([
   u("tc-item-button")

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

@@ -1 +1 @@
-{"version":3,"file":"tc-item.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,SAAqB;IACxB,OAAO,SAAqB;IAC5B,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BA4CpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"tc-item.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,SAAqB;IACxB,OAAO,SAAqB;IAC5B,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAM;IAErE,OAAgB,MAAM,0BA6CpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-item.js

@@ -1,12 +1,12 @@
-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 m } from "lit";
+import { property as d, 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, y = Object.getOwnPropertyDescriptor, a = (i, s, n, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(s, n) : s, p = i.length - 1, o; p >= 0; p--)
+    (o = i[p]) && (t = (r ? o(s, n, t) : o(t)) || t);
+  return r && t && x(s, n, t), t;
 };
-let e = class extends d {
+let e = class extends f {
   constructor() {
     super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.sx = {};
   }
@@ -16,7 +16,7 @@ let e = class extends d {
       "--item-gap": this.gap,
       ...this.sx
     };
-    return f`
+    return m`
       <div part="item" class="item" style=${v(i)}>
         <div part="prefix" class="prefix">
           <slot name="prefix"></slot>
@@ -31,10 +31,11 @@ let e = class extends d {
     `;
   }
 };
-e.styles = m`
+e.styles = l`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     .item {
@@ -77,13 +78,13 @@ e.styles = m`
     }
   `;
 a([
-  l({ type: String })
+  d({ type: String })
 ], e.prototype, "gap", 2);
 a([
-  l({ type: String })
+  d({ type: String })
 ], e.prototype, "padding", 2);
 a([
-  l({ type: Object })
+  d({ type: Object })
 ], e.prototype, "sx", 2);
 e = a([
   c("tc-item")

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;;;;;;;;;;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,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,4 +1,4 @@
-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) => {
@@ -6,7 +6,7 @@ var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (t, e, s
     (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
   return r && a && g(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 = [];
   }
@@ -119,9 +119,11 @@ let i = class extends u {
 };
 i.styles = [
   m,
-  p`
+  u`
       :host {
         display: block;
+        width: 100%;
+        min-width: 0;
       }
 
       .container {
@@ -177,7 +179,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);

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;;;;;;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"}

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

@@ -1,4 +1,4 @@
-import { LitElement as c, html as b, css as d } from "lit";
+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) => {
@@ -11,7 +11,7 @@ let a = class extends c {
     super(...arguments), this.variant = "primary";
   }
   render() {
-    return b`
+    return d`
       <div part="decoration" class="decoration">
         <div part="blob" class="blob blob-1"></div>
         <div part="blob" class="blob blob-2"></div>
@@ -22,12 +22,12 @@ let a = class extends c {
 };
 a.styles = [
   v,
-  d`
+  b`
     :host {
-      position: fixed;
+      position: absolute;
       inset: 0;
-      pointer-events: none;
       z-index: 0;
+      pointer-events: none;
       overflow: hidden;
     }
 
@@ -38,7 +38,7 @@ a.styles = [
 
     .blob {
       position: absolute;
-      border-radius: 50%;
+      border-radius: var(--radius-full);
       opacity: 0.35;
       filter: blur(0.0625rem);
     }
@@ -87,8 +87,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;

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;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"}