tyrell-components 1.0.0-TC25 → 1.0.0-TC26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC25",
+  "version": "1.0.0-TC26",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [
@@ -96,6 +96,14 @@
       "types": "./lib/components/multiselect.d.ts",
       "import": "./lib/components/multiselect.js"
     },
+    "./select": {
+      "types": "./lib/components/select.d.ts",
+      "import": "./lib/components/select.js"
+    },
+    "./selected-tags": {
+      "types": "./lib/components/selected-tags.d.ts",
+      "import": "./lib/components/selected-tags.js"
+    },
     "./css/*": "./css/*",
     "./icons/registry": {
       "types": "./lib/utils/icon-registry.d.ts",

package/css/tyrell-simple.css

@@ -1,257 +0,0 @@
-/* =====================================================================
- * tyrell-simple.css — the lightweight color-mix theme engine for Tyrell
- * =====================================================================
- *
- * EXPERIMENTAL, opt-in. The SIMPLE counterpart to tyrell-brand.css (the
- * complex OKLCH engine). Same job — fill the color-token contract — with
- * far fewer moving parts. Load it INSTEAD of tyrell-brand.css:
- *
- *   <link rel="stylesheet" href=".../tyrell.css">         <!-- structure + default colors -->
- *   <link rel="stylesheet" href=".../tyrell-simple.css">  <!-- overrides colors -->
- *
- * THE WHOLE MODEL
- * ---------------
- * Every color is one expression:
- *     color-mix(in oklch, <ink>, var(--ty-bg) STOP%)
- *   - --ty-bg          the page/background pole
- *   - --ty-ink-{role}  the saturated emphasis pole for each role
- *   - STOP             how far toward the background (shared, see below)
- *
- * Inputs are ~7 anchors per theme (page bg + 6 inks). Everything else is
- * derived ONCE in :root. Dark mode only re-points those anchors — the
- * whole palette falls out. No second curve, no sign-flips, no duplication.
- *
- * Rebrand: change the 6 inks. Retune contrast: change the STOP percentages.
- *
- * Needs oklch() + color-mix() + relative color (oklch(from …)) for solids:
- * Chrome 119 / Safari 16.4 / Firefox 128 (mid-2024).
- * ===================================================================== */
-
-:root {
-  /* ---- shared emphasis stops (% toward --ty-bg). One curve, both themes. ---- */
-  --ty-s-strong: 0%;
-  --ty-s-bold: 16%;
-  --ty-s-base: 32%;
-  --ty-s-soft: 56%;
-  --ty-s-faint: 78%;
-  /* background tints: mostly bg, a breath of ink */
-  --ty-bgs-bold: 82%;
-  --ty-bgs-base: 88%;
-  --ty-bgs-soft: 94%;
-
-  /* ====================== ANCHORS (light) ====================== */
-  --ty-bg: oklch(0.99 0.003 250); /* page pole */
-  --ty-ink-primary: oklch(0.55 0.15 250);
-  --ty-ink-secondary: oklch(0.55 0.16 300);
-  --ty-ink-success: oklch(0.55 0.13 150);
-  --ty-ink-danger: oklch(0.55 0.17 25);
-  --ty-ink-warning: oklch(0.68 0.15 75);
-  --ty-ink-neutral: oklch(0.30 0.012 250);
-
-  /* ====================== DERIVED — everything below references anchors ===== */
-
-  /* ---- flavor color ramps ---- */
-  --ty-color-primary-strong: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-strong));
-  --ty-color-primary-bold:   color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-bold));
-  --ty-color-primary:        color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-base));
-  --ty-color-primary-soft:   color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-soft));
-  --ty-color-primary-faint:  color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-faint));
-
-  --ty-color-secondary-strong: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-strong));
-  --ty-color-secondary-bold:   color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-bold));
-  --ty-color-secondary:        color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-base));
-  --ty-color-secondary-soft:   color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-soft));
-  --ty-color-secondary-faint:  color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-faint));
-
-  --ty-color-success-strong: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-strong));
-  --ty-color-success-bold:   color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-bold));
-  --ty-color-success:        color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-base));
-  --ty-color-success-soft:   color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-soft));
-  --ty-color-success-faint:  color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-faint));
-
-  --ty-color-danger-strong: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-strong));
-  --ty-color-danger-bold:   color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-bold));
-  --ty-color-danger:        color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-base));
-  --ty-color-danger-soft:   color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-soft));
-  --ty-color-danger-faint:  color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-faint));
-
-  --ty-color-warning-strong: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-strong));
-  --ty-color-warning-bold:   color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-bold));
-  --ty-color-warning:        color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-base));
-  --ty-color-warning-soft:   color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-soft));
-  --ty-color-warning-faint:  color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-faint));
-
-  --ty-color-neutral-strong: var(--ty-ink-neutral);
-  --ty-color-neutral-bold:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
-  --ty-color-neutral:        color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 18%);
-  --ty-color-neutral-soft:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 45%);
-  --ty-color-neutral-faint:  color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 70%);
-
-  /* ---- text hierarchy (neutral ink → bg) ---- */
-  --ty-text-strong: var(--ty-ink-neutral);
-  --ty-text-bold:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
-  --ty-text:        color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 16%);
-  --ty-text-soft:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 40%);
-  --ty-text-faint:  color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 60%);
-
-  /* ---- soft background tints per flavor ---- */
-  --ty-bg-primary-bold: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-primary:      color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-primary-soft: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-soft));
-
-  --ty-bg-secondary-bold: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-secondary:      color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-secondary-soft: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-soft));
-
-  --ty-bg-success-bold: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-success:      color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-success-soft: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-soft));
-
-  --ty-bg-danger-bold: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-danger:      color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-danger-soft: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-soft));
-
-  --ty-bg-warning-bold: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-warning:      color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-warning-soft: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-soft));
-
-  --ty-bg-neutral-bold: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-bold));
-  --ty-bg-neutral:      color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-base));
-  --ty-bg-neutral-soft: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-soft));
-
-  /* ---- generic bg / elevation ---- */
-  --ty-bg-faint:  var(--ty-bg);
-  --ty-bg-soft:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
-  --ty-bg-bold:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
-  --ty-bg-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 16%);
-  --ty-focus-ring-gap: var(--ty-bg);
-
-  /* ---- surfaces (elevate toward white in both themes) ---- */
-  --ty-surface-canvas:   var(--ty-bg);
-  --ty-surface-content:  color-mix(in oklab, var(--ty-bg), white 25%);
-  --ty-surface-elevated: color-mix(in oklab, var(--ty-bg), white 45%);
-  --ty-surface-floating: color-mix(in oklab, var(--ty-bg), white 60%);
-  --ty-surface-input:    color-mix(in oklab, var(--ty-bg), white 30%);
-
-  /* ---- borders ---- */
-  --ty-border-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 40%);
-  --ty-border-bold:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 22%);
-  --ty-border:        color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 14%);
-  --ty-border-soft:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
-  --ty-border-faint:  color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
-
-  --ty-border-primary:   var(--ty-color-primary-soft);
-  --ty-border-secondary: var(--ty-color-secondary-soft);
-  --ty-border-success:   var(--ty-color-success-soft);
-  --ty-border-danger:    var(--ty-color-danger-soft);
-  --ty-border-warning:   var(--ty-color-warning-soft);
-  --ty-border-neutral:   var(--ty-color-neutral);
-
-  --ty-elevated-border: var(--ty-border);
-  --ty-floating-border: var(--ty-border);
-  --ty-content-border:  var(--ty-border);
-  --ty-canvas-border:   transparent;
-
-  /* ---- scrollbar (neutral ink → transparent; auto-flips) ---- */
-  --ty-scrollbar-thumb:        color-mix(in srgb, var(--ty-ink-neutral) 35%, transparent);
-  --ty-scrollbar-thumb-hover:  color-mix(in srgb, var(--ty-ink-neutral) 50%, transparent);
-  --ty-scrollbar-thumb-active: color-mix(in srgb, var(--ty-ink-neutral) 60%, transparent);
-  --ty-scrollbar-track:        transparent;
-  --ty-scrollbar-track-hover:  color-mix(in srgb, var(--ty-ink-neutral) 8%, transparent);
-
-  /* ---- modal ---- */
-  --ty-modal-bg:       var(--ty-surface-floating);
-  --ty-modal-color:    var(--ty-text);
-  --ty-modal-border:   var(--ty-border);
-  --ty-modal-backdrop: color-mix(in oklab, black 50%, transparent);
-  --ty-modal-shadow:   var(--ty-shadow-xl);
-
-  /* ---- inputs ---- */
-  --ty-input-bg:            var(--ty-surface-input);
-  --ty-input-color:         var(--ty-text);
-  --ty-input-border:        var(--ty-border-bold);
-  --ty-input-border-hover:  var(--ty-border-strong);
-  --ty-input-border-focus:  var(--ty-color-primary);
-  --ty-input-shadow-focus:  color-mix(in srgb, var(--ty-color-primary) 12%, transparent);
-  --ty-input-placeholder:   var(--ty-text-faint);
-  --ty-input-disabled-bg:   var(--ty-bg-soft);
-  --ty-input-disabled-border: var(--ty-border);
-  --ty-input-disabled-color: var(--ty-text-faint);
-  --ty-label-color:         var(--ty-text-soft);
-  --ty-input-success-border: var(--ty-color-success);
-  --ty-input-danger-border:  var(--ty-color-danger);
-  --ty-input-warning-border: var(--ty-color-warning);
-
-  /* ====================== SOLID ====================== */
-  /* base fill = flavor ink; states via OKLCH L offsets (same axes as the
-     other engines). theme dim/desaturate via the dark block re-points ink. */
-  --ty-solid-hover-l: -0.04;
-  --ty-solid-active-l: -0.08;
-  --ty-solid-strong-l: -0.06;
-  --ty-solid-soft-l: 0.1;
-  /* solid fill lightness — PINNED, not the text ink (which flips light on dark).
-     Keeps fills a saturated mid so white fg stays legible in both themes. */
-  --ty-solid-base-l: 0.55;
-
-  --ty-solid-primary:   oklch(from var(--ty-ink-primary)   var(--ty-solid-base-l) c h);
-  --ty-solid-secondary: oklch(from var(--ty-ink-secondary) var(--ty-solid-base-l) c h);
-  --ty-solid-success:   oklch(from var(--ty-ink-success)   var(--ty-solid-base-l) c h);
-  --ty-solid-danger:    oklch(from var(--ty-ink-danger)    var(--ty-solid-base-l) c h);
-  --ty-solid-warning:   oklch(from var(--ty-ink-warning)   var(--ty-solid-base-l) c h);
-  --ty-solid-neutral:   oklch(from var(--ty-ink-neutral)   0.4 c h);
-
-  --ty-solid-primary-fg: white;
-  --ty-solid-secondary-fg: white;
-  --ty-solid-success-fg: white;
-  --ty-solid-danger-fg: white;
-  --ty-solid-warning-fg: white;
-  --ty-solid-neutral-fg: white;
-
-  --ty-solid-primary-hover:  oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-primary-active: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-primary-strong: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-primary-soft:   oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h);
-
-  --ty-solid-secondary-hover:  oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-secondary-active: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-secondary-strong: oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-secondary-soft:   oklch(from var(--ty-solid-secondary) calc(l + var(--ty-solid-soft-l)) c h);
-
-  --ty-solid-success-hover:  oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-success-active: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-success-strong: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-success-soft:   oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-soft-l)) c h);
-
-  --ty-solid-danger-hover:  oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-danger-active: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-danger-strong: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-danger-soft:   oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-soft-l)) c h);
-
-  --ty-solid-warning-hover:  oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-warning-active: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-warning-strong: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-warning-soft:   oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-soft-l)) c h);
-
-  --ty-solid-neutral-hover:  oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-hover-l)) c h);
-  --ty-solid-neutral-active: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h);
-  --ty-solid-neutral-strong: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h);
-  --ty-solid-neutral-soft:   oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h);
-}
-
-/* =====================================================================
- * DARK — re-point the anchors ONLY. The whole palette above re-derives.
- * Inks go lighter (emphasis inverts); page goes dark.
- * ===================================================================== */
-html.dark,
-html[data-theme="dark"] {
-  --ty-bg: oklch(0.16 0.012 250);
-  --ty-ink-primary: oklch(0.80 0.12 250);
-  --ty-ink-secondary: oklch(0.80 0.13 300);
-  --ty-ink-success: oklch(0.80 0.11 150);
-  --ty-ink-danger: oklch(0.78 0.14 25);
-  --ty-ink-warning: oklch(0.84 0.13 75);
-  --ty-ink-neutral: oklch(0.88 0.008 250);
-
-  /* solids: dim the pinned fill slightly against the dark canvas */
-  --ty-solid-base-l: 0.50;
-}