@transcodes/ui-components 0.3.4 → 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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * A horizontal divider line with optional text.
+ *
+ * @csspart divider - The divider element (simple mode)
+ * @csspart container - The container element (text mode)
+ * @csspart line - The line elements (text mode)
+ * @csspart text - The text element (text mode)
+ */
+export declare class TcDivider extends LitElement {
+    color: string;
+    spacing: string;
+    text: string;
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-divider': TcDivider;
+    }
+}
+//# sourceMappingURL=tc-divider.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * A simplified error/warning/info message component.
+ * Wraps tc-callout with appropriate icon and text styling.
+ *
+ * @csspart callout - The underlying callout container
+ * @csspart icon - The icon element
+ * @csspart message - The message text
+ */
+export declare class TcErrorMessage extends LitElement {
+    variant: 'warning' | 'info' | 'error';
+    message: string;
+    static styles: import('lit').CSSResult;
+    private getIconName;
+    private getIconColor;
+    render(): import('lit').TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-error-message': TcErrorMessage;
+    }
+}
+//# sourceMappingURL=tc-error-message.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Form header component with animated title, subtitle, and optional notice.
+ * Uses design-tokens form classes (.form-title, .form-subtitle).
+ *
+ * @csspart header - The header container
+ * @csspart title - The title element
+ * @csspart subtitle - The subtitle element
+ * @csspart notice - The notice element
+ */
+export declare class TcFormHeader extends LitElement {
+    title: string;
+    subtitle: string;
+    notice: string;
+    noAnimation: boolean;
+    sx: Record<string, string | number>;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-form-header': TcFormHeader;
+    }
+}
+//# sourceMappingURL=tc-form-header.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit';
+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.
+ *
+ * @csspart icon - The icon container
+ */
+export declare class TcIcon extends LitElement {
+    name: IconName;
+    size: string;
+    color: string;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-icon': TcIcon;
+    }
+}
+//# sourceMappingURL=tc-icon.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * An input field with an attached chip indicator.
+ * Useful for showing authentication method alongside email/username input.
+ *
+ * @fires tc-input - Fired when input value changes
+ * @fires tc-blur - Fired when input loses focus
+ * @fires tc-keydown - Fired on keydown
+ * @csspart wrapper - The input wrapper container
+ * @csspart input - The input element
+ * @csspart chip - The chip element
+ */
+export declare class TcInputWithChip extends LitElement {
+    label: string;
+    placeholder: string;
+    value: string;
+    error: string;
+    disabled: boolean;
+    readonly: boolean;
+    chipLabel: string;
+    chipIcon: string;
+    chipVariant: 'default' | 'success' | 'error' | 'info';
+    private inputId;
+    private isFocused;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeydown;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-input-with-chip': TcInputWithChip;
+    }
+}
+//# sourceMappingURL=tc-input-with-chip.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * Form input component with label and error states.
+ * Uses design-tokens classes (.input, .label, .field-group).
+ *
+ * @fires tc-input - Fired when input value changes
+ * @fires tc-blur - Fired when input loses focus
+ * @fires tc-keydown - Fired when a key is pressed
+ * @fires tc-paste - Fired when content is pasted
+ * @csspart wrapper - The input wrapper element
+ * @csspart input - The input element
+ * @csspart label - The label element
+ * @csspart ink-line - The animated ink line
+ * @csspart error - The error message element
+ */
+export declare class TcInput extends LitElement {
+    label: string;
+    type: string;
+    placeholder: string;
+    value: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    autocomplete: string;
+    inputmode: string;
+    maxlength: number;
+    sx: Record<string, string | number>;
+    private inputId;
+    private isFocused;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeydown;
+    private handlePaste;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-input': TcInput;
+    }
+}
+//# sourceMappingURL=tc-input.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * A clickable item button with hover states and optional arrow indicator.
+ *
+ * @slot - Item content
+ * @slot prefix - Left side content (icon, symbol)
+ * @slot suffix - Right side content (replaces arrow if provided)
+ * @fires tc-click - Fired when the item is clicked
+ * @csspart button - The button element
+ * @csspart prefix - The prefix container
+ * @csspart content - The main content container
+ * @csspart suffix - The suffix container
+ * @csspart arrow - The arrow indicator
+ */
+export declare class TcItemButton extends LitElement {
+    gap: string;
+    padding: string;
+    disabled: boolean;
+    showArrow: boolean;
+    sx: Record<string, string | number>;
+    static styles: import('lit').CSSResult;
+    private handleClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-item-button': TcItemButton;
+    }
+}
+//# sourceMappingURL=tc-item-button.d.ts.map

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

@@ -0,0 +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,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")