custom-elements-ts 0.0.17 → 0.2.0

package/demos/site/styles/tokens.css

@@ -0,0 +1,56 @@
+/* ─────────────────────────────────────────────────────────────
+   Design tokens
+   Single source of truth for color, type, radius, motion.
+   ───────────────────────────────────────────────────────────── */
+
+:root {
+  /* Surfaces — cool off-black tinted toward blue, never pure #000 */
+  --bg:            #0a0c10;
+  --bg-elev-1:     #11141a;
+  --bg-elev-2:     #161a22;
+  --bg-elev-3:     #1c2230;
+
+  /* Lines */
+  --line:          rgba(255, 255, 255, 0.06);
+  --line-strong:   rgba(255, 255, 255, 0.10);
+  --line-accent:   rgba(49, 120, 198, 0.32);
+
+  /* Type */
+  --fg:            #e6ecf3;
+  --fg-muted:      #97a1ad;
+  --fg-subtle:     #5b6370;
+
+  /* Accent — TypeScript brand blue. One color, used sparingly. */
+  --accent:        #3178c6;            /* canonical TS logo blue       */
+  --accent-bright: #4189d6;            /* hover / focus                */
+  --accent-fg:     #9cc0eb;            /* legible accent on dark bg    */
+  --accent-soft:   rgba(49, 120, 198, 0.14);
+  --accent-line:   rgba(49, 120, 198, 0.42);
+
+  /* Status — kept neutral (no second hue competing with the accent) */
+  --ok:            var(--accent-fg);
+  --ok-soft:       var(--accent-soft);
+
+  /* Type scale */
+  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
+               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+
+  /* Radii — minimal. Sharp, technical, editorial. */
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 4px;
+
+  /* Motion */
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --dur-fast: 140ms;
+  --dur: 220ms;
+  --dur-slow: 420ms;
+
+  /* Container */
+  --container: 1180px;
+  --gutter: clamp(20px, 4vw, 40px);
+}

package/demos/site/toast/toast.element.scss

@@ -0,0 +1,110 @@
+:host {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+  pointer-events: none;
+  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
+               "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.toast {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  gap: 12px;
+  min-width: 280px;
+  max-width: 380px;
+  padding: 13px 18px 13px 13px;
+  background: linear-gradient(180deg, #181d27 0%, #11141a 100%);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 4px;
+  color: #e6ecf3;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 16px 40px -16px rgba(0, 0, 0, 0.65),
+    0 4px 10px -4px rgba(0, 0, 0, 0.45);
+
+  /* Hidden state — slide up + fade in on enter */
+  opacity: 0;
+  transform: translateY(12px) scale(0.985);
+  transition:
+    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  pointer-events: auto;
+  will-change: transform, opacity;
+}
+
+.toast[data-show] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.bar {
+  width: 3px;
+  align-self: stretch;
+  background: #3178c6;
+  border-radius: 2px;
+}
+.toast[data-kind="error"] .bar { background: #f47067; }
+.toast[data-kind="info"]  .bar { background: #9cc0eb; }
+
+.icon {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  color: #9cc0eb;
+}
+.toast[data-kind="error"] .icon { color: #f47067; }
+
+.icon svg {
+  width: 16px;
+  height: 16px;
+  display: none;
+}
+.toast[data-kind="success"] .icon-success,
+.toast[data-kind="info"]    .icon-success { display: block; }
+.toast[data-kind="error"]   .icon-error   { display: block; }
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #e6ecf3;
+  letter-spacing: -0.005em;
+}
+
+.msg {
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  color: #97a1ad;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 540px) {
+  :host {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+  .toast { max-width: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    transition: opacity 120ms linear;
+    transform: none;
+  }
+  .toast[data-show] { transform: none; }
+}

package/demos/site/toast/toast.element.ts

@@ -0,0 +1,63 @@
+import { CustomElement } from 'custom-elements-ts';
+
+interface ToastDetail {
+  title: string;
+  message?: string;
+  kind?: 'success' | 'error' | 'info';
+}
+
+@CustomElement({
+  tag: 'cts-toast',
+  template: `
+    <div class="toast" role="status" aria-live="polite" aria-atomic="true">
+      <span class="bar" aria-hidden="true"></span>
+      <span class="icon" aria-hidden="true">
+        <svg class="icon-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+        <svg class="icon-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </span>
+      <div class="body">
+        <strong class="title"></strong>
+        <span class="msg"></span>
+      </div>
+    </div>
+  `,
+  styleUrl: './toast.element.scss',
+})
+export class ToastElement extends HTMLElement {
+  private timer: number | undefined;
+  private handler = (e: Event) => this.show((e as CustomEvent<ToastDetail>).detail);
+
+  connectedCallback() {
+    document.addEventListener('cts:toast', this.handler);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('cts:toast', this.handler);
+    if (this.timer) window.clearTimeout(this.timer);
+  }
+
+  show(detail: ToastDetail) {
+    if (!detail || !this.shadowRoot) return;
+    const root = this.shadowRoot;
+    const toast = root.querySelector('.toast') as HTMLElement;
+    const titleEl = root.querySelector('.title') as HTMLElement;
+    const msgEl = root.querySelector('.msg') as HTMLElement;
+
+    titleEl.textContent = detail.title || '';
+    msgEl.textContent = detail.message || '';
+    toast.dataset.kind = detail.kind || 'success';
+
+    // Re-trigger the entry transition cleanly
+    delete toast.dataset.show;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        toast.dataset.show = '';
+      });
+    });
+
+    if (this.timer) window.clearTimeout(this.timer);
+    this.timer = window.setTimeout(() => {
+      delete toast.dataset.show;
+    }, 2800);
+  }
+}

package/demos/todo-dashboard/index.html

@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <base href="/" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <meta name="theme-color" content="#0a0c10" />
+    <meta name="description" content="Demo of cts-todo-dashboard — a custom element built with custom-elements-ts." />
+    <title>Taskboard — custom-elements-ts demo</title>
+
+    <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"
+    />
+
+    <style>
+      :root {
+        --bg: #0a0c10;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        background: var(--bg);
+        color: #e6ecf3;
+      }
+
+      body {
+        position: relative;
+        min-height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 80px 24px 64px;
+        background:
+          radial-gradient(60% 50% at 18% -10%, rgba(49, 120, 198, 0.18) 0%, transparent 60%),
+          radial-gradient(50% 40% at 90% 110%, rgba(49, 120, 198, 0.10) 0%, transparent 60%),
+          var(--bg);
+        font-family:
+          'Geist',
+          'Inter',
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        overflow-x: hidden;
+      }
+
+      body::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        background-image:
+          linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+        background-size: 56px 56px;
+        mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
+        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
+        z-index: 0;
+      }
+
+      cts-todo-dashboard {
+        position: relative;
+        z-index: 1;
+      }
+
+      .corner {
+        position: fixed;
+        top: 24px;
+        left: 24px;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        color: #97a1ad;
+        font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular,
+                     Menlo, Consolas, monospace;
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        text-decoration: none;
+      }
+
+      .corner svg {
+        color: #3178c6;
+      }
+
+      .corner:hover {
+        color: #e6ecf3;
+      }
+
+      @media (max-width: 560px) {
+        body {
+          padding: 64px 16px 32px;
+        }
+        .corner {
+          top: 16px;
+          left: 16px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <a class="corner" href="https://github.com/geocine/custom-elements-ts">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        width="14"
+        height="14"
+        aria-hidden="true"
+      >
+        <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>
+      custom-elements-ts · taskboard demo
+    </a>
+
+    <cts-todo-dashboard heading="Sprint board"></cts-todo-dashboard>
+
+    <script src="node_modules/@webcomponents/custom-elements/src/native-shim.js"></script>
+    <script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+    <script src="todo-dashboard.umd.js"></script>
+  </body>
+</html>
+<!-- livereload -->

package/demos/todo-dashboard/index.ts

@@ -0,0 +1,4 @@
+export * from './todo-stats.element';
+export * from './todo-filters.element';
+export * from './todo-item.element';
+export * from './todo-dashboard.element';