@rak200/ui 0.2.1 → 0.2.3

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/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;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}

package/dist/tokens.js

@@ -32,7 +32,15 @@ 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',

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;;;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.2.1",
+  "version": "0.2.3",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",
@@ -25,7 +25,8 @@
     "dist"
   ],
   "sideEffects": [
-    "./dist/*.js"
+    "./dist/*.js",
+    "./src/*.ts"
   ],
   "publishConfig": {
     "access": "public"
@@ -37,17 +38,22 @@
     "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"
+    "build": "tsc -p tsconfig.build.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.4",
+    "@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",
     "@vitest/browser-playwright": "^4.1.10",
-    "axe-core": "^4.13.0"
+    "axe-core": "^4.13.0",
+    "storybook": "^10.5.8"
   }
 }