@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/lib/motion-tokens.d.ts

@@ -0,0 +1,60 @@
+/** Motion presets are shared by the gallery and future registry consumers. */
+export declare const motionTokens: {
+    readonly duration: {
+        readonly instant: 0.12;
+        readonly fast: 0.16;
+        readonly exit: 0.18;
+        readonly standard: 0.24;
+        readonly considered: 0.48;
+    };
+    readonly ease: {
+        readonly enter: readonly [0.16, 1, 0.3, 1];
+        readonly exit: readonly [0.7, 0, 0.84, 0];
+        readonly standard: readonly [0.22, 1, 0.36, 1];
+        /** For elements that move while already on screen. */
+        readonly inOut: readonly [0.65, 0, 0.35, 1];
+    };
+    readonly spring: {
+        readonly responsive: {
+            readonly type: "spring";
+            readonly stiffness: 520;
+            readonly damping: 38;
+        };
+        readonly gentle: {
+            readonly type: "spring";
+            readonly stiffness: 340;
+            readonly damping: 34;
+        };
+        /** Presses, toggles, thumbs, and small indicators. Settles fast with a hint of life. */
+        readonly snappy: {
+            readonly type: "spring";
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
+        };
+        /** Panels, height changes, and layout shifts. Critically damped, never overshoots. */
+        readonly smooth: {
+            readonly type: "spring";
+            readonly visualDuration: 0.4;
+            readonly bounce: 0;
+        };
+        /** Shape morphs, shared layout highlights, and width changes that follow new content. */
+        readonly morph: {
+            readonly type: "spring";
+            readonly visualDuration: 0.42;
+            readonly bounce: 0.16;
+        };
+    };
+    /** Stagger steps in seconds. Keep total stagger under roughly 0.4s. */
+    readonly stagger: {
+        readonly char: 0.016;
+        readonly word: 0.04;
+        readonly line: 0.08;
+        readonly item: 0.035;
+    };
+    /** Blur radii in px for text and content crossfades. Keep blur small and brief. */
+    readonly blur: {
+        readonly subtle: 2;
+        readonly soft: 4;
+        readonly text: 8;
+    };
+};

package/lib/motion-tokens.js

@@ -0,0 +1,25 @@
+/** Motion presets are shared by the gallery and future registry consumers. */
+export const motionTokens = {
+    duration: { instant: 0.12, fast: 0.16, exit: 0.18, standard: 0.24, considered: 0.48 },
+    ease: {
+        enter: [0.16, 1, 0.3, 1],
+        exit: [0.7, 0, 0.84, 0],
+        standard: [0.22, 1, 0.36, 1],
+        /** For elements that move while already on screen. */
+        inOut: [0.65, 0, 0.35, 1],
+    },
+    spring: {
+        responsive: { type: "spring", stiffness: 520, damping: 38 },
+        gentle: { type: "spring", stiffness: 340, damping: 34 },
+        /** Presses, toggles, thumbs, and small indicators. Settles fast with a hint of life. */
+        snappy: { type: "spring", visualDuration: 0.26, bounce: 0.12 },
+        /** Panels, height changes, and layout shifts. Critically damped, never overshoots. */
+        smooth: { type: "spring", visualDuration: 0.4, bounce: 0 },
+        /** Shape morphs, shared layout highlights, and width changes that follow new content. */
+        morph: { type: "spring", visualDuration: 0.42, bounce: 0.16 },
+    },
+    /** Stagger steps in seconds. Keep total stagger under roughly 0.4s. */
+    stagger: { char: 0.016, word: 0.04, line: 0.08, item: 0.035 },
+    /** Blur radii in px for text and content crossfades. Keep blur small and brief. */
+    blur: { subtle: 2, soft: 4, text: 8 },
+};

package/lib/return-focus.d.ts

@@ -0,0 +1,9 @@
+export interface ReturnFocusHandlers {
+    onOpenAutoFocus: (event: Event) => void;
+    onCloseAutoFocus: (event: Event) => void;
+}
+/**
+ * `open`: the layer's open state (null or undefined when the caller cannot know it). `onOpenAutoFocus` /
+ * `onCloseAutoFocus`: the caller's own handlers, composed (they run first).
+ */
+export declare function useReturnFocus(open: boolean | null | undefined, onOpenAutoFocus?: (event: Event) => void, onCloseAutoFocus?: (event: Event) => void): ReturnFocusHandlers;

package/lib/return-focus.js

@@ -0,0 +1,53 @@
+/**
+ * Focus goes back to what opened a layer when it closes (WCAG 2.4.3), however it was opened.
+ *
+ * Radix's modal Dialog returns focus only to its own <Dialog.Trigger>. Most layers here open from controlled state (a
+ * plain button, a menu item, a command, a key), so there is no Trigger and focus fell to <body> when they closed.
+ * `useReturnFocus(open)` remembers what had focus when `open` turned true and hands the layer's content an
+ * `onCloseAutoFocus` that puts focus back there:
+ *
+ * - it is captured in an insertion effect, which runs before anything in the layer can take focus (an `autoFocus`
+ *   field is focused in the layout phase, Radix's FocusScope moves focus in a passive effect); under a bare Radix root,
+ *   where `open` is unknown, `onOpenAutoFocus` captures it instead;
+ * - the caller's own `onCloseAutoFocus` runs first, and one that calls `preventDefault()` keeps its own target;
+ * - nothing remembered (focus was on <body>, or the element is gone): Radix's own behaviour, its Trigger if any;
+ * - focus already moved on to something outside the layer while it left (a command opened another layer, a link was
+ *   followed): it stays there.
+ */
+import { useInsertionEffect, useRef } from "react";
+/** What has focus now, unless that is nothing in particular (<body>). */
+function focusedElement() {
+    const active = typeof document === "undefined" ? null : document.activeElement;
+    return active instanceof HTMLElement && active !== document.body ? active : null;
+}
+/**
+ * `open`: the layer's open state (null or undefined when the caller cannot know it). `onOpenAutoFocus` /
+ * `onCloseAutoFocus`: the caller's own handlers, composed (they run first).
+ */
+export function useReturnFocus(open, onOpenAutoFocus, onCloseAutoFocus) {
+    const opener = useRef(null);
+    useInsertionEffect(() => {
+        if (open)
+            opener.current = focusedElement();
+    }, [open]);
+    return {
+        onOpenAutoFocus(event) {
+            if (open === null || open === undefined)
+                opener.current = focusedElement();
+            onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus(event) {
+            onCloseAutoFocus?.(event);
+            const target = opener.current;
+            opener.current = null;
+            const layer = event.currentTarget instanceof Element ? event.currentTarget : null;
+            if (event.defaultPrevented || !target?.isConnected || layer?.contains(target))
+                return;
+            event.preventDefault();
+            const active = document.activeElement;
+            if (active && active !== document.body && !layer?.contains(active))
+                return;
+            target.focus();
+        },
+    };
+}

package/lib/silicon-provider.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Lets an app swap the link and image elements Silicon UI components render.
+ *
+ * Without a provider, Silicon UI renders a plain `<a>` and `<img>`, so components work in any React app (Vite, Remix, Astro,
+ * plain React). Wrap the app once to use your framework's or your own components instead:
+ *
+ *   import Link from "next/link";
+ *   import Image from "next/image";
+ *   import { SiliconProvider } from "@/components/silicon-ui/lib/silicon-provider";
+ *
+ *   <SiliconProvider link={Link} image={Image}>{children}</SiliconProvider>
+ *
+ * Any component that accepts these props works, such as a locale-aware Link from next-intl or a React Router Link
+ * wrapped to map `href` to `to`.
+ */
+import { type AnchorHTMLAttributes, type ComponentType, type ImgHTMLAttributes, type ReactNode, type Ref } from "react";
+/** The props Silicon UI passes to a link: an href plus ordinary anchor attributes. */
+export interface SiliconLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * The props Silicon UI passes to an image. A subset of next/image's props, so next/image can be passed as is: either `fill`
+ * (cover the positioned parent) or `width` and `height`, plus `sizes` and `priority` as hints.
+ */
+export interface SiliconImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height" | "loading" | "srcSet"> {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    /** Fills the nearest positioned parent, like next/image's `fill`. */
+    fill?: boolean;
+    /** Loads the image eagerly with high priority, like next/image's `priority`. */
+    priority?: boolean;
+    loading?: "eager" | "lazy";
+    ref?: Ref<HTMLImageElement>;
+}
+export type SiliconLinkComponent = ComponentType<SiliconLinkProps>;
+export type SiliconImageComponent = ComponentType<SiliconImageProps>;
+/** The default link: a plain anchor. */
+export declare function SiliconAnchor(props: SiliconLinkProps): import("react").JSX.Element;
+/** The default image: a plain, lazily decoded `<img>` that understands `fill` and `priority`. */
+export declare function SiliconImg({ alt, fill, priority, loading, style, ...props }: SiliconImageProps): import("react").JSX.Element;
+export interface SiliconProviderProps {
+    /** The link component Silicon UI renders for navigation, such as next/link or your own wrapped Link. Defaults to `<a>`. */
+    link?: SiliconLinkComponent;
+    /** The image component Silicon UI renders for photos, such as next/image. Defaults to `<img>`. */
+    image?: SiliconImageComponent;
+    children: ReactNode;
+}
+/** Sets the link and image components for every Silicon UI component inside it. Nested providers inherit what they do not set. */
+export declare function SiliconProvider({ link, image, children }: SiliconProviderProps): import("react").JSX.Element;
+/** The link component from the nearest SiliconProvider, or a plain anchor. */
+export declare const useArcLink: () => SiliconLinkComponent;
+/** The image component from the nearest SiliconProvider, or a plain img. */
+export declare const useArcImage: () => SiliconImageComponent;
+/** What Silicon UI components render for a link: the provider's link component, or a plain anchor. */
+export declare function SiliconLink(props: SiliconLinkProps): import("react").ReactElement<SiliconLinkProps, string | import("react").JSXElementConstructor<any>>;
+/** What Silicon UI components render for an image: the provider's image component, or a plain img. */
+export declare function SiliconImage(props: SiliconImageProps): import("react").ReactElement<SiliconImageProps, string | import("react").JSXElementConstructor<any>>;

package/lib/silicon-provider.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Lets an app swap the link and image elements Silicon UI components render.
+ *
+ * Without a provider, Silicon UI renders a plain `<a>` and `<img>`, so components work in any React app (Vite, Remix, Astro,
+ * plain React). Wrap the app once to use your framework's or your own components instead:
+ *
+ *   import Link from "next/link";
+ *   import Image from "next/image";
+ *   import { SiliconProvider } from "@/components/silicon-ui/lib/silicon-provider";
+ *
+ *   <SiliconProvider link={Link} image={Image}>{children}</SiliconProvider>
+ *
+ * Any component that accepts these props works, such as a locale-aware Link from next-intl or a React Router Link
+ * wrapped to map `href` to `to`.
+ */
+import { createContext, createElement, useContext, useMemo } from "react";
+/** The default link: a plain anchor. */
+export function SiliconAnchor(props) {
+    return _jsx("a", { ...props });
+}
+const fillStyle = { position: "absolute", inset: 0, width: "100%", height: "100%" };
+/** The default image: a plain, lazily decoded `<img>` that understands `fill` and `priority`. */
+export function SiliconImg({ alt, fill, priority, loading, style, ...props }) {
+    // eslint-disable-next-line @next/next/no-img-element -- the framework-free default; pass next/image through SiliconProvider instead.
+    return _jsx("img", { alt: alt, decoding: "async", ...props, loading: loading ?? (priority ? "eager" : "lazy"), fetchPriority: priority ? "high" : props.fetchPriority, style: fill ? { ...fillStyle, ...style } : style });
+}
+const SiliconContext = createContext({ link: SiliconAnchor, image: SiliconImg });
+/** Sets the link and image components for every Silicon UI component inside it. Nested providers inherit what they do not set. */
+export function SiliconProvider({ link, image, children }) {
+    const parent = useContext(SiliconContext);
+    const value = useMemo(() => ({ link: link ?? parent.link, image: image ?? parent.image }), [link, image, parent]);
+    return _jsx(SiliconContext.Provider, { value: value, children: children });
+}
+/** The link component from the nearest SiliconProvider, or a plain anchor. */
+export const useArcLink = () => useContext(SiliconContext).link;
+/** The image component from the nearest SiliconProvider, or a plain img. */
+export const useArcImage = () => useContext(SiliconContext).image;
+/** What Silicon UI components render for a link: the provider's link component, or a plain anchor. */
+export function SiliconLink(props) {
+    return createElement(useArcLink(), props);
+}
+/** What Silicon UI components render for an image: the provider's image component, or a plain img. */
+export function SiliconImage(props) {
+    return createElement(useArcImage(), props);
+}

package/lib/use-copy-feedback.d.ts

@@ -0,0 +1,8 @@
+export type CopyFeedbackState = "idle" | "copied" | "error";
+/** Shared clipboard state for actions that render their own button or menu. */
+export declare function useCopyFeedback(duration?: number): {
+    state: CopyFeedbackState;
+    activeKey: string | null;
+    copy: (value: string, key?: string) => Promise<boolean>;
+    reset: () => void;
+};

package/lib/use-copy-feedback.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+/** Shared clipboard state for actions that render their own button or menu. */
+export function useCopyFeedback(duration = 1900) {
+    const [state, setState] = useState("idle");
+    const [activeKey, setActiveKey] = useState(null);
+    const timeout = useRef(null);
+    const reset = useCallback(() => {
+        if (timeout.current)
+            clearTimeout(timeout.current);
+        timeout.current = null;
+        setState("idle");
+        setActiveKey(null);
+    }, []);
+    useEffect(() => () => {
+        if (timeout.current)
+            clearTimeout(timeout.current);
+    }, []);
+    const copy = useCallback(async (value, key = "default") => {
+        if (timeout.current)
+            clearTimeout(timeout.current);
+        setActiveKey(key);
+        try {
+            await navigator.clipboard.writeText(value);
+            setState("copied");
+            timeout.current = setTimeout(reset, duration);
+            return true;
+        }
+        catch {
+            setState("error");
+            timeout.current = setTimeout(reset, duration);
+            return false;
+        }
+    }, [duration, reset]);
+    return { state, activeKey, copy, reset };
+}

package/lib/use-today.d.ts

@@ -0,0 +1,2 @@
+/** The viewer's local date. Undefined on the server and during hydration, so markup never depends on the server clock or time zone; afterwards it follows the real date across midnight. */
+export declare function useToday(): Date | undefined;

package/lib/use-today.js

@@ -0,0 +1,29 @@
+import { useMemo, useSyncExternalStore } from "react";
+/** Shared by calendar and date-range-picker, which both re-export it, so one copy keeps their "today" in step. */
+const dateKey = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+const fromKey = (key) => {
+    const [year = 1970, month = 1, day = 1] = key.split("-").map(Number);
+    return new Date(year, month - 1, day);
+};
+/** Today turns over at local midnight; returning to the tab, focusing the window or waking the device reads it again. */
+const subscribeToday = (notify) => {
+    let timer = 0;
+    const schedule = () => {
+        const now = new Date();
+        const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+        timer = window.setTimeout(() => { notify(); schedule(); }, nextMidnight.getTime() - now.getTime() + 1000);
+    };
+    const onVisible = () => { if (document.visibilityState === "visible")
+        notify(); };
+    schedule();
+    document.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("focus", notify);
+    return () => { window.clearTimeout(timer); document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("focus", notify); };
+};
+const readToday = () => dateKey(new Date());
+const serverToday = () => "";
+/** The viewer's local date. Undefined on the server and during hydration, so markup never depends on the server clock or time zone; afterwards it follows the real date across midnight. */
+export function useToday() {
+    const key = useSyncExternalStore(subscribeToday, readToday, serverToday);
+    return useMemo(() => (key ? fromKey(key) : undefined), [key]);
+}

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@teamofsilicons/silicon-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "React components with calm motion, on the Silicon design tokens. By Team of Silicons.",
+  "license": "MIT",
+  "author": "Team of Silicons",
+  "homepage": "https://ui.teamofsilicons.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teamofsilicons/silicon-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teamofsilicons/silicon-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "ui",
+    "motion",
+    "radix"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "bin": {
+    "silicon-ui-check": "./check.mjs"
+  },
+  "exports": {
+    "./styles.css": {
+      "types": "./styles.css.d.ts",
+      "default": "./styles.css"
+    },
+    "./provider": {
+      "types": "./lib/silicon-provider.d.ts",
+      "default": "./lib/silicon-provider.js"
+    },
+    "./motion-tokens": {
+      "types": "./lib/motion-tokens.d.ts",
+      "default": "./lib/motion-tokens.js"
+    },
+    "./lib/*": {
+      "types": "./lib/*.d.ts",
+      "default": "./lib/*.js"
+    },
+    "./eslint": "./eslint.js",
+    "./components.json": "./components.json",
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./components/*/*.d.ts",
+      "default": "./components/*/*.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "eslint": ">=9"
+  },
+  "peerDependenciesMeta": {
+    "eslint": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "lucide-react": "^1.47.0",
+    "motion": "^13.4.0"
+  }
+}

package/styles.css

@@ -0,0 +1,218 @@
+:root {
+  color-scheme: light;
+  --neutral-0: oklch(100% 0 0);
+  --neutral-1: oklch(99% 0 0);
+  --neutral-2: oklch(97.8% 0 0);
+  --neutral-3: oklch(95.8% 0 0);
+  --neutral-4: oklch(91.5% 0 0);
+  --neutral-5: oklch(84% 0 0);
+  --neutral-6: oklch(72% 0 0);
+  --neutral-7: oklch(59% 0 0);
+  --neutral-8: oklch(46% 0 0);
+  --neutral-9: oklch(34% 0 0);
+  --neutral-10: oklch(23% 0 0);
+  --neutral-11: oklch(15% 0 0);
+  --background: var(--neutral-0);
+  --surface: var(--neutral-0);
+  --surface-raised: var(--neutral-0);
+  --surface-muted: var(--neutral-2);
+  --foreground: var(--neutral-11);
+  --text-secondary: var(--neutral-8);
+  --text-muted: var(--neutral-7);
+  --border: oklch(93.5% 0 0);
+  --border-subtle: oklch(96.5% 0 0);
+  --border-strong: oklch(82% 0 0);
+  --accent: oklch(33% 0 0);
+  --accent-strong: oklch(24% 0 0);
+  --accent-subtle: oklch(33% 0 0 / .1);
+  --accent-foreground: var(--background);
+  /* Filled primary actions (Button primary, ActionButton). Neutral by default; an app sets its brand colour here. */
+  --primary: var(--foreground);
+  --primary-foreground: var(--background);
+  /* Profile pictures (Avatar, AvatarGroup, UserMenu). Circles by default; an app can choose e.g. 30% and squircle. */
+  --avatar-radius: var(--radius-full);
+  --avatar-corner-shape: round;
+  /* Selection controls (switch, checkbox, radio, slider). --control-on fills a chosen control; --control-glyph is the check or dot drawn on it;
+     thumbs stay white in both states so they always read against the track. Tuned per accent below so white thumbs hold on every hue. */
+  --control-on: oklch(23% 0 0);
+  --control-glyph: oklch(100% 0 0);
+  --control-track: oklch(89.5% 0 0);
+  --control-track-hover: oklch(86% 0 0);
+  --control-thumb: oklch(100% 0 0);
+  --control-thumb-on: oklch(100% 0 0);
+  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06);
+  --control-on-subtle: color-mix(in oklab, var(--control-on) 10%, transparent);
+  /* Slider fills. Same as --control-on except neutral dark, where a mid grey keeps the white thumb distinct. */
+  --control-fill: var(--control-on);
+  /* Pointer focus draws no ring (product decision). --focus-ring is the halo a few fields drew for any input method, so it stays transparent.
+     Keyboard focus uses the outline at the end of this file; tune it with --focus-outline, --focus-outline-width and --focus-outline-offset. */
+  --focus-ring: transparent;
+  --success: oklch(49% .19 150);
+  --warning: oklch(58% .18 75);
+  --danger: oklch(54% .21 25);
+  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035);
+  --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);
+  --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);
+  /* Brand gradient: soft lavender to warm peach. Light enough for dark text (--silicon-gradient-foreground, >12:1). */
+  --silicon-gradient-from: oklch(90% .045 300);
+  --silicon-gradient-to: oklch(92% .045 65);
+  --silicon-gradient: linear-gradient(100deg, var(--silicon-gradient-from), var(--silicon-gradient-to));
+  --silicon-gradient-foreground: oklch(22% .01 300);
+  /* Faint wash for backgrounds and tinted panels. */
+  --silicon-gradient-soft: linear-gradient(135deg, oklch(97.5% .016 300), oklch(98% .016 65));
+  /* Hairline borders and rules. */
+  --silicon-gradient-line: linear-gradient(100deg, oklch(83% .06 300), oklch(86% .06 65));
+  /* Text-safe stops for gradient text and small marks (>4.5:1 on the surface). */
+  --silicon-gradient-ink: linear-gradient(100deg, oklch(47% .1 300), oklch(50% .09 55));
+  /* Space, by role: tight 4 · related 8 · group 12 · inset 16 · comfort 20 · section 24 · block 32 · page 48 · stage 64 · screen 80. */
+  --space-tight: 4px; --space-related: 8px; --space-group: 12px; --space-inset: 16px; --space-comfort: 20px;
+  --space-section: 24px; --space-block: 32px; --space-page: 48px; --space-stage: 64px; --space-screen: 80px;
+  /* Radius, by role: detail for small marks and swatches, control for buttons and fields, container for cards and menus,
+     overlay for dialogs and sheets, full for pills and dots. Every corner in every component reads one of these.
+     These are the round values (2 / 6 / 8 / 12). Squircle corners use larger radii, set with the corner rule below, so
+     both shapes feel equally round. */
+  --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; --radius-full: 999px;
+  /* Corner shape. Squircle by default; see the corner rule after the dark theme. */
+  --corner-shape: squircle;
+  --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3.125rem;
+  --font-display: var(--font-geist, "Geist Variable"), sans-serif;
+  --font-body: var(--font-inter, "Inter Variable"), sans-serif;
+  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
+  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
+  --text-4xl: 3.25rem; --text-5xl: 4.5rem;
+  --tracking-display: -.03em; --tracking-body: -.01em;
+  --leading-display: 1.1; --leading-body: 1.4;
+  --ease-enter: cubic-bezier(.16,1,.3,1);
+  --ease-standard: cubic-bezier(.22,1,.36,1);
+  --ease-exit: cubic-bezier(.7,0,.84,0);
+  --ease-in-out: cubic-bezier(.65,0,.35,1);
+  /* Spring with a gentle settle (bounce .15). Pair with --duration-spring for transform transitions. */
+  --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
+  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --background: oklch(19% 0 0);
+  --surface: oklch(21.5% 0 0);
+  --surface-raised: oklch(24% 0 0);
+  /* Keep muted surfaces and hover states distinct from the base surface in dark mode. */
+  --surface-muted: oklch(26% 0 0);
+  --foreground: oklch(96% 0 0);
+  --text-secondary: oklch(77% 0 0);
+  --text-muted: oklch(64% 0 0);
+  --border: oklch(29% 0 0);
+  --border-subtle: oklch(25% 0 0);
+  --border-strong: oklch(40% 0 0);
+  --focus-ring: transparent;
+  --accent: oklch(80% 0 0);
+  --accent-strong: oklch(91% 0 0);
+  --accent-subtle: oklch(80% 0 0 / .13);
+  /* Neutral dark inverts: a near-white track carries a dark thumb, so on and off never read alike. */
+  --control-on: oklch(93% 0 0);
+  --control-glyph: oklch(19% 0 0);
+  --control-track: oklch(33% 0 0);
+  --control-track-hover: oklch(37% 0 0);
+  --control-thumb: oklch(97% 0 0);
+  --control-thumb-on: oklch(19% 0 0);
+  --control-fill: oklch(62% 0 0);
+  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2);
+  --success: oklch(78% .18 150);
+  --warning: oklch(83% .17 80);
+  --danger: oklch(76% .2 25);
+  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18);
+  --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22);
+  --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);
+  --silicon-gradient-from: oklch(38% .05 300);
+  --silicon-gradient-to: oklch(40% .045 60);
+  --silicon-gradient-foreground: oklch(96% .005 300);
+  --silicon-gradient-soft: linear-gradient(135deg, oklch(23.5% .016 300), oklch(24% .014 65));
+  --silicon-gradient-line: linear-gradient(100deg, oklch(48% .06 300), oklch(52% .055 65));
+  --silicon-gradient-ink: linear-gradient(100deg, oklch(82% .07 300), oklch(86% .065 70));
+}
+
+/* Corners are squircles: every rounded corner is drawn as a superellipse, so borders, shadows and focus rings follow the
+   same smooth curve. Browsers without corner-shape draw ordinary round corners from the same radius. Set
+   data-corners="round" on <html>, or on any element for its subtree, to use round corners instead. */
+:root[data-corners="round"], [data-corners="round"] { --corner-shape: round; }
+:root[data-corners="squircle"], [data-corners="squircle"] { --corner-shape: squircle; }
+*, ::before, ::after { corner-shape: var(--corner-shape); }
+/* A squircle at the same radius reads about 0.55x as round as a circular corner, so squircle radii are about 1.8x the
+   round ones: 4 / 11 / 14 / 21 feel like 2 / 6 / 8 / 12. Only browsers that draw squircles get them; the rest keep the
+   round values above, so their corners never look oversized. */
+@supports (corner-shape: squircle) {
+  :root, [data-corners="squircle"] { --radius-detail: 4px; --radius-control: 11px; --radius-container: 14px; --radius-overlay: 21px; }
+  :root[data-corners="round"], [data-corners="round"] { --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; }
+}
+
+:root[data-accent="neutral"] { --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); }
+:root[data-accent="violet"] { --accent: #7747ff; --accent-strong: #5528ce; --accent-subtle: rgb(119 71 255 / .13); }
+:root[data-accent="blue"] { --accent: #0562ef; --accent-strong: #074db7; --accent-subtle: rgb(5 98 239 / .12); }
+:root[data-accent="green"] { --accent: #0db879; --accent-strong: #087c54; --accent-subtle: rgb(13 184 121 / .13); --accent-foreground: #102016; }
+:root[data-accent="amber"] { --accent: #f3ad20; --accent-strong: #9c6300; --accent-subtle: rgb(243 173 32 / .16); --accent-foreground: #20190d; }
+:root[data-accent="orange"] { --accent: #f48120; --accent-strong: #aa4700; --accent-subtle: rgb(244 129 32 / .13); --accent-foreground: #17130f; }
+:root[data-accent="coral"] { --accent: #f15f55; --accent-strong: #b92c27; --accent-subtle: rgb(241 95 85 / .14); --accent-foreground: #21110f; }
+:root[data-accent="rose"] { --accent: #ed4e9d; --accent-strong: #ae2570; --accent-subtle: rgb(237 78 157 / .14); --accent-foreground: #250f1b; }
+:root[data-theme="dark"][data-accent="neutral"] { --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); }
+:root[data-theme="dark"][data-accent="violet"] { --accent: #a78bff; --accent-strong: #c7b7ff; --accent-subtle: rgb(119 71 255 / .22); }
+:root[data-theme="dark"][data-accent="blue"] { --accent: #6ba3ff; --accent-strong: #a4c7ff; --accent-subtle: rgb(5 98 239 / .22); }
+:root[data-theme="dark"][data-accent="green"] { --accent: #53dca6; --accent-strong: #93efd0; --accent-subtle: rgb(13 184 121 / .2); }
+:root[data-theme="dark"][data-accent="amber"] { --accent: #ffcb62; --accent-strong: #ffe0a1; --accent-subtle: rgb(243 173 32 / .2); }
+:root[data-theme="dark"][data-accent="orange"] { --accent: #ffad5e; --accent-strong: #ffd0a0; --accent-subtle: rgb(244 129 32 / .2); --accent-foreground: #17130f; }
+:root[data-theme="dark"][data-accent="coral"] { --accent: #ff9386; --accent-strong: #ffc1ba; --accent-subtle: rgb(241 95 85 / .2); }
+:root[data-theme="dark"][data-accent="rose"] { --accent: #ff8bc5; --accent-strong: #ffc0df; --accent-subtle: rgb(237 78 157 / .2); }
+
+/* Selection control fills per accent. Light: the accent, deepened slightly where a white thumb needs it. Dark: a mid tone instead of the pastel
+   text accent, so white thumbs and checks keep contrast without a neon track. Amber keeps a dark glyph because white on yellow washes out. */
+:root[data-accent="neutral"] { --control-on: oklch(23% 0 0); --control-thumb-on: oklch(100% 0 0); --control-glyph: oklch(100% 0 0); }
+:root[data-accent="violet"] { --control-on: #7747ff; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-accent="blue"] { --control-on: #0562ef; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-accent="green"] { --control-on: #10a870; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-accent="amber"] { --control-on: #eda11a; --control-thumb-on: #fff; --control-glyph: #2a1c03; }
+:root[data-accent="orange"] { --control-on: #f07818; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-accent="coral"] { --control-on: #ec564b; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-accent="rose"] { --control-on: #e64494; --control-thumb-on: #fff; --control-glyph: #fff; }
+:root[data-theme="dark"][data-accent="neutral"] { --control-on: oklch(93% 0 0); --control-thumb-on: oklch(19% 0 0); --control-glyph: oklch(19% 0 0); }
+:root[data-theme="dark"][data-accent="violet"] { --control-on: #8a66ff; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #8a66ff; }
+:root[data-theme="dark"][data-accent="blue"] { --control-on: #3b82f6; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #3b82f6; }
+:root[data-theme="dark"][data-accent="green"] { --control-on: #1fae78; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #1fae78; }
+:root[data-theme="dark"][data-accent="amber"] { --control-on: #e8a52a; --control-thumb-on: #fff; --control-glyph: #241803; --control-fill: #e8a52a; }
+:root[data-theme="dark"][data-accent="orange"] { --control-on: #ef873a; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ef873a; }
+:root[data-theme="dark"][data-accent="coral"] { --control-on: #ec6a60; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ec6a60; }
+:root[data-theme="dark"][data-accent="rose"] { --control-on: #e457a0; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #e457a0; }
+
+/* Chart series palette, shared by every chart. Series 1 is the accent itself; series 2 to 4 rotate its hue at lightness steps
+   around it, so they stay distinct for every accent. A neutral accent falls back to a blue. Validated with the dataviz script
+   across all eight accents in both themes: every pair (not only neighbours) clears CVD ΔE 9 and normal vision ΔE 17. Browsers
+   without relative color get the neutral set. Override --series-1 to --series-4 on any element to rebrand a chart. */
+:root { --series-1: #1f7dcf; --series-2: #7128a5; --series-3: #e58f00; --series-4: #009e84; }
+:root[data-theme="dark"] { --series-1: #55adff; --series-2: #9c37be; --series-3: #e66e00; --series-4: #00a861; }
+@supports (color: oklch(from red clamp(.4, l * sign(max(c - .02, 0)) + .5, .8) c h)) {
+  :root {
+    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));
+    --series-2: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) - 0.25, .76) .19 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 57));
+    --series-3: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) + 0.14, .76) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 184));
+    --series-4: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))), .76) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 292));
+  }
+  :root[data-theme="dark"] {
+    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));
+    --series-2: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.19, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 66));
+    --series-3: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) + 0.02, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 175));
+    --series-4: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.1, .665) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 270));
+  }
+}
+
+/* Focus. Pointer focus never draws a ring (product decision). Keyboard focus (:focus-visible) draws a subtle accent outline, so keyboard users
+   can always see where they are (WCAG 2.4.7). Left out of the outline: text fields, which match :focus-visible on a mouse click too and show
+   focus with their border and caret; menu items and listbox options, whose highlight fill marks the keyboard position; and tabindex="-1"
+   targets (dialog panels, regions) that only receive focus from script.
+   Tune it on :root or any element, no !important needed:
+     --focus-outline           color (default: the accent, softened); set transparent to hide it
+     --focus-outline-width     default 2px
+     --focus-outline-offset    default 2px; components inside clipped containers set a negative offset */
+:focus:not(:focus-visible),
+:is(input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), textarea, [contenteditable]:not([contenteditable="false"]), [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [tabindex="-1"]):focus { outline: none !important; }
+:focus-visible:not(input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), textarea, [contenteditable]:not([contenteditable="false"]), [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [tabindex="-1"]) {
+  outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)) !important;
+  outline-offset: var(--focus-outline-offset, 2px) !important;
+}

package/styles.css.d.ts

@@ -0,0 +1 @@
+export {};