npm - custom-elements-ts - Versions diffs - 0.0.17 → 0.1.0 - Mend

custom-elements-ts 0.0.17 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/.eslintrc.json +46 -0
package/.github/workflows/ci.yml +49 -0
package/.prettierrc +7 -0
package/LICENSE +20 -0
package/README.md +270 -35
package/demos/counter/counter.element.html +1 -0
package/demos/counter/counter.element.scss +234 -0
package/demos/counter/counter.element.ts +68 -0
package/demos/counter/index.html +205 -0
package/demos/counter/index.ts +1 -0
package/demos/site/code-example/code-example.element.scss +168 -0
package/demos/site/code-example/code-example.element.ts +88 -0
package/demos/site/event-log/event-log.element.scss +179 -0
package/demos/site/event-log/event-log.element.ts +134 -0
package/demos/site/favicon.svg +14 -0
package/demos/site/index.html +346 -0
package/demos/site/index.ts +13 -0
package/demos/site/message/message.element.scss +75 -0
package/demos/site/message/message.element.ts +76 -0
package/demos/site/og-image.png +0 -0
package/demos/site/styles/site.css +1023 -0
package/demos/site/styles/tokens.css +56 -0
package/demos/site/toast/toast.element.scss +110 -0
package/demos/site/toast/toast.element.ts +63 -0
package/demos/todo-dashboard/index.html +141 -0
package/demos/todo-dashboard/index.ts +4 -0
package/demos/todo-dashboard/todo-dashboard.element.scss +1145 -0
package/demos/todo-dashboard/todo-dashboard.element.ts +332 -0
package/demos/todo-dashboard/todo-filters.element.ts +54 -0
package/demos/todo-dashboard/todo-item.element.ts +126 -0
package/demos/todo-dashboard/todo-stats.element.ts +189 -0
package/package.json +73 -24
package/src/custom-element.ts +206 -0
package/{esm5/index.d.ts → src/index.ts} +7 -5
package/src/listen.ts +70 -0
package/src/prop.ts +92 -0
package/src/state.ts +129 -0
package/src/template-runtime.ts +435 -0
package/src/toggle.ts +66 -0
package/src/tsconfig.json +24 -0
package/src/util.ts +33 -0
package/src/watch.ts +14 -0
package/tests/basic.spec.ts +70 -0
package/tests/custom-element.spec.ts +77 -0
package/tests/dispatch.spec.ts +52 -0
package/tests/init.spec.ts +94 -0
package/tests/listen.spec.ts +118 -0
package/tests/prop.spec.ts +118 -0
package/tests/templating-runtime.spec.ts +575 -0
package/tests/toggle.spec.ts +92 -0
package/tests/watch.spec.ts +183 -0
package/tools/build.js +119 -0
package/tools/bundle.js +167 -0
package/tools/rollup-config.js +70 -0
package/tools/start.js +188 -0
package/tsconfig.json +38 -0
package/vite.config.mts +30 -0
package/bundles/custom-elements-ts.umd.js +0 -359
package/bundles/custom-elements-ts.umd.js.map +0 -1
package/esm2015/custom-elements-ts.js +0 -283
package/esm2015/custom-elements-ts.js.map +0 -1
package/esm5/custom-element.d.ts +0 -12
package/esm5/custom-elements-ts.js +0 -344
package/esm5/custom-elements-ts.js.map +0 -1
package/esm5/listen.d.ts +0 -17
package/esm5/prop.d.ts +0 -2
package/esm5/toggle.d.ts +0 -1
package/esm5/util.d.ts +0 -4
package/esm5/watch.d.ts +0 -1

package/demos/site/index.html ADDED Viewed

@@ -0,0 +1,346 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#0a0c10">
+    <meta name="color-scheme" content="dark">
+    <title>custom-elements-ts — native Web Components in TypeScript</title>
+    <meta name="description" content="Author native Web Components in TypeScript with a tiny set of decorators — @CustomElement, @Prop, @State, @Watch, @Listen, @Dispatch — and a 3 kB runtime. Zero dependencies. Framework-free.">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="custom-elements-ts">
+    <meta property="og:url" content="https://geocine.github.io/custom-elements-ts/">
+    <meta property="og:title" content="custom-elements-ts — Native Web Components in TypeScript">
+    <meta property="og:description" content="A 3 kB decorator-based runtime for authoring standards-compliant custom elements in TypeScript. Zero dependencies. Framework-free.">
+    <meta property="og:image" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta property="og:image:secure_url" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:image:alt" content="custom-elements-ts — Native Web Components, written in TypeScript. Sample code window showing a @CustomElement decorator.">
+    <!-- Twitter / X -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="custom-elements-ts — Native Web Components in TypeScript">
+    <meta name="twitter:description" content="A 3 kB decorator-based runtime for authoring standards-compliant custom elements in TypeScript. Zero dependencies. Framework-free.">
+    <meta name="twitter:image" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta name="twitter:image:alt" content="custom-elements-ts — Native Web Components, written in TypeScript.">
+    <link rel="canonical" href="https://geocine.github.io/custom-elements-ts/">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap">
+    <link rel="stylesheet" href="styles/site.css">
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Skip to content</a>
+    <!-- ─── Top navigation ──────────────────────────────────────── -->
+    <header class="nav">
+      <div class="container nav__inner">
+        <a class="brand" href="#">
+          <span class="brand__mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M8.5 7.5 4 12l4.5 4.5"/>
+              <path d="M15.5 7.5 20 12l-4.5 4.5"/>
+              <path d="M14 5l-4 14"/>
+            </svg>
+          </span>
+          <span class="brand__name">custom-elements<span class="dim">-ts</span></span>
+        </a>
+        <nav class="nav__links" aria-label="Primary">
+          <a class="nav__link" href="#showcase">Example</a>
+          <a class="nav__link" href="#live">Live demos</a>
+          <a class="nav__link" href="#api">Decorators</a>
+          <a class="nav__link" href="https://github.com/geocine/custom-elements-ts#readme">Docs</a>
+          <a class="nav__link" href="https://www.npmjs.com/package/custom-elements-ts">npm</a>
+        </nav>
+        <a class="nav__cta" href="https://github.com/geocine/custom-elements-ts" aria-label="View source on GitHub">
+          <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><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>
+    <main id="main">
+      <!-- ─── Hero ────────────────────────────────────────────── -->
+      <section class="hero">
+        <div class="container">
+          <div class="hero__pill" role="status">
+            <span class="badge">v0.0.16</span>
+            <span>TypeScript&nbsp;5</span>
+            <span class="sep">·</span>
+            <span>MIT</span>
+            <span class="sep">·</span>
+            <span>0 deps</span>
+          </div>
+          <h1 class="hero__title">
+            Native Web Components, written in <em class="em">TypeScript</em>.
+          </h1>
+          <p class="hero__lede">
+            <strong>custom-elements-ts</strong> is a tiny set of decorators —
+            <code>@CustomElement</code>, <code>@Prop</code>, <code>@State</code>,
+            <code>@Watch</code>, <code>@Listen</code>, <code>@Dispatch</code>,
+            <code>@Toggle</code> — plus a 3&nbsp;kB <code>html</code>/<code>render()</code>
+            runtime that lets you author standards-compliant custom elements
+            without a framework.
+          </p>
+          <div class="hero__actions">
+            <a class="btn btn--primary" href="#live">
+              See it in action
+              <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
+            </a>
+            <a class="btn btn--ghost" href="https://github.com/geocine/custom-elements-ts">
+              <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="14" height="14"><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>
+              Source on GitHub
+            </a>
+          </div>
+          <div class="hero__meta">
+            <span><span class="ok">●</span>&nbsp; Works with any framework — or none</span>
+            <span><span class="ok">●</span>&nbsp; ~3 kB min+gzip runtime</span>
+            <span><span class="ok">●</span>&nbsp; Shadow DOM &amp; light DOM</span>
+          </div>
+        </div>
+      </section>
+      <!-- ─── Showcase: code preview + install ────────────────── -->
+      <section class="showcase" id="showcase">
+        <div class="container">
+          <div class="showcase__grid">
+            <article class="window" aria-label="Source for the install pill on the right">
+              <header class="window__bar">
+                <span class="window__dots" aria-hidden="true">
+                  <span></span><span></span><span></span>
+                </span>
+                <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>
+              </div>
+            </article>
+            <aside class="side-card" aria-label="Install custom-elements-ts">
+              <div class="side-card__head">
+                <div class="side-card__kicker">Install · live</div>
+                <h2 class="side-card__title">Click the pill — see the source.</h2>
+                <p class="side-card__sub">
+                  The component on the left <em>is</em> the component below.
+                  Click to copy, watch <code>cts:toast</code> fire.
+                </p>
+              </div>
+              <cts-message message="npm install custom-elements-ts"></cts-message>
+              <ul class="checks">
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Zero dependencies.</strong> Nothing hides under the hood.</span>
+                </li>
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Framework-free.</strong> Drop the same element into React, Vue, Svelte, or plain HTML.</span>
+                </li>
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Tiny surface area.</strong> Seven decorators is the whole API.</span>
+                </li>
+              </ul>
+              <div class="side-card__foot">
+                <a href="https://github.com/geocine/custom-elements-ts#readme">
+                  Read the full guide
+                  <svg class="arrow" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
+                </a>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </section>
+      <!-- ─── Live demos ─────────────────────────────────────── -->
+      <section class="live" id="live">
+        <div class="container">
+          <div class="live__head">
+            <div>
+              <span class="eyebrow"><span class="dot"></span> Live in your browser</span>
+              <h2 class="live__title">Two demos. Real components. Real events.</h2>
+            </div>
+            <p class="live__lede">
+              Each demo below is a custom element built with the same library you'd
+              <code>npm install</code>. The event log on the side is itself a
+              <code>render()</code> + <code>@State()</code> component — it subscribes
+              to the bubbling, composed <code>CustomEvent</code>s the demo dispatches.
+            </p>
+          </div>
+          <!-- Counter playground -->
+          <article class="playground playground--counter" aria-labelledby="demo-counter-title">
+            <header class="playground__head">
+              <div>
+                <span class="playground__kicker">Demo · 01</span>
+                <h3 id="demo-counter-title" class="playground__title">Counter — <code>@State()</code> + <code>@Dispatch()</code></h3>
+                <p class="playground__sub">
+                  A single-button card that owns an internal count, re-renders via the
+                  <code>html</code> tagged template, and fires <code>counter.change</code>
+                  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>
+            </header>
+            <div class="playground__body playground__body--split">
+              <div class="stage stage--counter">
+                <cts-counter></cts-counter>
+                <p class="stage__caption">
+                  Click the card. <code>@State() count</code> increments and
+                  re-renders the template; <code>@Watch('count')</code> emits
+                  the event picked up on the right.
+                </p>
+              </div>
+              <cts-event-log
+                class="playground__log"
+                label="counter.change"
+                events="counter.change"
+                empty="Click the counter to dispatch counter.change events."
+              ></cts-event-log>
+            </div>
+          </article>
+          <!-- Todo dashboard playground -->
+          <article class="playground playground--todo" aria-labelledby="demo-todo-title">
+            <header class="playground__head">
+              <div>
+                <span class="playground__kicker">Demo · 02</span>
+                <h3 id="demo-todo-title" class="playground__title">Sprint board — composition, deep state, custom events</h3>
+                <p class="playground__sub">
+                  Four cooperating elements: a parent dashboard that owns the source
+                  of truth, plus child stats, filters, and item rows that talk back
+                  through bubbling, composed events. Mutate a nested array — the
+                  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>
+            </header>
+            <div class="playground__body playground__body--stack">
+              <div class="stage stage--todo">
+                <cts-todo-dashboard heading="Sprint board"></cts-todo-dashboard>
+              </div>
+              <cts-event-log
+                class="playground__log playground__log--wide"
+                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>
+          </article>
+        </div>
+      </section>
+      <!-- ─── API at-a-glance ─────────────────────────────────── -->
+      <section class="api" id="api">
+        <div class="container">
+          <div class="api__head">
+            <div>
+              <span class="eyebrow"><span class="dot"></span> The API</span>
+              <h2 class="api__title">Seven decorators. That's the whole library.</h2>
+            </div>
+            <p class="api__lede">
+              Every decorator maps directly onto a built-in browser primitive —
+              attributes, properties, events, MutationObserver. No magic, no virtual DOM,
+              no compiler required.
+            </p>
+          </div>
+          <div class="api__grid">
+            <div class="api-card">
+              <div class="api-card__name">@CustomElement<span class="target">class</span></div>
+              <p class="api-card__desc">Registers the class as a native custom element with a tag, optional template, and styles.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Prop<span class="target">property</span></div>
+              <p class="api-card__desc">Reflects a primitive between attribute and property; passes objects and arrays through untouched.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@State<span class="target">property</span></div>
+              <p class="api-card__desc">Internal reactive state for <code>render()</code> components. Deeply proxied — mutate nested arrays and objects.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Toggle<span class="target">property</span></div>
+              <p class="api-card__desc">A boolean attribute that follows the W3C spec — present, "true", or "false".</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Watch<span class="target">method</span></div>
+              <p class="api-card__desc">Runs a method whenever a watched property changes — from either side of the bridge.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Listen<span class="target">method</span></div>
+              <p class="api-card__desc">Wires up DOM events on the host or on any selector inside the shadow tree.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Dispatch<span class="target">property</span></div>
+              <p class="api-card__desc">Declares a typed CustomEvent emitter — call <code>.emit()</code> to fire it with a payload.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <!-- ─── Footer ────────────────────────────────────────────── -->
+    <footer class="footer">
+      <div class="container footer__inner">
+        <span>MIT licensed · Maintained by Aivan Monceller &amp; contributors</span>
+        <span class="footer__links">
+          <a href="https://github.com/geocine/custom-elements-ts">GitHub</a>
+          <a href="https://www.npmjs.com/package/custom-elements-ts">npm</a>
+          <a href="https://github.com/geocine/custom-elements-ts/issues">Issues</a>
+          <a href="https://github.com/geocine/custom-elements-ts/blob/master/LICENSE">License</a>
+        </span>
+      </div>
+    </footer>
+    <!-- Toast notifications (the element subscribes to `cts:toast` document events) -->
+    <cts-toast></cts-toast>
+    <script src="//unpkg.com/prismjs@1.29.0/prism.js"></script>
+    <script src="//unpkg.com/prismjs@1.29.0/components/prism-typescript.min.js"></script>
+    <script src="//unpkg.com/@webcomponents/custom-elements/src/native-shim.js"></script>
+    <script src="//unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
+    <script src="site.umd.js"></script>
+  </body>
+</html>

package/demos/site/index.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// Site-only chrome / utility components.
+export * from './code-example/code-example.element';
+export * from './message/message.element';
+export * from './toast/toast.element';
+export * from './event-log/event-log.element';
+// Live demos hosted from sibling demo folders so visitors can interact
+// with the real components, not screenshots.
+export * from '../counter/counter.element';
+export * from '../todo-dashboard/todo-stats.element';
+export * from '../todo-dashboard/todo-filters.element';
+export * from '../todo-dashboard/todo-item.element';
+export * from '../todo-dashboard/todo-dashboard.element';

package/demos/site/message/message.element.scss ADDED Viewed

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  margin: 18px 22px 6px;
+  --bg: rgba(255, 255, 255, 0.025);
+  --bg-hover: rgba(255, 255, 255, 0.05);
+  --line: rgba(255, 255, 255, 0.10);
+  --line-hover: rgba(49, 120, 198, 0.45);
+  --fg: #e6ecf3;
+  --fg-prompt: #9cc0eb;
+  --fg-icon: #5b6370;
+  --fg-icon-hover: #9cc0eb;
+}
+.row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 14px;
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
+              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.row:hover {
+  background: var(--bg-hover);
+  border-color: var(--line-hover);
+}
+.row:active { transform: translateY(1px); }
+.row:focus-visible {
+  border-color: var(--line-hover);
+  box-shadow: 0 0 0 2px rgba(49, 120, 198, 0.45);
+}
+.prompt {
+  color: var(--fg-prompt);
+  font-weight: 600;
+  opacity: 0.95;
+}
+.cmd {
+  font-family: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  color: var(--fg-icon);
+  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.icon svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.row:hover .icon { color: var(--fg-icon-hover); }

package/demos/site/message/message.element.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import { CustomElement, Prop, Listen, Dispatch, DispatchEmitter } from 'custom-elements-ts';
+@CustomElement({
+  tag: 'cts-message',
+  template: `
+    <div class="row" role="button" tabindex="0" aria-label="Copy install command to clipboard">
+      <span class="prompt" aria-hidden="true">$</span>
+      <code class="cmd"></code>
+      <span class="icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="1"/>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+        </svg>
+      </span>
+    </div>
+  `,
+  styleUrl: './message.element.scss',
+})
+export class MessageElement extends HTMLElement {
+  @Prop() message!: string;
+  @Dispatch('cts:toast') toast!: DispatchEmitter;
+  @Listen('click')
+  async handleClick() {
+    const text = this.message ?? '';
+    let ok = true;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        ok = this.fallbackCopy(text);
+      }
+    } catch {
+      ok = false;
+    }
+    this.toast.emit({
+      bubbles: true,
+      composed: true,
+      detail: ok
+        ? { title: 'Copied to clipboard', message: text, kind: 'success' }
+        : { title: "Couldn't copy", message: 'Copy the command manually.', kind: 'error' },
+    });
+  }
+  @Listen('keydown')
+  handleKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleClick();
+    }
+  }
+  connectedCallback() {
+    const cmd = this.shadowRoot?.querySelector('.cmd');
+    if (cmd) cmd.textContent = this.message;
+  }
+  // Older browsers / non-secure contexts: fall back to the legacy copy path.
+  private fallbackCopy(text: string): boolean {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}

package/demos/site/og-image.png ADDED Viewed

Binary file