@ambientcss/components 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ambientcss/components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React skeuomorphic components powered by Ambient CSS",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "tsup && cp src/styles.css dist/styles.css",

package/src/components/AmbientButton.tsx

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function AmbientButton({ className, children, ...props }: AmbientButtonProps) {
+  return (
+    <button
+      type="button"
+      className={cn("ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3", className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/AmbientFader.tsx

@@ -0,0 +1,127 @@
+import { useId, useRef } from "react";
+import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  onChange?: (nextValue: number) => void;
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function AmbientFader({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}: AmbientFaderProps) {
+  const id = useId();
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const safeStep = step > 0 ? step : 1;
+
+  const percent = ((value - min) / (max - min || 1)) * 100;
+
+  const updateFromClientY = (clientY: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const rect = track.getBoundingClientRect();
+    const ratio = 1 - (clientY - rect.top) / rect.height;
+    const nextValue = min + clamp(ratio, 0, 1) * (max - min);
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const setValue = (nextValue: number) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.buttons !== 1) return;
+    updateFromClientY(event.clientY);
+  };
+
+  return (
+    <div className={cn("ambx-stack", className)} {...props}>
+      <div
+        className="amb-fader ambx-fader"
+        ref={trackRef}
+        role="slider"
+        aria-label={label}
+        aria-labelledby={label ? id : undefined}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-orientation="vertical"
+        tabIndex={0}
+        onPointerDown={(event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromClientY(event.clientY);
+        }}
+        onPointerMove={onPointerMove}
+        onKeyDown={onKeyDown}
+      >
+        <div
+          className="amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb"
+          style={{ top: `${100 - percent}%` }}
+        >
+          <div className="amb-fader-grip">
+            <span className="amb-fader-dot" />
+            <span className="amb-fader-dot" />
+            <span className="amb-fader-dot" />
+          </div>
+        </div>
+      </div>
+      {label ? (
+        <span id={id} className="ambx-label">
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AmbientKnob.tsx

@@ -0,0 +1,145 @@
+import { useId, useRef } from "react";
+import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  onChange?: (nextValue: number) => void;
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function AmbientKnob({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}: AmbientKnobProps) {
+  const id = useId();
+  const draggingRef = useRef(false);
+  const knobRef = useRef<HTMLDivElement>(null);
+  const safeStep = step > 0 ? step : 1;
+
+  const percent = (value - min) / (max - min || 1);
+  const rotation = percent * 270 - 135;
+
+  // Convert pointer position to a knob angle in [-180, 180] where 0 = up,
+  // positive = clockwise. The knob's active range is [-135, 135] (270°),
+  // with the dead zone at the bottom (~135° to ~225° i.e. past ±135°).
+  const pointerToValue = (event: PointerEvent<HTMLDivElement>) => {
+    const rect = knobRef.current!.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    // atan2 with screen coords: 0=right, 90=down; add 90 to rotate so 0=up
+    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);
+    let angle = atan2Deg + 90;
+    // Normalize to [-180, 180]
+    if (angle > 180) angle -= 360;
+
+    // Clamp dead zone based on current value position
+    if (angle < -135 || angle > 135) {
+      angle = percent >= 0.5 ? 135 : -135;
+    }
+
+    const range = max - min;
+    const raw = min + ((angle + 135) / 270) * range;
+    const snapped = Math.round(raw / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const setValue = (nextValue: number) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className={cn("ambx-stack", className)} {...props}>
+      <div
+        ref={knobRef}
+        className="ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob"
+        role="slider"
+        aria-label={label}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-labelledby={label ? id : undefined}
+        aria-orientation="vertical"
+        tabIndex={0}
+        onPointerDown={(event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          draggingRef.current = true;
+          pointerToValue(event);
+        }}
+        onPointerMove={(event) => {
+          if (draggingRef.current) pointerToValue(event);
+        }}
+        onPointerUp={() => {
+          draggingRef.current = false;
+        }}
+        onPointerCancel={() => {
+          draggingRef.current = false;
+        }}
+        onKeyDown={onKeyDown}
+      >
+        <div className="ambx-knob-rotation" style={{ transform: `rotate(${rotation}deg)` }}>
+          <div className="amb-knob-indicator">
+            <div className="amb-knob-grip">
+              <span className="amb-fader-dot" />
+              <span className="amb-fader-dot" />
+              <span className="amb-fader-dot" />
+            </div>
+          </div>
+        </div>
+      </div>
+      {label ? (
+        <span id={id} className="ambx-label">
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AmbientPanel.tsx

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;
+
+export function AmbientPanel({ className, ...props }: AmbientPanelProps) {
+  return <div className={cn("ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel", className)} {...props} />;
+}

package/src/components/AmbientProvider.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+
+export type AmbientTheme = {
+  lightX?: number;
+  lightY?: number;
+  keyLight?: number;
+  fillLight?: number;
+  lightHue?: number;
+  lightSaturation?: number;
+  highlightColor?: string;
+  lumeHue?: number;
+};
+
+export type AmbientProviderProps = PropsWithChildren<{
+  className?: string;
+  style?: CSSProperties;
+  theme?: AmbientTheme;
+}>;
+
+const VAR_MAP: Record<string, keyof AmbientTheme> = {
+  "--amb-light-x": "lightX",
+  "--amb-light-y": "lightY",
+  "--amb-key-light-intensity": "keyLight",
+  "--amb-fill-light-intensity": "fillLight",
+  "--amb-light-hue": "lightHue",
+  "--amb-light-saturation": "lightSaturation",
+  "--amb-highlight-color": "highlightColor",
+  "--amb-lume-hue": "lumeHue",
+};
+
+export function AmbientProvider({ children, className, style, theme }: AmbientProviderProps) {
+  const themeVars: Record<string, string> = {};
+  for (const [varName, key] of Object.entries(VAR_MAP)) {
+    const value = theme?.[key];
+    if (value !== undefined) {
+      themeVars[varName] = key === "lightSaturation" ? `${value}%` : String(value);
+    }
+  }
+  // Derived variables must be re-declared here so they recompute using the
+  // overridden input variables on this element rather than inheriting the
+  // already-resolved values from :root.
+  themeVars["--amb-lume"] = [
+    "color-mix(in oklab,",
+    "hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (0.5 - var(--amb-key-light-intensity)) / 0.2, 1) * 100%),",
+    "hsl(var(--amb-light-hue) var(--amb-light-saturation)",
+    "calc((1 - sign(var(--amb-key-light-intensity) - 0.5)) * 50% + 25%)))",
+  ].join(" ");
+  themeVars["--amb-label"] =
+    "hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))";
+  const mergedStyle = { ...themeVars, ...style } as CSSProperties;
+
+  return (
+    <div className={className} style={mergedStyle}>
+      {children}
+    </div>
+  );
+}

package/src/components/AmbientSlider.tsx

@@ -0,0 +1,127 @@
+import { useId, useRef } from "react";
+import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  onChange?: (nextValue: number) => void;
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function AmbientSlider({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}: AmbientSliderProps) {
+  const id = useId();
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const safeStep = step > 0 ? step : 1;
+
+  const percent = ((value - min) / (max - min || 1)) * 100;
+
+  const updateFromClientX = (clientX: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const rect = track.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    const nextValue = min + clamp(ratio, 0, 1) * (max - min);
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const setValue = (nextValue: number) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.buttons !== 1) return;
+    updateFromClientX(event.clientX);
+  };
+
+  return (
+    <div className={cn("ambx-stack", className)} {...props}>
+      <div
+        className="amb-slider ambx-slider"
+        ref={trackRef}
+        role="slider"
+        aria-label={label}
+        aria-labelledby={label ? id : undefined}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-orientation="horizontal"
+        tabIndex={0}
+        onPointerDown={(event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromClientX(event.clientX);
+        }}
+        onPointerMove={onPointerMove}
+        onKeyDown={onKeyDown}
+      >
+        <div
+          className="amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb"
+          style={{ left: `${percent}%` }}
+        >
+          <div className="amb-slider-grip">
+            <span className="amb-fader-dot" />
+            <span className="amb-fader-dot" />
+            <span className="amb-fader-dot" />
+          </div>
+        </div>
+      </div>
+      {label ? (
+        <span id={id} className="ambx-label">
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AmbientSwitch.tsx

@@ -0,0 +1,75 @@
+import { useId, useState } from "react";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../lib/cn";
+
+export type AmbientSwitchSize = "sm" | "md" | "lg";
+
+export type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: AmbientSwitchSize;
+  label?: string;
+  /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */
+  led?: boolean | string;
+};
+
+export function AmbientSwitch({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  onClick,
+  size = "md",
+  label,
+  led,
+  children,
+  ...props
+}: AmbientSwitchProps) {
+  const labelId = useId();
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const active = isControlled ? (checked ?? false) : internalChecked;
+
+  const button = (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={active}
+      aria-labelledby={label ? labelId : props["aria-labelledby"]}
+      className={cn(
+        "ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3",
+        active ? "amb-surface-convex amb-switch-on" : "amb-surface-concave",
+        "ambx-switch",
+        `ambx-switch-${size}`,
+        className
+      )}
+      onClick={(event) => {
+        const next = !active;
+        if (!isControlled) setInternalChecked(next);
+        onCheckedChange?.(next);
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      {led ? (
+        <span
+          className={cn("amb-led", !active && "amb-led-off")}
+          style={typeof led === "string" ? { "--amb-led-color": led } as React.CSSProperties : undefined}
+        />
+      ) : null}
+      {children}
+    </button>
+  );
+
+  if (!label) return button;
+
+  return (
+    <div className="ambx-stack">
+      {button}
+      <span id={labelId} className="ambx-label">
+        {label}
+      </span>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export { AmbientProvider } from "./components/AmbientProvider";
+export type { AmbientProviderProps, AmbientTheme } from "./components/AmbientProvider";
+
+export { AmbientPanel } from "./components/AmbientPanel";
+export type { AmbientPanelProps } from "./components/AmbientPanel";
+
+export { AmbientButton } from "./components/AmbientButton";
+export type { AmbientButtonProps } from "./components/AmbientButton";
+
+export { AmbientSwitch } from "./components/AmbientSwitch";
+export type { AmbientSwitchProps, AmbientSwitchSize } from "./components/AmbientSwitch";
+
+export { AmbientKnob } from "./components/AmbientKnob";
+export type { AmbientKnobProps } from "./components/AmbientKnob";
+
+export { AmbientFader } from "./components/AmbientFader";
+export type { AmbientFaderProps } from "./components/AmbientFader";
+
+export { AmbientSlider } from "./components/AmbientSlider";
+export type { AmbientSliderProps } from "./components/AmbientSlider";

package/src/lib/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(" ");
+}

package/src/styles.css

@@ -0,0 +1,273 @@
+:root {
+  --ambx-grid: 4px;
+  --ambx-grid-half: calc(var(--ambx-grid) / 2);
+  --ambx-grid-quarter: calc(var(--ambx-grid) / 4);
+  --ambx-type-1-size: calc(var(--ambx-grid) * 8);
+  --ambx-type-1-line: calc(var(--ambx-grid) * 10);
+  --ambx-type-2-size: calc(var(--ambx-grid) * 6);
+  --ambx-type-2-line: calc(var(--ambx-grid) * 8);
+  --ambx-type-3-size: calc(var(--ambx-grid) * 3);
+  --ambx-type-3-line: calc(var(--ambx-grid) * 4);
+  --ambx-type-tracking: var(--ambx-grid-quarter);
+  --ambx-label-size: calc(var(--ambx-grid) * 2 + var(--ambx-grid-half));
+  --ambx-label-line: calc(var(--ambx-grid) * 3);
+  --ambx-control-label-gap: calc(var(--ambx-grid) * 2);
+  --ambx-knob-label-clearance: calc(var(--ambx-grid) * 2);
+  --ambx-slider-label-clearance: calc(var(--ambx-grid) * 2);
+  --ambx-fader-label-clearance: calc(var(--ambx-grid) * 4);
+}
+
+.amb-heading-1 {
+  font-size: var(--ambx-type-1-size);
+  line-height: var(--ambx-type-1-line);
+  letter-spacing: var(--ambx-type-tracking);
+}
+
+.amb-heading-2 {
+  font-size: var(--ambx-type-2-size);
+  line-height: var(--ambx-type-2-line);
+  letter-spacing: var(--ambx-type-tracking);
+}
+
+.amb-heading-3 {
+  font-size: var(--ambx-type-3-size);
+  line-height: var(--ambx-type-3-line);
+  letter-spacing: var(--ambx-type-tracking);
+}
+
+.amb-button {
+  cursor: pointer;
+  border: medium solid var(--amb-lume);
+  background-color: inherit;
+  padding: calc(var(--ambx-grid) * 2);
+  border-radius: calc(var(--ambx-grid) * 3);
+  text-transform: uppercase;
+  min-width: calc(var(--ambx-grid) * 16);
+  font-weight: 600;
+  color: var(--amb-lume);
+}
+
+.amb-button:focus {
+  outline-offset: var(--ambx-grid);
+}
+
+.amb-button:hover,
+.amb-knob:hover {
+  border-color: var(--amb-highlight-color);
+}
+
+.amb-button:active {
+  --amb-elevation: 0;
+}
+
+.amb-knob {
+  border-radius: 50%;
+  height: calc(var(--ambx-grid) * 16);
+  width: calc(var(--ambx-grid) * 16);
+  border: medium solid var(--amb-lume);
+}
+
+.amb-knob-indicator {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.amb-knob-grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.amb-fader {
+  position: relative;
+  width: var(--ambx-grid);
+  height: calc(var(--ambx-grid) * 30);
+  border-radius: var(--ambx-grid);
+  background-color: var(--amb-lume);
+}
+
+.amb-fader-thumb {
+  position: absolute;
+  width: calc(var(--ambx-grid) * 6);
+  height: calc(var(--ambx-grid) * 9);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: calc(var(--ambx-grid) * 3);
+  display: grid;
+  place-items: center;
+}
+
+.amb-fader-grip {
+  display: flex;
+  gap: 2px;
+}
+
+.amb-fader-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 30% 30%,
+    color-mix(in oklab, var(--amb-lume), white 30%) 0%,
+    var(--amb-lume) 55%,
+    color-mix(in oklab, var(--amb-lume), black 35%) 100%
+  );
+}
+
+.amb-slider {
+  position: relative;
+  height: var(--ambx-grid);
+  width: calc(var(--ambx-grid) * 30);
+  border-radius: var(--ambx-grid);
+  background-color: var(--amb-lume);
+}
+
+.amb-slider-thumb {
+  position: absolute;
+  width: calc(var(--ambx-grid) * 9);
+  height: calc(var(--ambx-grid) * 6);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: calc(var(--ambx-grid) * 3);
+  display: grid;
+  place-items: center;
+}
+
+.amb-slider-grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-shadow:
+    inset 0 var(--ambx-grid-quarter) var(--ambx-grid-quarter) rgb(255 255 255 / 0.28),
+    inset 0 calc(var(--ambx-grid-quarter) * -1) var(--ambx-grid-quarter) rgb(0 0 0 / 0.22);
+}
+
+.amb-led {
+  width: calc(var(--ambx-grid) * 2);
+  height: calc(var(--ambx-grid) * 2);
+  border-radius: 50%;
+  background-color: var(--amb-led-color, #0f0);
+  box-shadow: 0 0 var(--ambx-grid-quarter) var(--amb-led-color, #0f0);
+  transition: background-color 150ms ease, box-shadow 150ms ease;
+}
+
+.amb-led-off {
+  background-color: hsl(
+    var(--amb-light-hue)
+    var(--amb-light-saturation)
+    calc(var(--amb-key-light-intensity) * 30%)
+  );
+  box-shadow: none;
+}
+
+.amb-switch {
+  position: relative;
+  width: calc(var(--ambx-grid) * 6);
+  height: calc(var(--ambx-grid) * 6);
+  border-radius: 50%;
+  cursor: pointer;
+  border: medium solid var(--amb-lume);
+  margin: 0;
+}
+
+.ambx-panel {
+  border-radius: calc(var(--ambx-grid) * 4);
+  padding: calc(var(--ambx-grid) * 4);
+}
+
+.ambx-button {
+  min-width: calc(var(--ambx-grid) * 18);
+  line-height: var(--ambx-type-3-line);
+}
+
+.ambx-switch {
+  --ambx-switch-size: calc(var(--ambx-grid) * 6);
+  width: var(--ambx-switch-size);
+  height: var(--ambx-switch-size);
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+}
+
+.ambx-switch-sm {
+  --ambx-switch-size: calc(var(--ambx-grid) * 5);
+}
+
+.ambx-switch-md {
+  --ambx-switch-size: calc(var(--ambx-grid) * 6);
+}
+
+.ambx-switch-lg {
+  --ambx-switch-size: calc(var(--ambx-grid) * 8);
+}
+
+.amb-switch-on {
+  box-shadow:
+    inset 0 0 0 var(--ambx-grid-quarter) rgb(255 255 255 / 0.25);
+}
+
+.ambx-stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ambx-control-label-gap);
+}
+
+.ambx-label {
+  font-size: var(--ambx-label-size);
+  line-height: var(--ambx-label-line);
+  letter-spacing: var(--ambx-grid-quarter);
+  text-transform: uppercase;
+  color: var(--amb-label);
+}
+
+.ambx-slider + .ambx-label {
+  margin-top: var(--ambx-slider-label-clearance);
+}
+
+.ambx-fader + .ambx-label {
+  margin-top: var(--ambx-fader-label-clearance);
+}
+
+.ambx-knob + .ambx-label {
+  margin-top: var(--ambx-knob-label-clearance);
+}
+
+.ambx-knob {
+  position: relative;
+  display: grid;
+  place-items: center;
+  touch-action: none;
+  user-select: none;
+}
+
+.ambx-knob-rotation {
+  position: absolute;
+  inset: 0;
+}
+
+.ambx-fader {
+  width: calc(var(--ambx-grid) * 2);
+  border-radius: 999px;
+  touch-action: none;
+  user-select: none;
+}
+
+.ambx-fader-thumb {
+  transform: translate(-50%, -50%);
+}
+
+.ambx-slider {
+  height: calc(var(--ambx-grid) * 2);
+  border-radius: 999px;
+  touch-action: none;
+  user-select: none;
+}
+
+.ambx-slider-thumb {
+  transform: translate(-50%, -50%);
+}