@abuzareal/contour-ui 0.4.0 → 0.5.0

package/dist/hooks/usePanelFocus.js

@@ -0,0 +1,60 @@
+"use client";
+import { layerOwnsFocus, isTopLayer } from "../lib/layers.js";
+import { useLayoutEffect, useRef } from "react";
+/** Reconcile actual node/document moves without treating new callback props as a close. */
+export default function usePanelFocus(open, trigger, panel, reason, options, anchorElement, layer) {
+    const policy = useRef(options);
+    const registration = useRef(undefined);
+    useLayoutEffect(() => {
+        policy.current = options;
+        const node = open && anchorElement ? panel.current : null;
+        const old = registration.current;
+        if (old && (!node || old.node !== node || old.doc !== node.ownerDocument)) {
+            old.dispose(!open);
+            registration.current = undefined;
+        }
+        if (!node || registration.current)
+            return;
+        const doc = node.ownerDocument, returnTarget = trigger.current, returnReason = reason.current;
+        const owns = () => node.contains(doc.activeElement) ||
+            (layer !== undefined && layerOwnsFocus(doc, layer));
+        let ownedFocus = owns();
+        const observeFocus = () => {
+            ownedFocus = owns();
+        };
+        doc.addEventListener("focusin", observeFocus);
+        const EventType = doc.defaultView?.Event ?? Event;
+        const event = new EventType("contour-open-auto-focus", {
+            cancelable: true,
+        });
+        policy.current.onOpenAutoFocus?.(event);
+        if (!event.defaultPrevented &&
+            (layer === undefined || isTopLayer(doc, layer)) &&
+            policy.current.initialFocus !== false)
+            (policy.current.initialFocus?.current ?? node).focus();
+        ownedFocus = owns();
+        const currentPolicy = policy;
+        registration.current = {
+            node,
+            doc,
+            dispose(returnFocus) {
+                doc.removeEventListener("focusin", observeFocus);
+                if (!returnFocus)
+                    return;
+                const closeEvent = new EventType("contour-close-auto-focus", {
+                    cancelable: true,
+                });
+                currentPolicy.current.onCloseAutoFocus?.(closeEvent);
+                if (returnReason?.value !== "outside" &&
+                    !closeEvent.defaultPrevented &&
+                    returnTarget?.isConnected &&
+                    (returnReason?.value === "escape" || ownedFocus))
+                    returnTarget.focus();
+            },
+        };
+    });
+    useLayoutEffect(() => () => {
+        registration.current?.dispose(true);
+        registration.current = undefined;
+    }, []);
+}

package/dist/hooks/useTheme.d.ts

@@ -2,4 +2,5 @@ export type Theme = "light" | "dark";
 export default function useTheme(animate?: boolean): {
     theme: Theme;
     toggle: (origin: HTMLElement) => void;
+    canToggle: boolean;
 };

package/dist/hooks/useTheme.js

@@ -1,6 +1,7 @@
 "use client";
 /** Light/dark theme state: persisted choice, system fallback, and the animated switch. */
-import { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useCallback, useContext, useEffect, useSyncExternalStore, } from "react";
+import { ThemeScopeContext } from "../lib/themeScope.js";
 import { flushSync } from "react-dom";
 import { readStorage, storageKeys, writeStorage } from "../lib/storage.js";
 import { themeColors } from "../lib/themeBootstrap.js";
@@ -63,8 +64,12 @@ function subscribe(onChange) {
     };
 }
 export default function useTheme(animate = true) {
-    const theme = useSyncExternalStore(subscribe, readTheme, () => "light");
+    const scope = useContext(ThemeScopeContext);
+    const scopedSubscribe = useCallback((listener) => (scope ? () => { } : subscribe(listener)), [scope]);
+    const theme = useSyncExternalStore(scopedSubscribe, readTheme, () => "light");
     useEffect(() => {
+        if (scope)
+            return;
         const media = window.matchMedia("(prefers-color-scheme: dark)");
         const followSystem = () => {
             if (readStorage("local", storageKeys.theme) !== null)
@@ -74,8 +79,12 @@ export default function useTheme(animate = true) {
         };
         media.addEventListener("change", followSystem);
         return () => media.removeEventListener("change", followSystem);
-    }, []);
+    }, [scope]);
     const toggle = useCallback((origin) => {
+        if (scope) {
+            scope.onThemeChange?.(scope.theme === "dark" ? "light" : "dark");
+            return;
+        }
         const next = readTheme() === "dark" ? "light" : "dark";
         writeStorage("local", storageKeys.theme, next);
         const commit = () => {
@@ -94,6 +103,10 @@ export default function useTheme(animate = true) {
             return;
         }
         animateReveal(document.startViewTransition(commit), origin);
-    }, [animate]);
-    return { theme, toggle };
+    }, [animate, scope]);
+    return {
+        theme: scope?.theme ?? theme,
+        toggle,
+        canToggle: scope ? !!scope.onThemeChange : true,
+    };
 }

package/dist/index.d.ts

@@ -127,3 +127,8 @@ export * from "./lib/motion.js";
 export type { Section } from "./types.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export type * from "./components/ui/ThemeScope.js";
+export type { FloatingOptions } from "./hooks/useFloatingPanel.js";
+export type { PanelFocusOptions } from "./hooks/usePanelFocus.js";
+export type { DismissReason } from "./lib/layers.js";

package/dist/index.js

@@ -66,3 +66,4 @@ export * from "./lib/a11y.js";
 export * from "./lib/motion.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";

package/dist/kit/forms.css

@@ -272,7 +272,7 @@ textarea {
 .switch-thumb {
   position: absolute;
   top: 3px;
-  left: 3px;
+  inset-inline-start: 3px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -287,7 +287,7 @@ textarea {
 
 .switch-track[aria-checked="true"] .switch-thumb {
   background: var(--ink);
-  transform: translateX(20px);
+  inset-inline-start: 23px;
 }
 
 .switch-track:disabled {
@@ -361,3 +361,12 @@ textarea {
   outline: 2px solid var(--fg);
   outline-offset: 6px;
 }
+
+:dir(rtl) .slider input[type="range"]::-webkit-slider-runnable-track,
+:dir(rtl) .slider input[type="range"]::-moz-range-track {
+  background: linear-gradient(
+    to left,
+    var(--fg) var(--progress),
+    var(--line-strong) var(--progress)
+  );
+}

package/dist/kit/navigation.css

@@ -260,3 +260,7 @@
     min-width: 14px;
   }
 }
+
+:dir(rtl) .pagination-step svg {
+  transform: scaleX(-1);
+}

package/dist/kit/overlays.css

@@ -10,10 +10,12 @@
   z-index: 40;
   width: max-content;
   max-width: 220px;
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px 10px;
-  background: var(--ink);
-  color: var(--paper);
-  pointer-events: none;
+  background: var(--invert-bg);
+  color: var(--invert-fg);
+  pointer-events: auto;
   opacity: 0;
   visibility: hidden;
   transition:
@@ -230,7 +232,9 @@
   position: absolute;
   top: calc(100% + 8px);
   z-index: 30;
-  min-width: 220px;
+  min-width: min(220px, calc(100vw - 16px));
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px;
   border: 1px solid var(--line);
   background: var(--surface);

package/dist/lib/classNames.d.ts

@@ -1,5 +1,7 @@
 /** Builds a className string from optional parts, skipping falsy values. */
 export declare const cx: (...parts: (string | false | null | undefined)[]) => string;
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export declare const ccx: (...parts: (string | false | null | undefined)[]) => string;
 export type ButtonVariant = "primary" | "accent" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */

package/dist/lib/classNames.js

@@ -1,4 +1,19 @@
+import { componentClasses } from "./componentClasses.js";
 /** Builds a className string from optional parts, skipping falsy values. */
 export const cx = (...parts) => parts.filter(Boolean).join(" ");
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export const ccx = (...parts) => {
+    const names = cx(...parts)
+        .split(/\s+/)
+        .filter(Boolean);
+    return [
+        ...new Set([
+            ...names,
+            ...names
+                .filter((name) => componentClasses.has(name))
+                .map((name) => `contour-${name}`),
+        ]),
+    ].join(" ");
+};
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */
-export const buttonClassName = (variant = "primary", size = "md", className) => cx("button", `button-${variant}`, `button-${size}`, className);
+export const buttonClassName = (variant = "primary", size = "md", className) => ccx("button", `button-${variant}`, `button-${size}`, className);

package/dist/lib/componentClasses.d.ts

@@ -0,0 +1 @@
+export declare const componentClasses: Set<string>;

package/dist/lib/componentClasses.js

@@ -0,0 +1,2 @@
+// Generated compatibility aliases; unknown consumer classes pass through unchanged.
+export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);

package/dist/lib/keyboard.d.ts

@@ -4,5 +4,5 @@ type Orientation = "horizontal" | "vertical";
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation): number | null;
+export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation, direction?: "ltr" | "rtl"): number | null;
 export {};

package/dist/lib/keyboard.js

@@ -6,10 +6,13 @@ const keysFor = (orientation) => orientation === "horizontal"
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export function nextIndexForKey(key, current, count, orientation = "horizontal") {
+export function nextIndexForKey(key, current, count, orientation = "horizontal", direction = "ltr") {
     if (count <= 0)
         return null;
-    const { previous, next } = keysFor(orientation);
+    const keys = keysFor(orientation);
+    const { previous, next } = orientation === "horizontal" && direction === "rtl"
+        ? { previous: keys.next, next: keys.previous }
+        : keys;
     if (key === next)
         return (current + 1) % count;
     if (key === previous)

package/dist/lib/layers.d.ts

@@ -0,0 +1,18 @@
+export type DismissReason = "escape" | "outside";
+export declare const LayerVisibility: import("react").Context<boolean>;
+export declare const LayerParent: import("react").Context<symbol | undefined>;
+type Layer = {
+    id: symbol;
+    parent?: symbol;
+    elements: () => (HTMLElement | null)[];
+    dismiss: (reason: DismissReason, event: KeyboardEvent | PointerEvent) => void;
+    outside: boolean;
+    floating?: () => HTMLElement | null;
+};
+export declare function layerOwnsFocus(doc: Document, id: symbol): boolean;
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export declare function refreshLayerStack(doc: Document): void;
+export declare function isTopLayer(doc: Document, id: symbol): boolean;
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export declare function registerLayer(doc: Document, layer: Layer): () => void;
+export {};

package/dist/lib/layers.js

@@ -0,0 +1,128 @@
+import { createContext } from "react";
+export const LayerVisibility = createContext(true);
+export const LayerParent = createContext(undefined);
+const documents = new WeakMap();
+function descendant(layer, ancestor, layers) {
+    let parent = layer.parent;
+    const visited = new Set();
+    while (parent && !visited.has(parent)) {
+        if (parent === ancestor.id)
+            return true;
+        visited.add(parent);
+        parent = layers.find((entry) => entry.id === parent)?.parent;
+    }
+    return false;
+}
+function topLayer(layers) {
+    return [...layers]
+        .reverse()
+        .find((layer) => !layers.some((entry) => entry !== layer &&
+        (descendant(entry, layer, layers) ||
+            layer
+                .elements()
+                .some((root) => entry
+                .elements()
+                .some((child) => root && child && root !== child && root.contains(child))))));
+}
+export function layerOwnsFocus(doc, id) {
+    const layers = documents.get(doc)?.layers ?? [];
+    const owner = layers.find((layer) => layer.id === id);
+    return (!!owner &&
+        layers.some((layer) => (layer === owner || descendant(layer, owner, layers)) &&
+            layer
+                .elements()
+                .some((element) => element?.contains(doc.activeElement))));
+}
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export function refreshLayerStack(doc) {
+    const registry = documents.get(doc);
+    if (!registry)
+        return;
+    const remaining = [...registry.layers];
+    const ordered = [];
+    while (remaining.length) {
+        const top = topLayer(remaining);
+        if (!top)
+            break;
+        ordered.unshift(top);
+        remaining.splice(remaining.indexOf(top), 1);
+    }
+    const active = new Set();
+    ordered.forEach((layer, index) => {
+        const panel = layer.floating?.();
+        if (panel) {
+            active.add(panel);
+            if (!registry.zStyles.has(panel))
+                registry.zStyles.set(panel, {
+                    value: panel.style.getPropertyValue("z-index"),
+                    priority: panel.style.getPropertyPriority("z-index"),
+                });
+            const value = `calc(var(--contour-z-overlay, 30) + ${index})`;
+            if (panel.style.zIndex !== value)
+                panel.style.zIndex = value;
+        }
+    });
+    for (const [element, old] of registry.zStyles)
+        if (!active.has(element)) {
+            if (old.value)
+                element.style.setProperty("z-index", old.value, old.priority);
+            else
+                element.style.removeProperty("z-index");
+            registry.zStyles.delete(element);
+        }
+}
+export function isTopLayer(doc, id) {
+    return topLayer(documents.get(doc)?.layers ?? [])?.id === id;
+}
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export function registerLayer(doc, layer) {
+    let registry = documents.get(doc);
+    if (!registry) {
+        const layers = [];
+        const keydown = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            const top = topLayer(layers);
+            if (!top)
+                return;
+            top.dismiss("escape", event);
+            // Suppress native modal cancellation after dispatching the chosen layer.
+            event.preventDefault();
+        };
+        const pointerdown = (event) => {
+            if (event.defaultPrevented || event.button > 0)
+                return;
+            const top = topLayer(layers);
+            if (!top?.outside)
+                return;
+            const path = event.composedPath();
+            if (top.elements().some((element) => element && path.includes(element)))
+                return;
+            top.dismiss("outside", event);
+        };
+        doc.addEventListener("keydown", keydown);
+        doc.addEventListener("pointerdown", pointerdown);
+        registry = {
+            layers,
+            zStyles: new Map(),
+            dispose: () => {
+                doc.removeEventListener("keydown", keydown);
+                doc.removeEventListener("pointerdown", pointerdown);
+            },
+        };
+        documents.set(doc, registry);
+    }
+    registry.layers.push(layer);
+    refreshLayerStack(doc);
+    const owned = registry;
+    return () => {
+        const index = owned.layers.indexOf(layer);
+        if (index !== -1)
+            owned.layers.splice(index, 1);
+        refreshLayerStack(doc);
+        if (owned.layers.length === 0) {
+            owned.dispose();
+            documents.delete(doc);
+        }
+    };
+}

package/dist/lib/themeScope.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from "../hooks/useTheme.js";
+export declare const ThemeScopeContext: import("react").Context<{
+    theme: Theme;
+    onThemeChange?: (theme: Theme) => void;
+} | null>;

package/dist/lib/themeScope.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const ThemeScopeContext = createContext(null);

package/dist/minimal-reset.css

@@ -0,0 +1,6 @@
+/* Optional global normalization. Page layout, colors and typography belong to the application. */
+*, ::before, ::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; }
+button, input, select, textarea { font: inherit; }
+[hidden]:where(:not([hidden="until-found"])) { display: none; }

package/dist/navigation.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/navigation.css";

package/dist/overlays.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/overlays.css";

package/dist/scoped/base.css

@@ -0,0 +1,183 @@
+/* Owned component defaults; no page shell, global theme mutation or foreign element reset. */
+:where(.contour-root, [class*="contour-"]) {
+  box-sizing: border-box;
+}
+.contour-root {
+  color: var(--contour-fg);
+  background: var(--contour-bg);
+  font-family: var(--contour-font-sans);
+  line-height: 1.5;
+}
+button:where([class*="contour-"]) {
+  font: inherit;
+  font-family: var(--contour-font-sans);
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0 solid;
+  text-transform: none;
+  cursor: pointer;
+}
+button:where([class*="contour-"]):disabled {
+  cursor: default;
+}
+:where([class*="contour-"])[hidden] {
+  display: none;
+}
+:where([class*="contour-"]):focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+.contour-root :where(h1, h2, h3, p, dl, dd, figure, ul, ol) {
+  margin: 0;
+}
+.contour-root :where(ul, ol) {
+  padding: 0;
+  list-style: none;
+}
+.contour-root :where(img, svg, canvas) {
+  display: block;
+  vertical-align: middle;
+}
+.contour-root :where(svg) {
+  flex-shrink: 0;
+}
+.contour-root :where(a) {
+  color: inherit;
+}
+.contour-menu-list,
+.contour-popover-panel,
+.contour-dialog {
+  color: var(--contour-fg);
+  font-family: var(--contour-font-sans);
+}
+.contour-tooltip {
+  background: var(--contour-invert-bg);
+  color: var(--contour-invert-fg);
+}
+.contour-field-control :where(input, select, textarea),
+.contour-choice-input {
+  font-family: var(--contour-font-sans);
+}
+.contour-button,
+.contour-menu-trigger,
+.contour-field,
+.contour-tabs,
+.contour-data-table {
+  max-inline-size: 100%;
+}
+.contour-button,
+.contour-menu-trigger {
+  overflow-wrap: anywhere;
+}
+.contour-dialog-header h2 {
+  margin: 0;
+  font-family: var(--contour-font-display);
+  font-weight: 500;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([class*="contour-"]) {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+  :where(.contour-reveal, .contour-type-run) {
+    opacity: 1;
+    transform: none;
+  }
+}
+[data-motion="off"] :where([class*="contour-"]) {
+  animation: none !important;
+  transition: none !important;
+}
+@media (forced-colors: active) {
+  :where(
+    .contour-button,
+    .contour-menu-trigger,
+    .contour-card,
+    .contour-dialog,
+    .contour-popover-panel,
+    .contour-menu-list,
+    .contour-field-control,
+    .contour-switch,
+    .contour-segmented-option
+  ) {
+    border: 1px solid ButtonText !important;
+  }
+  :where(
+    .contour-button,
+    .contour-menu-item,
+    .contour-tabs-tab,
+    .contour-segmented-option
+  ):focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 3px;
+  }
+  :where(
+    .contour-tabs-tab[aria-selected="true"],
+    .contour-segmented-option[aria-checked="true"],
+    .contour-switch-track[aria-checked="true"]
+  ) {
+    outline: 2px solid Highlight !important;
+  }
+  .contour-field-error,
+  .contour-choice-error {
+    color: CanvasText !important;
+  }
+  .contour-tooltip {
+    border: 1px solid CanvasText;
+  }
+}
+
+.contour-data-table :where(button) {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+@media (forced-colors: active) {
+  .contour-choice-input:checked + .contour-choice-box,
+  .contour-choice-input:indeterminate + .contour-choice-box {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+  .contour-choice-radio
+    .contour-choice-input:checked
+    + .contour-choice-box::after {
+    content: "";
+    inline-size: 8px;
+    block-size: 8px;
+    background: CanvasText;
+    forced-color-adjust: none;
+    border-radius: 50%;
+  }
+  .contour-switch-thumb {
+    background: ButtonText !important;
+    forced-color-adjust: none;
+  }
+  .contour-switch-track {
+    border: 1px solid ButtonText !important;
+  }
+  .contour-field-control:has([aria-invalid="true"]) {
+    border-block-end: 2px dashed CanvasText !important;
+  }
+  .contour-slider input[type="range"] {
+    appearance: auto !important;
+  }
+}
+
+.contour-tabs {
+  background: transparent;
+}
+.contour-menu,
+.contour-popover {
+  color: var(--contour-fg);
+}
+.contour-menu-trigger > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}