@rak200/ui 0.2.2 → 0.2.4

package/README.md

@@ -48,9 +48,19 @@ Every visual decision is a CSS custom property, so a host restyles the kit witho
 }
 ```
 
+## Playground
+
+**[rak200.github.io/ui](https://rak200.github.io/ui/)** — every component, rendered, with its
+variants and states side by side and an accessibility panel over each one.
+
+It follows `master` rather than the latest release, so it can show a component a published version
+does not contain. The commit it was built from is stamped in the sidebar, so you can always tell
+which one you are looking at.
+
 ## Documentation
 
-The reference lives in [docs/](docs/README.md) — one page per unit.
+The reference lives in [docs/](docs/README.md) — one page per unit. The playground shows the
+components; `docs/` is what describes them.
 
 ## Status
 

package/dist/button.js

@@ -51,7 +51,7 @@ export class UiButton extends LitElement {
         /* A visible focus ring is not decoration: removing it is the single most common
        way a component stops being usable by keyboard. */
         button:focus-visible {
-            outline: 2px solid var(--ui-color-focus, #f59e0b);
+            outline: 2px solid var(--ui-color-focus, #b45309);
             outline-offset: 2px;
         }
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { UiButton, type ButtonVariant } from './button.js';
 export { UiField } from './field.js';
-export { tokens, defaults, tokenStyleSheet, type Token } from './tokens.js';
+export { tokens, defaults, darkScheme, tokenStyleSheet, type Token } from './tokens.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
 export { UiButton } from './button.js';
 export { UiField } from './field.js';
-export { tokens, defaults, tokenStyleSheet } from './tokens.js';
+export { tokens, defaults, darkScheme, tokenStyleSheet } from './tokens.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}

package/dist/tokens.d.ts

@@ -20,9 +20,36 @@ export type Token = (typeof tokens)[number];
  * system's defaults are what a host sees before it has decided anything.
  */
 export declare const defaults: Readonly<Record<Token, string>>;
+/**
+ * The grounds whose value differs when the page is rendered dark.
+ *
+ * **A scheme is not a theme, and conflating them is the mistake this shape exists to
+ * avoid.** A theme is a named set of decisions, selected with `data-ui-theme`; a scheme is
+ * the light or dark rendering of whichever theme is in force, selected with
+ * `color-scheme`. The two axes are independent, and a token carries both of its schemes in
+ * one value through `light-dark()`, so a theme is a handful of grounds rather than a
+ * parallel block per scheme plus a media query nobody writes correctly the first time.
+ *
+ * `Partial` is the type doing the work: it answers *which grounds vary by scheme* in the
+ * type system. `--ui-radius` does not vary and `--ui-color-surface` does, and folding both
+ * schemes into {@link defaults} as a single expression would make those two
+ * indistinguishable — and would hand a native emitter a CSS function to parse instead of a
+ * value to read.
+ *
+ * Only colours appear here, and that is a rule rather than a coincidence: `light-dark()`
+ * takes colours, so a dark value for `--ui-radius` would emit CSS the browser discards.
+ */
+export declare const darkScheme: Readonly<Partial<Record<Token, string>>>;
 /**
  * The token defaults as a CSS rule, for a host that wants them without importing a
  * component. Returns the text of a `:root` block; a host inserts it however it prefers.
+ *
+ * **It declares `color-scheme` as well as the tokens, and that is deliberate.**
+ * `color-scheme` is a real property rather than a custom one, so it can never be a token —
+ * and leaving it to the host is a silent failure at the highest possible frequency: every
+ * host would have to remember, and forgetting means dark mode simply never happens, with
+ * no error anywhere to read. A host who wants something else — `only light`, say — governs
+ * the order this sheet is inserted in, which is a knob they already hold.
  */
 export declare function tokenStyleSheet(): string;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,0LAUT,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAUpD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,0LAUT,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAkBpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAUxC"}

package/dist/tokens.js

@@ -32,18 +32,69 @@ export const defaults = {
     '--ui-color-accent-contrast': '#ffffff',
     '--ui-color-surface': '#ffffff',
     '--ui-color-text': '#1f2937',
-    '--ui-color-focus': '#f59e0b',
+    // Amber-700 rather than the amber-500 this shipped with, and the change is a floor
+    // rather than a preference: a focus ring is the visual information that identifies a
+    // component's state, so WCAG 1.4.11 asks 3:1 against what it sits on. `#f59e0b`
+    // against the default surface is 2.15:1 — and `outline-offset` puts the surface on
+    // both sides of the ring, so the surface is what it is measured against, not the
+    // button underneath. This value is 5.02:1 there and 3.53:1 on a dark surface, so it
+    // clears the floor in either scheme. `tests/tokens.test.ts` holds the assertion,
+    // because no axe rule does.
+    '--ui-color-focus': '#b45309',
     '--ui-color-danger': '#b91c1c',
     '--ui-radius': '0.375rem',
     '--ui-space': '0.5rem',
     '--ui-font': 'system-ui, sans-serif',
 };
+/**
+ * The grounds whose value differs when the page is rendered dark.
+ *
+ * **A scheme is not a theme, and conflating them is the mistake this shape exists to
+ * avoid.** A theme is a named set of decisions, selected with `data-ui-theme`; a scheme is
+ * the light or dark rendering of whichever theme is in force, selected with
+ * `color-scheme`. The two axes are independent, and a token carries both of its schemes in
+ * one value through `light-dark()`, so a theme is a handful of grounds rather than a
+ * parallel block per scheme plus a media query nobody writes correctly the first time.
+ *
+ * `Partial` is the type doing the work: it answers *which grounds vary by scheme* in the
+ * type system. `--ui-radius` does not vary and `--ui-color-surface` does, and folding both
+ * schemes into {@link defaults} as a single expression would make those two
+ * indistinguishable — and would hand a native emitter a CSS function to parse instead of a
+ * value to read.
+ *
+ * Only colours appear here, and that is a rule rather than a coincidence: `light-dark()`
+ * takes colours, so a dark value for `--ui-radius` would emit CSS the browser discards.
+ */
+export const darkScheme = {
+    // Blue-400 over the dark surface rather than blue-600, which is legible on white and
+    // muddy on charcoal. Its contrast pair is inverted with it: dark text on a light
+    // accent is what reads at this end.
+    '--ui-color-accent': '#60a5fa',
+    '--ui-color-accent-contrast': '#111827',
+    '--ui-color-surface': '#111827',
+    '--ui-color-text': '#e5e7eb',
+    // Red-700 is 2.74:1 on the dark surface — under the 4.5:1 floor for text, and error
+    // text is the one thing in this set that must never be hard to read. Red-400 is 6.41.
+    '--ui-color-danger': '#f87171',
+};
 /**
  * The token defaults as a CSS rule, for a host that wants them without importing a
  * component. Returns the text of a `:root` block; a host inserts it however it prefers.
+ *
+ * **It declares `color-scheme` as well as the tokens, and that is deliberate.**
+ * `color-scheme` is a real property rather than a custom one, so it can never be a token —
+ * and leaving it to the host is a silent failure at the highest possible frequency: every
+ * host would have to remember, and forgetting means dark mode simply never happens, with
+ * no error anywhere to read. A host who wants something else — `only light`, say — governs
+ * the order this sheet is inserted in, which is a knob they already hold.
  */
 export function tokenStyleSheet() {
-    const body = tokens.map((token) => `  ${token}: ${defaults[token]};`).join('\n');
-    return `:root {\n${body}\n}`;
+    const body = tokens
+        .map((token) => {
+        const dark = darkScheme[token];
+        return `  ${token}: ${dark === undefined ? defaults[token] : `light-dark(${defaults[token]}, ${dark})`};`;
+    })
+        .join('\n');
+    return `:root {\n  color-scheme: light dark;\n${body}\n}`;
 }
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,WAAW;CACL,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjF,OAAO,YAAY,IAAI,KAAK,CAAC;AACjC,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,WAAW;CACL,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,mFAAmF;IACnF,qFAAqF;IACrF,gFAAgF;IAChF,mFAAmF;IACnF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,4BAA4B;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6C;IAChE,qFAAqF;IACrF,iFAAiF;IACjF,oCAAoC;IACpC,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,oFAAoF;IACpF,sFAAsF;IACtF,mBAAmB,EAAE,SAAS;CACjC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM;SACd,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC;IAC9G,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,OAAO,yCAAyC,IAAI,KAAK,CAAC;AAC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",
@@ -38,7 +38,7 @@
     "analyse": "tsc --noEmit && eslint .",
     "test": "vitest run",
     "coverage": "coverage-floor",
-    "scan": "semgrep scan --config=p/typescript --severity=ERROR --sarif -o semgrep.sarif",
+    "scan": "rak200-scan",
     "mutation": "stryker run",
     "build": "tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",
@@ -48,7 +48,7 @@
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.3",
+    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.7",
     "@storybook/addon-a11y": "^10.5.8",
     "@storybook/web-components-vite": "^10.5.8",
     "@types/node": "^26.1.2",