@luisrodonccs/simplest-ui 0.0.0-stage → 0.1.0

package/dist/tabs.js

@@ -0,0 +1,253 @@
+import { css as h, LitElement as p, html as u } from "lit";
+import { property as b, state as v, customElement as f } from "lit/decorators.js";
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? m(e, s) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (a ? o(e, s, i) : o(i)) || i);
+  return a && i && g(e, s, i), i;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.uid = ++l.instanceCount, this.value = "", this.variant = "pill", this.tabs = [], this.lastSignature = "", this.labelObserver = new MutationObserver(() => this.collectTabs()), this.handleSlotChange = () => {
+      this.collectTabs();
+    }, this.handleKeydown = (t) => {
+      const e = this.tabs.map((n, c) => n.disabled ? -1 : c).filter((n) => n >= 0);
+      if (!e.length) return;
+      const s = Math.max(this.selectedIndex, 0), a = e.indexOf(s), i = a >= 0 ? a : 0;
+      let r = i;
+      switch (t.key) {
+        case "ArrowRight":
+          r = (i + 1) % e.length;
+          break;
+        case "ArrowLeft":
+          r = (i - 1 + e.length) % e.length;
+          break;
+        case "Home":
+          r = 0;
+          break;
+        case "End":
+          r = e.length - 1;
+          break;
+        default:
+          return;
+      }
+      t.preventDefault();
+      const o = e[r];
+      this.select(this.tabs[o].id), this.updateComplete.then(() => {
+        var n;
+        (n = this.renderRoot.querySelectorAll(".tabs-pill")[o]) == null || n.focus();
+      });
+    };
+  }
+  get selectedIndex() {
+    return this.tabs.findIndex((t) => t.id === this.value);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.labelObserver.observe(this, { attributes: !0, attributeFilter: ["label"], subtree: !0 }), this.collectTabs(), queueMicrotask(() => {
+      this.isConnected && this.collectTabs();
+    });
+  }
+  disconnectedCallback() {
+    this.labelObserver.disconnect(), super.disconnectedCallback();
+  }
+  willUpdate(t) {
+    if (!t.has("value")) return;
+    const e = this.tabs.filter((a) => !a.disabled);
+    if (!e.length) return;
+    const s = this.tabs.find((a) => a.id === this.value);
+    if (!s || s.disabled) {
+      this.value = e[0].id;
+      return;
+    }
+    this.tabs.some((a) => a.id === this.value) || (this.value = e[0].id);
+  }
+  updated(t) {
+    t.has("value") && this.applySelection();
+  }
+  collectTabs() {
+    var s;
+    const t = Array.from(this.children).filter(
+      (a) => a instanceof HTMLElement && a.hasAttribute("data-tab")
+    ), e = t.map((a) => `${a.getAttribute("data-tab")}|${a.getAttribute("label")}|${a.hasAttribute("disabled")}`).join("~");
+    if (e === this.lastSignature) {
+      this.applySelection();
+      return;
+    }
+    this.lastSignature = e, this.tabs = t.map((a, i) => {
+      const r = a.getAttribute("data-tab") ?? String(i);
+      return a.id || (a.id = `sui-tabpanel-${this.uid}-${i}`), a.setAttribute("role", "tabpanel"), {
+        id: r,
+        label: a.getAttribute("label") ?? r,
+        panel: a,
+        disabled: a.hasAttribute("disabled")
+      };
+    }), (!this.value || !this.tabs.some((a) => a.id === this.value)) && (this.value = ((s = this.tabs[0]) == null ? void 0 : s.id) ?? ""), this.applySelection(), this.setAttribute("data-ready", "");
+  }
+  applySelection() {
+    for (const t of this.tabs)
+      t.panel.hidden = t.id !== this.value;
+  }
+  select(t) {
+    const e = this.tabs.find((s) => s.id === t);
+    !e || e.disabled || this.value === t || (this.value = t, this.dispatchEvent(
+      new CustomEvent("sui-change", { detail: { value: t }, bubbles: !0, composed: !0 })
+    ));
+  }
+  tabId(t) {
+    return `sui-tab-${this.uid}-${t}`;
+  }
+  render() {
+    return u`
+      <div
+        class="list"
+        role="tablist"
+        aria-orientation="horizontal"
+        @keydown=${this.handleKeydown}
+      >
+        ${this.tabs.map((t, e) => {
+      const s = t.id === this.value;
+      return u`
+            <button
+              class="tabs-pill"
+              type="button"
+              role="tab"
+              id=${this.tabId(e)}
+              aria-selected=${s ? "true" : "false"}
+              aria-disabled=${t.disabled ? "true" : "false"}
+              ?disabled=${t.disabled}
+              tabindex=${s && !t.disabled ? 0 : -1}
+              @click=${() => this.select(t.id)}
+            >${t.label}</button>
+          `;
+    })}
+      </div>
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+  }
+};
+l.instanceCount = 0;
+l.styles = h`
+    :host {
+      display: block;
+    }
+    .list {
+      display: flex;
+      gap: var(--sui-space-1);
+      background: var(--sui-color-surface-raised);
+      border: 1px solid var(--sui-color-border);
+      border-radius: var(--sui-radius-full);
+      padding: var(--sui-space-1);
+      width: fit-content;
+      max-width: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      backdrop-filter: blur(var(--sui-blur-sm));
+      -webkit-backdrop-filter: blur(var(--sui-blur-sm));
+    }
+    .list::-webkit-scrollbar {
+      display: none;
+    }
+    .tabs-pill {
+      padding: var(--sui-space-1-5) var(--sui-space-3-5);
+      font-size: var(--sui-font-size-xs);
+      font-weight: var(--sui-font-weight-medium);
+      color: var(--sui-color-text-muted);
+      background: transparent;
+      border: 0;
+      border-radius: var(--sui-radius-full);
+      cursor: pointer;
+      transition: background var(--sui-duration-fast) var(--sui-easing-standard),
+                  color var(--sui-duration-fast) var(--sui-easing-standard),
+                  filter var(--sui-duration-fast) var(--sui-easing-standard);
+    }
+    .tabs-pill:hover {
+      color: var(--sui-color-text);
+    }
+    .tabs-pill[aria-selected="true"] {
+      background: var(--sui-gradient-primary);
+      color: var(--sui-color-primary-contrast);
+    }
+    .tabs-pill[aria-selected="true"]:hover {
+      background: var(--sui-gradient-primary-hover);
+    }
+    .tabs-pill:focus-visible {
+      outline: none;
+      box-shadow: var(--sui-focus-ring);
+    }
+    .tabs-pill:disabled,
+    .tabs-pill[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([variant="box"]) .list {
+      background: var(--sui-color-surface-muted);
+      border: 1px solid var(--sui-color-border);
+      border-radius: var(--sui-radius-lg);
+      padding: var(--sui-space-0-5);
+      gap: var(--sui-space-0-5);
+      width: fit-content;
+    }
+
+    :host([variant="box"]) .tabs-pill {
+      min-height: 2rem;
+      padding: 0 var(--sui-space-2);
+      color: var(--sui-color-text-muted);
+      background: transparent;
+      border: 0;
+      border-radius: var(--sui-radius-md);
+      font-size: var(--sui-font-size-xs);
+    }
+
+    :host([variant="box"]) .tabs-pill:hover {
+      color: var(--sui-color-text);
+    }
+
+    :host([variant="box"]) .tabs-pill[aria-selected="true"] {
+      color: var(--sui-color-primary-text);
+      background: var(--sui-color-surface-raised);
+      box-shadow: var(--sui-shadow-sm);
+    }
+
+    :host([variant="box"]) .tabs-pill[aria-selected="true"]:hover {
+      background: var(--sui-color-surface-raised);
+    }
+
+    :host([variant="box"]) .tabs-pill:disabled,
+    :host([variant="box"]) .tabs-pill[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([variant="box"]) ::slotted([data-tab]) {
+      display: none;
+      margin: 0;
+    }
+    :host(:not([data-ready])) ::slotted([data-tab]) {
+      display: none;
+    }
+    ::slotted([data-tab]) {
+      display: block;
+      margin-top: var(--sui-space-3);
+      padding: var(--sui-space-1) var(--sui-space-0-5);
+      font-size: var(--sui-font-size-sm);
+      color: var(--sui-color-text-muted);
+    }
+    ::slotted([data-tab][hidden]) {
+      display: none;
+    }
+  `;
+d([
+  b({ type: String })
+], l.prototype, "value", 2);
+d([
+  b({ type: String })
+], l.prototype, "variant", 2);
+d([
+  v()
+], l.prototype, "tabs", 2);
+l = d([
+  f("sui-tabs")
+], l);
+export {
+  l as SuiTabs
+};

package/dist/toast.js

@@ -0,0 +1,61 @@
+class r extends HTMLElement {
+  constructor() {
+    super(...arguments), this.generated = !1;
+  }
+  static get observedAttributes() {
+    return ["title", "message", "variant", "duration"];
+  }
+  get duration() {
+    const t = Number(this.getAttribute("duration") ?? 5e3);
+    return Number.isFinite(t) ? Math.max(0, t) : 5e3;
+  }
+  connectedCallback() {
+    this.classList.add("ui-toast"), this.setAttribute("role", this.getAttribute("role") ?? "status"), this.setAttribute("aria-live", this.getAttribute("aria-live") ?? "polite"), this.render(), this.scheduleDismiss();
+  }
+  disconnectedCallback() {
+    window.clearTimeout(this.dismissTimer);
+  }
+  attributeChangedCallback() {
+    this.isConnected && (this.render(), this.scheduleDismiss());
+  }
+  dismiss() {
+    window.clearTimeout(this.dismissTimer), this.dispatchEvent(new CustomEvent("sui-dismiss", { bubbles: !0, composed: !0 })), this.remove();
+  }
+  render() {
+    const t = this.getAttribute("variant") ?? "default";
+    if (this.className = `ui-toast${t !== "default" ? ` ui-toast--${t}` : ""}`, !this.getAttribute("title")) {
+      this.generated && this.replaceChildren();
+      return;
+    }
+    if (this.children.length && !this.generated) return;
+    this.generated && this.replaceChildren();
+    const i = document.createElement("div"), e = document.createElement("div");
+    e.className = "ui-toast__title", e.textContent = this.getAttribute("title"), i.append(e), this.generated = !0;
+    const a = this.getAttribute("message");
+    if (a) {
+      const s = document.createElement("div");
+      s.className = "ui-toast__body", s.textContent = a, i.append(s);
+    }
+    this.append(i);
+  }
+  scheduleDismiss() {
+    window.clearTimeout(this.dismissTimer), this.duration > 0 && (this.dismissTimer = window.setTimeout(() => this.dismiss(), this.duration));
+  }
+  static show(t) {
+    let i = document.querySelector("sui-toast-container");
+    i || (i = document.createElement("sui-toast-container"), document.body.append(i));
+    const e = document.createElement("sui-toast");
+    return e.setAttribute("title", t.title), t.message && e.setAttribute("message", t.message), t.variant && t.variant !== "default" && e.setAttribute("variant", t.variant), t.duration !== void 0 && e.setAttribute("duration", String(t.duration)), i.append(e), e;
+  }
+}
+class u extends HTMLElement {
+  connectedCallback() {
+    this.classList.add("ui-toast-container"), this.setAttribute("aria-live", this.getAttribute("aria-live") ?? "polite"), this.setAttribute("aria-relevant", "additions");
+  }
+}
+customElements.get("sui-toast") || customElements.define("sui-toast", r);
+customElements.get("sui-toast-container") || customElements.define("sui-toast-container", u);
+export {
+  r as SuiToast,
+  u as SuiToastContainer
+};

package/dist/tokens.css

@@ -0,0 +1 @@
+:root{color-scheme:light;--sui-color-primary: #6366f1;--sui-color-primary-hover: #4f46e5;--sui-color-primary-active: #4338ca;--sui-color-primary-text: #4338ca;--sui-color-primary-contrast: #ffffff;--sui-color-secondary: #ec4899;--sui-color-secondary-hover: #db2777;--sui-color-success: #059669;--sui-color-warning: #d97706;--sui-color-danger: #dc2626;--sui-color-info: #6366f1;--sui-color-success-surface: #ecfdf5;--sui-color-success-text: #065f46;--sui-color-success-border: #a7f3d0;--sui-color-warning-surface: #fffbeb;--sui-color-warning-text: #92400e;--sui-color-warning-border: #fde68a;--sui-color-danger-surface: #fef2f2;--sui-color-danger-surface-hover: #fee2e2;--sui-color-danger-text: #991b1b;--sui-color-danger-border: #fecaca;--sui-color-danger-ring: rgba(220, 38, 38, .12);--sui-color-info-surface: #eef2ff;--sui-color-info-text: #3730a3;--sui-color-info-border: rgba(99, 102, 241, .25);--sui-color-bg: #f5f6ff;--sui-gradient-page: linear-gradient(120deg, #eef2ff, #fce7f3);--sui-gradient-primary: linear-gradient(135deg, var(--sui-color-primary-hover), var(--sui-color-secondary-hover));--sui-gradient-primary-hover: linear-gradient(135deg, var(--sui-color-primary-active), #be185d);--sui-gradient-sidebar: linear-gradient(180deg, rgba(99, 102, 241, .06), rgba(236, 72, 153, .04));--sui-color-surface: rgba(255, 255, 255, .65);--sui-color-surface-muted: #f6f7fb;--sui-color-surface-raised: rgba(255, 255, 255, .85);--sui-color-text: #1f2937;--sui-color-text-muted: #6b7280;--sui-color-text-subtle: #9ca3af;--sui-color-border: rgba(99, 102, 241, .12);--sui-color-border-strong: rgba(99, 102, 241, .25);--sui-color-inverse-surface: #1f2937;--sui-color-inverse-text: #ffffff;--sui-color-control-knob: #ffffff;--sui-color-backdrop: rgb(31 41 55 / .35);--sui-color-focus: #6366f1;--sui-focus-ring: 0 0 0 3px rgba(99, 102, 241, .15);--sui-scrollbar-size: .65rem;--sui-scrollbar-track: transparent;--sui-scrollbar-thumb: var(--sui-color-border-strong);--sui-scrollbar-thumb-hover: var(--sui-color-text-subtle)}[data-theme=dark]{color-scheme:dark;--sui-color-primary: #818cf8;--sui-color-primary-hover: #6366f1;--sui-color-primary-active: #4f46e5;--sui-color-primary-text: #c7d2fe;--sui-color-primary-contrast: #ffffff;--sui-color-secondary: #f472b6;--sui-color-secondary-hover: #ec4899;--sui-color-success: #34d399;--sui-color-warning: #fbbf24;--sui-color-danger: #f87171;--sui-color-info: #818cf8;--sui-color-success-surface: rgba(5, 150, 105, .2);--sui-color-success-text: #a7f3d0;--sui-color-success-border: rgba(5, 150, 105, .35);--sui-color-warning-surface: rgba(217, 119, 6, .14);--sui-color-warning-text: #fcd34d;--sui-color-warning-border: rgba(217, 119, 6, .35);--sui-color-danger-surface: rgba(220, 38, 38, .2);--sui-color-danger-surface-hover: rgba(220, 38, 38, .28);--sui-color-danger-text: #fecaca;--sui-color-danger-border: rgba(220, 38, 38, .35);--sui-color-danger-ring: rgba(248, 113, 113, .2);--sui-color-info-surface: rgba(99, 102, 241, .22);--sui-color-info-text: #e0e7ff;--sui-color-info-border: rgba(99, 102, 241, .4);--sui-color-bg: #0b1020;--sui-gradient-page: linear-gradient(120deg, #0f172a, #1e1b4b 60%, #3b0d2a);--sui-gradient-primary: linear-gradient(135deg, var(--sui-color-primary), var(--sui-color-secondary));--sui-gradient-primary-hover: linear-gradient(135deg, #a5b4fc, #f9a8d4);--sui-gradient-sidebar: linear-gradient(180deg, rgba(129, 140, 248, .08), rgba(244, 114, 182, .05));--sui-color-surface: rgba(17, 24, 39, .6);--sui-color-surface-muted: #111827;--sui-color-surface-raised: rgba(31, 41, 55, .7);--sui-color-text: #f9fafb;--sui-color-text-muted: #d1d5db;--sui-color-text-subtle: #9ca3af;--sui-color-border: rgba(99, 102, 241, .2);--sui-color-border-strong: rgba(99, 102, 241, .35);--sui-color-inverse-surface: #f9fafb;--sui-color-inverse-text: #111827;--sui-color-control-knob: #ffffff;--sui-color-backdrop: rgb(0 0 0 / .5);--sui-color-focus: #818cf8;--sui-focus-ring: 0 0 0 3px rgba(129, 140, 248, .2);--sui-scrollbar-thumb: var(--sui-color-border-strong);--sui-scrollbar-thumb-hover: var(--sui-color-text-muted)}:root{--sui-space-0: 0;--sui-space-0-5: .125rem;--sui-space-1: .25rem;--sui-space-1-5: .375rem;--sui-space-2: .5rem;--sui-space-2-5: .625rem;--sui-space-3: .75rem;--sui-space-3-5: .875rem;--sui-space-4: 1rem;--sui-space-4-5: 1.125rem;--sui-space-5: 1.25rem;--sui-space-5-5: 1.375rem;--sui-space-6: 1.5rem;--sui-space-8: 2rem;--sui-space-10: 2.5rem;--sui-space-12: 3rem;--sui-space-16: 4rem;--sui-sidebar-width: 240px;--sui-control-height-sm: 28px;--sui-control-height-md: 36px;--sui-field-height: 38px;--sui-check-size: 16px;--sui-container-sm: 640px;--sui-container-md: 768px;--sui-container-lg: 1024px;--sui-container-xl: 1280px}:root{--sui-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--sui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--sui-font-size-3xs: .625rem;--sui-font-size-2xs: .6875rem;--sui-font-size-xs: .75rem;--sui-font-size-sm: .8125rem;--sui-font-size-md: .875rem;--sui-font-size-base: 1rem;--sui-font-size-lg: 1.125rem;--sui-font-size-xl: 1.25rem;--sui-font-size-2xl: 1.5rem;--sui-font-size-3xl: 1.875rem;--sui-font-weight-normal: 400;--sui-font-weight-medium: 500;--sui-font-weight-semibold: 600;--sui-font-weight-bold: 700;--sui-line-height-tight: 1.25;--sui-line-height-normal: 1.5;--sui-line-height-relaxed: 1.75;--sui-letter-spacing-tight: -.02em;--sui-letter-spacing-normal: 0;--sui-letter-spacing-wide: .04em}:root{--sui-radius-none: 0;--sui-radius-xs: .375rem;--sui-radius-sm: .5rem;--sui-radius-md: .625rem;--sui-radius-lg: .75rem;--sui-radius-xl: .875rem;--sui-radius-2xl: 1rem;--sui-radius-full: 999px}:root{--sui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--sui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--sui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--sui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--sui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--sui-shadow-card: 0 8px 30px rgba(99, 102, 241, .08);--sui-shadow-card-hover: 0 12px 40px rgba(99, 102, 241, .12);--sui-shadow-floating: 0 8px 30px rgba(99, 102, 241, .12);--sui-shadow-menu: 0 10px 30px rgba(99, 102, 241, .12);--sui-shadow-modal: 0 20px 60px rgba(99, 102, 241, .18);--sui-shadow-drawer: -8px 0 30px rgba(99, 102, 241, .12)}[data-theme=dark]{--sui-shadow-card: 0 8px 30px rgb(0 0 0 / .35);--sui-shadow-card-hover: 0 12px 40px rgb(0 0 0 / .45);--sui-shadow-floating: 0 8px 30px rgb(0 0 0 / .45);--sui-shadow-menu: 0 10px 30px rgb(0 0 0 / .5);--sui-shadow-modal: 0 20px 60px rgb(0 0 0 / .55);--sui-shadow-drawer: -8px 0 30px rgb(0 0 0 / .5)}:root{--sui-duration-fast: .12s;--sui-duration-normal: .2s;--sui-duration-slow: .32s;--sui-duration-spinner: .7s;--sui-duration-shimmer: 1.4s;--sui-duration-progress: 1.2s;--sui-easing-standard: cubic-bezier(.2, 0, 0, 1);--sui-easing-emphasized: cubic-bezier(.2, 0, 0, 1.2)}@media (prefers-reduced-motion: reduce){:root{--sui-duration-fast: 0ms;--sui-duration-normal: 0ms;--sui-duration-slow: 0ms;--sui-duration-spinner: 0ms;--sui-duration-shimmer: 0ms;--sui-duration-progress: 0ms}}:root{--sui-blur-sm: 8px;--sui-blur-md: 12px;--sui-blur-lg: 16px;--sui-blur-backdrop: 6px;--sui-z-popover: 50;--sui-z-dropdown: 100;--sui-z-drawer-backdrop: 60;--sui-z-drawer: 61;--sui-z-modal: 1000;--sui-z-toast: 1100}

package/dist/tooltip.js

@@ -0,0 +1,27 @@
+const e = class e extends HTMLElement {
+  constructor() {
+    super(...arguments), this.uid = ++e.instanceCount;
+  }
+  static get observedAttributes() {
+    return ["content"];
+  }
+  connectedCallback() {
+    this.classList.add("ui-tooltip"), this.upgrade();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this.upgrade();
+  }
+  upgrade() {
+    let t = this.querySelector("[slot='content'], .ui-tooltip__content");
+    if (!t && this.getAttribute("content") && (t = document.createElement("span"), t.textContent = this.getAttribute("content"), this.append(t)), !t) return;
+    t.classList.add("ui-tooltip__content"), t.setAttribute("role", "tooltip"), t.id || (t.id = `sui-tooltip-${this.uid}`);
+    const s = this.querySelector("[slot='trigger'], button, a, input, [tabindex]") ?? this;
+    s === this && !this.hasAttribute("tabindex") && (this.tabIndex = 0), s.setAttribute("aria-describedby", t.id);
+  }
+};
+e.instanceCount = 0;
+let i = e;
+customElements.get("sui-tooltip") || customElements.define("sui-tooltip", i);
+export {
+  i as SuiTooltip
+};

package/package.json

@@ -1,6 +1,138 @@
-{
-  "name": "@luisrodonccs/simplest-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@luisrodonccs/simplest-ui",
+  "version": "0.1.0",
+  "description": "Framework-agnostic design system with CSS tokens, layouts, and accessible Web Components.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./reset.css": "./dist/reset.css",
+    "./base.css": "./dist/base.css",
+    "./components.css": "./dist/components.css",
+    "./styles.css": "./dist/styles.css",
+    "./components/accordion.css": "./dist/components/accordion.css",
+    "./components/alert.css": "./dist/components/alert.css",
+    "./components/avatar.css": "./dist/components/avatar.css",
+    "./components/badge.css": "./dist/components/badge.css",
+    "./components/button.css": "./dist/components/button.css",
+    "./components/card.css": "./dist/components/card.css",
+    "./components/checkbox.css": "./dist/components/checkbox.css",
+    "./components/empty-state.css": "./dist/components/empty-state.css",
+    "./components/input.css": "./dist/components/input.css",
+    "./components/nav.css": "./dist/components/nav.css",
+    "./components/popover.css": "./dist/components/popover.css",
+    "./components/progress.css": "./dist/components/progress.css",
+    "./components/radio.css": "./dist/components/radio.css",
+    "./components/select.css": "./dist/components/select.css",
+    "./components/skeleton.css": "./dist/components/skeleton.css",
+    "./components/spinner.css": "./dist/components/spinner.css",
+    "./components/stat.css": "./dist/components/stat.css",
+    "./components/switch.css": "./dist/components/switch.css",
+    "./components/table.css": "./dist/components/table.css",
+    "./components/textarea.css": "./dist/components/textarea.css",
+    "./components/toast.css": "./dist/components/toast.css",
+    "./components/tooltip.css": "./dist/components/tooltip.css",
+    "./components/topbar.css": "./dist/components/topbar.css",
+    "./components.js": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components.js"
+    },
+    "./components/accordion": {
+      "types": "./dist/components/accordion.d.ts",
+      "import": "./dist/accordion.js"
+    },
+    "./components/dropdown": {
+      "types": "./dist/components/dropdown.d.ts",
+      "import": "./dist/dropdown.js"
+    },
+    "./components/drawer": {
+      "types": "./dist/components/drawer.d.ts",
+      "import": "./dist/drawer.js"
+    },
+    "./components/modal": {
+      "types": "./dist/components/modal.d.ts",
+      "import": "./dist/modal.js"
+    },
+    "./components/popover": {
+      "types": "./dist/components/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./components/tabs": {
+      "types": "./dist/components/tabs.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./components/toast": {
+      "types": "./dist/components/toast.d.ts",
+      "import": "./dist/toast.js"
+    },
+    "./components/tooltip": {
+      "types": "./dist/components/tooltip.d.ts",
+      "import": "./dist/tooltip.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "LICENSE",
+    "components.manifest.json"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.docs.config.ts --open /docs/",
+    "build": "vite build && tsc --emitDeclarationOnly && node scripts/verify-package.mjs",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.docs.json && tsc --noEmit -p tsconfig.e2e.json",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "npm run build && playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:install": "playwright install chromium firefox webkit",
+    "test:visual": "playwright test --project=visual",
+    "test:visual:update": "playwright test --project=visual --update-snapshots",
+    "catalog:generate": "node scripts/generate-catalogs.mjs",
+    "catalog:check": "node scripts/check-catalogs.mjs",
+    "test:consumer": "vite build --config tests/fixtures/laravel/vite.config.ts && vite build --config tests/fixtures/ssr/vite.config.ts",
+    "docs:serve": "vite --config vite.docs.config.ts --host 127.0.0.1 --port 5173",
+    "docs:dev": "vite --config vite.docs.config.ts --open /docs/",
+    "docs:build": "npm run catalog:check && node scripts/verify-docs.mjs && vite build --config vite.docs.config.ts",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  },
+  "dependencies": {
+    "lit": "^3.1.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
+    "@playwright/test": "^1.64.1",
+    "happy-dom": "^21.0.4",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "vitest": "^1.6.0"
+  },
+  "keywords": [
+    "design-system",
+    "web-components",
+    "css",
+    "framework-agnostic"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LuisRodOnCCS/simplest-ui.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://luisrodonccs.github.io/simplest-ui/",
+  "bugs": {
+    "url": "https://github.com/LuisRodOnCCS/simplest-ui/issues"
+  }
+}

package/skills/simplest-ui/INSTALL.md

@@ -0,0 +1,46 @@
+# Install the Simplest UI skill
+
+The package ships the portable Agent Skill at `skills/simplest-ui`. Installing the npm package does not activate it automatically: copy it into an agent's skill directory, or configure the agent to load the package directory.
+
+## OpenCode V2
+
+For a project-local setup, add the package skill directory to `opencode.jsonc`:
+
+```jsonc
+{
+  "$schema": "https://opencode.ai/config.json",
+  "skills": ["./node_modules/@luisrodonccs/simplest-ui/skills"]
+}
+```
+
+OpenCode loads the nested `simplest-ui/SKILL.md` file from that directory. Start a new session or run `/reload`, then invoke it as `@simplest-ui` or let OpenCode select it for a relevant Simplest UI task.
+
+To make a copied skill available in every project, copy `simplest-ui` to `~/.config/opencode/skills/`.
+
+## Claude Code
+
+For a project-local setup, copy the skill folder into `.claude/skills/`.
+
+**PowerShell**
+
+```powershell
+New-Item -ItemType Directory -Force .claude/skills | Out-Null
+Copy-Item -Recurse node_modules/@luisrodonccs/simplest-ui/skills/simplest-ui .claude/skills/simplest-ui
+```
+
+**macOS or Linux**
+
+```sh
+mkdir -p .claude/skills
+cp -R node_modules/@luisrodonccs/simplest-ui/skills/simplest-ui .claude/skills/simplest-ui
+```
+
+Restart the session or run `/reload-skills`, then invoke `/simplest-ui`. For a personal installation, use `~/.claude/skills/simplest-ui` instead.
+
+## Other Agent Skills clients
+
+The skill follows the open [Agent Skills](https://agentskills.io) format. Copy the `simplest-ui` directory, including `SKILL.md` and `references/`, to the client-specific skills directory. Consult that client's documentation for its discovery path and reload command.
+
+## Verify the installation
+
+Ask the agent to build a card with a status and action in a project using Simplest UI. It should select `ui-card`, `ui-badge`, and `ui-button`, inspect `components.manifest.json`, and avoid inventing a `<sui-card>` element.

package/skills/simplest-ui/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: simplest-ui
+description: Build, extend, review, or document interfaces that use the Simplest UI design system. Use this skill whenever a task occurs in a project with @luisrodonccs/simplest-ui installed, imports ui-* classes or sui-* elements, or asks to add UI to Simplest UI. Check the existing catalog before creating markup or components, reuse the system first, and preserve its accessibility and token conventions.
+---
+
+# Simplest UI
+
+Build with Simplest UI as an existing product system, not as a bag of styles. The system is framework-agnostic: CSS classes provide presentational primitives, while only selected interactive patterns are registered Web Components.
+
+## Start with the catalog
+
+1. Locate `components.manifest.json` in the project root. If unavailable, read the package README and inspect the installed exports.
+2. Identify whether the requested UI is already available as:
+   - a CSS component (`ui-*` class),
+   - a layout primitive (`ui-stack`, `ui-grid`, `ui-app-shell`, etc.), or
+   - a registered Custom Element (`sui-*`).
+3. Reuse the closest existing primitive. Compose CSS components before proposing a new component.
+4. Never invent an unregistered `<sui-*>` tag. In particular, cards, tables and alerts are CSS components, not Custom Elements.
+
+Read [references/catalog.md](references/catalog.md) for the current public surface and [references/authoring.md](references/authoring.md) before extending it.
+
+## Use the correct entrypoint
+
+Use the full bundle when Simplest UI owns the page foundation:
+
+```ts
+import "@luisrodonccs/simplest-ui/tokens.css";
+import "@luisrodonccs/simplest-ui/styles.css";
+```
+
+When Bootstrap, Tailwind, or another system owns global styles, omit the Simplest reset:
+
+```ts
+import "@luisrodonccs/simplest-ui/tokens.css";
+import "@luisrodonccs/simplest-ui/components.css";
+```
+
+Register all Web Components with `components.js`, or import only the needed behavior from `components/<name>`.
+
+## Build markup
+
+- Use `--sui-*` tokens and `ui-*` classes. Do not introduce parallel color, spacing, shadow or radius values when a token exists.
+- Prefer semantic HTML: `<button>`, `<a>`, `<article>`, `<table>`, `<label>`, and form controls retain their native meaning.
+- Use an interactive `sui-*` element only when it is listed in the catalog.
+- Keep the component implementation as the behavior source of truth; examples and application code must consume it rather than recreating its focus, Escape, or ARIA behavior.
+- Add a clear accessible name to controls and use appropriate live-region roles for feedback.
+
+## Extend only when necessary
+
+Create a new CSS component if composition cannot communicate a reusable visual pattern. Create a Web Component only if the pattern has reusable state or complex accessible interaction.
+
+When adding either kind:
+
+1. Reuse tokens and prefixes (`ui-`, `sui-`, `--sui-`).
+2. Implement keyboard support, focus behavior, semantic roles and `prefers-reduced-motion` where interaction requires them.
+3. Add unit tests for behavior; do not rely solely on a demo.
+4. Update `components.manifest.json`, the visual catalog, README, TypeScript JSX declarations when relevant, and changelog.
+5. Run `npm run typecheck`, `npm test`, `npm run build`, and `npm pack --dry-run`.
+
+## Output expectations
+
+When responding to an implementation request, state which existing system primitive you selected and why. If no suitable primitive exists, briefly justify the extension before adding it. Mention any import requirement for new behavior.

package/skills/simplest-ui/evals/README.md

@@ -0,0 +1,20 @@
+# Skill evaluation protocol
+
+The prompts in `evals.json` evaluate the three decisions the skill must make: compose existing primitives, select an existing interactive component, and justify a new component only when composition is insufficient.
+
+## Run an evaluation
+
+1. Use a clean fixture project with Simplest UI installed and `components.manifest.json` available.
+2. Run each prompt with the `simplest-ui` skill enabled and record the complete response and changed files.
+3. Review the response against its `expected_output` and the checks below.
+4. Repeat after material changes to `SKILL.md`, the manifest, or the public API.
+
+## Checks
+
+- Existing UI requests select documented `ui-*` classes and registered `sui-*` elements.
+- The response does not invent an unregistered Custom Element such as `sui-card`.
+- Interactive patterns use the documented entrypoint rather than recreating keyboard or ARIA behavior.
+- New component proposals explain why composition is insufficient and include tokens, accessibility, tests, manifest, visual catalog, and changelog updates.
+- The response names the selected primitive and any required import.
+
+Record the date, agent/version, fixture revision, prompt, output, and pass/fail result in a release or pull-request discussion, or in a versioned results file such as [RESULTS.md](./RESULTS.md). Do not mark the roadmap evaluation item complete until all three prompts have been reviewed successfully.

package/skills/simplest-ui/evals/RESULTS.md

@@ -0,0 +1,23 @@
+# OpenCode evaluation results
+
+Evaluated on 2026-11-05 with OpenCode v2.2.5 and `openai/gpt-5.6-terra`.
+
+## Fixture
+
+A clean temporary project installed the locally packed `@luisrodonccs/simplest-ui@0.1.0` tarball and loaded the package skill through `opencode.jsonc`:
+
+```jsonc
+{ "skills": ["./node_modules/@luisrodonccs/simplest-ui/skills"] }
+```
+
+The evaluation prompts ran without changing fixture files. Each explicit invocation loaded `simplest-ui`; the export-menu prompt was also run without an explicit invocation and OpenCode selected the skill automatically.
+
+## Results
+
+| ID | Scenario | Result | Evidence |
+| --- | --- | --- | --- |
+| 1 | Billing summary | Pass | Selected `ui-card`, `ui-stat`, `ui-badge`, and `ui-button`; used semantic `article`, `header`, and `footer`; proposed `styles.css`; did not invent `sui-card`. |
+| 2 | Export actions | Pass | Selected `sui-dropdown`, imported `@luisrodonccs/simplest-ui/components/dropdown`, used its `sui-select` event, and delegated keyboard behavior to the component. Automatic skill selection also selected `simplest-ui`. |
+| 3 | Date range picker | Pass | Determined that no date picker exists, justified a new `sui-date-range-picker`, and covered tokens, accessibility, keyboard behavior, tests, manifest generation, visual documentation, exports, and changelog work. |
+
+All checks in [README.md](./README.md) passed. Re-run these prompts after material changes to the skill, manifest, or public API.