@instruments/materia-ui 0.1.0 → 0.3.0

package/agent-docs.md

@@ -1259,10 +1259,11 @@ The component renders only the field stack - no card, heading, or CTA chrome. Co
 
 `@instruments/materia-ui/components/progress`
 
-Linear progress bar showing completion from 0 to 100; pass `value={null}` for an indeterminate (empty) track. Built on Base UI Progress for accessible semantics.
+Linear progress bar showing completion from 0 to 100. Pass `value={null}` when the amount of work is unknown: a short bar slides across the track on a loop, and under reduced motion it holds still in the middle. Built on Base UI Progress for accessible semantics.
 
-- Use `Progress` for determinate 0–100 completion (`value={null}` for an indeterminate track); position in a stepped flow is `ProgressDots`.
+- Use `Progress` for determinate 0–100 completion and `value={null}` when the total is unknown; position in a stepped flow is `ProgressDots`.
 - For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.
+- Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).
 
 ## ProgressDots
 
@@ -1945,7 +1946,7 @@ The typography primitive for body copy - renders a `<p>` (or any element via `as
 Renders a textarea element for multi-line text input (Base UI `Field.Control` rendering a `<textarea>`). Inside a Field it is the field's control: the FieldLabel targets it, FieldDescription/FieldError describe it, and it inherits the field's invalid state.
 
 - Inside a `Field`, let invalid state cascade like `Input` - omit `hasError`; pass it only to force error styling on a standalone `Textarea`.
-- It auto-grows with content (`field-sizing-content`); set `rows` for an initial height rather than pinning height via CSS.
+- It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.
 - Give it a label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.
 
 ## ThinkingLoader

package/dist/components/animated-number/number-digit.d.ts

@@ -15,10 +15,12 @@ interface NumberDigitProps extends HTMLMotionProps<"span"> {
  * through every intermediate numeral in either direction, including across the
  * 9/0 wrap when `trend` asks for it. New leading digits enter with
  * `initialValue={0}` and roll up from zero; exiting digits roll to zero so
- * removal also animates. Per-digit width animates to the target glyph width so
- * proportional fonts stay aligned.
+ * removal also animates. The column's real width tweens to the target glyph
+ * width on the roll's timing, so proportional fonts stay aligned without a
+ * one-frame jump.
  *
- * Under reduced motion the FLIP is skipped: the digit snaps to its value.
+ * Under reduced motion the FLIP and the width tween are skipped: the digit
+ * snaps to its value and width.
  */
 export declare const NumberDigit: ({ value: _value, trend, ...rest }: NumberDigitProps) => import("react").JSX.Element;
 export {};

package/dist/components/animated-number/number-digit.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { animate, MotionConfigContext, PresenceContext, useIsPresent, useReducedMotion, } from "motion/react";
+import { animate, MotionConfigContext, PresenceContext, useIsPresent, useMotionValue, useReducedMotion, } from "motion/react";
 import * as m from "motion/react-m";
-import { use, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { use, useEffect, useLayoutEffect, useRef } from "react";
 import { getWidthInEm } from "./get-width-in-em.js";
 import { maskHeight } from "./mask.js";
-import { targetWidths } from "./target-widths.js";
+import { targetWidths, widthTiming } from "./target-widths.js";
 const mod = (n, base) => ((n % base) + base) % base;
 /** The nine digits above and below `value`, wrapping mod 10. */
 const ABOVE_OFFSETS = [9, 8, 7, 6, 5, 4, 3, 2, 1];
@@ -24,10 +24,12 @@ const digitFillStyle = {
  * through every intermediate numeral in either direction, including across the
  * 9/0 wrap when `trend` asks for it. New leading digits enter with
  * `initialValue={0}` and roll up from zero; exiting digits roll to zero so
- * removal also animates. Per-digit width animates to the target glyph width so
- * proportional fonts stay aligned.
+ * removal also animates. The column's real width tweens to the target glyph
+ * width on the roll's timing, so proportional fonts stay aligned without a
+ * one-frame jump.
  *
- * Under reduced motion the FLIP is skipped: the digit snaps to its value.
+ * Under reduced motion the FLIP and the width tween are skipped: the digit
+ * snaps to its value and width.
  */
 export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
     const { transition } = use(MotionConfigContext);
@@ -45,15 +47,23 @@ export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
     // Exit isn't a normal AnimatePresence exit because it must trigger a resize.
     const isPresent = useIsPresent();
     const value = isPresent ? _value : 0;
-    // Set the width to the initial value's width immediately, so the next render
-    // animates from it.
+    // The column's real layout width, tweened to each value's glyph width so a
+    // proportional font never jumps its neighbours. Natural until mounted.
+    const width = useMotionValue("auto");
+    // Set the width to the initial value's width before paint, so the first
+    // change tweens from it.
     useLayoutEffect(() => {
         const initialEl = numberRefs.current[initialValueRef.current];
         if (!scope.current || !initialEl) {
             return;
         }
-        scope.current.style.width = getWidthInEm(initialEl);
-    }, []);
+        const initialWidth = getWidthInEm(initialEl);
+        scope.current.style.width = initialWidth;
+        width.jump(initialWidth);
+    }, [width]);
+    useEffect(() => () => {
+        width.stop();
+    }, [width]);
     // FLIP the y in a layout effect. initialY is the pixel offset from the new
     // resting position, including any in-flight offset (inner vs outer rect top)
     // so mid-roll re-targets stay continuous.
@@ -83,24 +93,37 @@ export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
         // (equivalent to the original's cleanup, without a returned teardown).
         prevValue.current = value;
     }, [value, trend, shouldReduceMotion, transition]);
-    const [width, setWidth] = useState();
+    const sizedValue = useRef(null);
     useEffect(() => {
         const el = numberRefs.current[value];
-        if (!el) {
+        if (!el || sizedValue.current === value) {
             return;
         }
+        sizedValue.current = value;
         const w = getWidthInEm(el);
         // Store the target width immediately, so the section resize can use it.
         if (ref.current) {
             targetWidths.set(ref.current, w);
         }
-        // Trigger the layout animation by causing another render.
-        setWidth(w);
-    }, [value]);
+        if (shouldReduceMotion === true || width.get() === w) {
+            width.jump(w);
+            return;
+        }
+        // A change mid-tween retargets from the width it has reached.
+        animate(width, w, widthTiming(transition));
+    }, [value, shouldReduceMotion, transition, width]);
     const renderNumber = (digit) => (_jsx("span", { ref: (r) => {
             numberRefs.current[digit] = r;
         }, style: { display: "inline-block", padding: `calc(${maskHeight}/2) 0` }, children: digit }, digit));
-    return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", ref: ref, style: { display: "inline-flex", justifyContent: "center", width }, children: _jsxs("span", { ref: scope, style: {
+    return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", ref: ref, 
+        // Never shrinks: while the section's width tweens, the glyphs overflow
+        // it at their own widths rather than squeezing.
+        style: {
+            display: "inline-flex",
+            flexShrink: 0,
+            justifyContent: "center",
+            width,
+        }, children: _jsxs("span", { ref: scope, style: {
                 alignItems: "center",
                 display: "inline-flex",
                 flexDirection: "column",

package/dist/components/animated-number/number-section.d.ts

@@ -12,11 +12,13 @@ interface NumberSectionProps extends HTMLMotionProps<"span"> {
 }
 /**
  * A run of digits/symbols (pre, integer, fraction, post) sharing one anchor.
- * It holds a fixed measured width so a new glyph is appended at the end before
- * the layout animation begins - making it look like it was already there - then
- * re-measures by momentarily removing exiting children and applying the digits'
- * target widths (the exact resize trick), so reflow accounts for negative
- * margins between glyphs.
+ *
+ * Its real layout width is a Motion value: when the glyphs change it measures
+ * where the width will settle (exiting glyphs removed, digits at their target
+ * widths) and tweens to it on the roll's timing, so nothing laid out around the
+ * number jumps when a digit, separator, prefix or suffix arrives or leaves. In
+ * the meantime the glyphs hold to the section's anchor edge and overflow the
+ * other, which the digit mask clips. Under reduced motion the width snaps.
  */
 export declare const NumberSection: ({ parts, justify, mode, style, name, layoutDependency, trend, ...rest }: NumberSectionProps) => import("react").JSX.Element;
 export {};

package/dist/components/animated-number/number-section.js

@@ -1,93 +1,109 @@
 "use client";
-// Port of Motion+ AnimateNumber (motion-plus 2.0.0).
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
+import { animate, AnimatePresence, MotionConfigContext, useMotionValue, useReducedMotion, } from "motion/react";
 import * as m from "motion/react-m";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { use, useEffect, useMemo, useRef } from "react";
 import { isDigitPart } from "./format-parts.js";
 import { getWidthInEm } from "./get-width-in-em.js";
 import { NumberDigit } from "./number-digit.js";
 import { NumberSymbol } from "./number-symbol.js";
 import { SectionContext } from "./section-context.js";
-import { targetWidths } from "./target-widths.js";
+import { targetWidths, widthTiming } from "./target-widths.js";
+/**
+ * The section's natural width once the change lands, in `em`: exiting glyphs
+ * removed and each digit at its target width, measured at `max-content` and
+ * then put back as it was, in one synchronous pass so nothing paints between.
+ */
+const measureTargetWidth = (section) => {
+    const undos = [];
+    // A static list: the loop removes children as it goes.
+    for (const child of section.querySelectorAll(":scope > *")) {
+        if (!(child instanceof HTMLElement)) {
+            continue;
+        }
+        if (child.dataset.state === "exiting") {
+            const next = child.nextSibling;
+            child.remove();
+            undos.push(() => {
+                if (next === null) {
+                    section.append(child);
+                }
+                else {
+                    next.before(child);
+                }
+            });
+            continue;
+        }
+        const target = targetWidths.get(child);
+        if (target === undefined) {
+            continue;
+        }
+        const current = child.style.width;
+        child.style.width = target;
+        undos.push(() => {
+            child.style.width = current;
+        });
+    }
+    const held = section.style.width;
+    section.style.width = "max-content";
+    const width = getWidthInEm(section);
+    section.style.width = held;
+    for (let i = undos.length - 1; i >= 0; i -= 1) {
+        undos[i]?.();
+    }
+    return width;
+};
 /**
  * A run of digits/symbols (pre, integer, fraction, post) sharing one anchor.
- * It holds a fixed measured width so a new glyph is appended at the end before
- * the layout animation begins - making it look like it was already there - then
- * re-measures by momentarily removing exiting children and applying the digits'
- * target widths (the exact resize trick), so reflow accounts for negative
- * margins between glyphs.
+ *
+ * Its real layout width is a Motion value: when the glyphs change it measures
+ * where the width will settle (exiting glyphs removed, digits at their target
+ * widths) and tweens to it on the roll's timing, so nothing laid out around the
+ * number jumps when a digit, separator, prefix or suffix arrives or leaves. In
+ * the meantime the glyphs hold to the section's anchor edge and overflow the
+ * other, which the digit mask clips. Under reduced motion the width snaps.
  */
 export const NumberSection = ({ parts, justify = "left", mode, style, name, layoutDependency, trend, ...rest }) => {
     const ref = useRef(null);
     const context = useMemo(() => ({ justify }), [justify]);
-    const measuredRef = useRef(null);
-    // A fixed width for the section so new characters are added at the end
-    // before the layout animation starts (they look like they were there).
-    const [width, setWidth] = useState();
+    const { transition } = use(MotionConfigContext);
+    const shouldReduceMotion = useReducedMotion();
+    // Natural until mounted, then always an `em` length so it can tween.
+    const width = useMotionValue("auto");
     const partsSignature = parts.map((p) => p.value).join("");
-    // On mount, fix the width to the first measured width.
     useEffect(() => {
-        const measured = measuredRef.current;
-        if (measured && ref.current) {
-            ref.current.style.width = getWidthInEm(measured);
+        if (ref.current) {
+            width.set(getWidthInEm(ref.current));
         }
-    }, []);
+        return () => {
+            width.stop();
+        };
+    }, [width]);
     const measuredSignature = useRef(partsSignature);
     useEffect(() => {
-        const measured = measuredRef.current;
-        if (!measured || measuredSignature.current === partsSignature) {
+        const section = ref.current;
+        if (!section || measuredSignature.current === partsSignature) {
             return;
         }
         measuredSignature.current = partsSignature;
-        // Find the new width by removing exiting elements, measuring, then
-        // re-adding them. We query the DOM because AnimatePresence popLayout
-        // overwrites ref props.
-        const undos = [];
-        // Snapshot the children first - we mutate the live collection below.
-        const children = [...measured.children];
-        for (const child of children) {
-            if (!(child instanceof HTMLElement)) {
-                continue;
-            }
-            if (child.dataset.state === "exiting") {
-                const next = child.nextSibling;
-                child.remove();
-                undos.push(() => {
-                    // insertBefore() appends if next is null.
-                    measuredRef.current?.insertBefore(child, next);
-                });
-                continue;
-            }
-            const newWidth = targetWidths.get(child);
-            if (newWidth === undefined) {
-                continue;
-            }
-            const oldWidth = child.style.width;
-            child.style.width = newWidth;
-            undos.push(() => {
-                child.style.width = oldWidth;
-            });
-        }
-        // Measure the resulting width, then undo immediately. This is a
-        // measure-after-render pass (DOM already committed), not a render-phase
-        // adjustment, so the section can hold a fixed width during the animation.
-        setWidth(getWidthInEm(measured));
-        for (let i = undos.length - 1; i >= 0; i -= 1) {
-            undos[i]?.();
+        const target = measureTargetWidth(section);
+        if (shouldReduceMotion === true) {
+            width.jump(target);
+            return;
         }
-    }, [partsSignature]);
-    return (_jsx(SectionContext.Provider, { value: context, children: _jsx(m.span, { layoutDependency: layoutDependency, ...rest, className: `number-section-${name}`, ref: ref, style: {
+        // A change mid-tween retargets from the width it has reached. Not stopped
+        // when the effect re-runs: a fresh transition object from the caller must
+        // not freeze the width part-way.
+        animate(width, target, widthTiming(transition));
+    }, [partsSignature, shouldReduceMotion, transition, width]);
+    return (_jsx(SectionContext.Provider, { value: context, children: _jsxs(m.span, { layoutDependency: layoutDependency, ...rest, className: `number-section-${name}`, ref: ref, style: {
                 ...style,
                 display: "inline-flex",
                 justifyContent: justify,
+                // The containing block for glyphs AnimatePresence pops out of flow.
+                position: "relative",
                 width,
-            }, children: _jsxs("span", { ref: measuredRef, style: {
-                    display: "inline-flex",
-                    justifyContent: "inherit",
-                    position: "relative",
-                }, children: ["\u200B", _jsx(AnimatePresence, { anchorX: justify, initial: false, mode: mode ?? "sync", children: parts.map((part) => isDigitPart(part) ? (_jsx(NumberDigit, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, trend: trend, value: part.value }, part.key)) : (_jsx(NumberSymbol, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, partKey: part.key, type: part.type, children: part.value }, part.type === "literal"
-                            ? `${part.key}:${part.value}`
-                            : part.key))) })] }) }) }));
+            }, children: ["\u200B", _jsx(AnimatePresence, { anchorX: justify, initial: false, mode: mode ?? "sync", children: parts.map((part) => isDigitPart(part) ? (_jsx(NumberDigit, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, trend: trend, value: part.value }, part.key)) : (_jsx(NumberSymbol, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, partKey: part.key, type: part.type, children: part.value }, part.type === "literal"
+                        ? `${part.key}:${part.value}`
+                        : part.key))) })] }) }));
 };

package/dist/components/animated-number/number-symbol.js

@@ -16,6 +16,8 @@ export const NumberSymbol = ({ partKey: _partKey, type: _type, children, layoutD
     const { justify } = use(SectionContext);
     return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", layoutDependency: layoutDependency, style: {
             display: "inline-flex",
+            // Holds its width while the section's width tweens past it.
+            flexShrink: 0,
             justifyContent: justify,
             padding: `calc(${maskHeight}/2) 0`,
             position: "relative",

package/dist/components/animated-number/target-widths.d.ts

@@ -1,3 +1,4 @@
+import type { Transition } from "motion/react";
 /**
  * Per-digit target widths, written by {@link NumberDigit} the instant a digit's
  * width changes and read by {@link NumberSection} when it re-measures its fixed
@@ -5,3 +6,9 @@
  * element.
  */
 export declare const targetWidths: WeakMap<Element, string>;
+/**
+ * The timing for a tweened width: the layout curve when the transition is
+ * keyed per value (the token default), otherwise the transition itself (a
+ * caller's bespoke override), so widths move in step with the roll.
+ */
+export declare const widthTiming: (transition: Transition | undefined) => Transition;

package/dist/components/animated-number/target-widths.js

@@ -1,4 +1,3 @@
-// Port of Motion+ AnimateNumber (motion-plus 2.0.0).
 /**
  * Per-digit target widths, written by {@link NumberDigit} the instant a digit's
  * width changes and read by {@link NumberSection} when it re-measures its fixed
@@ -6,3 +5,16 @@
  * element.
  */
 export const targetWidths = new WeakMap();
+/**
+ * The timing for a tweened width: the layout curve when the transition is
+ * keyed per value (the token default), otherwise the transition itself (a
+ * caller's bespoke override), so widths move in step with the roll.
+ */
+export const widthTiming = (transition) => {
+    if (transition !== undefined &&
+        "layout" in transition &&
+        transition.layout !== undefined) {
+        return transition.layout;
+    }
+    return transition ?? {};
+};

package/dist/components/button/button-variants.js

@@ -114,18 +114,37 @@ const NEUTRAL_SOFT = "border-border bg-secondary text-secondary-foreground";
 const NEUTRAL_SOFT_GRADIENT = "before:bg-sheen-bright hover:before:bg-sheen-hover active:before:bg-none disabled:before:bg-none data-disabled:before:bg-none data-[hovered=true]:before:bg-sheen-hover data-[pressed=true]:before:bg-none dark:before:bg-sheen-dark";
 const NEUTRAL_OUTLINE = "border-border bg-background text-foreground hover:bg-muted hover:text-accent-foreground data-[hovered=true]:bg-muted data-[hovered=true]:text-accent-foreground";
 const NEUTRAL_GHOST = "border-transparent bg-transparent text-foreground shadow-none hover:bg-muted hover:text-accent-foreground data-[hovered=true]:bg-muted data-[hovered=true]:text-accent-foreground";
-const NEUTRAL_LINK = "border-transparent bg-transparent text-foreground underline-offset-4 shadow-none hover:underline data-[hovered=true]:underline";
-const NEUTRAL_LINK_FLAT = "shadow-none before:hidden active:scale-100 active:underline-offset-5 data-[pressed=true]:scale-100 data-[pressed=true]:underline-offset-5";
+/* ── Link, shared by every tone: no fill at rest or on hover, so each tone
+ * only picks a text colour that reads on the page. ─────────────────── */
+const LINK = "border-transparent bg-transparent underline-offset-4 shadow-none hover:bg-transparent hover:underline data-[hovered=true]:bg-transparent data-[hovered=true]:underline";
+const LINK_FLAT = "shadow-none before:hidden active:scale-100 active:underline-offset-5 data-[pressed=true]:scale-100 data-[pressed=true]:underline-offset-5";
+const NEUTRAL_LINK = `${LINK} text-foreground`;
 const NEUTRAL_TRANSPARENT = "transform-gpu border-transparent bg-primary/50 backdrop-blur-md will-change-[filter,background-color] hover:bg-primary/60 data-[hovered=true]:bg-primary/60";
 /* ── Danger tone (was `variant="destructive"`) modifiers ────────────── */
+// Built like neutral soft. The hover pins the fill, since the danger tone
+// darkens its solid fill on hover.
+const DANGER_SOFT = "border-error-border bg-error-soft text-error-foreground hover:bg-error-soft data-[hovered=true]:bg-error-soft";
 const DANGER_OUTLINE = "border-destructive text-destructive hover:bg-destructive/5 data-[hovered=true]:bg-destructive/5";
 const DANGER_GHOST = "text-destructive hover:bg-destructive/10 hover:text-destructive data-[hovered=true]:bg-destructive/10 data-[hovered=true]:text-destructive";
-const DANGER_TRANSPARENT = "transform-gpu border-transparent bg-destructive/50 backdrop-blur-md will-change-[filter,background-color] hover:bg-destructive/60 data-[hovered=true]:bg-destructive/60";
+const DANGER_LINK = `${LINK} text-destructive`;
+// Half the danger fill over a light page is a pale red, so light mode takes
+// dark text; over graphite it is mid-toned, so dark mode takes white, as
+// Pill's status tones do.
+const DANGER_TRANSPARENT = "transform-gpu border-transparent bg-destructive/50 text-foreground backdrop-blur-md will-change-[filter,background-color] hover:bg-destructive/60 data-[hovered=true]:bg-destructive/60 dark:text-white/90";
 /* ── Brand tone (was `variant="brand"`) modifiers ───────────────────── */
 const BRAND_SOLID_GRADIENT = "shadow-button-sheen before:bg-sheen-strong hover:before:bg-sheen-hover active:shadow-none active:before:bg-none disabled:shadow-none disabled:before:bg-none data-disabled:shadow-none data-disabled:before:bg-none data-[hovered=true]:before:bg-sheen-hover data-[pressed=true]:shadow-none data-[pressed=true]:before:bg-none";
-const BRAND_OUTLINE = "border-brand text-brand hover:bg-brand/5 data-[hovered=true]:bg-brand/5";
-const BRAND_GHOST = "text-brand hover:bg-brand/10 hover:text-brand data-[hovered=true]:bg-brand/10 data-[hovered=true]:text-brand";
-const BRAND_TRANSPARENT = "transform-gpu border-transparent bg-brand/50 backdrop-blur-md will-change-[filter,background-color] hover:bg-brand/60 data-[hovered=true]:bg-brand/60";
+// Built like neutral soft, with Pill's brand soft colours. Dark brand soft is
+// graphite, so the text there takes the brand accent.
+const BRAND_SOFT = "bg-brand-soft text-brand-foreground dark:text-brand-accent";
+// Without a fill, brand yellow is unreadable on the page, so the text takes
+// `brand-strong`; the outline border can stay yellow.
+const BRAND_OUTLINE = "border-brand text-brand-strong hover:bg-brand/5 data-[hovered=true]:bg-brand/5";
+const BRAND_GHOST = "text-brand-strong hover:bg-brand/10 hover:text-brand-strong data-[hovered=true]:bg-brand/10 data-[hovered=true]:text-brand-strong";
+const BRAND_LINK = `${LINK} text-brand-strong`;
+// Over graphite, half the brand fill turns olive and the brand foreground
+// stops reading, so dark mode thickens the fill rather than swapping the text,
+// which keeps the brand and its foreground overridable as a pair.
+const BRAND_TRANSPARENT = "transform-gpu border-transparent bg-brand/50 backdrop-blur-md will-change-[filter,background-color] hover:bg-brand/60 data-[hovered=true]:bg-brand/60 dark:bg-brand/70 dark:hover:bg-brand/80 dark:data-[hovered=true]:bg-brand/80";
 /**
  * buttonVariants - CVA helper for Button styling.
  *
@@ -191,7 +210,7 @@ const buttonVariants = cva([
         },
         {
             asInput: false,
-            class: `${NEUTRAL_LINK} ${SOLID_SURFACE} ${NEUTRAL_LINK_FLAT}`,
+            class: `${NEUTRAL_LINK} ${SOLID_SURFACE} ${LINK_FLAT}`,
             emphasis: "link",
             tone: "neutral",
         },
@@ -208,6 +227,12 @@ const buttonVariants = cva([
             emphasis: "solid",
             tone: "danger",
         },
+        {
+            asInput: false,
+            class: `${DANGER_SOFT} ${SOLID_SURFACE} ${SOLID_SHADOW} ${NEUTRAL_SOFT_GRADIENT}`,
+            emphasis: "soft",
+            tone: "danger",
+        },
         {
             asInput: false,
             class: `${SOLID_SHADOW} ${DANGER_OUTLINE}`,
@@ -226,6 +251,12 @@ const buttonVariants = cva([
             emphasis: "transparent",
             tone: "danger",
         },
+        {
+            asInput: false,
+            class: `${DANGER_LINK} ${LINK_FLAT}`,
+            emphasis: "link",
+            tone: "danger",
+        },
         /* ── Brand tone (base colours from variants.tone) ─────── */
         {
             asInput: false,
@@ -233,6 +264,12 @@ const buttonVariants = cva([
             emphasis: "solid",
             tone: "brand",
         },
+        {
+            asInput: false,
+            class: `${BRAND_SOFT} ${SOLID_SURFACE} ${SOLID_SHADOW} ${NEUTRAL_SOFT_GRADIENT}`,
+            emphasis: "soft",
+            tone: "brand",
+        },
         {
             asInput: false,
             class: `${SOLID_SHADOW} ${BRAND_OUTLINE}`,
@@ -251,6 +288,12 @@ const buttonVariants = cva([
             emphasis: "transparent",
             tone: "brand",
         },
+        {
+            asInput: false,
+            class: `${BRAND_LINK} ${LINK_FLAT}`,
+            emphasis: "link",
+            tone: "brand",
+        },
         // Input chips carry the solid drop-shadow (was `variant="default"`).
         // asInput replaces every tone/emphasis surface (gated `asInput: false`).
         { asInput: true, class: SOLID_SHADOW },
@@ -281,10 +324,12 @@ const buttonVariants = cva([
         // brand|danger>, emphasis is the full Emphasis plus Button's `link`
         // extension. The `satisfies Record<…>` fails to compile if these keys
         // drift from ButtonTone/ButtonEmphasis (declared below).
+        // Danger fades only to /95 on hover: a lighter red under the light
+        // foreground and the sheen drops below 4.5:1 at /90.
         tone: {
             neutral: "",
             brand: "border-brand-accent/40 bg-brand text-brand-foreground focus-visible:ring-brand/25 data-[focused=true]:ring-brand/25",
-            danger: "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90 data-[hovered=true]:bg-destructive/90 focus-visible:ring-red-400/50 data-[focused=true]:ring-red-400/50",
+            danger: "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/95 data-[hovered=true]:bg-destructive/95 focus-visible:ring-red-400/50 data-[focused=true]:ring-red-400/50",
         },
         emphasis: {
             solid: "",

package/dist/components/button-group/button-group-root.js

@@ -40,16 +40,18 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
             dividers: false,
             variant: "segmented",
         },
-        // Remove overlapping borders when dividers are disabled (joined variant behaviour)
+        // A joined group keeps each child's own border and drops every trailing
+        // edge but the last, so neighbours share one line and an outline group
+        // reads as one continuous outline. Dividers recolour that shared edge.
         {
-            class: "[&>[data-slot=button]]:border-0",
-            dividers: false,
+            class: "[&>*:not(:last-child)]:border-r-0",
             orientation: "horizontal",
+            variant: "joined",
         },
         {
-            class: "[&>[data-slot=button]]:border-0",
-            dividers: false,
+            class: "[&>*:not(:last-child)]:border-b-0",
             orientation: "vertical",
+            variant: "joined",
         },
         // Optional radius overrides (applies to non-separator items)
         {
@@ -90,7 +92,7 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
         variant: {
             /**
              * Default "joined" behaviour - relies on each child for borders/background,
-             * and simply removes overlapping borders + inner radii.
+             * and collapses the borders and inner radii where neighbours meet.
              */
             joined: "",
             /**

package/dist/components/calendar/calendar-root.js

@@ -2,16 +2,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayButton, DayPicker } from "react-day-picker";
+import { Day, DayButton, DayPicker } from "react-day-picker";
 import { buttonVariants } from "../button.js";
 import { Icon } from "../icon.js";
 const CalendarChevron = ({ orientation }) => (_jsx(Icon, { icon: orientation === "left" ? ChevronLeft : ChevronRight, size: "xs" }));
 /**
- * DayPicker marks selection on the grid cell, not the button inside it, so the
- * button carries its own copy to paint the filled day. A range's middle days
- * are selected too, but sit on the cell's accent band instead of a fill.
+ * The accent band behind a selected range, painted on the grid cell because
+ * only the cells meet edge to edge. Middle days fill their cell, rounded where
+ * a week starts or ends; the first and last days fill the half that faces the
+ * range, so the band runs into their filled button. A range of one day has no
+ * band.
  */
-const CalendarDayButton = ({ modifiers, ...props }) => (_jsx(DayButton, { "data-selected": modifiers.selected === true && modifiers.range_middle !== true, modifiers: modifiers, ...props }));
+const rangeBandClasses = (modifiers) => {
+    const start = modifiers.range_start === true;
+    const end = modifiers.range_end === true;
+    if (modifiers.range_middle === true) {
+        return "bg-accent text-accent-foreground first:rounded-l-md last:rounded-r-md";
+    }
+    if (start && !end) {
+        return "bg-linear-to-r from-transparent from-50% to-accent to-50% last:rounded-r-md";
+    }
+    if (end && !start) {
+        return "bg-linear-to-l from-transparent from-50% to-accent to-50% first:rounded-l-md";
+    }
+    return undefined;
+};
+const CalendarDay = ({ className, modifiers, ...props }) => (_jsx(Day, { className: cn(className, rangeBandClasses(modifiers)), modifiers: modifiers, ...props }));
+/**
+ * DayPicker marks state on the grid cell, not the button inside it, so the
+ * button carries its own copy to paint the day. A range's middle days are
+ * selected too, but sit on the cell's band instead of a fill; today is tinted
+ * unless it is filled.
+ */
+const CalendarDayButton = ({ modifiers, ...props }) => {
+    const filled = modifiers.selected === true && modifiers.range_middle !== true;
+    return (_jsx(DayButton, { "data-selected": filled, "data-today": modifiers.today === true && !filled, modifiers: modifiers, ...props }));
+};
 /**
  * Date picker built on react-day-picker, styled with the shared button variants;
  * supports `single`, `multiple`, and `range` selection via the `mode` prop.
@@ -26,9 +52,8 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
         button_next: cn(buttonVariants({ emphasis: "ghost", tone: "neutral" }), "text-muted-foreground hover:bg-accent hover:text-foreground size-8 p-0"),
         button_previous: cn(buttonVariants({ emphasis: "ghost", tone: "neutral" }), "text-muted-foreground hover:bg-accent hover:text-foreground size-8 p-0"),
         caption_label: "text-paragraph-sm font-medium",
-        day: cn("text-paragraph-sm relative w-9 p-0 text-center focus-within:relative focus-within:z-20", props.mode === "range" &&
-            "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"),
-        day_button: cn(buttonVariants({ emphasis: "ghost" }), "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground size-8 rounded-md p-0 font-normal"),
+        day: "text-paragraph-sm relative w-9 p-0 text-center focus-within:relative focus-within:z-20",
+        day_button: cn(buttonVariants({ emphasis: "ghost" }), "data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground size-8 rounded-md p-0 font-normal"),
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",
         month: "flex flex-col gap-4",
@@ -36,18 +61,19 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
         month_grid: "w-full border-collapse space-y-1",
         months: "relative flex flex-col gap-2 sm:flex-row",
         nav: "absolute inset-x-0 top-0 z-10 flex h-9 items-center justify-between px-1",
-        outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        range_end: "day-range-end",
-        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        range_start: "day-range-start",
+        outside: "text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        range_end: "",
+        range_middle: "",
+        range_start: "",
         selected: "",
-        today: "bg-accent text-accent-foreground",
+        today: "",
         week: "mt-2 flex w-full",
         weekday: "w-9 rounded-md text-calendar font-normal text-muted-foreground",
         weekdays: "flex",
         ...classNames,
     }, components: {
         Chevron: CalendarChevron,
+        Day: CalendarDay,
         DayButton: CalendarDayButton,
     }, showOutsideDays: showOutsideDays, ...props }));
 Calendar.displayName = "Calendar";