@mythicalos/ui-core 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythicalos/ui-core",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "mythicalOS framework-agnostic UI core — the pure logic (class derivation, poll scheduling, dialog/toast/gauge helpers), the token-driven component stylesheet, and the <mythical-select> form-associated web component. Zero framework runtime; the Preact and React bindings derive identical output from this package. Apache-2.0.",
   "type": "module",
   "license": "Apache-2.0",

package/styles.css

@@ -74,16 +74,16 @@ a:focus-visible, .link:focus-visible, .is-focus {
 .input.is-err { border-color: var(--my-error); }
 .input:disabled, .input.is-disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
 .input.is-dirty { border-color: var(--my-accent); }
-.help { font-size: 11px; color: var(--my-muted); margin-top: 4px; }
-.emsg { font-size: 11px; color: var(--my-error); margin-top: 4px; display: flex; gap: 4px; align-items: center; }
+.help { font-size: var(--my-fs-micro); color: var(--my-muted); margin-top: 4px; }
+.emsg { font-size: var(--my-fs-micro); color: var(--my-error); margin-top: 4px; display: flex; gap: 4px; align-items: center; }
 .textarea { resize: vertical; min-height: 64px; }
 .readonly-input { background: var(--my-surface-hover); }
-.rep { font-size: 11px; font-weight: var(--my-fw-bold); color: var(--my-accent-strong); cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; }
+.rep { font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); color: var(--my-accent-strong); cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; }
 
 .slot { display: flex; gap: var(--my-sp-2); align-items: center; }
 .slot .input { flex: 1; }
 .chip {
-  font-size: 11px; font-weight: var(--my-fw-bold); border-radius: 99px;
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); border-radius: var(--my-r-pill);
   padding: 3px 11px; background: var(--my-accent-soft); color: var(--my-accent-strong);
   white-space: nowrap;
 }
@@ -113,7 +113,7 @@ a:focus-visible, .link:focus-visible, .is-focus {
 .cb {
   width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--my-control-border); /* §1a-3 (checkbox reference) + §1a-12 (v0.5.4 rule 11) */
   background: var(--my-surface); display: inline-flex; align-items: center; justify-content: center;
-  color: var(--my-surface); font-size: 11px; font-weight: var(--my-fw-bold); cursor: pointer; padding: 0; flex: none;
+  color: var(--my-surface); font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); cursor: pointer; padding: 0; flex: none;
 }
 .cb.is-on { background: var(--my-accent); border-color: var(--my-accent); }
 .cb.is-disabled { background: var(--my-disabled-bg); border-color: var(--my-border); color: var(--my-disabled-ink); cursor: not-allowed; }
@@ -121,13 +121,13 @@ a:focus-visible, .link:focus-visible, .is-focus {
 
 /* ── toasts (ds/components-toasts) — bottom-CENTER stack (§1a-10, design.md interaction rules) ── */
 .toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--my-sp-5); z-index: 50; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 420px; }
-.toast { display: flex; gap: 10px; align-items: baseline; border-radius: 8px; padding: 11px 14px; font-size: 13px; animation: my-toast-in 180ms ease-out; }
+.toast { display: flex; gap: 10px; align-items: baseline; border-radius: 8px; padding: 11px 14px; font-size: var(--my-fs-mono); animation: my-toast-in 180ms ease-out; }
 @keyframes my-toast-in { from { opacity: 0; transform: translateY(12px); } }
 @media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
-.toast .toast-icon { font-style: normal; font-size: 13px; font-weight: var(--my-fw-bold); flex: none; }
+.toast .toast-icon { font-style: normal; font-size: var(--my-fs-mono); font-weight: var(--my-fw-bold); flex: none; }
 .toast b { font-weight: var(--my-fw-bold); }
-.toast .toast-action { font-weight: var(--my-fw-bold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; font-size: 13px; }
-.toast .toast-x { margin-left: auto; color: var(--my-muted); cursor: pointer; flex: none; font-size: 12px; background: none; border: 0; }
+.toast .toast-action { font-weight: var(--my-fw-bold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; font-size: var(--my-fs-mono); }
+.toast .toast-x { margin-left: auto; color: var(--my-muted); cursor: pointer; flex: none; font-size: var(--my-fs-caption); background: none; border: 0; }
 .toast .toast-x:hover { color: var(--my-ink); }
 /* §1a-6 (as corrected by gate r4-adjIII): the canonical v0.5 toast is a border-LESS tone-colored
    soft fill (design.md "tone-colored soft fill + icon + message") — the v0.4 status borders were
@@ -140,13 +140,13 @@ a:focus-visible, .link:focus-visible, .is-focus {
 .toast--error .toast-icon, .toast--error .toast-action { color: var(--my-error); }
 .toast--info { background: var(--my-info-soft); }
 .toast--info .toast-icon, .toast--info .toast-action { color: var(--my-info); }
-.toast-more { font-size: 11px; color: var(--my-muted); text-align: center; }
+.toast-more { font-size: var(--my-fs-micro); color: var(--my-muted); text-align: center; }
 
 /* ── dialogs (ds/components-dialogs) ─────────────────────────────────── */
 .scrim { position: fixed; inset: 0; background: var(--my-scrim); z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--my-sp-5); }
 .dlg { background: var(--my-surface); border-radius: var(--my-r-modal); box-shadow: var(--my-shadow-modal); padding: var(--my-sp-5); width: 400px; max-width: 100%; }
 .dlg h2 { font-size: var(--my-fs-h3); font-weight: var(--my-fw-bold); margin: 0 0 6px; }
-.dlg p { font-size: 13px; color: var(--my-muted); margin: 0 0 12px; }
+.dlg p { font-size: var(--my-fs-mono); color: var(--my-muted); margin: 0 0 12px; }
 .dlg ul { list-style: none; font-size: 12.5px; margin: 0 0 4px; padding: 0; }
 .dlg li { padding: 5px 0; display: flex; gap: 9px; align-items: baseline; }
 .dlg li i { font-style: normal; flex: none; }
@@ -159,12 +159,12 @@ a:focus-visible, .link:focus-visible, .is-focus {
    danger-fill hover restyle — the hover keeps the rest fill (token addendum candidate, §9.5). */
 .danf:hover:not(:disabled) { background: var(--my-error); }
 .danf:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
-.esc { font-size: 11px; color: var(--my-disabled-ink); margin-top: var(--my-sp-4); }
+.esc { font-size: var(--my-fs-micro); color: var(--my-disabled-ink); margin-top: var(--my-sp-4); }
 
 /* ── empty states (ds/layouts-observability + book §7.10) ────────────── */
 .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--my-sp-8) var(--my-sp-5); text-align: center; }
 .empty h2 { font-size: var(--my-fs-h2); font-weight: var(--my-fw-bold); margin: var(--my-sp-4) 0 6px; }
-.empty p { font-size: 13px; color: var(--my-muted); max-width: 380px; margin: 0 0 var(--my-sp-4); }
+.empty p { font-size: var(--my-fs-mono); color: var(--my-muted); max-width: 380px; margin: 0 0 var(--my-sp-4); }
 .ebtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
 /* §1a-8: the spine art rides package-owned tokenized classes — the gauge-block `gfill--nominal`
    and the literal #C9C3B6 strokes are replaced (empty-state row v1: segments = border, hollow /
@@ -300,3 +300,25 @@ a:focus-visible, .link:focus-visible, .is-focus {
 
 /* truncation helper (design-export base.css) */
 .my-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* ── revealable secret input (the Input atom's opt-in show/hide affordance) ──
+   Same family as the input rules above, but authored here rather than spliced into the BASE
+   block: that section is a verbatim port and is not edited. The toggle borrows the "Replace"
+   affordance's look (.rep) — micro, bold, accent-strong, no chrome — so a field with a reveal
+   reads as the same control family as a secret slot. */
+.input-reveal { position: relative; display: block; }
+/* border-box here so the field cannot outgrow the wrapper the toggle is positioned against (the
+   base .input is width:100% with content-box padding, and this sheet declares no global reset);
+   the right padding is the toggle's reserved lane, so a long token never runs under it */
+.input-reveal .input { box-sizing: border-box; padding-right: 58px; }
+.input-reveal__btn {
+  position: absolute; top: 0; right: 0; height: 100%; padding: 0 12px;
+  border: 0; background: none; font-family: inherit;
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
+  color: var(--my-accent-strong); cursor: pointer;
+}
+.input-reveal__btn:hover:not(:disabled) { color: var(--my-accent); }
+.input-reveal__btn:disabled { color: var(--my-disabled-ink); cursor: not-allowed; }
+/* design rule 6 — the shared focus ring, restated rather than added to the BASE selector list
+   above for the same reason the rules above live here */
+.input-reveal__btn:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }