@rak200/ui 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,7 @@
 # @rak200/ui
 
 [![CI](https://github.com/rak200/ui/actions/workflows/ci.yml/badge.svg)](https://github.com/rak200/ui/actions/workflows/ci.yml)
+[![Latest tag](https://img.shields.io/github/v/tag/rak200/ui?sort=semver)](https://github.com/rak200/ui/tags)
 [![node](https://img.shields.io/badge/node-%3E%3D22-339933?logo=nodedotjs&logoColor=white)](https://nodejs.org/)
 [![Mutation testing](https://img.shields.io/badge/Stryker-MSI%20100%25-brightgreen)](stryker.config.js)
 [![Code style](https://img.shields.io/badge/code%20style-Prettier-blue?logo=prettier&logoColor=white)](prettier.config.js)
@@ -12,8 +13,7 @@ Host-agnostic custom-element UI components for the rak200 ecosystem.
 They are **custom elements**, so they work in any page and any framework — or none. That is the
 whole point: a component welded to one framework is not reusable outside it, and this kit exists to
 be reused. Built with [Lit](https://lit.dev) for a thin runtime with no build step required of the
-host. See [RFC 0016](https://github.com/rak200/devr/blob/master/docs/proposals/0016-ui-component-library.md)
-for how that was decided and what was rejected.
+host. See [ARCHITECTURE.md](ARCHITECTURE.md) for how that was decided and what was rejected.
 
 ## Install
 
@@ -28,17 +28,17 @@ npm install @rak200/ui
   import '@rak200/ui';
 </script>
 
-<rak-button>Save</rak-button>
-<rak-button variant="secondary">Cancel</rak-button>
-<rak-button disabled>Unavailable</rak-button>
+<ui-button>Save</ui-button>
+<ui-button variant="secondary">Cancel</ui-button>
+<ui-button disabled>Unavailable</ui-button>
 ```
 
 Every visual decision is a CSS custom property, so a host restyles the kit without forking it:
 
 ```css
 :root {
-  --rak-color-accent: rebeccapurple;
-  --rak-radius: 0;
+  --ui-color-accent: rebeccapurple;
+  --ui-radius: 0;
 }
 ```
 
@@ -49,6 +49,7 @@ The reference lives in [docs/](docs/README.md) — one page per unit.
 ## Status
 
 **v0.** One component and the token layer, built to the ecosystem's full quality bar rather than
-sketched: type-checked at the strictest available setting, formatted, tested in a real browser,
-100% coverage and **100% mutation score**, scanned, and every public symbol documented. The v0
+sketched: type-checked at the strictest available setting, formatted, tested in a real browser
+and **asserted against axe** for WCAG A/AA, 100% coverage and **100% mutation score**, scanned, and
+every public symbol documented. The v0
 surface in RFC 0016 grows from here — see [ROADMAP.md](ROADMAP.md).

package/dist/button.d.ts

@@ -12,10 +12,10 @@ export type ButtonVariant = 'primary' | 'secondary';
  *
  * @example
  * ```html
- * <rak-button variant="primary">Save</rak-button>
+ * <ui-button variant="primary">Save</ui-button>
  * ```
  */
-export declare class RakButton extends LitElement {
+export declare class UiButton extends LitElement {
     static readonly styles: import("lit").CSSResult;
     static readonly properties: {
         variant: {
@@ -43,7 +43,7 @@ export declare class RakButton extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'rak-button': RakButton;
+        'ui-button': UiButton;
     }
 }
 //# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACrC,gBAAyB,MAAM,0BAoC7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACpC,gBAAyB,MAAM,0BAoC7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/button.js

@@ -10,10 +10,10 @@ import { LitElement, css, html } from 'lit';
  *
  * @example
  * ```html
- * <rak-button variant="primary">Save</rak-button>
+ * <ui-button variant="primary">Save</ui-button>
  * ```
  */
-export class RakButton extends LitElement {
+export class UiButton extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -36,10 +36,10 @@ export class RakButton extends LitElement {
 
         button {
             font: inherit;
-            font-family: var(--rak-font, system-ui, sans-serif);
+            font-family: var(--ui-font, system-ui, sans-serif);
             border: 1px solid transparent;
-            border-radius: var(--rak-radius, 0.375rem);
-            padding: var(--rak-space, 0.5rem) calc(var(--rak-space, 0.5rem) * 2);
+            border-radius: var(--ui-radius, 0.375rem);
+            padding: var(--ui-space, 0.5rem) calc(var(--ui-space, 0.5rem) * 2);
             cursor: pointer;
         }
 
@@ -51,18 +51,18 @@ export class RakButton 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(--rak-color-focus, #f59e0b);
+            outline: 2px solid var(--ui-color-focus, #f59e0b);
             outline-offset: 2px;
         }
 
         button.primary {
-            background: var(--rak-color-accent, #2563eb);
-            color: var(--rak-color-accent-contrast, #ffffff);
+            background: var(--ui-color-accent, #2563eb);
+            color: var(--ui-color-accent-contrast, #ffffff);
         }
 
         button.secondary {
-            background: var(--rak-color-surface, #ffffff);
-            color: var(--rak-color-text, #1f2937);
+            background: var(--ui-color-surface, #ffffff);
+            color: var(--ui-color-text, #1f2937);
             border-color: currentcolor;
         }
     `; }
@@ -82,5 +82,5 @@ export class RakButton extends LitElement {
 // inside the warm process Stryker switches mutants in — so by the time a mutant on this
 // line is active the element is already defined under the original name, and no test can
 // observe the change. Outside the runner's reach, not an equivalent mutant.
-customElements.define('rak-button', RakButton);
+customElements.define('ui-button', UiButton);
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4CI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAhE4B,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCpC,AApC8B,CAoC7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QA4CI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAhE4B,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCpC,AApC8B,CAoC7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { RakButton, type ButtonVariant } from './button.js';
+export { UiButton, type ButtonVariant } from './button.js';
 export { tokens, defaults, 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,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,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,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,3 +1,3 @@
-export { RakButton } from './button.js';
+export { UiButton } from './button.js';
 export { tokens, defaults, 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,SAAS,EAAsB,MAAM,aAAa,CAAC;AAC5D,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,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}

package/dist/tokens.d.ts

@@ -6,11 +6,11 @@
  * native shell (RFC 0016, M4) can read the same values without the components. A token
  * added later is a token some target already hardcoded.
  *
- * Every token is a CSS custom property under `--rak-`, so a host overrides one by
+ * Every token is a CSS custom property under `--ui-`, so a host overrides one by
  * setting it anywhere above the component — no build step, no theme object, no fork.
  */
 /** The token names this package defines, as they appear in CSS. */
-export declare const tokens: readonly ["--rak-color-accent", "--rak-color-accent-contrast", "--rak-color-surface", "--rak-color-text", "--rak-color-focus", "--rak-radius", "--rak-space", "--rak-font"];
+export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-radius", "--ui-space", "--ui-font"];
 /** A CSS custom property this package defines. */
 export type Token = (typeof tokens)[number];
 /**

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,6KAST,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,CASpD,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,qKAST,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,CASpD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}

package/dist/tokens.js

@@ -6,19 +6,19 @@
  * native shell (RFC 0016, M4) can read the same values without the components. A token
  * added later is a token some target already hardcoded.
  *
- * Every token is a CSS custom property under `--rak-`, so a host overrides one by
+ * Every token is a CSS custom property under `--ui-`, so a host overrides one by
  * setting it anywhere above the component — no build step, no theme object, no fork.
  */
 /** The token names this package defines, as they appear in CSS. */
 export const tokens = [
-    '--rak-color-accent',
-    '--rak-color-accent-contrast',
-    '--rak-color-surface',
-    '--rak-color-text',
-    '--rak-color-focus',
-    '--rak-radius',
-    '--rak-space',
-    '--rak-font',
+    '--ui-color-accent',
+    '--ui-color-accent-contrast',
+    '--ui-color-surface',
+    '--ui-color-text',
+    '--ui-color-focus',
+    '--ui-radius',
+    '--ui-space',
+    '--ui-font',
 ];
 /**
  * The default value of every token, applied at `:root` by {@link tokenStyleSheet}.
@@ -27,14 +27,14 @@ export const tokens = [
  * system's defaults are what a host sees before it has decided anything.
  */
 export const defaults = {
-    '--rak-color-accent': '#2563eb',
-    '--rak-color-accent-contrast': '#ffffff',
-    '--rak-color-surface': '#ffffff',
-    '--rak-color-text': '#1f2937',
-    '--rak-color-focus': '#f59e0b',
-    '--rak-radius': '0.375rem',
-    '--rak-space': '0.5rem',
-    '--rak-font': 'system-ui, sans-serif',
+    '--ui-color-accent': '#2563eb',
+    '--ui-color-accent-contrast': '#ffffff',
+    '--ui-color-surface': '#ffffff',
+    '--ui-color-text': '#1f2937',
+    '--ui-color-focus': '#f59e0b',
+    '--ui-radius': '0.375rem',
+    '--ui-space': '0.5rem',
+    '--ui-font': 'system-ui, sans-serif',
 };
 /**
  * The token defaults as a CSS rule, for a host that wants them without importing a

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,oBAAoB;IACpB,6BAA6B;IAC7B,qBAAqB;IACrB,kBAAkB;IAClB,mBAAmB;IACnB,cAAc;IACd,aAAa;IACb,YAAY;CACN,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,oBAAoB,EAAE,SAAS;IAC/B,6BAA6B,EAAE,SAAS;IACxC,qBAAqB,EAAE,SAAS;IAChC,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,cAAc,EAAE,UAAU;IAC1B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,uBAAuB;CACxC,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,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",
@@ -45,8 +45,9 @@
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.0",
+    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.4",
     "@types/node": "^26.1.2",
-    "@vitest/browser-playwright": "^4.1.10"
+    "@vitest/browser-playwright": "^4.1.10",
+    "axe-core": "^4.13.0"
   }
 }