@waveso/ui 0.18.0 → 0.20.0

package/README.md

@@ -10,8 +10,7 @@
 
   <br />
 
-  <!-- TODO: replace assets/showcase-placeholder.svg with a real screenshot of the Showcase story across the three themes -->
-  <img src="assets/showcase-placeholder.svg" alt="Wave UI across its three themes — Graphite, Ink, and Paper" width="760" />
+  <img src="assets/showcase.svg" alt="Wave UI across its three themes — Graphite, Ink, and Paper" width="760" />
 
   <br /><br />
 
@@ -47,11 +46,12 @@ Wave builds around an intuitive, intentional **3-tier hierarchy** — for almost
 - 3 offset amounts for transforms
 - …and more
 
-It also builds around 3 semantic intents:
+It builds around semantic intents:
 
 - **Background** colors focus on elevation — how deep a surface sits
 - **Content** colors focus on emphasis — how strongly something reads
 - **Border** colors focus on structure — how functional a boundary is
+- **Control** colors focus on state — whether a control is at rest, pointed at or chosen
 
 This is the right shape for a system centered on an emphasis ladder: clean and minimal, but flexible.
 
@@ -71,49 +71,48 @@ A pinned class always beats the OS — put `.paper`, `.graphite`, or `.ink` on y
 
 ## Taxonomy
 
-Wave pays close attention to token taxonomy. Surfaces encode elevation; borders act as _light interference rather than geometry_.
+Wave pays close attention to token taxonomy. Surfaces encode elevation; borders act as _light interference rather than geometry_. Each of the five families below has three members, each with one job.
 
-### Background
+**Surfaces are solid: they contain. Borders and control fills are see-through:** `line`, `edge`, `contour`, `neutral` and `highlighted` are the theme's text colour made translucent, so they blend into whatever is underneath, for depth and integration. An input inside a primary-coloured banner, or on an accent card, only works if its fill is see-through; a solid control colour can't follow every background. And because controls don't borrow `secondary`, it's free to be a real brand colour.
+
+### Surfaces — solid, to contain
 
 - `--foundation` — the deepest layer, the base where elevation starts
 - `--surface` — the middle layer: cards, sidebars, content boxes
 - `--elevated` — the highest layer: floating windows, modals, dropdowns, dialogs
 
-### Foreground
+### Text — contrast
 
 - `--contrast` — titles, primary text
-- `--muted` — body text, icons, any mark
-- `--subtle` — placeholders, hints
+- `--muted` — body text, placeholders, icons, any mark
+- `--subtle` — hints
+
+### Brand — colour
 
-### Lines and fills
+- `--primary` — wired to the Wave ramp
+- `--secondary` — the second brand colour, a quiet neutral by default
+- `--accent` — alternative emphasis
 
-The theme's foreground made translucent, so each reads the same on any surface, and each keeps one job.
+### Borders — boundary
 
-Lines:
+The theme's text colour at three strengths, one job each:
 
 - `--line` (5%) — what divides: separators, dividers, hairlines
 - `--edge` (10%) — what bounds a surface: cards, dialogs, popups, toasts
 - `--contour` (15%) — what outlines a control or a region: outline buttons, badges, toggles, layout regions
 
-Fills:
+### Controls — depth
+
+A control's state, from resting to chosen:
 
-- `--highlighted` (10%) — where attention lands: hovered, keyboard-highlighted and open items
-- `--neutral` (15%) — what gives a control its body, its look before anything is chosen: field and track fills, unchecked boxes. Not Tailwind's `neutral-*` grey palette, which Wave doesn't use
+- `--neutral` (10%) — the look before anything is chosen or pointed at: field and track fills, unchecked boxes, table footers, muted items. Not Tailwind's `neutral-*` grey palette, which Wave doesn't use
+- `--highlighted` (15%) — where attention lands: hovered, keyboard-highlighted and open items, a step stronger than `neutral`
+- `--selected` — chosen, current or on: the current tab, a pressed toggle, a checked box, a selected row. `--primary` by default; set it to restyle every chosen state at once. Chosen items keep white text, so pick a colour it reads on, such as a darker shade of your brand colour
 
 ### Ring
 
 - `--focus` — active / focus states
 
-### Selected
-
-- `--selected` — chosen, current or on: the current tab, a pressed toggle, a checked box, a selected row. Primary by default; set it to restyle every chosen state at once
-
-### Brand
-
-- `--primary` — wired to the Wave ramp
-- `--secondary` — neutral fill
-- `--accent` — alternative emphasis
-
 ### Border strategy
 
 This is the sophisticated move most libraries skip.

package/dist/checkbox.js

@@ -7,7 +7,7 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 peer relative flex size-6 shrink-0 items-center justify-center rounded-sm border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-selected data-indeterminate:bg-selected data-checked:text-white data-indeterminate:text-white data-checked:border-selected data-indeterminate:border-selected aria-invalid:aria-checked:border-selected aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 peer relative flex size-6 shrink-0 items-center justify-center rounded-sm border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/film-grain-shader.d.ts

@@ -1,4 +1,4 @@
 //#region src/film-grain-shader.d.ts
-export declare const vertexShader = "\nattribute vec2 position;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = position * 0.5 + 0.5;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n";
-export declare const fragmentShader = "\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uDensity;\nuniform float uOpacity;\nuniform float uFps;\nuniform vec3 uColor;\n\nvarying vec2 vUv;\n\n// Stable hash\nfloat hash(vec2 p, float seed) {\n  return fract(sin(dot(p + seed, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\n// Film response curve (soft toe + shoulder rolloff)\nfloat filmCurve(float x) {\n  return smoothstep(0.0, 0.2, x) * (1.0 - smoothstep(0.8, 1.0, x));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy;\n  vec2 p = floor(uv);\n\n  // Temporal coherence: blend between current and next frame seed\n  float frame = floor(uTime * uFps);\n  float t = fract(uTime * uFps);\n  float seed = frame * 0.1731;\n\n  // Multi-scale grain with inter-frame blending on fine layer\n  float fineA = hash(p, seed);\n  float fineB = hash(p, seed + 0.1731);\n  float fine = mix(fineA, fineB, t);\n\n  float medium = hash(floor(uv * 0.5), seed + 3.1);\n  float coarse = hash(floor(uv * 0.25), seed + 7.93);\n\n  float grain = fine * 0.65 + medium * 0.25 + coarse * 0.10;\n\n  // Emulsion clumping (organic structure)\n  float cluster = hash(floor(uv * 0.18), seed + 9.2);\n  grain *= mix(0.75, 1.35, cluster);\n\n  // Density threshold\n  grain = smoothstep(1.0 - uDensity, 1.0, grain);\n\n  // Film response curve (replaces raw pow gamma)\n  grain = filmCurve(grain);\n\n  // Micro-blur: sample neighbors for optical diffusion\n  float n1 = hash(p + vec2(1.0, 0.0), seed);\n  float n2 = hash(p - vec2(1.0, 0.0), seed);\n  float n3 = hash(p + vec2(0.0, 1.0), seed);\n  float n4 = hash(p - vec2(0.0, 1.0), seed);\n  float neighbors = (n1 + n2 + n3 + n4) * 0.25;\n  grain = mix(grain, neighbors, 0.15);\n\n  // Chromatic aberration (reuse neighbor hashes)\n  float rShift = n1 * 0.015;\n  float bShift = n2 * 0.015;\n\n  vec3 color = uColor * vec3(\n    grain + rShift,\n    grain,\n    grain + bShift\n  );\n\n  color = clamp(color, 0.0, 1.0);\n\n  gl_FragColor = vec4(color, grain * uOpacity);\n}\n";
+export declare const vertexShader = "#version 300 es\nin vec2 position;\nout vec2 vUv;\n\nvoid main() {\n  vUv = position * 0.5 + 0.5;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n";
+export declare const fragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uDensity;\nuniform float uOpacity;\nuniform float uFps;\nuniform vec3 uColor;\n\nin vec2 vUv;\nout vec4 fragColor;\n\n// Integer hash (two rounds of a permuted congruential mix): three\n// independent values from three inputs, identical on every GPU. No sine:\n// a sine hash loses precision on some mobile GPUs and draws faint stripes.\nuvec3 hash3(uvec3 v) {\n  v = v * 1664525u + 1013904223u;\n  v.x += v.y * v.z;\n  v.y += v.z * v.x;\n  v.z += v.x * v.y;\n  v ^= v >> 16u;\n  v.x += v.y * v.z;\n  v.y += v.z * v.x;\n  v.z += v.x * v.y;\n  return v;\n}\n\nconst float UNIT = 1.0 / 4294967295.0;\n\n// A pixel's fine speck: the average of two values, so it gathers round the\n// middle as film grain does, with fewer pure darks and lights.\nfloat fine(uvec2 pixel, uint frame) {\n  uvec3 h = hash3(uvec3(pixel, frame));\n  return (float(h.x) + float(h.y)) * (0.5 * UNIT);\n}\n\n// Film response curve (soft toe + shoulder rolloff)\nfloat filmCurve(float x) {\n  return smoothstep(0.0, 0.2, x) * (1.0 - smoothstep(0.8, 1.0, x));\n}\n\nvoid main() {\n  uvec2 p = uvec2(gl_FragCoord.xy);\n  // The grain changes once per frame of its fps; the component only draws\n  // when this changes.\n  uint frame = uint(floor(uTime * uFps));\n\n  // Multi-scale grain. One hash per 4x4 block gives its coarse speck, its\n  // clumping and, a byte for each 2x2 quarter, its medium specks.\n  uvec3 block = hash3(uvec3(p >> 2u, frame ^ 0x9e3779b9u));\n  uint quarter = ((p.y >> 1u) & 1u) * 2u + ((p.x >> 1u) & 1u);\n  float medium = float((block.z >> (quarter * 8u)) & 255u) / 255.0;\n  float coarse = float(block.x) * UNIT;\n  float grain = fine(p, frame) * 0.65 + medium * 0.25 + coarse * 0.10;\n\n  // Emulsion clumping (organic structure)\n  grain *= mix(0.75, 1.35, float(block.y) * UNIT);\n\n  // Density threshold\n  grain = smoothstep(1.0 - uDensity, 1.0, grain);\n\n  // Film response curve (replaces raw pow gamma)\n  grain = filmCurve(grain);\n\n  // Micro-blur: sample neighbors for optical diffusion\n  float n1 = fine(p + uvec2(1u, 0u), frame);\n  float n2 = fine(p - uvec2(1u, 0u), frame);\n  float n3 = fine(p + uvec2(0u, 1u), frame);\n  float n4 = fine(p - uvec2(0u, 1u), frame);\n  float neighbors = (n1 + n2 + n3 + n4) * 0.25;\n  grain = mix(grain, neighbors, 0.15);\n\n  // Chromatic aberration (reuse neighbor hashes)\n  float rShift = n1 * 0.015;\n  float bShift = n2 * 0.015;\n\n  vec3 color = uColor * vec3(\n    grain + rShift,\n    grain,\n    grain + bShift\n  );\n\n  color = clamp(color, 0.0, 1.0);\n\n  fragColor = vec4(color, grain * uOpacity);\n}\n";
 //#endregion

package/dist/film-grain-shader.js

@@ -1,14 +1,14 @@
 //#region src/film-grain-shader.ts
-const vertexShader = `
-attribute vec2 position;
-varying vec2 vUv;
+const vertexShader = `#version 300 es
+in vec2 position;
+out vec2 vUv;
 
 void main() {
   vUv = position * 0.5 + 0.5;
   gl_Position = vec4(position, 0.0, 1.0);
 }
 `;
-const fragmentShader = `
+const fragmentShader = `#version 300 es
 precision highp float;
 
 uniform float uTime;
@@ -18,11 +18,31 @@ uniform float uOpacity;
 uniform float uFps;
 uniform vec3 uColor;
 
-varying vec2 vUv;
+in vec2 vUv;
+out vec4 fragColor;
+
+// Integer hash (two rounds of a permuted congruential mix): three
+// independent values from three inputs, identical on every GPU. No sine:
+// a sine hash loses precision on some mobile GPUs and draws faint stripes.
+uvec3 hash3(uvec3 v) {
+  v = v * 1664525u + 1013904223u;
+  v.x += v.y * v.z;
+  v.y += v.z * v.x;
+  v.z += v.x * v.y;
+  v ^= v >> 16u;
+  v.x += v.y * v.z;
+  v.y += v.z * v.x;
+  v.z += v.x * v.y;
+  return v;
+}
+
+const float UNIT = 1.0 / 4294967295.0;
 
-// Stable hash
-float hash(vec2 p, float seed) {
-  return fract(sin(dot(p + seed, vec2(127.1, 311.7))) * 43758.5453123);
+// A pixel's fine speck: the average of two values, so it gathers round the
+// middle as film grain does, with fewer pure darks and lights.
+float fine(uvec2 pixel, uint frame) {
+  uvec3 h = hash3(uvec3(pixel, frame));
+  return (float(h.x) + float(h.y)) * (0.5 * UNIT);
 }
 
 // Film response curve (soft toe + shoulder rolloff)
@@ -31,27 +51,21 @@ float filmCurve(float x) {
 }
 
 void main() {
-  vec2 uv = gl_FragCoord.xy;
-  vec2 p = floor(uv);
-
-  // Temporal coherence: blend between current and next frame seed
-  float frame = floor(uTime * uFps);
-  float t = fract(uTime * uFps);
-  float seed = frame * 0.1731;
-
-  // Multi-scale grain with inter-frame blending on fine layer
-  float fineA = hash(p, seed);
-  float fineB = hash(p, seed + 0.1731);
-  float fine = mix(fineA, fineB, t);
-
-  float medium = hash(floor(uv * 0.5), seed + 3.1);
-  float coarse = hash(floor(uv * 0.25), seed + 7.93);
-
-  float grain = fine * 0.65 + medium * 0.25 + coarse * 0.10;
+  uvec2 p = uvec2(gl_FragCoord.xy);
+  // The grain changes once per frame of its fps; the component only draws
+  // when this changes.
+  uint frame = uint(floor(uTime * uFps));
+
+  // Multi-scale grain. One hash per 4x4 block gives its coarse speck, its
+  // clumping and, a byte for each 2x2 quarter, its medium specks.
+  uvec3 block = hash3(uvec3(p >> 2u, frame ^ 0x9e3779b9u));
+  uint quarter = ((p.y >> 1u) & 1u) * 2u + ((p.x >> 1u) & 1u);
+  float medium = float((block.z >> (quarter * 8u)) & 255u) / 255.0;
+  float coarse = float(block.x) * UNIT;
+  float grain = fine(p, frame) * 0.65 + medium * 0.25 + coarse * 0.10;
 
   // Emulsion clumping (organic structure)
-  float cluster = hash(floor(uv * 0.18), seed + 9.2);
-  grain *= mix(0.75, 1.35, cluster);
+  grain *= mix(0.75, 1.35, float(block.y) * UNIT);
 
   // Density threshold
   grain = smoothstep(1.0 - uDensity, 1.0, grain);
@@ -60,10 +74,10 @@ void main() {
   grain = filmCurve(grain);
 
   // Micro-blur: sample neighbors for optical diffusion
-  float n1 = hash(p + vec2(1.0, 0.0), seed);
-  float n2 = hash(p - vec2(1.0, 0.0), seed);
-  float n3 = hash(p + vec2(0.0, 1.0), seed);
-  float n4 = hash(p - vec2(0.0, 1.0), seed);
+  float n1 = fine(p + uvec2(1u, 0u), frame);
+  float n2 = fine(p - uvec2(1u, 0u), frame);
+  float n3 = fine(p + uvec2(0u, 1u), frame);
+  float n4 = fine(p - uvec2(0u, 1u), frame);
   float neighbors = (n1 + n2 + n3 + n4) * 0.25;
   grain = mix(grain, neighbors, 0.15);
 
@@ -79,7 +93,7 @@ void main() {
 
   color = clamp(color, 0.0, 1.0);
 
-  gl_FragColor = vec4(color, grain * uOpacity);
+  fragColor = vec4(color, grain * uOpacity);
 }
 `;
 //#endregion

package/dist/film-grain-webgl.js

@@ -125,7 +125,7 @@ function useFilmGrain({ density, fps = 18, color = "#ffffff" }) {
 				dpr
 			};
 		};
-		const canGetWebGL = (c) => (c.getContext("webgl") || c.getContext("experimental-webgl")) ?? null;
+		const canGetWebGL = (c) => c.getContext("webgl2");
 		const probeGl = canGetWebGL(document.createElement("canvas"));
 		const webglSupported = probeGl ? initWebGL(probeGl) !== null : false;
 		probeGl?.getExtension("WEBGL_lose_context")?.loseContext();

package/dist/input.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger placeholder:text-subtle flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color focus-visible:outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", {
+const inputVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger placeholder:text-muted flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color focus-visible:outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
 		sm: "h-8 px-3 text-sm file:-ms-[9px] file:h-6",

package/dist/item.js

@@ -12,7 +12,7 @@ const itemVariants = cva("[a,button]:hover:bg-highlighted [a,button]:cursor-clic
 		variant: {
 			default: "border-transparent",
 			outline: "border-line",
-			muted: "bg-secondary/50 border-transparent [a,button]:hover:bg-secondary"
+			muted: "bg-neutral border-transparent"
 		},
 		size: {
 			default: "gap-3.5 px-4 py-3.5",

package/dist/radio.js

@@ -6,7 +6,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 function Radio({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		"data-slot": "radio",
-		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-selected data-checked:text-white data-checked:border-selected aria-invalid:aria-checked:border-selected aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioIndicator, {})
 	});

package/dist/select.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.tsx
-const selectTriggerVariants = cva("data-placeholder:text-subtle bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color focus-visible:outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const selectTriggerVariants = cva("data-placeholder:text-muted bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color focus-visible:outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs",
 		sm: "h-8 px-3 text-sm",

package/dist/sidebar.js

@@ -299,7 +299,7 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-primary data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden focus-visible:outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-selected data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden focus-visible:outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "",
@@ -387,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
 function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden focus-visible:outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlighted active:bg-highlighted data-active:bg-selected data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden focus-visible:outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
 		render,
 		state: {
 			slot: "sidebar-menu-sub-button",

package/dist/styles.css

@@ -279,22 +279,21 @@
   --ink-900: oklch(0.201 0.038 257); /* #0B1627 */
   --ink-950: oklch(0.132 0.027 252); /* #020812 */
 
-  /* Paper — warm stone on a white page. Built around its own colours: the
-   * cards (50), the neutral fill (100), a warm 300, the secondary text (600)
-   * and the text (950). The steps between are filled with even contrast,
-   * about 1.37 a step from the 100 down. The warmth peaks at the 300 and eases
-   * into the text greys. The page is white, so it isn't a step; these are
-   * sRGB colours, the same on Display-P3 screens. */
+  /* Paper — warm stone on a white page. Its ends are its own colours, the
+   * cards (50) and the text (950); the steps between follow Ink's spacing, so
+   * the ramp falls smoothly all the way into the text colour. The warmth
+   * peaks at the 300 and eases into the text greys. The page is white, so it
+   * isn't a step; these are sRGB colours, the same on Display-P3 screens. */
   --paper-50:  oklch(0.989 0.002 67.8); /* #FCFBFA */
-  --paper-100: oklch(0.959 0.002 67.8); /* #F2F1F0 */
-  --paper-200: oklch(0.860 0.007 67.7); /* #D4D0CC */
-  --paper-300: oklch(0.769 0.010 72.6); /* #B8B3AD */
-  --paper-400: oklch(0.683 0.008 64.9); /* #9D9894 */
-  --paper-500: oklch(0.603 0.006 52.9); /* #84807E */
-  --paper-600: oklch(0.528 0.005 34.3); /* #6E6A69 */
-  --paper-700: oklch(0.452 0.004 34.3); /* #585554 */
-  --paper-800: oklch(0.376 0.003 34.3); /* #434140 */
-  --paper-900: oklch(0.291 0.001 34.3); /* #2C2B2B */
+  --paper-100: oklch(0.929 0.002 67.8); /* #E8E7E6 */
+  --paper-200: oklch(0.850 0.007 67.7); /* #D1CDC9 */
+  --paper-300: oklch(0.756 0.010 72.6); /* #B4AFA9 */
+  --paper-400: oklch(0.668 0.008 64.9); /* #989490 */
+  --paper-500: oklch(0.567 0.006 52.9); /* #797673 */
+  --paper-600: oklch(0.465 0.005 34.3); /* #5C5857 */
+  --paper-700: oklch(0.372 0.004 34.3); /* #423F3F */
+  --paper-800: oklch(0.296 0.003 34.3); /* #2E2C2C */
+  --paper-900: oklch(0.228 0.001 34.3); /* #1D1C1C */
   --paper-950: oklch(0.159 0 0); /* #0D0D0D */
 
   /* ========================================================================
@@ -566,8 +565,8 @@
   --line: color-mix(in srgb, var(--paper-950) 5%, transparent);
   --edge: color-mix(in srgb, var(--paper-950) 10%, transparent);
   --contour: color-mix(in srgb, var(--paper-950) 15%, transparent);
-  --highlighted: color-mix(in srgb, var(--paper-950) 10%, transparent);
-  --neutral: color-mix(in srgb, var(--paper-950) 15%, transparent);
+  --highlighted: color-mix(in srgb, var(--paper-950) 15%, transparent);
+  --neutral: color-mix(in srgb, var(--paper-950) 10%, transparent);
   --shadow-strength: 0.055;
   --danger: var(--wave-red-500);
   --danger-text: var(--wave-red-600);
@@ -601,8 +600,8 @@
     --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
     --edge: color-mix(in srgb, var(--graphite-50) 10%, transparent);
     --contour: color-mix(in srgb, var(--graphite-50) 15%, transparent);
-    --highlighted: color-mix(in srgb, var(--graphite-50) 10%, transparent);
-    --neutral: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+    --highlighted: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+    --neutral: color-mix(in srgb, var(--graphite-50) 10%, transparent);
     --shadow-strength: 0.045;
     --danger: var(--wave-red-500);
     --danger-text: oklch(0.749 0.152 16.8); /* #FF828B, see below */
@@ -626,8 +625,8 @@
   --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
   --edge: color-mix(in srgb, var(--graphite-50) 10%, transparent);
   --contour: color-mix(in srgb, var(--graphite-50) 15%, transparent);
-  --highlighted: color-mix(in srgb, var(--graphite-50) 10%, transparent);
-  --neutral: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+  --highlighted: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+  --neutral: color-mix(in srgb, var(--graphite-50) 10%, transparent);
   --shadow-strength: 0.045;
   --danger: var(--wave-red-500);
   --danger-text: oklch(0.749 0.152 16.8); /* #FF828B, see below */
@@ -680,8 +679,8 @@
   --line: color-mix(in srgb, var(--ink-50) 5%, transparent);
   --edge: color-mix(in srgb, var(--ink-50) 10%, transparent);
   --contour: color-mix(in srgb, var(--ink-50) 15%, transparent);
-  --highlighted: color-mix(in srgb, var(--ink-50) 10%, transparent);
-  --neutral: color-mix(in srgb, var(--ink-50) 15%, transparent);
+  --highlighted: color-mix(in srgb, var(--ink-50) 15%, transparent);
+  --neutral: color-mix(in srgb, var(--ink-50) 10%, transparent);
   --shadow-strength: 0.045;
   --danger: var(--wave-red-500);
   --danger-text: var(--wave-red-400);
@@ -729,12 +728,13 @@
    * always as a border (rings are kept for focus and invalid halos).
    * `contour` (15%) outlines a control or a region: outline buttons, badges,
    * toggles, the slider thumb, menubars.
-   * Fills, one job each: `highlighted` (10%) marks where attention lands:
-   * hovered, keyboard-highlighted and open items. `neutral` (15%) gives a
-   * control its body, its look before anything is chosen: field and track
-   * fills, unchecked boxes. (Tailwind's own `neutral-50` … `neutral-950`
-   * greys are a separate palette Wave doesn't use.) `focus` is the
-   * brand-themed ring (= primary). */
+   * Fills, one job each: `neutral` (10%) is the look before anything is
+   * chosen or pointed at: a control's body (field and track fills, unchecked
+   * boxes) and a quiet region (a table footer, a muted item). `highlighted`
+   * (15%) marks where attention lands: hovered, keyboard-highlighted and
+   * open items, always a step stronger than resting. (Tailwind's own
+   * `neutral-50` … `neutral-950` greys are a separate palette Wave doesn't
+   * use.) `focus` is the brand-themed ring (= primary). */
   --color-line: var(--line);
   --color-edge: var(--edge);
   --color-contour: var(--contour);

package/dist/switch.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("@container cursor-clickable data-checked:bg-primary data-unchecked:bg-neutral data-unchecked:hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger peer relative inline-flex shrink-0 items-center rounded-full border border-transparent motion-color focus-visible:outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30", {
+const switchVariants = cva("@container cursor-clickable data-checked:bg-selected data-unchecked:bg-neutral data-unchecked:hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger peer relative inline-flex shrink-0 items-center rounded-full border border-transparent motion-color focus-visible:outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30", {
 	variants: { size: {
 		default: "h-6 w-11 p-1",
 		sm: "h-4 w-7 p-0.5"

package/dist/table.js

@@ -61,14 +61,14 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("bg-secondary/50 border-t border-line font-medium [&>tr]:last:border-b-0", className),
+		className: cn("bg-neutral border-t border-line font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
 }
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		className: cn("hover:bg-highlighted data-selected:bg-primary data-selected:text-white data-selected:**:data-[slot=checkbox]:border-white border-b border-line motion-color", className),
+		className: cn("hover:bg-highlighted data-selected:bg-selected data-selected:text-white data-selected:**:data-[slot=checkbox]:border-white border-b border-line motion-color", className),
 		...props
 	});
 }

package/dist/tabs.js

@@ -30,7 +30,7 @@ function TabsList({ className, variant = "default", ...props }) {
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
-		className: cn("cursor-clickable text-muted hover:text-contrast relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 text-sm font-medium whitespace-nowrap motion-color focus-visible:outline-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:bg-primary data-active:text-white", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-contrast", "after:bg-contrast after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		className: cn("cursor-clickable text-muted hover:text-contrast relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 text-sm font-medium whitespace-nowrap motion-color focus-visible:outline-hidden focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:bg-selected data-active:text-white", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-contrast", "after:bg-contrast after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
 		...props
 	});
 }

package/dist/textarea.js

@@ -3,7 +3,7 @@ import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
-const textareaVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger resize-y resize-handle disabled:pointer-events-none placeholder:text-subtle flex field-sizing-content w-full rounded-md border border-transparent motion-color focus-visible:outline-hidden focus-visible:ring-3 disabled:opacity-30 aria-invalid:ring-3", {
+const textareaVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger resize-y resize-handle disabled:pointer-events-none placeholder:text-muted flex field-sizing-content w-full rounded-md border border-transparent motion-color focus-visible:outline-hidden focus-visible:ring-3 disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "min-h-12 rounded-sm px-2 py-1 text-xs",
 		sm: "min-h-14 px-3 py-1.5 text-sm",

package/dist/toggle.js

@@ -7,8 +7,8 @@ import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 const toggleVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 focus-visible:outline-hidden group/toggle select-none active:scale-[0.97]", {
 	variants: {
 		variant: {
-			default: "text-contrast hover:bg-highlighted data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150",
-			outline: "border-contour bg-foundation hover:bg-highlighted hover:text-contrast data-pressed:border-primary data-pressed:bg-primary data-pressed:text-white data-pressed:hover:bg-primary/80 not-supports-backdrop-filter:data-pressed:hover:bg-primary/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150"
+			default: "text-contrast hover:bg-highlighted data-pressed:bg-selected data-pressed:text-white data-pressed:hover:bg-selected/80 not-supports-backdrop-filter:data-pressed:hover:bg-selected/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150",
+			outline: "border-contour bg-foundation hover:bg-highlighted hover:text-contrast data-pressed:border-selected data-pressed:bg-selected data-pressed:text-white data-pressed:hover:bg-selected/80 not-supports-backdrop-filter:data-pressed:hover:bg-selected/90 data-pressed:hover:backdrop-blur-xl data-pressed:hover:backdrop-saturate-150"
 		},
 		size: {
 			default: "h-9 min-w-9 gap-1.5 px-3 text-base has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [