@transcodes/ui-components 0.3.5 → 0.3.6

package/dist/primitives/tc-section.js

@@ -1,10 +1,10 @@
-import { LitElement as a, html as m, css as y } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
+import { css as m, LitElement as a, html as y } from "lit";
+import { property as l, 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;
+var d = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (s, r, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? x(r, p) : r, i = s.length - 1, c; i >= 0; i--)
+    (c = s[i]) && (t = (o ? c(r, p, t) : c(t)) || t);
+  return o && t && d(r, p, t), t;
 };
 let e = class extends a {
   constructor() {
@@ -15,32 +15,34 @@ let e = class extends a {
       gap: this.gap,
       ...this.sx
     };
-    return m`
+    return y`
       <section part="section" class="section" style=${h(s)}>
         <slot></slot>
       </section>
     `;
   }
 };
-e.styles = y`
+e.styles = m`
     :host {
       display: block;
       width: 100%;
+      min-width: 0;
     }
 
     .section {
       display: flex;
       flex-direction: column;
       width: 100%;
+      box-sizing: border-box;
     }
   `;
-l([
-  n({ type: String })
+n([
+  l({ type: String })
 ], e.prototype, "gap", 2);
-l([
-  n({ type: Object })
+n([
+  l({ type: Object })
 ], e.prototype, "sx", 2);
-e = l([
+e = n([
   f("tc-section")
 ], e);
 export {

package/dist/primitives/tc-spinner.js

@@ -1,19 +1,19 @@
-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 { css as d, LitElement as h, html as v } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { MatchMediaController as c } 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);
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (e, s, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? z(s, n) : s, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = (t ? a(s, n, r) : a(r)) || r);
   return t && r && w(s, n, r), r;
 };
-let i = class extends d {
+let i = 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.color = "var(--accent-primary)";
   }
   render() {
     let e;
-    return this.size === "auto" ? e = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : e = `spinner--${this.size}`, h`
+    return this.size === "auto" ? e = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : e = `spinner--${this.size}`, v`
       <div
         part="spinner"
         class="spinner ${e}"
@@ -26,7 +26,7 @@ let i = class extends d {
 };
 i.styles = [
   b,
-  m`
+  d`
       :host {
         display: inline-flex;
         align-items: center;
@@ -35,7 +35,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,20 +67,20 @@ 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([
+p([
   l({ type: String })
 ], i.prototype, "color", 2);
-i = a([
-  c("tc-spinner")
+i = p([
+  m("tc-spinner")
 ], i);
 export {
   i as TcSpinner

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;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,IAAI,SAAU;IACd,UAAU,SAAwB;IAClC,KAAK,SAAqB;IAEtD,OAAgB,MAAM,0BAmBpB;IAEO,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/primitives/tc-symbol.js

@@ -1,11 +1,11 @@
-import { LitElement as m, html as p, css as c } from "lit";
+import { css as y, LitElement as m, html as p } 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;
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (c, e, l, o) => {
+  for (var r = o > 1 ? void 0 : o ? u(e, l) : e, i = c.length - 1, n; i >= 0; i--)
+    (n = c[i]) && (r = (o ? n(e, l, r) : n(r)) || r);
+  return o && r && f(e, l, r), r;
 };
-let o = class extends m {
+let t = class extends m {
   constructor() {
     super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
   }
@@ -21,9 +21,11 @@ let o = class extends m {
     `;
   }
 };
-o.styles = c`
+t.styles = y`
     :host {
       display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .symbol {
@@ -41,16 +43,16 @@ o.styles = c`
   `;
 s([
   a({ type: String })
-], o.prototype, "size", 2);
+], t.prototype, "size", 2);
 s([
   a({ type: String })
-], o.prototype, "background", 2);
+], t.prototype, "background", 2);
 s([
   a({ type: String })
-], o.prototype, "color", 2);
-o = s([
+], t.prototype, "color", 2);
+t = s([
   b("tc-symbol")
-], o);
+], t);
 export {
-  o as TcSymbol
+  t as TcSymbol
 };

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

@@ -1,4 +1,4 @@
-import { LitElement as h, html as d, css as m } from "lit";
+import { css as h, LitElement as m, html as d } from "lit";
 import { property as o, customElement as p } from "lit/decorators.js";
 import { AnimationController as u } from "../controllers/animation.controller.js";
 import { sharedStyles as v } from "../styles/shared.js";
@@ -7,7 +7,7 @@ var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (c, e, r
     (l = c[n]) && (t = (a ? l(e, r, t) : l(t)) || t);
   return a && t && y(e, r, t), t;
 };
-let s = class extends h {
+let s = class extends m {
   constructor() {
     super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new u(this, {
       showDuration: 300,
@@ -77,7 +77,7 @@ let s = class extends h {
 };
 s.styles = [
   v,
-  m`
+  h`
     :host {
       display: block;
       position: fixed;

package/dist/screens/tc-error-screen.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * A full-screen error state with icon, message, and retry action.
+ * A full-screen error state with animated icon, message, and retry action.
  *
  * @fires tc-retry - Fired when the retry button is clicked
  * @csspart screen - The screen container
@@ -15,7 +15,12 @@ export declare class TcErrorScreen extends LitElement {
     message: string;
     retryLabel: string;
     showRetry: boolean;
+    autoAnimate: boolean;
+    private isAnimated;
+    private animation;
     static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    playAnimation(): Promise<void>;
     private handleRetry;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/screens/tc-error-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IAEvE,OAAgB,MAAM,0BAoDpB;IAEF,OAAO,CAAC,WAAW;IASV,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/screens/tc-error-screen.js

@@ -1,13 +1,30 @@
-import { LitElement as m, html as p, css as h } from "lit";
-import { property as s, customElement as g } from "lit/decorators.js";
-var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (l, i, a, n) => {
-  for (var t = n > 1 ? void 0 : n ? y(i, a) : i, c = l.length - 1, o; c >= 0; c--)
-    (o = l[c]) && (t = (n ? o(i, a, t) : o(t)) || t);
-  return n && t && d(i, a, t), t;
+import { css as p, LitElement as d, html as m } from "lit";
+import { property as i, state as h, customElement as y } from "lit/decorators.js";
+import { AnimationController as u } from "../controllers/animation.controller.js";
+import "../primitives/tc-icon.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-button.js";
+import "../primitives/tc-container.js";
+import "../primitives/tc-section.js";
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (a, n, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(n, o) : n, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (e = (s ? l(n, o, e) : l(e)) || e);
+  return s && e && g(n, o, e), e;
 };
-let e = class extends m {
+let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0;
+    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.isAnimated = !1, this.animation = new u(this, {
+      showDuration: 600,
+      hideDuration: 300
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
+      this.playAnimation();
+    });
+  }
+  async playAnimation() {
+    await this.animation.show(), this.isAnimated = !0;
   }
   handleRetry() {
     this.dispatchEvent(
@@ -18,14 +35,15 @@ let e = class extends m {
     );
   }
   render() {
-    return p`
+    const a = this.isAnimated ? "animated" : "";
+    return m`
       <div part="screen" class="screen">
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container">
-              <tc-icon name="alert-circle" size="2rem"></tc-icon>
+            <div part="icon" class="icon-container ${a}">
+              <tc-icon name="alert-circle" size="var(--size-icon-xl)"></tc-icon>
             </div>
-            <tc-section gap="var(--space-sm)">
+            <tc-section gap="var(--space-sm)" class="text-content ${a}">
               <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
                 ${this.title}
               </tc-text>
@@ -33,8 +51,8 @@ let e = class extends m {
                 ${this.message}
               </tc-text>
             </tc-section>
-            ${this.showRetry ? p`
-                  <div part="action" class="action">
+            ${this.showRetry ? m`
+                  <div part="action" class="action ${a}">
                     <tc-button variant="primary" @tc-click=${this.handleRetry}>
                       ${this.retryLabel}
                     </tc-button>
@@ -46,12 +64,13 @@ let e = class extends m {
     `;
   }
 };
-e.styles = h`
+t.styles = p`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -60,6 +79,7 @@ e.styles = h`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -79,11 +99,19 @@ e.styles = h`
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 4rem;
-      height: 4rem;
+      padding: var(--space-md);
       background: var(--error-bg);
       border-radius: var(--radius-full);
       color: var(--error-base);
+      transform: scale(0);
+      opacity: 0;
+      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
+        opacity 0.3s ease;
+    }
+
+    .icon-container.animated {
+      transform: scale(1);
+      opacity: 1;
     }
 
     .title {
@@ -94,26 +122,53 @@ e.styles = h`
       color: var(--ink-medium);
     }
 
+    .text-content {
+      opacity: 0;
+      transform: translateY(var(--offset-slide-up-md));
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition-delay: 0.4s;
+    }
+
+    .text-content.animated {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
     .action {
       width: 100%;
       margin-top: var(--space-md);
+      opacity: 0;
+      transform: translateY(var(--offset-slide-up-md));
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition-delay: 0.6s;
+    }
+
+    .action.animated {
+      opacity: 1;
+      transform: translateY(0);
     }
   `;
 r([
-  s({ type: String })
-], e.prototype, "title", 2);
+  i({ type: String })
+], t.prototype, "title", 2);
+r([
+  i({ type: String })
+], t.prototype, "message", 2);
+r([
+  i({ type: String, attribute: "retry-label" })
+], t.prototype, "retryLabel", 2);
 r([
-  s({ type: String })
-], e.prototype, "message", 2);
+  i({ type: Boolean, attribute: "show-retry" })
+], t.prototype, "showRetry", 2);
 r([
-  s({ type: String, attribute: "retry-label" })
-], e.prototype, "retryLabel", 2);
+  i({ type: Boolean, attribute: "auto-animate" })
+], t.prototype, "autoAnimate", 2);
 r([
-  s({ type: Boolean, attribute: "show-retry" })
-], e.prototype, "showRetry", 2);
-e = r([
-  g("tc-error-screen")
-], e);
+  h()
+], t.prototype, "isAnimated", 2);
+t = r([
+  y("tc-error-screen")
+], t);
 export {
-  e as TcErrorScreen
+  t as TcErrorScreen
 };

package/dist/screens/tc-loading-screen.d.ts

@@ -9,7 +9,7 @@ import { LitElement } from 'lit';
  */
 export declare class TcLoadingScreen extends LitElement {
     message: string;
-    spinnerSize: string;
+    spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
     private loading;
     static styles: import('lit').CSSResult;
     connectedCallback(): void;

package/dist/screens/tc-loading-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,SAAU;IAE5E,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAgCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IAElB,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-loading-screen.js

@@ -1,14 +1,17 @@
-import { LitElement as m, html as p, css as g } from "lit";
-import { property as l, customElement as d } from "lit/decorators.js";
-import { LoadingController as h } from "../controllers/loading.controller.js";
-var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, s, n) => {
-  for (var e = n > 1 ? void 0 : n ? u(r, s) : r, i = o.length - 1, a; i >= 0; i--)
-    (a = o[i]) && (e = (n ? a(r, s, e) : a(e)) || e);
-  return n && e && f(r, s, e), e;
+import { css as m, LitElement as g, html as p } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
+import { LoadingController as d } from "../controllers/loading.controller.js";
+import "../primitives/tc-spinner.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-container.js";
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? u(r, n) : r, s = o.length - 1, a; s >= 0; s--)
+    (a = o[s]) && (e = (i ? a(r, n, e) : a(e)) || e);
+  return i && e && f(r, n, e), e;
 };
-let t = class extends m {
+let t = class extends g {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new h(this);
+    super(...arguments), this.message = "", this.spinnerSize = "md", this.loading = new d(this);
   }
   connectedCallback() {
     super.connectedCallback(), this.loading.start();
@@ -30,12 +33,13 @@ let t = class extends m {
     `;
   }
 };
-t.styles = g`
+t.styles = m`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -44,6 +48,7 @@ t.styles = g`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -70,7 +75,7 @@ c([
   l({ type: String, attribute: "spinner-size" })
 ], t.prototype, "spinnerSize", 2);
 t = c([
-  d("tc-loading-screen")
+  h("tc-loading-screen")
 ], t);
 export {
   t as TcLoadingScreen

package/dist/screens/tc-success-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAoGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-success-screen.js

@@ -1,14 +1,19 @@
-import { LitElement as p, html as m, css as d } from "lit";
+import { css as p, LitElement as d, html as m } from "lit";
 import { property as r, state as h, customElement as u } from "lit/decorators.js";
-import { AnimationController as y } from "../controllers/animation.controller.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
+import { AnimationController as f } from "../controllers/animation.controller.js";
+import "../primitives/tc-icon.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-button.js";
+import "../primitives/tc-container.js";
+import "../primitives/tc-section.js";
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
   for (var e = n > 1 ? void 0 : n ? g(s, o) : s, c = a.length - 1, l; c >= 0; c--)
     (l = a[c]) && (e = (n ? l(s, o, e) : l(e)) || e);
-  return n && e && f(s, o, e), e;
+  return n && e && y(s, o, e), e;
 };
-let t = class extends p {
+let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new y(this, {
+    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new f(this, {
       showDuration: 600,
       hideDuration: 300
     });
@@ -69,12 +74,13 @@ let t = class extends p {
     `;
   }
 };
-t.styles = d`
+t.styles = p`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -83,6 +89,7 @@ t.styles = d`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -102,8 +109,7 @@ t.styles = d`
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 5rem;
-      height: 5rem;
+      padding: var(--space-md);
       background: var(--alpha-success10);
       border-radius: var(--radius-full);
       color: var(--accent-success);
@@ -119,8 +125,8 @@ t.styles = d`
     }
 
     .checkmark {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: var(--size-icon-xl);
+      height: var(--size-icon-xl);
       stroke-dasharray: 50;
       stroke-dashoffset: 50;
     }
@@ -145,7 +151,7 @@ t.styles = d`
 
     .text-content {
       opacity: 0;
-      transform: translateY(10px);
+      transform: translateY(var(--offset-slide-up-md));
       transition: opacity 0.4s ease, transform 0.4s ease;
       transition-delay: 0.4s;
     }
@@ -159,7 +165,7 @@ t.styles = d`
       width: 100%;
       margin-top: var(--space-md);
       opacity: 0;
-      transform: translateY(10px);
+      transform: translateY(var(--offset-slide-up-md));
       transition: opacity 0.4s ease, transform 0.4s ease;
       transition-delay: 0.6s;
     }