@mythicalos/ui-core 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/styles.css +22 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mythicalos/ui-core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
package/styles.css
CHANGED
|
@@ -300,3 +300,25 @@ a:focus-visible, .link:focus-visible, .is-focus {
|
|
|
300
300
|
|
|
301
301
|
/* truncation helper (design-export base.css) */
|
|
302
302
|
.my-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
303
|
+
|
|
304
|
+
/* ── revealable secret input (the Input atom's opt-in show/hide affordance) ──
|
|
305
|
+
Same family as the input rules above, but authored here rather than spliced into the BASE
|
|
306
|
+
block: that section is a verbatim port and is not edited. The toggle borrows the "Replace"
|
|
307
|
+
affordance's look (.rep) — micro, bold, accent-strong, no chrome — so a field with a reveal
|
|
308
|
+
reads as the same control family as a secret slot. */
|
|
309
|
+
.input-reveal { position: relative; display: block; }
|
|
310
|
+
/* border-box here so the field cannot outgrow the wrapper the toggle is positioned against (the
|
|
311
|
+
base .input is width:100% with content-box padding, and this sheet declares no global reset);
|
|
312
|
+
the right padding is the toggle's reserved lane, so a long token never runs under it */
|
|
313
|
+
.input-reveal .input { box-sizing: border-box; padding-right: 58px; }
|
|
314
|
+
.input-reveal__btn {
|
|
315
|
+
position: absolute; top: 0; right: 0; height: 100%; padding: 0 12px;
|
|
316
|
+
border: 0; background: none; font-family: inherit;
|
|
317
|
+
font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
|
|
318
|
+
color: var(--my-accent-strong); cursor: pointer;
|
|
319
|
+
}
|
|
320
|
+
.input-reveal__btn:hover:not(:disabled) { color: var(--my-accent); }
|
|
321
|
+
.input-reveal__btn:disabled { color: var(--my-disabled-ink); cursor: not-allowed; }
|
|
322
|
+
/* design rule 6 — the shared focus ring, restated rather than added to the BASE selector list
|
|
323
|
+
above for the same reason the rules above live here */
|
|
324
|
+
.input-reveal__btn:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
|