custom-elements-ts 0.1.0 → 0.2.0

package/.eslintrc.json

@@ -19,8 +19,9 @@
       "parser": "espree",
       "env": { "node": true, "es6": true },
       "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-unused-vars": "off",
         "no-undef": "off",
         "no-console": "off",
         "prettier/prettier": "off"

package/README.md

@@ -1,9 +1,16 @@
 # custom-elements-ts
 
-[![Coverage Status](https://coveralls.io/repos/github/geocine/custom-elements-ts/badge.svg?branch=master)](https://coveralls.io/github/geocine/custom-elements-ts?branch=master)
-![CI](https://github.com/geocine/custom-elements-ts/actions/workflows/ci.yml/badge.svg)
-[![npm version](https://badge.fury.io/js/custom-elements-ts.svg)](https://www.npmjs.com/package/custom-elements-ts)
+[![Coverage Status](https://coveralls.io/repos/github/geocine/custom-elements-ts/badge.svg?branch=master&cache-control=no-cache)](https://coveralls.io/github/geocine/custom-elements-ts?branch=master)
+![CI](https://github.com/geocine/custom-elements-ts/actions/workflows/ci.yml/badge.svg?cache-control=no-cache)
+[![npm version](https://badge.fury.io/js/custom-elements-ts.svg?cache-control=no-cache)](https://www.npmjs.com/package/custom-elements-ts)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/geocine/custom-elements-ts)
+
+<p align="center">
+  <a href="https://geocine.github.io/custom-elements-ts/">
+    <img src="assets/readme-header.png" alt="custom-elements-ts — Native Web Components, written in TypeScript">
+  </a>
+</p>
 
 Author native Web Components in TypeScript with a small set of decorators
 (`@CustomElement`, `@Prop`, `@State`, `@Watch`, `@Listen`, `@Dispatch`,

package/demos/site/event-log/event-log.element.ts

@@ -1,11 +1,4 @@
-import {
-  CustomElement,
-  Prop,
-  State,
-  TemplateResult,
-  Watch,
-  html,
-} from 'custom-elements-ts';
+import { CustomElement, Prop, State, TemplateResult, Watch, html } from 'custom-elements-ts';
 
 interface LogEntry {
   id: number;
@@ -17,11 +10,7 @@ interface LogEntry {
 const MAX_ENTRIES = 6;
 
 /**
- * Tiny "what just happened" panel used on the showcase page.
- *
- * Subscribes to one or more bubbling, composed CustomEvents at the document
- * level and renders the most recent few. Pure render() / @State() — no manual
- * DOM diffing — so it doubles as a live example of the templating runtime.
+ * Live event log for bubbling CustomEvents on the showcase page.
  */
 @CustomElement({
   tag: 'cts-event-log',
@@ -111,7 +100,7 @@ export class EventLogElement extends HTMLElement {
   }
 
   private formatDetail(detail: unknown): string {
-    if (detail == null) return '—';
+    if (detail === null || detail === undefined) return '—';
     if (typeof detail === 'string') return detail;
     if (typeof detail === 'number' || typeof detail === 'boolean') {
       return String(detail);

package/demos/site/index.html

@@ -75,7 +75,7 @@
       <section class="hero">
         <div class="container">
           <div class="hero__pill" role="status">
-            <span class="badge">v0.0.16</span>
+            <span class="badge">v0.2.0</span>
             <span>TypeScript&nbsp;5</span>
             <span class="sep">·</span>
             <span>MIT</span>
@@ -120,7 +120,7 @@
         <div class="container">
           <div class="showcase__grid">
 
-            <article class="window" aria-label="Source for the install pill on the right">
+            <article class="window" aria-label="message.element.ts source">
               <header class="window__bar">
                 <span class="window__dots" aria-hidden="true">
                   <span></span><span></span><span></span>
@@ -128,10 +128,6 @@
                 <span class="window__title">
                   message.<span class="accent">element.ts</span>
                 </span>
-                <span class="window__copy">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                  what runs the install pill →
-                </span>
               </header>
               <div class="window__body">
                 <cts-code-example></cts-code-example>
@@ -212,10 +208,21 @@
                   whenever its <code>@State()</code> changes.
                 </p>
               </div>
-              <a class="playground__source" href="https://github.com/geocine/custom-elements-ts/blob/master/demos/counter/counter.element.ts">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-                View source
-              </a>
+              <div class="playground__actions">
+                <button class="playground__btn" type="button"
+                        data-source-toggle data-source-target="src-counter"
+                        aria-controls="src-counter" aria-expanded="false">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                  <span>Source</span>
+                  <svg class="playground__btn-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="12" height="12"><polyline points="6 9 12 15 18 9"/></svg>
+                </button>
+                <a class="playground__btn playground__btn--ghost"
+                   href="https://github.com/geocine/custom-elements-ts/blob/master/demos/counter/counter.element.ts"
+                   target="_blank" rel="noopener" aria-label="View counter source on GitHub">
+                  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="13" height="13"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+                  <span>GitHub</span>
+                </a>
+              </div>
             </header>
 
             <div class="playground__body playground__body--split">
@@ -235,6 +242,8 @@
                 empty="Click the counter to dispatch counter.change events."
               ></cts-event-log>
             </div>
+
+            <cts-source-viewer id="src-counter" slug="counter"></cts-source-viewer>
           </article>
 
           <!-- Todo dashboard playground -->
@@ -250,24 +259,37 @@
                   parent re-renders.
                 </p>
               </div>
-              <a class="playground__source" href="https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-dashboard.element.ts">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-                View source
-              </a>
+              <div class="playground__actions">
+                <button class="playground__btn" type="button"
+                        data-source-toggle data-source-target="src-todo"
+                        aria-controls="src-todo" aria-expanded="false">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                  <span>Source</span>
+                  <svg class="playground__btn-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="12" height="12"><polyline points="6 9 12 15 18 9"/></svg>
+                </button>
+                <a class="playground__btn playground__btn--ghost"
+                   href="https://github.com/geocine/custom-elements-ts/tree/master/demos/todo-dashboard"
+                   target="_blank" rel="noopener" aria-label="View todo dashboard source on GitHub">
+                  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="13" height="13"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+                  <span>GitHub</span>
+                </a>
+              </div>
             </header>
 
-            <div class="playground__body playground__body--stack">
+            <div class="playground__body playground__body--split">
               <div class="stage stage--todo">
-                <cts-todo-dashboard heading="Sprint board"></cts-todo-dashboard>
+                <cts-todo-dashboard heading="Sprint board" compact></cts-todo-dashboard>
               </div>
 
               <cts-event-log
-                class="playground__log playground__log--wide"
+                class="playground__log"
                 label="todo events"
                 events="todo.change,todo.toggle,todo.labelchange,todo.remove,filter.change,goal.change"
                 empty="Add, complete, edit, or remove a task to see events bubble up here."
               ></cts-event-log>
             </div>
+
+            <cts-source-viewer id="src-todo" slug="todo-dashboard"></cts-source-viewer>
           </article>
         </div>
       </section>

package/demos/site/index.ts

@@ -3,6 +3,12 @@ export * from './code-example/code-example.element';
 export * from './message/message.element';
 export * from './toast/toast.element';
 export * from './event-log/event-log.element';
+export * from './source-viewer/source-viewer.element';
+
+// Side-effect import: binds the [Source] toggle buttons to their viewers.
+import './source-toggle/source-toggle';
+// Side-effect import: prevents refresh from restoring a mid-page scroll.
+import './scroll-restoration';
 
 // Live demos hosted from sibling demo folders so visitors can interact
 // with the real components, not screenshots.

package/demos/site/llms.txt

@@ -0,0 +1,53 @@
+# custom-elements-ts
+
+> A tiny (~3 kB min+gzip), zero-dependency, framework-free TypeScript library for authoring native Web Components with a small set of decorators (`@CustomElement`, `@Prop`, `@State`, `@Watch`, `@Listen`, `@Dispatch`, `@Toggle`) and an optional `html` / `render()` runtime.
+
+Components built with custom-elements-ts are standards-compliant native Custom Elements: they work in plain HTML and inside any framework (React, Vue, Svelte, Angular, etc.). Two authoring styles compose freely:
+
+- **Plain HTML, imperative updates.** Declare a `template` (or `templateUrl`) and update the DOM yourself in `connectedCallback`, `@Watch()`, or `@Listen()` handlers. No `render()`, no reactive runtime, zero runtime cost beyond the decorators. Use this for mostly-static UI like buttons, badges, panels, copy pills.
+- **Reactive `render()` with the `html` helper.** Define `render()` returning an `html` tagged template. The runtime re-renders efficiently on `@Prop()` / `@State()` / `@Toggle()` changes, batching multiple synchronous mutations into one render. `render()` output is mounted into the shadow root by default; pass `shadow: false` to render into the host. State is deeply proxied — nested mutations (`this.user.name = '…'`, `this.items.push(…)`) schedule a render; only plain objects and arrays are proxied (functions, classes, DOM nodes, `Date`, `Map`, `Set`, `WeakMap`, `WeakSet` are left as-is).
+
+Install: `npm install custom-elements-ts`. License: MIT. Repository: https://github.com/geocine/custom-elements-ts. Live demo site: https://geocine.github.io/custom-elements-ts/.
+
+## Documentation
+
+- [README — full guide, decorators, examples](https://github.com/geocine/custom-elements-ts/blob/master/README.md): Quick start (plain HTML and reactive `render()`), template binding forms (`${expr}`, `${() => expr}`, `@event`, `.prop`, attribute, list rendering), every decorator (`@CustomElement`, `@Prop`, `@State`, `@Toggle`, `@Dispatch`, `@Watch`, `@Listen`), `@Toggle` boolean-attribute semantics table, project layout, and how to run / build the demos.
+- [DeepWiki — AI-powered docs and Q&A](https://deepwiki.com/geocine/custom-elements-ts): Searchable conceptual documentation generated from the source; useful for asking natural-language questions about the runtime.
+- [npm package page](https://www.npmjs.com/package/custom-elements-ts): Published artifacts (UMD + ESM with typings) and version history.
+- [MIT license](https://github.com/geocine/custom-elements-ts/blob/master/LICENSE): Full license text.
+
+## Decorators (cheat sheet)
+
+- `@CustomElement({ tag, template?, templateUrl?, style?, styleUrl?, shadow?: boolean })`: Registers the class as a native custom element. Defaults to shadow DOM.
+- `@Prop()`: Public attribute/property. Reflects primitives (string, number, boolean) between attribute and property; objects, arrays, functions, classes are property-only (not reflected to attributes).
+- `@State()`: Internal reactive state for `render()`-based components. Not reflected to attributes, not in `observedAttributes`. Plain objects and arrays are deeply proxied so nested mutations trigger a render.
+- `@Toggle()`: Boolean attribute/property following the W3C boolean-attribute spec, with the convention that the literal string `"false"` evaluates to `false` and an unrecognized non-empty string also evaluates to `false`.
+- `@Dispatch(eventName?)`: Declares a `DispatchEmitter` field. Call `.emit({ detail, bubbles?, composed?, cancelable? })` to fire a `CustomEvent`. Default event name is the property name with dots (`onChange` → `on.change`); pass an explicit name to override (e.g. `@Dispatch('counter.change')`). Use `bubbles: true, composed: true` to cross the shadow boundary.
+- `@Watch(propertyName)`: Method runs whenever `propertyName` changes (from either attribute or property side). Receives `{ old, new }`.
+- `@Listen(event, selector?)`: Wires up a DOM event on the host element, or on `selector` inside the shadow tree (any `querySelector`-compatible selector).
+
+## Source
+
+- [src/](https://github.com/geocine/custom-elements-ts/tree/master/src): Library source — decorators plus the `html` / `render()` runtime.
+- [src/index.ts](https://github.com/geocine/custom-elements-ts/blob/master/src/index.ts): Public entry point — every named export consumers can import.
+- [tests/](https://github.com/geocine/custom-elements-ts/tree/master/tests): Vitest specs covering the runtime and every decorator. Authoritative behavioural reference when the README is ambiguous.
+- [tests/templating-runtime.spec.ts](https://github.com/geocine/custom-elements-ts/blob/master/tests/templating-runtime.spec.ts): Most thorough spec for the `html` tagged template / `render()` runtime, covering binding forms, list rendering, attribute/property/event bindings, and disposal.
+
+## Demos
+
+- [demos/counter/counter.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/counter/counter.element.ts): Minimal `@State()` + `render()` + `@Watch()` + `@Dispatch()` example — single-button card that emits `counter.change` on increment.
+- [demos/todo-dashboard/todo-dashboard.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-dashboard.element.ts): Parent dashboard owning the source of truth, composing child elements via bubbling `CustomEvent`s and deeply-proxied state.
+- [demos/todo-dashboard/todo-item.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-item.element.ts): Child row component — `@Prop()` inputs, `@Listen()` handlers, `@Dispatch()` outputs.
+- [demos/todo-dashboard/todo-stats.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-stats.element.ts): Sibling stats card driven entirely by `@Prop()` data passed down from the parent.
+- [demos/site/](https://github.com/geocine/custom-elements-ts/tree/master/demos/site): Source for the showcase landing page itself — `<cts-message>` (plain-HTML, imperative), `<cts-toast>`, `<cts-event-log>`, `<cts-code-example>`. Demonstrates that the same library is used to build its own marketing site.
+- [demos/site/message/message.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/site/message/message.element.ts): Canonical "no `render()` required" example — static `template` + imperative DOM updates in `connectedCallback`, `@Listen('click')`, and a bubbling+composed `@Dispatch('cts:toast')`.
+
+## Live site (this domain)
+
+- [Showcase landing page](https://geocine.github.io/custom-elements-ts/): Hero, install pill, live counter demo, live sprint-board demo, and an event-log panel that subscribes to bubbling `CustomEvent`s in real time. All demos on the page are the *real* compiled components, not screenshots.
+
+## Optional
+
+- [GitHub issues](https://github.com/geocine/custom-elements-ts/issues): Bug reports and feature requests.
+- [Coveralls — test coverage](https://coveralls.io/github/geocine/custom-elements-ts?branch=master): Current line coverage for the library.
+- [GitHub Actions — CI](https://github.com/geocine/custom-elements-ts/actions/workflows/ci.yml): Build, test, and GitHub Pages deploy pipeline.

package/demos/site/scroll-restoration.ts

@@ -0,0 +1,28 @@
+function scrollToHashTarget(): boolean {
+  const id = decodeURIComponent(window.location.hash.slice(1));
+  const target = id ? document.getElementById(id) : null;
+  if (!target) return false;
+  target.scrollIntoView();
+  return true;
+}
+
+function syncInitialScroll() {
+  if (typeof window === 'undefined') return;
+
+  if (window.location.hash) {
+    if ('scrollRestoration' in window.history) {
+      window.history.scrollRestoration = 'auto';
+    }
+    requestAnimationFrame(scrollToHashTarget);
+    return;
+  }
+
+  if ('scrollRestoration' in window.history) {
+    window.history.scrollRestoration = 'manual';
+  }
+
+  window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+}
+
+syncInitialScroll();
+window.addEventListener('pageshow', syncInitialScroll);

package/demos/site/source-toggle/source-toggle.ts

@@ -0,0 +1,88 @@
+/**
+ * Delegates [Source] button clicks to matching <cts-source-viewer> panels.
+ */
+
+const TOGGLE_ATTR = 'data-source-toggle';
+const TARGET_ATTR = 'data-source-target';
+const OPEN_ATTR = 'open';
+const ACTIVE_CLASS = 'is-active';
+
+// Sticky-nav height plus breathing room.
+const SCROLL_OFFSET = 88;
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+}
+
+function scrollPanelIntoView(panel: HTMLElement) {
+  // Wait for [open] to land before measuring the panel.
+  requestAnimationFrame(() => {
+    const top = panel.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
+    if (top <= window.scrollY) return;
+    window.scrollTo({
+      top,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+  });
+}
+
+function findToggle(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) return null;
+  return target.closest(`[${TOGGLE_ATTR}]`) as HTMLElement | null;
+}
+
+function syncTrigger(trigger: HTMLElement, isOpen: boolean) {
+  trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  trigger.classList.toggle(ACTIVE_CLASS, isOpen);
+}
+
+function handleClick(event: MouseEvent) {
+  const trigger = findToggle(event.target);
+  if (!trigger) return;
+
+  const targetId = trigger.getAttribute(TARGET_ATTR);
+  if (!targetId) return;
+
+  const panel = document.getElementById(targetId);
+  if (!panel) return;
+
+  event.preventDefault();
+
+  const willOpen = !panel.hasAttribute(OPEN_ATTR);
+  if (willOpen) {
+    panel.setAttribute(OPEN_ATTR, '');
+  } else {
+    panel.removeAttribute(OPEN_ATTR);
+  }
+  syncTrigger(trigger, willOpen);
+
+  // Closing should leave the user where they are.
+  if (willOpen) {
+    scrollPanelIntoView(panel);
+  }
+}
+
+function init() {
+  // Reflect any initially open panels.
+  document.querySelectorAll<HTMLElement>(`[${TOGGLE_ATTR}]`).forEach((trigger) => {
+    const targetId = trigger.getAttribute(TARGET_ATTR);
+    if (!targetId) return;
+    const panel = document.getElementById(targetId);
+    if (!panel) return;
+    syncTrigger(trigger, panel.hasAttribute(OPEN_ATTR));
+  });
+
+  document.addEventListener('click', handleClick);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+}

package/demos/site/source-viewer/source-viewer.element.scss

@@ -0,0 +1,292 @@
+/* ─────────────────────────────────────────────────────────────
+   cts-source-viewer
+   Collapsible inline source panel for playground examples.
+   ───────────────────────────────────────────────────────────── */
+
+:host {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+}
+
+:host([open]) {
+  grid-template-rows: 1fr;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.viewer {
+  overflow: hidden;
+  min-height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  background:
+    radial-gradient(420px 200px at 0% 0%,
+                    rgba(49, 120, 198, 0.06) 0%,
+                    transparent 70%),
+    linear-gradient(180deg, #0d1118 0%, #0a0d13 100%);
+  transition: visibility 0s linear 360ms;
+}
+
+:host([open]) .viewer {
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+/* ── Top bar: kicker + file tabs ─────────────────────────── */
+
+.bar {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  background: linear-gradient(180deg,
+              rgba(255, 255, 255, 0.02) 0%,
+              rgba(255, 255, 255, 0)    100%);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px 0 4px;
+  margin-right: 4px;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  white-space: nowrap;
+  align-self: center;
+  height: 30px;
+}
+.kicker-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: #4189d6;
+  box-shadow: 0 0 8px rgba(65, 137, 214, 0.6);
+}
+
+.tabs {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.45);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.82);
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4189d6;
+    outline-offset: -2px;
+    border-radius: 2px;
+  }
+
+  &.is-active {
+    color: #9cc0eb;
+    border-bottom-color: #4189d6;
+    background: rgba(65, 137, 214, 0.04);
+  }
+}
+
+.single {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #9cc0eb;
+  white-space: nowrap;
+}
+
+.empty {
+  margin: 0;
+  padding: 16px 22px;
+  font-size: 12.5px;
+  color: rgba(255, 255, 255, 0.5);
+}
+.empty code {
+  padding: 1px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #9cc0eb;
+}
+
+/* ── Code body ───────────────────────────────────────────── */
+
+.body {
+  margin: 0;
+  padding: 22px 26px 26px;
+  background: transparent;
+  color: #d6dce5;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.65;
+  overflow: auto;
+  max-height: 460px;
+  white-space: pre;
+  -webkit-font-smoothing: antialiased;
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
+
+  &::-webkit-scrollbar { width: 8px; height: 8px; }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.10);
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-track { background: transparent; }
+
+  &:focus { outline: none; }
+  &:focus-visible {
+    outline: 2px solid #4189d6;
+    outline-offset: -2px;
+  }
+}
+
+.body code {
+  background: transparent;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@media (min-width: 980px) {
+  .body {
+    font-size: 13.5px;
+    padding: 26px 32px 30px;
+    max-height: 540px;
+  }
+}
+
+/* Narrow viewports: preserve tab space and hint at overflow. */
+@media (max-width: 640px) {
+  .bar {
+    padding: 0 10px;
+    mask-image: linear-gradient(to right,
+                                black calc(100% - 22px),
+                                transparent 100%);
+    -webkit-mask-image: linear-gradient(to right,
+                                        black calc(100% - 22px),
+                                        transparent 100%);
+  }
+  .kicker {
+    padding: 0 10px 0 4px;
+    margin-right: 2px;
+    font-size: 0; /* collapse text, keep the dot */
+  }
+  .tab,
+  .single {
+    padding: 10px 10px;
+    font-size: 11.5px;
+  }
+  .body {
+    padding: 18px 18px 22px;
+    font-size: 12.5px;
+    max-height: 380px;
+  }
+}
+
+/* ── Prism token theme — kept in sync with cts-code-example ── */
+
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: #6e7681;
+    font-style: italic;
+  }
+
+  &.punctuation { color: #c9d1d9; }
+
+  &.property,
+  &.tag,
+  &.attr-name { color: #9cdcfe; }
+
+  &.keyword,
+  &.boolean { color: #4189d6; }
+
+  &.class-name { color: #4ec9b0; }
+
+  &.constant,
+  &.symbol { color: #4189d6; }
+
+  &.number { color: #b5cea8; }
+
+  &.string,
+  &.char,
+  &.attr-value,
+  &.builtin,
+  &.inserted { color: #ce9178; }
+
+  &.selector { color: #d7ba7d; }
+
+  &.variable { color: #d6dce5; }
+
+  &.operator,
+  &.entity { color: #d6dce5; }
+
+  &.url {
+    color: #4189d6;
+    text-decoration: underline;
+  }
+
+  &.atrule { color: #c586c0; }
+
+  &.function { color: #dcdcaa; }
+
+  &.regex { color: #d16969; }
+
+  &.important {
+    color: #f47067;
+    font-weight: 600;
+  }
+
+  &.bold { font-weight: 600; }
+  &.italic { font-style: italic; }
+  &.deleted { color: #f47067; }
+}
+
+.namespace { opacity: .65; }
+
+.language-css .token.string,
+.style .token.string {
+  color: #ce9178;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}