@transcodes/ui-components 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -138,7 +138,7 @@ export declare class HistoryController extends BaseController {
     hostDisconnected(): void;
 }
 
-export declare 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';
+export declare 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';
 
 /**
  * Controller for managing loading states and progress.
@@ -323,7 +323,10 @@ export declare class TcButton extends LitElement {
  * Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
  *
  * @slot - Callout content
+ * @slot icon - Optional icon slot
  * @csspart callout - The callout container
+ * @csspart icon - The icon container
+ * @csspart content - The content container
  */
 export declare class TcCallout extends LitElement {
     variant: 'info' | 'success' | 'warning' | 'error';
@@ -373,13 +376,17 @@ export declare class TcContainer extends LitElement {
 }
 
 /**
- * A horizontal divider line.
+ * A horizontal divider line with optional text.
  *
- * @csspart divider - The divider element
+ * @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: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -499,6 +506,8 @@ export declare class TcIframeModal extends LitElement {
  *
  * @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
@@ -525,6 +534,8 @@ export declare class TcInput extends LitElement {
     private handleInput;
     private handleFocus;
     private handleBlur;
+    private handleKeydown;
+    private handlePaste;
     focus(): void;
 }
 

package/dist/ui-components.js

@@ -2,8 +2,8 @@ import "@transcodes/design-tokens";
 import { css as c, LitElement as d, html as l, unsafeCSS as kt } from "lit";
 import { property as n, customElement as p, state as S } from "lit/decorators.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { classMap as B } from "lit/directives/class-map.js";
-import { unsafeStatic as $t, html as _t } from "lit/static-html.js";
+import { classMap as M } from "lit/directives/class-map.js";
+import { unsafeStatic as $t, html as zt } from "lit/static-html.js";
 class P {
   constructor(e) {
     this.host = e, this.host.addController(this);
@@ -37,7 +37,7 @@ class j extends P {
     });
   }
 }
-class Fe extends P {
+class He extends P {
   constructor() {
     super(...arguments), this.errors = /* @__PURE__ */ new Map();
   }
@@ -104,7 +104,7 @@ class Ct extends P {
     window.removeEventListener("popstate", this.handlePopState), this.onPopCallback = void 0;
   }
 }
-class zt extends P {
+class _t extends P {
   constructor() {
     super(...arguments), this._isLoading = !1, this._progress = 0;
   }
@@ -154,10 +154,10 @@ class Ot extends P {
     super(e), this.handlers = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set(), this.handleMessage = (i) => {
       if (!(this.targetOrigin !== "*" && i.origin !== this.targetOrigin) && i.data && typeof i.data == "object" && typeof i.data.type == "string") {
         const { type: t, payload: a } = i.data;
-        this.handlers.get(t)?.forEach((ct) => {
-          ct(a);
-        }), this.wildcardHandlers.forEach((ct) => {
-          ct(t, a);
+        this.handlers.get(t)?.forEach((dt) => {
+          dt(a);
+        }), this.wildcardHandlers.forEach((dt) => {
+          dt(t, a);
         });
       }
     }, this.targetOrigin = s, s === "*" && typeof window < "u" && window.location.protocol !== "file:" && console.warn(
@@ -754,8 +754,8 @@ const jt = `/**
   color: var(--semantic-info);
 }
 `, u = kt(jt);
-var Et = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, Z = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Lt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var Et = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Z = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Bt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && Et(e, s, t), t;
 };
@@ -775,7 +775,7 @@ let C = class extends d {
     return l`
       <button
         part="button"
-        class=${B(r)}
+        class=${M(r)}
         style=${m(this.sx)}
         ?disabled=${this.disabled || this.loading}
         type="button"
@@ -913,10 +913,10 @@ Z([
 C = Z([
   p("tc-button")
 ], C);
-var Bt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, wt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Tt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var Mt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, wt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Lt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Bt(e, s, t), t;
+  return i && t && Mt(e, s, t), t;
 };
 let st = class extends d {
   constructor() {
@@ -931,8 +931,15 @@ let st = class extends d {
       "error-message": r
     };
     return l`
-      <div part="callout" class=${B(e)} role="alert">
-        <slot></slot>
+      <div part="callout" class=${M(e)} role="alert">
+        <div class="callout-inner">
+          <div part="icon" class="callout-icon">
+            <slot name="icon"></slot>
+          </div>
+          <div part="content" class="callout-content">
+            <slot></slot>
+          </div>
+        </div>
       </div>
     `;
   }
@@ -954,6 +961,29 @@ st.styles = [
       .error-message {
         animation: none;
       }
+
+      /* Icon + content layout */
+      .callout-inner {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-sm);
+      }
+
+      .callout-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      /* Hide icon container when empty */
+      .callout-icon:empty {
+        display: none;
+      }
+
+      .callout-content {
+        flex: 1;
+        min-width: 0;
+      }
     `
 ];
 wt([
@@ -962,12 +992,12 @@ wt([
 st = wt([
   p("tc-callout")
 ], st);
-var At = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, dt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Mt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var Tt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, pt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? At(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && At(e, s, t), t;
+  return i && t && Tt(e, s, t), t;
 };
-let N = class extends d {
+let K = class extends d {
   constructor() {
     super(...arguments), this.noBorder = !1, this.sx = {};
   }
@@ -977,7 +1007,7 @@ let N = class extends d {
       "card--no-border": this.noBorder
     };
     return l`
-      <div part="card" class=${B(r)} style=${m(this.sx)}>
+      <div part="card" class=${M(r)} style=${m(this.sx)}>
         <div class="card-content">
           <slot></slot>
         </div>
@@ -985,7 +1015,7 @@ let N = class extends d {
     `;
   }
 };
-N.styles = [
+K.styles = [
   u,
   c`
       :host {
@@ -1021,21 +1051,21 @@ N.styles = [
       }
     `
 ];
-dt([
+pt([
   n({ type: Boolean, attribute: "no-border" })
-], N.prototype, "noBorder", 2);
-dt([
+], K.prototype, "noBorder", 2);
+pt([
   n({ type: Object })
-], N.prototype, "sx", 2);
-N = dt([
+], K.prototype, "sx", 2);
+K = pt([
   p("tc-card")
-], N);
-var It = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, pt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Ft(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+], K);
+var It = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ht = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ht(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && It(e, s, t), t;
 };
-let K = class extends d {
+let N = class extends d {
   constructor() {
     super(...arguments), this.variant = "default", this.size = "md";
   }
@@ -1047,7 +1077,7 @@ let K = class extends d {
     `;
   }
 };
-K.styles = [
+N.styles = [
   u,
   c`
       :host {
@@ -1094,21 +1124,21 @@ K.styles = [
       }
     `
 ];
-pt([
+ht([
   n({ type: String })
-], K.prototype, "variant", 2);
-pt([
+], N.prototype, "variant", 2);
+ht([
   n({ type: String })
-], K.prototype, "size", 2);
-K = pt([
+], N.prototype, "size", 2);
+N = ht([
   p("tc-chip")
-], K);
-var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, ht = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Yt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+], N);
+var Ft = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, ut = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Vt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && qt(e, s, t), t;
+  return i && t && Ft(e, s, t), t;
 };
-let V = class extends d {
+let W = class extends d {
   constructor() {
     super(...arguments), this.wide = !1, this.sx = {}, this.defaultStyles = {
       display: "flex",
@@ -1133,7 +1163,7 @@ let V = class extends d {
     `;
   }
 };
-V.styles = c`
+W.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -1150,60 +1180,90 @@ V.styles = c`
       max-width: var(--container-max-width-wide);
     }
   `;
-ht([
+ut([
   n({ type: Boolean })
-], V.prototype, "wide", 2);
-ht([
+], W.prototype, "wide", 2);
+ut([
   n({ type: Object })
-], V.prototype, "sx", 2);
-V = ht([
+], W.prototype, "sx", 2);
+W = ut([
   p("tc-container")
-], V);
-var Ut = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ut = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Ht(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+], W);
+var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, ot = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Yt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Ut(e, s, t), t;
+  return i && t && qt(e, s, t), t;
 };
-let W = class extends d {
+let L = class extends d {
   constructor() {
-    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)";
+    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
   }
   render() {
-    return l`
-      <hr
-        part="divider"
-        class="divider"
-        style="--divider-color: ${this.color}; --divider-spacing: ${this.spacing};"
-      />
+    const r = `--divider-color: ${this.color}; --divider-spacing: ${this.spacing};`;
+    return this.text ? l`
+        <div part="container" class="divider-container" style=${r}>
+          <hr part="line" class="divider-line" />
+          <span part="text" class="divider-text">${this.text}</span>
+          <hr part="line" class="divider-line" />
+        </div>
+      ` : l`
+      <hr part="divider" class="divider" style=${r} />
     `;
   }
 };
-W.styles = c`
+L.styles = c`
     :host {
       display: block;
       width: 100%;
     }
 
+    /* Simple divider (no text) */
     .divider {
       border: none;
       height: 1px;
       background-color: var(--divider-color);
       margin: var(--divider-spacing) 0;
     }
+
+    /* Divider with text */
+    .divider-container {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      margin: var(--divider-spacing) 0;
+    }
+
+    .divider-line {
+      flex: 1;
+      border: none;
+      height: 1px;
+      background-color: var(--divider-color);
+      margin: 0;
+    }
+
+    .divider-text {
+      flex-shrink: 0;
+      font-size: var(--font-size-sm);
+      color: var(--ink-light);
+      font-family: var(--font-body);
+    }
   `;
-ut([
+ot([
   n({ type: String })
-], W.prototype, "color", 2);
-ut([
+], L.prototype, "color", 2);
+ot([
   n({ type: String })
-], W.prototype, "spacing", 2);
-W = ut([
+], L.prototype, "spacing", 2);
+ot([
+  n({ type: String })
+], L.prototype, "text", 2);
+L = ot([
   p("tc-divider")
-], W);
-var Rt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, I = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Nt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+], L);
+var Ut = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, H = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Rt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Rt(e, s, t), t;
+  return i && t && Ut(e, s, t), t;
 };
 let b = class extends d {
   constructor() {
@@ -1295,26 +1355,26 @@ b.styles = [
       }
     `
 ];
-I([
+H([
   n({ type: String })
 ], b.prototype, "title", 2);
-I([
+H([
   n({ type: String })
 ], b.prototype, "subtitle", 2);
-I([
+H([
   n({ type: String })
 ], b.prototype, "notice", 2);
-I([
+H([
   n({ type: Boolean, attribute: "no-animation" })
 ], b.prototype, "noAnimation", 2);
-I([
+H([
   n({ type: Object })
 ], b.prototype, "sx", 2);
-b = I([
+b = H([
   p("tc-form-header")
 ], b);
-var Kt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, ot = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Vt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var Kt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, nt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Nt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && Kt(e, s, t), t;
 };
@@ -1337,7 +1397,23 @@ const Wt = {
   passkey: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 10h-8.35C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H13l2 2 2-2 2 2 2-2.93-2-2.07zm-14 2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>`,
   bell: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>`,
   download: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
-  "wifi-off": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>`
+  "wifi-off": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>`,
+  // Brand icons
+  apple: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
+  google: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
+  windows: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.91V13.1l10 .15z"/></svg>`,
+  samsung: l`<svg viewBox="0 0 24 24"><text x="12" y="17" font-size="18" font-weight="700" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" text-anchor="middle" fill="currentColor">S</text></svg>`,
+  // General icons
+  phone: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>`,
+  success: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
+  lock: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>`,
+  person: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
+  device: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"/></svg>`,
+  // Auth icons
+  totp: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>`,
+  "email-otp": l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
+  qrcode: l`<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: l`<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 T = class extends d {
   constructor() {
@@ -1375,16 +1451,16 @@ T.styles = c`
       color: var(--icon-color);
     }
   `;
-ot([
+nt([
   n({ type: String })
 ], T.prototype, "name", 2);
-ot([
+nt([
   n({ type: String })
 ], T.prototype, "size", 2);
-ot([
+nt([
   n({ type: String })
 ], T.prototype, "color", 2);
-T = ot([
+T = nt([
   p("tc-icon")
 ], T);
 var Xt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, v = (r, e, s, i) => {
@@ -1410,13 +1486,13 @@ let h = class extends d {
       "has-error": r
     };
     return l`
-      <div class=${B(e)}>
+      <div class=${M(e)}>
         ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${B(s)}>
+        <div part="wrapper" class=${M(s)}>
           <input
             part="input"
             id=${this.inputId}
-            class=${B(i)}
+            class=${M(i)}
             type=${this.type}
             name=${this.name}
             placeholder=${this.placeholder}
@@ -1432,6 +1508,8 @@ let h = class extends d {
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+            @paste=${this.handlePaste}
           />
           <div part="ink-line" class="ink-line"></div>
         </div>
@@ -1464,6 +1542,24 @@ let h = class extends d {
       })
     );
   }
+  handleKeydown(r) {
+    this.dispatchEvent(
+      new CustomEvent("tc-keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: r.key, value: this.value, originalEvent: r }
+      })
+    );
+  }
+  handlePaste(r) {
+    this.dispatchEvent(
+      new CustomEvent("tc-paste", {
+        bubbles: !0,
+        composed: !0,
+        detail: { data: r.clipboardData?.getData("text"), originalEvent: r }
+      })
+    );
+  }
   focus() {
     this.shadowRoot?.querySelector("input")?.focus();
   }
@@ -1621,7 +1717,7 @@ v([
 h = v([
   p("tc-input")
 ], h);
-var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, nt = (r, e, s, i) => {
+var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, lt = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? Jt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && Qt(e, s, t), t;
@@ -1696,16 +1792,16 @@ A.styles = c`
       display: none;
     }
   `;
-nt([
+lt([
   n({ type: String })
 ], A.prototype, "gap", 2);
-nt([
+lt([
   n({ type: String })
 ], A.prototype, "padding", 2);
-nt([
+lt([
   n({ type: Object })
 ], A.prototype, "sx", 2);
-A = nt([
+A = lt([
   p("tc-item")
 ], A);
 var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, F = (r, e, s, i) => {
@@ -1870,7 +1966,7 @@ F([
 y = F([
   p("tc-item-button")
 ], y);
-var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, q = (r, e, s, i) => {
+var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, V = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? re(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && ee(e, s, t), t;
@@ -2076,22 +2172,22 @@ w.styles = [
       }
     `
 ];
-q([
+V([
   n({ type: Number })
 ], w.prototype, "length", 2);
-q([
+V([
   n({ type: Boolean })
 ], w.prototype, "error", 2);
-q([
+V([
   n({ type: Boolean })
 ], w.prototype, "disabled", 2);
-q([
+V([
   n({ type: Boolean, attribute: "show-progress" })
 ], w.prototype, "showProgress", 2);
-q([
+V([
   S()
 ], w.prototype, "values", 2);
-w = q([
+w = V([
   p("tc-otp-input")
 ], w);
 var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, vt = (r, e, s, i) => {
@@ -2216,12 +2312,12 @@ mt([
 G = mt([
   p("tc-spinner")
 ], G);
-var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, lt = (r, e, s, i) => {
+var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, ct = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? le(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && ne(e, s, t), t;
 };
-let M = class extends d {
+let I = class extends d {
   constructor() {
     super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
   }
@@ -2237,7 +2333,7 @@ let M = class extends d {
     `;
   }
 };
-M.styles = c`
+I.styles = c`
     :host {
       display: inline-flex;
     }
@@ -2255,19 +2351,19 @@ M.styles = c`
       font-weight: 600;
     }
   `;
-lt([
+ct([
   n({ type: String })
-], M.prototype, "size", 2);
-lt([
+], I.prototype, "size", 2);
+ct([
   n({ type: String })
-], M.prototype, "background", 2);
-lt([
+], I.prototype, "background", 2);
+ct([
   n({ type: String })
-], M.prototype, "color", 2);
-M = lt([
+], I.prototype, "color", 2);
+I = ct([
   p("tc-symbol")
-], M);
-var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, Y = (r, e, s, i) => {
+], I);
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, q = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? de(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && ce(e, s, t), t;
@@ -2303,7 +2399,7 @@ let x = class extends d {
       ...s ? { color: s } : {},
       ...this.sx
     };
-    return _t`
+    return zt`
       <${r} part="text" class=${e} style=${m(i)}>
         <slot></slot>
       </${r}>
@@ -2386,22 +2482,22 @@ x.styles = [
       }
     `
 ];
-Y([
+q([
   n({ type: String })
 ], x.prototype, "tag", 2);
-Y([
+q([
   n({ type: String })
 ], x.prototype, "size", 2);
-Y([
+q([
   n({ type: String })
 ], x.prototype, "weight", 2);
-Y([
+q([
   n({ type: String })
 ], x.prototype, "color", 2);
-Y([
+q([
   n({ type: Object })
 ], x.prototype, "sx", 2);
-x = Y([
+x = q([
   p("tc-text")
 ], x);
 var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, tt = (r, e, s, i) => {
@@ -2409,7 +2505,7 @@ var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, tt = (r, e
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && pe(e, s, t), t;
 };
-let z = class extends d {
+let _ = class extends d {
   constructor() {
     super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new j(this, {
       showDuration: 300,
@@ -2477,7 +2573,7 @@ let z = class extends d {
     `;
   }
 };
-z.styles = [
+_.styles = [
   u,
   c`
     :host {
@@ -2573,19 +2669,19 @@ z.styles = [
 ];
 tt([
   n({ type: String })
-], z.prototype, "variant", 2);
+], _.prototype, "variant", 2);
 tt([
   n({ type: Number })
-], z.prototype, "duration", 2);
+], _.prototype, "duration", 2);
 tt([
   n({ type: Boolean, attribute: "auto-dismiss" })
-], z.prototype, "autoDismiss", 2);
+], _.prototype, "autoDismiss", 2);
 tt([
   n({ type: Boolean })
-], z.prototype, "dismissible", 2);
-z = tt([
+], _.prototype, "dismissible", 2);
+_ = tt([
   p("tc-toast")
-], z);
+], _);
 var ue = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, et = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? ve(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
@@ -2707,7 +2803,7 @@ var me = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, gt = (r, e
 };
 let Q = class extends d {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new zt(this);
+    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new _t(this);
   }
   connectedCallback() {
     super.connectedCallback(), this.loading.start();
@@ -2771,7 +2867,7 @@ gt([
 Q = gt([
   p("tc-loading-screen")
 ], Q);
-var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, U = (r, e, s, i) => {
+var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, Y = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? be(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && fe(e, s, t), t;
@@ -2939,22 +3035,22 @@ k.styles = c`
       transform: translateY(0);
     }
   `;
-U([
+Y([
   n({ type: String })
 ], k.prototype, "title", 2);
-U([
+Y([
   n({ type: String })
 ], k.prototype, "message", 2);
-U([
+Y([
   n({ type: String, attribute: "action-label" })
 ], k.prototype, "actionLabel", 2);
-U([
+Y([
   n({ type: Boolean, attribute: "auto-animate" })
 ], k.prototype, "autoAnimate", 2);
-U([
+Y([
   S()
 ], k.prototype, "isAnimated", 2);
-k = U([
+k = Y([
   p("tc-success-screen")
 ], k);
 var ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, rt = (r, e, s, i) => {
@@ -3336,8 +3432,8 @@ E([
 g = E([
   p("tc-iframe-modal")
 ], g);
-var $e = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, L = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? _e(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, B = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? ze(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && $e(e, s, t), t;
 };
@@ -3541,29 +3637,29 @@ f.styles = [
     }
   `
 ];
-L([
+B([
   n({ type: String })
 ], f.prototype, "title", 2);
-L([
+B([
   n({ type: String })
 ], f.prototype, "description", 2);
-L([
+B([
   n({ type: String, attribute: "install-label" })
 ], f.prototype, "installLabel", 2);
-L([
+B([
   n({ type: String, attribute: "storage-key" })
 ], f.prototype, "storageKey", 2);
-L([
+B([
   n({ type: Number, attribute: "dismiss-days" })
 ], f.prototype, "dismissDays", 2);
-L([
+B([
   S()
 ], f.prototype, "isDismissed", 2);
-f = L([
+f = B([
   p("tc-installation-banner")
 ], f);
-var Ce = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, ft = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? ze(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+var Ce = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, ft = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? _e(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && Ce(e, s, t), t;
 };
@@ -3795,7 +3891,7 @@ ft([
 J = ft([
   p("tc-ios-installation-guide")
 ], J);
-var De = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, H = (r, e, s, i) => {
+var De = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, U = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? Oe(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && De(e, s, t), t;
@@ -3999,22 +4095,22 @@ $.styles = [
     }
   `
 ];
-H([
+U([
   n({ type: String })
 ], $.prototype, "title", 2);
-H([
+U([
   n({ type: String })
 ], $.prototype, "description", 2);
-H([
+U([
   n({ type: String, attribute: "allow-label" })
 ], $.prototype, "allowLabel", 2);
-H([
+U([
   n({ type: String, attribute: "deny-label" })
 ], $.prototype, "denyLabel", 2);
-H([
+U([
   n({ type: String, attribute: "storage-key" })
 ], $.prototype, "storageKey", 2);
-$ = H([
+$ = U([
   p("tc-notification-modal")
 ], $);
 var Se = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, R = (r, e, s, i) => {
@@ -4022,7 +4118,7 @@ var Se = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, R = (r, e,
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
   return i && t && Se(e, s, t), t;
 };
-let _ = class extends d {
+let z = class extends d {
   constructor() {
     super(...arguments), this.title = "No Connection", this.description = "Please check your internet connection and try again.", this.retryLabel = "Try Again", this.autoDetect = !0, this.isOffline = !1, this.animation = new j(this, {
       showDuration: 300,
@@ -4110,7 +4206,7 @@ let _ = class extends d {
     `;
   }
 };
-_.styles = [
+z.styles = [
   u,
   c`
     :host {
@@ -4196,22 +4292,22 @@ _.styles = [
 ];
 R([
   n({ type: String })
-], _.prototype, "title", 2);
+], z.prototype, "title", 2);
 R([
   n({ type: String })
-], _.prototype, "description", 2);
+], z.prototype, "description", 2);
 R([
   n({ type: String, attribute: "retry-label" })
-], _.prototype, "retryLabel", 2);
+], z.prototype, "retryLabel", 2);
 R([
   n({ type: Boolean, attribute: "auto-detect" })
-], _.prototype, "autoDetect", 2);
+], z.prototype, "autoDetect", 2);
 R([
   S()
-], _.prototype, "isOffline", 2);
-_ = R([
+], z.prototype, "isOffline", 2);
+z = R([
   p("tc-offline-modal")
-], _);
+], z);
 var je = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, xt = (r, e, s, i) => {
   for (var t = i > 1 ? void 0 : i ? Ee(e, s) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
@@ -4335,19 +4431,19 @@ at = xt([
 export {
   j as AnimationController,
   P as BaseController,
-  Fe as FormValidationController,
+  He as FormValidationController,
   Ct as HistoryController,
-  zt as LoadingController,
+  _t as LoadingController,
   Dt as MatchMediaController,
   Ot as MessageBusController,
   bt as StorageController,
   it as TcBox,
   C as TcButton,
   st as TcCallout,
-  N as TcCard,
-  K as TcChip,
-  V as TcContainer,
-  W as TcDivider,
+  K as TcCard,
+  N as TcChip,
+  W as TcContainer,
+  L as TcDivider,
   D as TcErrorScreen,
   O as TcFloatingButton,
   b as TcFormHeader,
@@ -4360,13 +4456,13 @@ export {
   y as TcItemButton,
   Q as TcLoadingScreen,
   $ as TcNotificationModal,
-  _ as TcOfflineModal,
+  z as TcOfflineModal,
   w as TcOtpInput,
   at as TcPageDecoration,
   X as TcSection,
   G as TcSpinner,
   k as TcSuccessScreen,
-  M as TcSymbol,
+  I as TcSymbol,
   x as TcText,
-  z as TcToast
+  _ as TcToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -54,7 +54,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.1.0"
+    "@transcodes/design-tokens": "^0.2.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.5",