diff --git a/packages/core/src/animations.css b/packages/core/src/animations.css
index 0c2a2b8..ab6ca42 100644
--- a/packages/core/src/animations.css
+++ b/packages/core/src/animations.css
@@ -3,43 +3,43 @@
 .petty-stagger-hidden { opacity: 0; }
 
 .petty-stagger-fade-up {
-  animation: pettyFadeUp 0.5s ease both;
+  animation: pettyFadeUp 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-stagger-fade-down {
-  animation: pettyFadeDown 0.5s ease both;
+  animation: pettyFadeDown 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-stagger-fade-left {
-  animation: pettyFadeLeft 0.5s ease both;
+  animation: pettyFadeLeft 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-stagger-fade-right {
-  animation: pettyFadeRight 0.5s ease both;
+  animation: pettyFadeRight 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-stagger-scale {
-  animation: pettyScale 0.5s ease both;
+  animation: pettyScale 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-stagger-blur {
-  animation: pettyBlur 0.6s ease both;
+  animation: pettyBlur 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 
 .petty-reveal-hidden { opacity: 0; }
 
 .petty-reveal-fade-up {
-  animation: pettyFadeUp 0.6s ease both;
+  animation: pettyFadeUp 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-reveal-fade-down {
-  animation: pettyFadeDown 0.6s ease both;
+  animation: pettyFadeDown 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-reveal-fade-left {
-  animation: pettyFadeLeft 0.6s ease both;
+  animation: pettyFadeLeft 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-reveal-fade-right {
-  animation: pettyFadeRight 0.6s ease both;
+  animation: pettyFadeRight 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-reveal-scale {
-  animation: pettyScale 0.6s ease both;
+  animation: pettyScale 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 .petty-reveal-blur {
-  animation: pettyBlur 0.7s ease both;
+  animation: pettyBlur 0.5s cubic-bezier(0.2, 0, 0, 1) both;
 }
 
 petty-typewriter.petty-typewriter-cursor::after {
@@ -82,7 +82,7 @@ petty-counter { font-variant-numeric: tabular-nums; }
 }
 
 dialog[open] {
-  animation: pettyDialogIn 0.2s ease;
+  animation: pettyDialogIn 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 @keyframes pettyDialogIn {
   from { opacity: 0; transform: translateY(8px) scale(0.98); }
@@ -90,7 +90,7 @@ dialog[open] {
 }
 
 [popover]:popover-open {
-  animation: pettyPopoverIn 0.15s ease;
+  animation: pettyPopoverIn 0.15s cubic-bezier(0.2, 0, 0, 1);
 }
 @keyframes pettyPopoverIn {
   from { opacity: 0; transform: translateY(-4px); }
@@ -98,7 +98,7 @@ dialog[open] {
 }
 
 [data-part="toast"] {
-  animation: pettySlideIn 0.3s ease;
+  animation: pettySlideIn 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
 @keyframes pettySlideIn {
   from { opacity: 0; transform: translateX(100%); }
@@ -113,25 +113,10 @@ petty-loading-indicator [data-part="indicator"] {
   border: 3px solid rgba(54, 192, 241, 0.12);
   border-top-color: #36c0f1;
   border-right-color: rgba(54, 192, 241, 0.4);
-  animation: pettyLoadSpin 1.1s linear infinite, pettyLoadPulse 2.2s ease-in-out infinite;
-}
-
-petty-loading-indicator [data-part="container"]::before {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  border-bottom-color: rgba(54, 192, 241, 0.2);
-  border-left-color: rgba(54, 192, 241, 0.1);
-  animation: pettyLoadSpin 2.4s linear infinite reverse;
+  animation: pettyLoadSpin 0.9s linear infinite;
 }
 
 @keyframes pettyLoadSpin {
   to { rotate: 360deg; }
 }
 
-@keyframes pettyLoadPulse {
-  0%, 100% { box-shadow: 0 0 8px rgba(54, 192, 241, 0.15); }
-  50% { box-shadow: 0 0 20px rgba(54, 192, 241, 0.35); }
-}
diff --git a/packages/core/src/components/accordion/accordion-item.ts b/packages/core/src/components/accordion/accordion-item.ts
index e9f3e4b..7a5edcc 100644
--- a/packages/core/src/components/accordion/accordion-item.ts
+++ b/packages/core/src/components/accordion/accordion-item.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /**
  * PettyAccordionItem — wraps a single `<details>` element within a PettyAccordion.
  *
@@ -34,20 +36,18 @@ export class PettyAccordionItem extends HTMLElement {
     return this.querySelector("summary")?.textContent?.trim() ?? "";
   }
 
+  #cleanup = (): void => {};
+
   /** @internal */
   connectedCallback(): void {
     this.#syncState();
     this.#applyDisabled();
-    const details = this.detailsElement;
-    if (details) {
-      details.addEventListener("toggle", this.#handleToggle);
-    }
+    this.#cleanup = listen(this.detailsElement, [["toggle", this.#handleToggle]]);
   }
 
   /** @internal */
   disconnectedCallback(): void {
-    const details = this.detailsElement;
-    details?.removeEventListener("toggle", this.#handleToggle);
+    this.#cleanup();
   }
 
   /** @internal */
diff --git a/packages/core/src/components/avatar/avatar.ts b/packages/core/src/components/avatar/avatar.ts
index 83811f9..6968af5 100644
--- a/packages/core/src/components/avatar/avatar.ts
+++ b/packages/core/src/components/avatar/avatar.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /** PettyAvatar — image with automatic fallback on load error. */
 export class PettyAvatar extends HTMLElement {
   connectedCallback(): void {
diff --git a/packages/core/src/components/calendar/calendar.ts b/packages/core/src/components/calendar/calendar.ts
index 4e75788..47fbe53 100644
--- a/packages/core/src/components/calendar/calendar.ts
+++ b/packages/core/src/components/calendar/calendar.ts
@@ -1,5 +1,5 @@
 import { signal, effect } from "../../signals";
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyCalendar — month grid with day selection and month navigation. */
 export class PettyCalendar extends HTMLElement {
diff --git a/packages/core/src/components/combobox/combobox.ts b/packages/core/src/components/combobox/combobox.ts
index a532453..832a764 100644
--- a/packages/core/src/components/combobox/combobox.ts
+++ b/packages/core/src/components/combobox/combobox.ts
@@ -1,5 +1,5 @@
 import { uniqueId } from "../../shared/aria";
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyCombobox — searchable select with popover listbox and keyboard nav. */
 export class PettyCombobox extends HTMLElement {
diff --git a/packages/core/src/components/command-palette/command-palette.ts b/packages/core/src/components/command-palette/command-palette.ts
index acdb430..62193d5 100644
--- a/packages/core/src/components/command-palette/command-palette.ts
+++ b/packages/core/src/components/command-palette/command-palette.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyCommandPalette — search-driven command menu using native dialog. */
 export class PettyCommandPalette extends HTMLElement {
diff --git a/packages/core/src/components/context-menu/context-menu.ts b/packages/core/src/components/context-menu/context-menu.ts
index e868a8b..04b05b6 100644
--- a/packages/core/src/components/context-menu/context-menu.ts
+++ b/packages/core/src/components/context-menu/context-menu.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyContextMenu — right-click menu using Popover API with keyboard nav. */
 export class PettyContextMenu extends HTMLElement {
diff --git a/packages/core/src/components/date-picker/date-picker.ts b/packages/core/src/components/date-picker/date-picker.ts
index c7315f4..7772724 100644
--- a/packages/core/src/components/date-picker/date-picker.ts
+++ b/packages/core/src/components/date-picker/date-picker.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyDatePicker — date input with calendar popover integration. */
 export class PettyDatePicker extends HTMLElement {
diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.ts b/packages/core/src/components/dropdown-menu/dropdown-menu.ts
index 325fec9..14ae1e8 100644
--- a/packages/core/src/components/dropdown-menu/dropdown-menu.ts
+++ b/packages/core/src/components/dropdown-menu/dropdown-menu.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyDropdownMenu — action menu built on the Popover API. */
 export class PettyDropdownMenu extends HTMLElement {
diff --git a/packages/core/src/components/form/form.ts b/packages/core/src/components/form/form.ts
index d3ddbc6..aa2b406 100644
--- a/packages/core/src/components/form/form.ts
+++ b/packages/core/src/components/form/form.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 interface SchemaLike {
   safeParse: (data: unknown) => {
@@ -37,18 +37,19 @@ export class PettyForm extends HTMLElement {
     this.#schema = schema;
   }
 
+  #cleanup = (): void => {};
+
   /** @internal */
   connectedCallback(): void {
     const form = this.querySelector("form");
     if (!form) return;
-    form.addEventListener("submit", this.#handleSubmit);
     form.setAttribute("novalidate", "");
+    this.#cleanup = listen(form, [["submit", this.#handleSubmit]]);
   }
 
   /** @internal */
   disconnectedCallback(): void {
-    const form = this.querySelector("form");
-    form?.removeEventListener("submit", this.#handleSubmit);
+    this.#cleanup();
   }
 
   #handleSubmit = (e: Event): void => {
diff --git a/packages/core/src/components/image/image.ts b/packages/core/src/components/image/image.ts
index 060622d..7769166 100644
--- a/packages/core/src/components/image/image.ts
+++ b/packages/core/src/components/image/image.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /** PettyImage — image element with fallback display on load failure. */
 export class PettyImage extends HTMLElement {
   connectedCallback(): void {
diff --git a/packages/core/src/components/link/link.ts b/packages/core/src/components/link/link.ts
index 682d3cb..f9cbbd7 100644
--- a/packages/core/src/components/link/link.ts
+++ b/packages/core/src/components/link/link.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /** PettyLink — headless anchor wrapper with disabled and external support. */
 export class PettyLink extends HTMLElement {
   static observedAttributes = ["disabled", "external"];
@@ -6,13 +8,15 @@ export class PettyLink extends HTMLElement {
     return this.querySelector("a");
   }
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     this.#sync();
-    this.addEventListener("click", this.#handleClick);
+    this.#cleanup = listen(this, [["click", this.#handleClick]]);
   }
 
   disconnectedCallback(): void {
-    this.removeEventListener("click", this.#handleClick);
+    this.#cleanup();
   }
 
   attributeChangedCallback(): void {
diff --git a/packages/core/src/components/listbox/listbox.ts b/packages/core/src/components/listbox/listbox.ts
index a53c63b..5e78eb1 100644
--- a/packages/core/src/components/listbox/listbox.ts
+++ b/packages/core/src/components/listbox/listbox.ts
@@ -1,5 +1,5 @@
 import { signal, effect } from "../../signals";
-import { emit, initialValue } from "../../shared/helpers";
+import { emit, initialValue, listen } from "../../shared/helpers";
 
 /** PettyListbox — inline selectable list with single or multiple selection. */
 export class PettyListbox extends HTMLElement {
@@ -27,18 +27,18 @@ export class PettyListbox extends HTMLElement {
     emit(this, "change", { value: this.#value.get() });
   }
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     const init = initialValue(this);
     if (init) this.#value.set(init);
     this.#stopEffect = effect(() => this.#syncChildren());
-    this.addEventListener("keydown", this.#onKeydown);
-    this.addEventListener("click", this.#onClick);
+    this.#cleanup = listen(this, [["keydown", this.#onKeydown], ["click", this.#onClick]]);
   }
 
   disconnectedCallback(): void {
     this.#stopEffect = null;
-    this.removeEventListener("keydown", this.#onKeydown);
-    this.removeEventListener("click", this.#onClick);
+    this.#cleanup();
   }
 
   attributeChangedCallback(name: string, _old: string | null, next: string | null): void {
@@ -59,18 +59,19 @@ export class PettyListbox extends HTMLElement {
     }
   }
 
-  #onClick = (e: MouseEvent): void => {
+  #onClick = (e: Event): void => {
     const opt = (e.target as HTMLElement).closest("petty-listbox-option");
     if (!opt || opt.hasAttribute("disabled")) return;
     this.selectValue(opt.getAttribute("value") ?? "");
   };
 
-  #onKeydown = (e: KeyboardEvent): void => {
+  #onKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
     const items = this.#options();
     const active = document.activeElement as HTMLElement;
     const idx = items.indexOf(active);
-    if (e.key === "ArrowDown") { e.preventDefault(); items[(idx + 1) % items.length]?.focus(); }
-    else if (e.key === "ArrowUp") { e.preventDefault(); items[(idx - 1 + items.length) % items.length]?.focus(); }
-    else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (active) this.selectValue(active.getAttribute("value") ?? ""); }
+    if (ke.key === "ArrowDown") { ke.preventDefault(); items[(idx + 1) % items.length]?.focus(); }
+    else if (ke.key === "ArrowUp") { ke.preventDefault(); items[(idx - 1 + items.length) % items.length]?.focus(); }
+    else if (ke.key === "Enter" || ke.key === " ") { ke.preventDefault(); if (active) this.selectValue(active.getAttribute("value") ?? ""); }
   };
 }
diff --git a/packages/core/src/components/navigation-menu/navigation-menu-item.ts b/packages/core/src/components/navigation-menu/navigation-menu-item.ts
index b34fa06..9769162 100644
--- a/packages/core/src/components/navigation-menu/navigation-menu-item.ts
+++ b/packages/core/src/components/navigation-menu/navigation-menu-item.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /** PettyNavigationMenuItem — nav item with optional popover content on hover. */
 export class PettyNavigationMenuItem extends HTMLElement {
   #showTimer: ReturnType<typeof setTimeout> | null = null;
diff --git a/packages/core/src/components/number-field/number-field.ts b/packages/core/src/components/number-field/number-field.ts
index 7318cab..c8cb061 100644
--- a/packages/core/src/components/number-field/number-field.ts
+++ b/packages/core/src/components/number-field/number-field.ts
@@ -1,5 +1,5 @@
 import { signal } from "../../signals";
-import { emit } from "../../shared/helpers";
+import { emit, listen, part } from "../../shared/helpers";
 import { uniqueId } from "../../shared/aria";
 
 /** PettyNumberField — numeric input with increment/decrement buttons and clamping. */
@@ -7,6 +7,7 @@ export class PettyNumberField extends HTMLElement {
   static observedAttributes = ["min", "max", "step", "value", "disabled", "name"];
 
   readonly #value = signal(0);
+  #cleanup = (): void => {};
 
   get value(): number { return this.#value.get(); }
   set value(v: number) { this.#applyValue(v); }
@@ -18,18 +19,14 @@ export class PettyNumberField extends HTMLElement {
     this.#syncInput();
     this.#wireLabel();
 
-    input?.addEventListener("input", this.#onInput);
-    input?.addEventListener("keydown", this.#onKeydown);
-    this.querySelector("[data-part=increment]")?.addEventListener("click", this.#onIncrement);
-    this.querySelector("[data-part=decrement]")?.addEventListener("click", this.#onDecrement);
+    const c1 = listen(input, [["input", this.#onInput], ["keydown", this.#onKeydown as EventListener]]);
+    const c2 = listen(part(this, "increment"), [["click", this.#onIncrement]]);
+    const c3 = listen(part(this, "decrement"), [["click", this.#onDecrement]]);
+    this.#cleanup = () => { c1(); c2(); c3(); };
   }
 
   disconnectedCallback(): void {
-    const input = this.#input();
-    input?.removeEventListener("input", this.#onInput);
-    input?.removeEventListener("keydown", this.#onKeydown);
-    this.querySelector("[data-part=increment]")?.removeEventListener("click", this.#onIncrement);
-    this.querySelector("[data-part=decrement]")?.removeEventListener("click", this.#onDecrement);
+    this.#cleanup();
   }
 
   attributeChangedCallback(name: string, _old: string | null, next: string | null): void {
diff --git a/packages/core/src/components/pagination/pagination-item.ts b/packages/core/src/components/pagination/pagination-item.ts
index eaafe37..f09a4ad 100644
--- a/packages/core/src/components/pagination/pagination-item.ts
+++ b/packages/core/src/components/pagination/pagination-item.ts
@@ -1,17 +1,19 @@
+import { listen } from "../../shared/helpers";
+
 /** PettyPaginationItem — single page button within a pagination component. */
 export class PettyPaginationItem extends HTMLElement {
   static observedAttributes = ["value", "type", "disabled"];
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     this.setAttribute("role", "button");
     this.setAttribute("tabindex", "0");
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeydown);
+    this.#cleanup = listen(this, [["click", this.#handleClick], ["keydown", this.#handleKeydown]]);
   }
 
   disconnectedCallback(): void {
-    this.removeEventListener("click", this.#handleClick);
-    this.removeEventListener("keydown", this.#handleKeydown);
+    this.#cleanup();
   }
 
   attributeChangedCallback(name: string): void {
@@ -35,7 +37,8 @@ export class PettyPaginationItem extends HTMLElement {
   }
 
   #handleClick = (): void => { this.#activate(); };
-  #handleKeydown = (e: KeyboardEvent): void => {
-    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); this.#activate(); }
+  #handleKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
+    if (ke.key === "Enter" || ke.key === " ") { ke.preventDefault(); this.#activate(); }
   };
 }
diff --git a/packages/core/src/components/radio-group/radio-item.ts b/packages/core/src/components/radio-group/radio-item.ts
index a95de5c..f469226 100644
--- a/packages/core/src/components/radio-group/radio-item.ts
+++ b/packages/core/src/components/radio-group/radio-item.ts
@@ -1,4 +1,5 @@
 import { wrapIndex } from "../../shared/keyboard";
+import { listen } from "../../shared/helpers";
 
 /** PettyRadioItem — single radio option within a petty-radio-group. */
 export class PettyRadioItem extends HTMLElement {
@@ -7,17 +8,17 @@ export class PettyRadioItem extends HTMLElement {
   get value(): string { return this.getAttribute("value") ?? ""; }
   get disabled(): boolean { return this.hasAttribute("disabled"); }
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     this.setAttribute("role", "radio");
     this.setAttribute("tabindex", "-1");
     if (this.disabled) this.setAttribute("aria-disabled", "true");
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeydown);
+    this.#cleanup = listen(this, [["click", this.#handleClick], ["keydown", this.#handleKeydown]]);
   }
 
   disconnectedCallback(): void {
-    this.removeEventListener("click", this.#handleClick);
-    this.removeEventListener("keydown", this.#handleKeydown);
+    this.#cleanup();
   }
 
   attributeChangedCallback(name: string): void {
@@ -42,17 +43,18 @@ export class PettyRadioItem extends HTMLElement {
     this.focus();
   };
 
-  #handleKeydown = (e: KeyboardEvent): void => {
+  #handleKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
     const isVertical = this.closest("petty-radio-group")?.getAttribute("orientation") !== "horizontal";
     const prev = isVertical ? "ArrowUp" : "ArrowLeft";
     const next = isVertical ? "ArrowDown" : "ArrowRight";
-    if (e.key !== prev && e.key !== next && e.key !== " ") return;
-    e.preventDefault();
-    if (e.key === " ") { this.#handleClick(); return; }
+    if (ke.key !== prev && ke.key !== next && ke.key !== " ") return;
+    ke.preventDefault();
+    if (ke.key === " ") { this.#handleClick(); return; }
     const items = this.#siblings();
     const idx = items.indexOf(this);
     if (idx === -1) return;
-    const delta = e.key === next ? 1 : -1;
+    const delta = ke.key === next ? 1 : -1;
     const target = items[wrapIndex(idx, delta, items.length)];
     if (target) {
       this.#group()?.selectValue(target.value);
diff --git a/packages/core/src/components/slider/slider.ts b/packages/core/src/components/slider/slider.ts
index 31f08d9..633d3d6 100644
--- a/packages/core/src/components/slider/slider.ts
+++ b/packages/core/src/components/slider/slider.ts
@@ -1,10 +1,11 @@
-import { emit } from "../../shared/helpers";
-import { uniqueId } from "../../shared/aria";
+import { emit, listen, part, wireLabel } from "../../shared/helpers";
 
 /** PettySlider — range input wrapper with label, output, and change events. */
 export class PettySlider extends HTMLElement {
   static observedAttributes = ["min", "max", "step", "value", "disabled", "name", "orientation"];
 
+  #cleanup = (): void => {};
+
   get value(): number {
     return Number(this.#input()?.value ?? 0);
   }
@@ -18,13 +19,13 @@ export class PettySlider extends HTMLElement {
     const input = this.#input();
     if (!input) return;
     this.#syncAttrs();
-    this.#wireLabel();
+    wireLabel(input, part(this, "label"), "petty-slider");
     this.#syncOutput();
-    input.addEventListener("input", this.#handleInput);
+    this.#cleanup = listen(input, [["input", this.#handleInput]]);
   }
 
   disconnectedCallback(): void {
-    this.#input()?.removeEventListener("input", this.#handleInput);
+    this.#cleanup();
   }
 
   attributeChangedCallback(): void {
@@ -36,15 +37,6 @@ export class PettySlider extends HTMLElement {
     return this.querySelector("input[data-part=control]");
   }
 
-  #wireLabel(): void {
-    const input = this.#input();
-    const label = this.querySelector("[data-part=label]");
-    if (input && label) {
-      if (!input.id) input.id = uniqueId("petty-slider");
-      (label as HTMLLabelElement).htmlFor = input.id;
-    }
-  }
-
   #syncAttrs(): void {
     const input = this.#input();
     if (!input) return;
diff --git a/packages/core/src/components/tabs/tab.ts b/packages/core/src/components/tabs/tab.ts
index 25b3ad0..f2fe6c5 100644
--- a/packages/core/src/components/tabs/tab.ts
+++ b/packages/core/src/components/tabs/tab.ts
@@ -1,3 +1,5 @@
+import { listen } from "../../shared/helpers";
+
 /**
  * PettyTab — individual tab button within a petty-tabs component.
  *
@@ -19,17 +21,17 @@ export class PettyTab extends HTMLElement {
   }
 
   /** @internal */
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     this.setAttribute("role", "tab");
     this.setAttribute("tabindex", "-1");
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeydown);
+    this.#cleanup = listen(this, [["click", this.#handleClick], ["keydown", this.#handleKeydown]]);
   }
 
   /** @internal */
   disconnectedCallback(): void {
-    this.removeEventListener("click", this.#handleClick);
-    this.removeEventListener("keydown", this.#handleKeydown);
+    this.#cleanup();
   }
 
   /** @internal */
@@ -48,12 +50,13 @@ export class PettyTab extends HTMLElement {
     active?.focus();
   };
 
-  #handleKeydown = (e: KeyboardEvent): void => {
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+  #handleKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
+    if (ke.key !== "ArrowLeft" && ke.key !== "ArrowRight") return;
     const tabs = this.#siblingTabs().filter(t => !t.disabled);
     const idx = tabs.indexOf(this);
     if (idx === -1) return;
-    const nextIdx = e.key === "ArrowRight"
+    const nextIdx = ke.key === "ArrowRight"
       ? (idx + 1) % tabs.length
       : (idx - 1 + tabs.length) % tabs.length;
     const next = tabs[nextIdx];
diff --git a/packages/core/src/components/tags-input/tags-input.ts b/packages/core/src/components/tags-input/tags-input.ts
index fa136ec..f69b603 100644
--- a/packages/core/src/components/tags-input/tags-input.ts
+++ b/packages/core/src/components/tags-input/tags-input.ts
@@ -1,5 +1,5 @@
 import { signal, effect } from "../../signals";
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyTagsInput — multi-value text input for tags, emails, or tokens. */
 export class PettyTagsInput extends HTMLElement {
@@ -41,18 +41,21 @@ export class PettyTagsInput extends HTMLElement {
     this.#dispatch();
   }
 
+  #cleanupInput = (): void => {};
+  #cleanupSelf = (): void => {};
+
   connectedCallback(): void {
     const init = this.getAttribute("value");
     if (init) this.#tags.set(init.split(",").map(s => s.trim()).filter(Boolean));
     this.#stopEffect = effect(() => this.#render());
-    this.#input()?.addEventListener("keydown", this.#onKeydown);
-    this.addEventListener("click", this.#onTagRemove);
+    this.#cleanupInput = listen(this.#input(), [["keydown", this.#onKeydown]]);
+    this.#cleanupSelf = listen(this, [["click", this.#onTagRemove]]);
   }
 
   disconnectedCallback(): void {
     this.#stopEffect = null;
-    this.#input()?.removeEventListener("keydown", this.#onKeydown);
-    this.removeEventListener("click", this.#onTagRemove);
+    this.#cleanupInput();
+    this.#cleanupSelf();
   }
 
   attributeChangedCallback(name: string, _old: string | null, next: string | null): void {
@@ -73,14 +76,15 @@ export class PettyTagsInput extends HTMLElement {
     if (hidden instanceof HTMLInputElement) hidden.value = this.#tags.get().join(",");
   }
 
-  #onKeydown = (e: KeyboardEvent): void => {
+  #onKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
     if (this.hasAttribute("disabled")) return;
     const input = this.#input();
     if (!input) return;
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
+    if (ke.key === "Enter" || ke.key === ",") {
+      ke.preventDefault();
       if (this.addTag(input.value)) input.value = "";
-    } else if (e.key === "Backspace" && input.value === "") {
+    } else if (ke.key === "Backspace" && input.value === "") {
       const tags = this.#tags.get();
       const last = tags[tags.length - 1];
       if (last) this.removeTag(last);
diff --git a/packages/core/src/components/text-field/text-field.ts b/packages/core/src/components/text-field/text-field.ts
index 173c141..e9ec781 100644
--- a/packages/core/src/components/text-field/text-field.ts
+++ b/packages/core/src/components/text-field/text-field.ts
@@ -1,20 +1,22 @@
 import { uniqueId } from "../../shared/aria";
-import { emit } from "../../shared/helpers";
+import { emit, listen, part } from "../../shared/helpers";
 
 /** PettyTextField — labeled text input with description and error wiring. */
 export class PettyTextField extends HTMLElement {
   static observedAttributes = ["name", "disabled", "required"];
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     const name = this.getAttribute("name") ?? "";
     const controlId = uniqueId(`petty-tf-${name}`);
     const errorId = `${controlId}-error`;
     const descId = `${controlId}-desc`;
 
-    const label = this.querySelector("[data-part=label]");
+    const label = part<HTMLLabelElement>(this, "label");
     const control = this.#control();
-    const desc = this.querySelector("[data-part=description]");
-    const error = this.querySelector("[data-part=error]");
+    const desc = part(this, "description");
+    const error = part(this, "error");
 
     if (control) {
       control.id = controlId;
@@ -22,16 +24,16 @@ export class PettyTextField extends HTMLElement {
       const describedBy = [desc ? descId : "", error ? errorId : ""].filter(Boolean).join(" ");
       if (describedBy) control.setAttribute("aria-describedby", describedBy);
     }
-    if (label && control) (label as HTMLLabelElement).htmlFor = controlId;
+    if (label && control) label.htmlFor = controlId;
     if (desc) desc.id = descId;
     if (error) error.id = errorId;
 
     this.#syncAttrs();
-    control?.addEventListener("input", this.#handleInput);
+    this.#cleanup = listen(control, [["input", this.#handleInput]]);
   }
 
   disconnectedCallback(): void {
-    this.#control()?.removeEventListener("input", this.#handleInput);
+    this.#cleanup();
   }
 
   attributeChangedCallback(): void {
@@ -40,7 +42,7 @@ export class PettyTextField extends HTMLElement {
 
   /** Display an error message on this field. */
   setError(message: string): void {
-    const error = this.querySelector("[data-part=error]");
+    const error = part(this, "error");
     const control = this.#control();
     if (error) error.textContent = message;
     if (control) control.setAttribute("aria-invalid", "true");
@@ -48,7 +50,7 @@ export class PettyTextField extends HTMLElement {
 
   /** Clear the error message on this field. */
   clearError(): void {
-    const error = this.querySelector("[data-part=error]");
+    const error = part(this, "error");
     const control = this.#control();
     if (error) error.textContent = "";
     if (control) control.removeAttribute("aria-invalid");
diff --git a/packages/core/src/components/toggle-group/toggle-group-item.ts b/packages/core/src/components/toggle-group/toggle-group-item.ts
index 594d9cc..4909569 100644
--- a/packages/core/src/components/toggle-group/toggle-group-item.ts
+++ b/packages/core/src/components/toggle-group/toggle-group-item.ts
@@ -1,4 +1,5 @@
 import { wrapIndex } from "../../shared/keyboard";
+import { listen } from "../../shared/helpers";
 
 /** PettyToggleGroupItem — single item within a toggle group. */
 export class PettyToggleGroupItem extends HTMLElement {
@@ -7,17 +8,17 @@ export class PettyToggleGroupItem extends HTMLElement {
   get value(): string { return this.getAttribute("value") ?? ""; }
   get disabled(): boolean { return this.hasAttribute("disabled"); }
 
+  #cleanup = (): void => {};
+
   connectedCallback(): void {
     this.setAttribute("role", "button");
     this.setAttribute("tabindex", "0");
     if (this.disabled) this.setAttribute("aria-disabled", "true");
-    this.addEventListener("click", this.#handleClick);
-    this.addEventListener("keydown", this.#handleKeydown);
+    this.#cleanup = listen(this, [["click", this.#handleClick], ["keydown", this.#handleKeydown]]);
   }
 
   disconnectedCallback(): void {
-    this.removeEventListener("click", this.#handleClick);
-    this.removeEventListener("keydown", this.#handleKeydown);
+    this.#cleanup();
   }
 
   attributeChangedCallback(name: string): void {
@@ -39,21 +40,22 @@ export class PettyToggleGroupItem extends HTMLElement {
     this.#group()?.toggleValue(this.value);
   };
 
-  #handleKeydown = (e: KeyboardEvent): void => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
+  #handleKeydown = (e: Event): void => {
+    const ke = e as KeyboardEvent;
+    if (ke.key === " " || ke.key === "Enter") {
+      ke.preventDefault();
       this.#handleClick();
       return;
     }
     const isHorizontal = this.closest("petty-toggle-group")?.getAttribute("orientation") !== "vertical";
     const prev = isHorizontal ? "ArrowLeft" : "ArrowUp";
     const next = isHorizontal ? "ArrowRight" : "ArrowDown";
-    if (e.key !== prev && e.key !== next) return;
-    e.preventDefault();
+    if (ke.key !== prev && ke.key !== next) return;
+    ke.preventDefault();
     const items = this.#siblings();
     const idx = items.indexOf(this);
     if (idx === -1) return;
-    const delta = e.key === next ? 1 : -1;
+    const delta = ke.key === next ? 1 : -1;
     items[wrapIndex(idx, delta, items.length)]?.focus();
   };
 }
diff --git a/packages/core/src/components/virtual-list/virtual-list.ts b/packages/core/src/components/virtual-list/virtual-list.ts
index 7725abf..7213960 100644
--- a/packages/core/src/components/virtual-list/virtual-list.ts
+++ b/packages/core/src/components/virtual-list/virtual-list.ts
@@ -1,4 +1,4 @@
-import { emit } from "../../shared/helpers";
+import { emit, listen } from "../../shared/helpers";
 
 /** PettyVirtualList — windowed scroll rendering only visible items plus overscan. */
 export class PettyVirtualList extends HTMLElement {
diff --git a/packages/core/src/theme.css b/packages/core/src/theme.css
index 593ae95..acc4149 100644
--- a/packages/core/src/theme.css
+++ b/packages/core/src/theme.css
@@ -46,7 +46,6 @@ dialog {
 
 dialog::backdrop {
   background: rgba(0 0 0 / 0.4);
-  backdrop-filter: blur(2px);
 }
 
 /* ── Select ─────────────────────────────────────────────────────────────── */
@@ -234,7 +233,13 @@ petty-toast-region {
   cursor: pointer;
   font-size: 1rem;
   line-height: 1;
-  padding: 0.125rem 0.25rem;
+  padding: 0.5rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--petty-radius);
 }
 
 [data-part="toast-close"]:hover { color: var(--petty-text); }
@@ -265,10 +270,11 @@ petty-form-field {
   width: 100%;
 }
 
-[data-part="control"]:focus {
+[data-part="control"]:focus-visible {
   border-color: var(--petty-border-focus);
   box-shadow: 0 0 0 3px rgba(37 99 235 / 0.15);
-  outline: none;
+  outline: 2px solid var(--petty-border-focus);
+  outline-offset: 2px;
 }
 
 [data-part="control"][aria-invalid="true"] {
diff --git a/packages/showcase/index.html b/packages/showcase/index.html
index 7e7972b..5f4b78a 100644
--- a/packages/showcase/index.html
+++ b/packages/showcase/index.html
@@ -7,7 +7,7 @@
   <title>PettyUI — Component Showcase</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
   <script type="module">
     import "pettyui/button"; import "pettyui/link"; import "pettyui/separator";
     import "pettyui/badge"; import "pettyui/skeleton"; import "pettyui/avatar";
@@ -88,7 +88,7 @@
           <h3>Text Field</h3>
           <petty-text-field name="email">
             <label data-part="label">Email address</label>
-            <input data-part="control" type="email" placeholder="you@example.com" />
+            <input data-part="control" type="email" placeholder="you@example.com" aria-label="Email address" />
             <span data-part="description">We will never share your email.</span>
             <span data-part="error"></span>
           </petty-text-field>
diff --git a/packages/showcase/style.css b/packages/showcase/style.css
index 5789ef7..00d1a59 100644
--- a/packages/showcase/style.css
+++ b/packages/showcase/style.css
@@ -49,13 +49,13 @@
   --color-success-subtle: #f0fdf4;
 
   /* ── Typography ── */
-  --font-sans: "Geist", -apple-system, system-ui, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --font-sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
   --text-xs: 0.75rem;
-  --text-sm: 0.8125rem;
-  --text-base: 0.875rem;
-  --text-lg: 1rem;
-  --text-xl: 1.125rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
   --text-2xl: 1.5rem;
   --text-3xl: 1.875rem;
   --text-4xl: 2.25rem;
@@ -82,13 +82,13 @@
   --space-20: 5rem;
   --space-24: 6rem;
 
-  /* ── Radius ── */
+  /* ── Radius (3 values: small, medium, pill) ── */
   --radius-xs: 4px;
-  --radius-sm: 6px;
+  --radius-sm: 8px;
   --radius-md: 8px;
   --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-pill: 999px;
+  --radius-xl: 12px;
+  --radius-pill: 22px;
 
   /* ── Elevation ── */
   --elevation-0: none;
@@ -106,9 +106,9 @@
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-effects: cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-fast: 150ms;
-  --duration-normal: 250ms;
-  --duration-emphasis: 400ms;
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-emphasis: 350ms;
 
   /* ── Legacy aliases (used in component styles) ── */
   --c-bg: var(--color-bg);
@@ -128,8 +128,6 @@
   --c-text: var(--color-text);
   --c-text-2: var(--color-text-secondary);
   --c-text-3: var(--color-text-tertiary);
-  --c-font: var(--font-sans);
-  --c-mono: var(--font-mono);
 }
 
 /* --- Reset --- */
@@ -144,12 +142,10 @@ html {
 
 body {
   background: var(--color-bg);
-  background-image: linear-gradient(135deg, rgba(54, 192, 241, 0.03) 0%, transparent 40%, rgba(54, 192, 241, 0.02) 100%);
-  background-attachment: fixed;
   color: var(--color-text);
   font-family: var(--font-sans);
   font-weight: var(--weight-normal);
-  font-size: 15px;
+  font-size: var(--text-base);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -161,18 +157,34 @@ body {
   position: absolute;
   top: -100px;
   left: 1rem;
-  background: var(--c-green);
+  background: var(--accent-8);
   color: #fff;
-  padding: 8px 16px;
+  padding: 12px 16px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
   border-radius: var(--radius-sm);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   font-weight: 600;
-  z-index: 10000;
+  z-index: 100;
   text-decoration: none;
 }
 
-.skip-link:focus {
+.skip-link:focus-visible {
   top: 1rem;
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* --- Global Focus Styles --- */
+button, a, input, select, textarea, [tabindex] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 /* --- Screen Reader Only --- */
@@ -199,7 +211,6 @@ body {
    HERO
    ============================================================ */
 .hero {
-  min-height: 85vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -210,16 +221,7 @@ body {
 }
 
 .hero::before {
-  content: "";
-  position: absolute;
-  top: 10%;
-  left: 50%;
-  width: 800px;
-  height: 500px;
-  transform: translateX(-50%);
-  background: radial-gradient(ellipse at center, rgba(54, 192, 241, 0.07) 0%, transparent 65%);
-  pointer-events: none;
-  filter: blur(80px);
+  display: none;
 }
 
 .hero-pill {
@@ -248,7 +250,7 @@ body {
 
 .hero h1 {
   font-family: var(--font-sans);
-  font-size: clamp(3.5rem, 10vw, 6rem);
+  font-size: clamp(2.5rem, 8vw, 4.5rem);
   font-weight: var(--weight-bold);
   letter-spacing: -0.045em;
   line-height: 1;
@@ -293,6 +295,8 @@ body {
   height: 4px;
   border-radius: 50%;
   background: var(--color-border-strong);
+  color: var(--color-border-strong);
+  font-size: 0;
 }
 
 /* Custom element display */
@@ -325,6 +329,11 @@ petty-counter {
 
 .value-item {
   flex: 1;
+  min-width: 0;
+}
+
+.value-item:nth-child(2) {
+  flex: 1.15;
 }
 
 .value-item dt {
@@ -376,20 +385,7 @@ petty-counter {
 }
 
 .section-glow::before {
-  content: "";
-  position: absolute;
-  top: -200px;
-  left: 50%;
-  width: 700px;
-  height: 400px;
-  transform: translateX(-50%);
-  background: radial-gradient(
-    ellipse at center,
-    rgba(34, 197, 94, 0.03) 0%,
-    transparent 70%
-  );
-  pointer-events: none;
-  filter: blur(80px);
+  display: none;
 }
 
 .section {
@@ -428,13 +424,11 @@ petty-counter {
 }
 
 .demo-card {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-8);
-  box-shadow: var(--elevation-2), 0 0 0 1px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--elevation-2);
 }
 
 .demo-card h3 {
@@ -488,7 +482,7 @@ petty-counter {
 
 .muted-sm {
   color: var(--c-text-3);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
 }
 
 /* ============================================================
@@ -502,18 +496,21 @@ petty-counter {
 
 .footer-text {
   margin-top: 24px;
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   color: var(--c-text-3);
+  max-width: 65ch;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .st3-sig {
   text-align: right;
   padding: 48px 0 16px;
-  font-family: var(--c-mono);
-  font-size: 0.5625rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   color: var(--c-text-3);
   letter-spacing: 0.2em;
-  opacity: 0.3;
+  opacity: 0.5;
 }
 
 /* ============================================================
@@ -528,9 +525,12 @@ petty-button button {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
-  padding: 10px 24px;
-  line-height: 1.25;
-  height: 40px;
+  padding: 0 24px;
+  line-height: 1;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   transition: background var(--duration-normal) var(--ease-effects), border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-effects);
 }
 
@@ -539,6 +539,11 @@ petty-button button:hover {
   box-shadow: var(--elevation-1);
 }
 
+petty-button button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 petty-button button:disabled, petty-button[disabled] button {
   opacity: 0.38;
   cursor: not-allowed;
@@ -550,16 +555,16 @@ petty-button[data-state="loading"] button {
 }
 
 petty-button button.primary {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
+  background: var(--accent-7);
+  border-color: var(--accent-7);
   color: var(--accent-contrast);
   font-weight: var(--weight-medium);
   box-shadow: var(--elevation-1);
 }
 
 petty-button button.primary:hover {
-  background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
+  background: var(--accent-8);
+  border-color: var(--accent-8);
   box-shadow: var(--elevation-2);
 }
 
@@ -571,8 +576,11 @@ petty-button button.primary:hover {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
-  padding: 10px 24px;
-  height: 40px;
+  padding: 0 24px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--radius-pill);
   transition: background var(--duration-normal) var(--ease-effects), box-shadow var(--duration-normal);
 }
@@ -582,11 +590,16 @@ petty-button button.primary:hover {
   box-shadow: var(--elevation-1);
 }
 
+.btn-outline:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 .hint-text {
   cursor: help;
   border-bottom: 1px dashed var(--c-text-3);
   color: var(--c-text-2);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   padding-bottom: 2px;
 }
 
@@ -596,8 +609,8 @@ petty-button button.primary:hover {
 petty-badge {
   display: inline-flex;
   align-items: center;
-  font-family: var(--c-mono);
-  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   height: 32px;
   font-weight: 500;
   padding: 3px 12px;
@@ -609,8 +622,8 @@ petty-badge {
 
 petty-badge[data-variant="success"] {
   border-color: rgba(34, 197, 94, 0.3);
-  color: var(--c-green);
-  background: var(--c-green-glow);
+  color: var(--color-success);
+  background: var(--color-success-subtle);
 }
 
 petty-badge[data-variant="error"] {
@@ -634,8 +647,8 @@ petty-avatar {
   border-radius: 50%;
   background: var(--c-surface-3);
   color: var(--c-text-2);
-  font-family: var(--c-font);
-  font-size: 0.75rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 
@@ -663,19 +676,13 @@ petty-skeleton {
   display: block;
   height: 0.75rem;
   border-radius: var(--radius-sm);
-  background: linear-gradient(
-    90deg,
-    var(--gray-3) 0%,
-    var(--gray-2) 40%,
-    var(--gray-3) 80%
-  );
-  background-size: 300% 100%;
-  animation: shimmer 1.8s ease-in-out infinite;
+  background: var(--gray-3);
+  animation: shimmer 1s var(--ease-standard) infinite alternate;
 }
 
 @keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% { opacity: 0.6; }
+  100% { opacity: 1; }
 }
 
 .skeleton-stack {
@@ -704,7 +711,7 @@ petty-skeleton {
 
 .skel-btn {
   width: 5rem;
-  height: 1.75rem;
+  height: 2.75rem;
   border-radius: var(--radius-sm);
 }
 
@@ -722,8 +729,8 @@ petty-card-header {
 }
 
 petty-card-header h4 {
-  font-family: var(--c-font);
-  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 600;
 }
 
@@ -733,7 +740,7 @@ petty-card-content {
   gap: 8px;
   padding: 12px 20px;
   color: var(--c-text-2);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
 }
 
 petty-card-footer {
@@ -752,8 +759,8 @@ petty-text-field {
 }
 
 petty-text-field [data-part="label"] {
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--c-text-2);
 }
@@ -763,30 +770,30 @@ petty-text-field input[data-part="control"] {
   border: 1px solid var(--c-border-2);
   border-radius: var(--radius-sm);
   color: var(--c-text);
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
   padding: 16px;
   height: 56px;
-  outline: none;
   transition: border-color var(--duration-fast) var(--ease-effects), box-shadow var(--duration-fast) var(--ease-effects);
 }
 
-petty-text-field input:focus {
-  border-color: var(--c-green);
+petty-text-field input:focus-visible {
+  border-color: var(--color-accent);
   border-width: 2px;
   padding: 15px;
-  box-shadow: 0 0 0 2px var(--c-green-glow);
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 petty-text-field [data-part="error"] {
   color: var(--c-pink);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   min-height: 0.875rem;
 }
 
 petty-text-field [data-part="description"] {
   color: var(--c-text-3);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
 }
 
 /* ============================================================
@@ -802,15 +809,21 @@ petty-checkbox {
 
 petty-checkbox input[data-part="control"] {
   appearance: none;
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   border: 1.5px solid var(--c-border-2);
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
   background: var(--c-bg);
   cursor: pointer;
+  font-size: var(--text-base);
   transition: background var(--duration-fast) var(--ease-effects), border-color var(--duration-fast) var(--ease-effects), transform var(--duration-normal) var(--ease-expressive);
 }
 
+petty-checkbox input:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 petty-checkbox input:checked {
   background: var(--color-accent);
   border-color: var(--color-accent);
@@ -826,8 +839,8 @@ petty-checkbox input:not(:checked) {
 }
 
 petty-checkbox [data-part="label"] {
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   color: var(--c-text-2);
   cursor: pointer;
 }
@@ -848,7 +861,13 @@ petty-switch button[data-part="control"] {
   background: var(--c-surface-3);
   cursor: pointer;
   transition: background var(--duration-normal) var(--ease-effects);
-  padding: 0;
+  padding: 6px 0;
+  box-sizing: content-box;
+}
+
+petty-switch button[data-part="control"]:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 petty-switch[data-state="on"] button[data-part="control"] {
@@ -857,27 +876,27 @@ petty-switch[data-state="on"] button[data-part="control"] {
 
 petty-switch [data-part="thumb"] {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   background: white;
+  color: var(--color-text);
   position: absolute;
-  top: 8px;
+  top: 4px;
   left: 6px;
-  transition: transform var(--duration-normal) var(--ease-expressive), width var(--duration-normal) var(--ease-expressive), height var(--duration-normal) var(--ease-expressive), top var(--duration-normal) var(--ease-expressive);
+  transform: scale(0.667);
+  transform-origin: center;
+  transition: transform var(--duration-normal) var(--ease-expressive);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 petty-switch[data-state="on"] [data-part="thumb"] {
-  width: 24px;
-  height: 24px;
-  top: 4px;
-  transform: translateX(22px);
+  transform: translateX(22px) scale(1);
 }
 
 petty-switch [data-part="label"] {
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   color: var(--c-text-2);
 }
 
@@ -895,8 +914,8 @@ petty-radio-item {
   align-items: center;
   gap: 8px;
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   color: var(--c-text-2);
   padding: 4px 0;
   min-height: 48px;
@@ -935,9 +954,17 @@ petty-toggle button[data-part="control"] {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
-  padding: 10px 20px;
-  height: 40px;
-  transition: all var(--duration-normal) var(--ease-effects);
+  padding: 0 20px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--duration-normal) var(--ease-effects), border-color var(--duration-normal) var(--ease-effects), color var(--duration-normal) var(--ease-effects);
+}
+
+petty-toggle button[data-part="control"]:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 petty-toggle[data-state="on"] button[data-part="control"] {
@@ -962,11 +989,18 @@ petty-toggle-group-item {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
-  padding: 10px 20px;
-  height: 40px;
+  padding: 0 20px;
+  height: 44px;
   flex: 1;
-  text-align: center;
-  transition: all var(--duration-fast) var(--ease-effects);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects);
+}
+
+petty-toggle-group-item:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
 }
 
 petty-toggle-group-item:last-child {
@@ -974,7 +1008,7 @@ petty-toggle-group-item:last-child {
 }
 
 petty-toggle-group-item[data-state="on"] {
-  background: var(--color-accent);
+  background: var(--accent-7);
   color: var(--accent-contrast);
 }
 
@@ -988,8 +1022,8 @@ petty-slider {
 }
 
 petty-slider [data-part="label"] {
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--c-text-2);
 }
@@ -997,11 +1031,16 @@ petty-slider [data-part="label"] {
 petty-slider input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
+  font-size: var(--text-base);
   width: 100%;
   height: 6px;
   background: var(--color-surface-sunken);
   border-radius: var(--radius-pill);
-  outline: none;
+}
+
+petty-slider input[type="range"]:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 4px;
 }
 
 petty-slider input[type="range"]::-webkit-slider-thumb {
@@ -1024,8 +1063,8 @@ petty-slider input[type="range"]:active::-webkit-slider-thumb {
 }
 
 petty-slider [data-part="output"] {
-  font-family: var(--c-mono);
-  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
   color: var(--c-text-2);
   align-self: flex-end;
 }
@@ -1036,8 +1075,8 @@ petty-number-field {
 }
 
 petty-number-field [data-part="label"] {
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--c-text-2);
   margin-right: 12px;
@@ -1048,9 +1087,9 @@ petty-number-field button {
   border: 1px solid var(--c-border-2);
   color: var(--c-text-2);
   cursor: pointer;
-  font-size: 0.875rem;
-  width: 32px;
-  height: 32px;
+  font-size: var(--text-sm);
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1062,6 +1101,11 @@ petty-number-field button:hover {
   color: var(--c-text);
 }
 
+petty-number-field button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
 petty-number-field [data-part="decrement"] {
   border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
@@ -1078,12 +1122,16 @@ petty-number-field input[data-part="control"] {
   border-left: none;
   border-right: none;
   color: var(--c-text);
-  font-family: var(--c-mono);
-  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
   text-align: center;
   width: 48px;
-  height: 32px;
-  outline: none;
+  height: 44px;
+}
+
+petty-number-field input:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
 }
 
 petty-number-field input::-webkit-inner-spin-button,
@@ -1124,8 +1172,8 @@ petty-tags-input [data-part="tag"] {
   border: 1px solid rgba(34, 197, 94, 0.2);
   border-radius: 4px;
   color: var(--c-green);
-  font-family: var(--c-mono);
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
   font-weight: 500;
   padding: 2px 8px;
 }
@@ -1135,9 +1183,15 @@ petty-tags-input [data-part="tag-remove"] {
   border: none;
   color: var(--c-green-dim);
   cursor: pointer;
-  font-size: 0.75rem;
-  padding: 0;
+  font-size: var(--text-sm);
+  padding: 4px;
+  min-width: 24px;
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   line-height: 1;
+  border-radius: var(--radius-xs);
 }
 
 petty-tags-input [data-part="tag-remove"]:hover {
@@ -1148,11 +1202,10 @@ petty-tags-input input[data-part="input"] {
   background: transparent;
   border: none;
   color: var(--c-text);
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
   flex: 1;
   min-width: 80px;
-  outline: none;
   padding: 4px 0;
 }
 
@@ -1173,10 +1226,11 @@ petty-select [data-part="trigger"] {
   border-radius: var(--radius-sm);
   color: var(--c-text-2);
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
-  padding: 8px 12px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  padding: 12px 16px;
   min-width: 150px;
+  height: 44px;
   text-align: left;
   anchor-name: --petty-select-anchor;
   transition: border-color var(--duration-fast) var(--ease-effects);
@@ -1186,6 +1240,11 @@ petty-select [data-part="trigger"]:hover {
   border-color: var(--c-text-3);
 }
 
+petty-select [data-part="trigger"]:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 petty-select [data-part="listbox"] {
   background: var(--c-surface-2);
   border: 1px solid var(--c-border-2);
@@ -1206,7 +1265,7 @@ petty-select-option {
   border-radius: var(--radius-xs);
   color: var(--c-text-2);
   cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   padding: 8px 10px;
   transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects);
 }
@@ -1236,8 +1295,8 @@ petty-tab {
   border-bottom: 3px solid transparent;
   color: var(--c-text-3);
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   margin-bottom: -1px;
   padding: 12px 16px;
@@ -1251,6 +1310,11 @@ petty-tab:hover {
   color: var(--c-text-2);
 }
 
+petty-tab:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
 petty-tab[data-state="active"] {
   color: var(--c-text);
   border-bottom-color: var(--c-green);
@@ -1260,8 +1324,9 @@ petty-tab-panel {
   display: block;
   padding: 20px 0;
   color: var(--c-text-2);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   line-height: 1.7;
+  max-width: 65ch;
 }
 
 petty-tab-panel[hidden] {
@@ -1284,14 +1349,22 @@ petty-accordion-item {
 petty-accordion-item summary {
   color: var(--c-text-2);
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   list-style: none;
   padding: 16px 0;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
   transition: color var(--duration-fast) var(--ease-effects);
 }
 
+petty-accordion-item summary:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 petty-accordion-item summary::-webkit-details-marker {
   display: none;
 }
@@ -1302,7 +1375,7 @@ petty-accordion-item details[open] summary {
 
 petty-accordion-item [data-part="content"] {
   color: var(--c-text-3);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   padding-bottom: 16px;
   line-height: 1.7;
 }
@@ -1326,7 +1399,7 @@ petty-breadcrumbs ol {
 petty-breadcrumb-item {
   display: inline-flex;
   align-items: center;
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
 }
 
 petty-breadcrumb-item::after {
@@ -1358,21 +1431,23 @@ petty-pagination nav {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-height: 44px;
+  flex-wrap: wrap;
 }
 
 petty-pagination-item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
+  min-width: 36px;
+  height: 36px;
   border-radius: var(--radius-sm);
   background: var(--c-surface-2);
   border: 1px solid var(--c-border);
   color: var(--c-text-3);
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   padding: 0 8px;
   transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects);
@@ -1383,6 +1458,11 @@ petty-pagination-item:hover {
   color: var(--c-text);
 }
 
+petty-pagination-item:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
 petty-pagination-item[data-state="active"] {
   background: var(--c-text);
   color: var(--c-bg);
@@ -1398,12 +1478,10 @@ petty-pagination-item[disabled] {
    COMPONENT STYLES: Dialog
    ============================================================ */
 dialog {
-  background: rgba(255, 255, 255, 0.88);
-  backdrop-filter: blur(20px) saturate(1.2);
-  -webkit-backdrop-filter: blur(20px) saturate(1.2);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 28px;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--elevation-4);
   color: var(--color-text);
   max-width: min(90vw, 28rem);
   padding: var(--space-8);
@@ -1413,20 +1491,19 @@ dialog {
 }
 
 dialog::backdrop {
-  background: rgba(15, 23, 42, 0.4);
-  backdrop-filter: blur(6px);
+  background: rgba(15, 23, 42, 0.5);
 }
 
 dialog h2 {
-  font-family: var(--c-font);
-  font-size: 1.125rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
   font-weight: 600;
   margin-bottom: 8px;
 }
 
 dialog p {
   color: var(--c-text-2);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   margin-bottom: 24px;
   line-height: 1.7;
 }
@@ -1435,12 +1512,10 @@ dialog p {
    COMPONENT STYLES: Popover & Tooltip
    ============================================================ */
 [popover] {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(16px) saturate(1.2);
-  -webkit-backdrop-filter: blur(16px) saturate(1.2);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--elevation-3);
   color: var(--color-text);
   font-size: var(--text-base);
   padding: var(--space-4) var(--space-5);
@@ -1474,7 +1549,7 @@ petty-tooltip [data-part="trigger"] {
 petty-tooltip [data-part="content"] {
   background: var(--c-text);
   color: var(--c-bg);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   font-weight: 500;
   padding: 6px 12px;
   border: none;
@@ -1515,7 +1590,7 @@ petty-menu-item {
   border-radius: var(--radius-xs);
   color: var(--c-text-2);
   cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   padding: 8px 10px;
   transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects);
 }
@@ -1524,7 +1599,6 @@ petty-menu-item:hover,
 petty-menu-item:focus {
   background: var(--c-surface-3);
   color: var(--c-text);
-  outline: none;
 }
 
 petty-menu-item[disabled] {
@@ -1574,7 +1648,7 @@ petty-alert[data-variant="warning"] {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   margin-top: 1px;
 }
 
@@ -1632,8 +1706,6 @@ petty-progress [data-part="fill"] {
   background: var(--color-accent);
   border-radius: var(--radius-pill);
   width: calc(var(--petty-progress, 0) * 100%);
-  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: 0 0 8px rgba(54, 192, 241, 0.3);
 }
 
 petty-progress [data-part="label"] { display: none; }
@@ -1642,17 +1714,12 @@ petty-meter [data-part="fill"] {
   height: 100%;
   border-radius: var(--radius-pill);
   width: calc(var(--petty-meter-value, 0) * 100%);
-  transition: width 0.6s var(--ease-standard);
 }
 
-petty-meter [data-part="fill"] {
-  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-petty-meter[data-state="low"] [data-part="fill"] { background: var(--color-danger); box-shadow: 0 0 8px rgba(220, 38, 38, 0.3); }
-petty-meter[data-state="medium"] [data-part="fill"] { background: var(--color-warning); box-shadow: 0 0 8px rgba(217, 119, 6, 0.3); }
-petty-meter[data-state="high"] [data-part="fill"] { background: var(--color-success); box-shadow: 0 0 8px rgba(22, 163, 74, 0.3); }
-petty-meter[data-state="optimum"] [data-part="fill"] { background: var(--color-accent); box-shadow: 0 0 8px rgba(54, 192, 241, 0.3); }
+petty-meter[data-state="low"] [data-part="fill"] { background: var(--color-danger); }
+petty-meter[data-state="medium"] [data-part="fill"] { background: var(--color-warning); }
+petty-meter[data-state="high"] [data-part="fill"] { background: var(--color-success); }
+petty-meter[data-state="optimum"] [data-part="fill"] { background: var(--color-accent); }
 
 /* ============================================================
    COMPONENT STYLES: Toast
@@ -1716,13 +1783,19 @@ petty-toast-region {
   border: none;
   color: var(--color-text-tertiary);
   cursor: pointer;
-  font-size: 1rem;
-  padding: 4px;
+  font-size: var(--text-base);
+  padding: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   line-height: 1;
   grid-row: 1;
   grid-column: 2;
   align-self: start;
   transition: color var(--duration-fast);
+  border-radius: var(--radius-sm);
 }
 
 [data-part="toast-close"]:hover {
@@ -1746,7 +1819,7 @@ petty-toast-region {
 petty-link a {
   color: var(--c-green);
   text-decoration: none;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   transition: opacity var(--duration-fast) var(--ease-effects);
 }
 
@@ -1757,8 +1830,8 @@ petty-link a:hover {
 petty-collapsible summary {
   color: var(--c-text-2);
   cursor: pointer;
-  font-family: var(--c-font);
-  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
   font-weight: 500;
   list-style: none;
   padding: 8px 0;
@@ -1770,7 +1843,7 @@ petty-collapsible summary::-webkit-details-marker {
 
 petty-collapsible [data-part="content"] {
   color: var(--c-text-3);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   padding: 8px 0;
   line-height: 1.7;
 }
@@ -1801,7 +1874,6 @@ petty-collapsible [data-part="content"] {
   }
 
   .hero {
-    min-height: 70vh;
     padding: 6rem 0 4rem;
   }
 }