custom-elements-ts 0.0.17 → 0.2.0

package/demos/counter/counter.element.scss

@@ -0,0 +1,234 @@
+/* ─────────────────────────────────────────────────────────────
+   cts-counter
+   A single-button card showcasing @State(). Sharp radii, Geist
+   typography, TS-blue accent. Aligned with demos/site tokens.
+   ───────────────────────────────────────────────────────────── */
+
+:host {
+  --bg:            #0a0c10;
+  --bg-elev-1:     #11141a;
+  --line:          rgba(255, 255, 255, 0.06);
+  --line-strong:   rgba(255, 255, 255, 0.10);
+  --fg:            #e6ecf3;
+  --fg-muted:      #97a1ad;
+  --fg-subtle:     #5b6370;
+  --accent:        #3178c6;
+  --accent-bright: #4189d6;
+  --accent-fg:     #9cc0eb;
+  --accent-soft:   rgba(49, 120, 198, 0.14);
+  --accent-line:   rgba(49, 120, 198, 0.42);
+
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+
+  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
+  --dur-fast: 140ms;
+  --dur:      220ms;
+
+  display: inline-block;
+  color: var(--fg);
+  font-family:
+    "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* ── Card button ─────────────────────────────────────────── */
+
+.card {
+  position: relative;
+  display: grid;
+  gap: 18px;
+  width: 320px;
+  padding: 22px 24px 22px;
+  margin: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-lg);
+  background:
+    radial-gradient(120% 100% at 0% 0%, rgba(49, 120, 198, 0.07) 0%, transparent 55%),
+    linear-gradient(180deg, var(--bg-elev-1) 0%, #0f131b 100%);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 22px 50px -28px rgba(0, 0, 0, 0.65),
+    0 8px 24px -12px rgba(0, 0, 0, 0.45);
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+  animation: card-in 520ms var(--ease) both;
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--accent-line) 30%,
+    var(--accent-bright) 50%,
+    var(--accent-line) 70%,
+    transparent 100%
+  );
+  opacity: 0;
+  transform: translateX(-30%);
+  transition:
+    opacity var(--dur) var(--ease),
+    transform var(--dur-slow, 420ms) var(--ease);
+}
+
+.card:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.card:hover::before {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.card:focus-visible {
+  outline: none;
+  border-color: var(--accent-line);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 0 0 3px var(--accent-soft),
+    0 22px 50px -28px rgba(0, 0, 0, 0.65);
+}
+
+.card:active {
+  transform: translateY(1px);
+}
+
+@keyframes card-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Kicker ──────────────────────────────────────────────── */
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-muted);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.kicker-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent-line);
+}
+
+/* ── Display ─────────────────────────────────────────────── */
+
+.display {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0;
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 76px;
+  font-weight: 600;
+  line-height: 0.95;
+  letter-spacing: -0.045em;
+  font-variant-numeric: tabular-nums;
+}
+
+.display-mute {
+  color: var(--fg-subtle);
+  opacity: 0.35;
+}
+
+.display-num {
+  color: var(--fg);
+  background: linear-gradient(180deg, var(--fg) 0%, #c8d3e0 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* ── Hint row ────────────────────────────────────────────── */
+
+.hint {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+  color: var(--fg-muted);
+  font-size: 12px;
+  letter-spacing: -0.005em;
+}
+
+.hint-text {
+  color: var(--fg-muted);
+}
+
+.hint-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--accent-fg);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+
+.card:hover .hint-chip {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  transform: translateY(-1px);
+}
+
+.card:active .hint-chip {
+  transform: translateY(0);
+}
+
+/* ── Responsive ──────────────────────────────────────────── */
+
+@media (max-width: 380px) {
+  .card { width: 100%; }
+  .display { font-size: 64px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .card::before,
+  .hint-chip {
+    animation: none;
+    transition: none;
+  }
+}

package/demos/counter/counter.element.ts

@@ -0,0 +1,68 @@
+import {
+  CustomElement,
+  Dispatch,
+  DispatchEmitter,
+  State,
+  TemplateResult,
+  Watch,
+  html,
+} from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'cts-counter',
+  styleUrl: './counter.element.scss',
+})
+export class CounterElement extends HTMLElement {
+  @State() count = 0;
+
+  @Dispatch('counter.change') counterChange!: DispatchEmitter;
+
+  @Watch('count')
+  handleCountChange(change: { new: number }) {
+    this.counterChange.emit({
+      bubbles: true,
+      composed: true,
+      detail: {
+        count: change.new,
+      },
+    });
+  }
+
+  render(): TemplateResult {
+    const display = this.format(this.count);
+    return html`
+      <button class="card" type="button" @click=${this.increment}>
+        <span class="kicker">
+          <span class="kicker-dot"></span>
+          counter · @State()
+        </span>
+
+        <span class="display" aria-live="polite">
+          <span class="display-mute">${display.mute}</span
+          ><span class="display-num">${display.num}</span>
+        </span>
+
+        <span class="hint">
+          <span class="hint-text">tap anywhere to count</span>
+          <span class="hint-chip">+1</span>
+        </span>
+      </button>
+    `;
+  }
+
+  private increment() {
+    this.count++;
+  }
+
+  // Pad to at least 4 digits and split into a muted lead and a bright tail
+  // so the number reads like a stopwatch — e.g. 0042, 0420, 4200, 42000.
+  private format(value: number): { mute: string; num: string } {
+    const raw = String(value);
+    const padded = raw.length >= 4 ? raw : `${'0000'.slice(raw.length)}${raw}`;
+    const tail = padded.length - raw.length;
+    return {
+      mute: padded.slice(0, tail),
+      num: padded.slice(tail),
+    };
+  }
+}

package/demos/counter/index.html

@@ -0,0 +1,205 @@
+<!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" />
+    <title>Counter — 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;700&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: grid;
+        place-items: center;
+        padding: 32px 24px;
+        background:
+          radial-gradient(60% 50% at 50% -10%, rgba(49, 120, 198, 0.18) 0%, transparent 60%),
+          radial-gradient(40% 40% at 50% 110%, rgba(49, 120, 198, 0.1) 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 60% 60% at 50% 50%, #000 0%, transparent 75%);
+        -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 75%);
+        z-index: 0;
+      }
+
+      .stage {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        gap: 22px;
+        justify-items: center;
+      }
+
+      .corner {
+        position: fixed;
+        top: 24px;
+        left: 24px;
+        z-index: 2;
+        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;
+      }
+
+      .caption {
+        max-width: 320px;
+        margin: 0;
+        color: #5b6370;
+        font-size: 12px;
+        line-height: 1.55;
+        text-align: center;
+        text-wrap: balance;
+      }
+
+      .caption code {
+        padding: 1px 5px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.02);
+        color: #97a1ad;
+        font-family:
+          'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+      }
+
+      .observer {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 32px;
+        padding: 0 10px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.02);
+        color: #97a1ad;
+        font-family:
+          'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+        letter-spacing: 0.02em;
+      }
+
+      .observer output {
+        color: #9cc0eb;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+      }
+
+      cts-counter {
+        position: relative;
+        z-index: 1;
+      }
+
+      @media (max-width: 380px) {
+        .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 · counter demo
+    </a>
+
+    <div class="stage">
+      <cts-counter></cts-counter>
+      <div class="observer" aria-live="polite">
+        <span>counter.change</span>
+        <output id="counter-signal">0</output>
+      </div>
+      <p class="caption">
+        Click the card. The element owns <code>@State()</code> and emits
+        <code>counter.change</code> for outside consumers.
+      </p>
+    </div>
+
+    <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="counter.umd.js"></script>
+    <script>
+      const counter = document.querySelector('cts-counter');
+      const signal = document.querySelector('#counter-signal');
+
+      counter.addEventListener('counter.change', (event) => {
+        signal.value = event.detail.count;
+      });
+    </script>
+  </body>
+</html>
+<!-- livereload -->

package/demos/counter/index.ts

@@ -0,0 +1 @@
+export * from './counter.element';

package/demos/site/code-example/code-example.element.scss

@@ -0,0 +1,168 @@
+/* Lives inside <article class="window">; the chrome owns background + radius. */
+
+:host {
+  display: block;
+  padding: 22px 26px 26px;
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: #d6dce5;
+  background: transparent;
+  overflow-x: auto;
+  max-height: 520px;
+  -webkit-font-smoothing: antialiased;
+
+  @media (min-width: 980px) {
+    font-size: 14px;
+    padding: 28px 32px 32px;
+  }
+
+  /* Custom scrollbar so the code area doesn't ship a chunky default bar */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.10);
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-track { background: transparent; }
+}
+
+pre,
+pre[class*="language-"] {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-shadow: none;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+  hyphens: none;
+  overflow: visible;
+}
+
+code,
+code[class*="language-"] {
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-shadow: none;
+  white-space: pre;
+}
+
+/* ─── Prism token theme — VS Code "Dark Modern" inspired, TS blue led ─── */
+
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: #6e7681;
+    font-style: italic;
+  }
+
+  &.punctuation {
+    color: #c9d1d9;
+  }
+
+  /* identifier-blue — properties, tags, attribute-name (e.g. tag:, template:) */
+  &.property,
+  &.tag,
+  &.attr-name {
+    color: #9cdcfe;
+  }
+
+  /* TS-blue — keywords (import, export, class, extends, new) */
+  &.keyword,
+  &.boolean {
+    color: #4189d6;
+  }
+
+  /* teal — class names, types */
+  &.class-name {
+    color: #4ec9b0;
+  }
+
+  &.constant,
+  &.symbol {
+    color: #4189d6;
+  }
+
+  /* light green — numbers */
+  &.number {
+    color: #b5cea8;
+  }
+
+  /* warm muted — strings (the only "warm" color, used sparingly) */
+  &.string,
+  &.char,
+  &.attr-value,
+  &.builtin,
+  &.inserted {
+    color: #ce9178;
+  }
+
+  /* selectors stay muted */
+  &.selector {
+    color: #d7ba7d;
+  }
+
+  &.variable {
+    color: #d6dce5;
+  }
+
+  &.operator,
+  &.entity {
+    color: #d6dce5;
+  }
+
+  &.url {
+    color: #4189d6;
+    text-decoration: underline;
+  }
+
+  &.atrule {
+    color: #c586c0;
+  }
+
+  /* function names — soft cream so they don't fight the blues */
+  &.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;
+}