@ambientcss/components 1.2.0 → 2.0.0

package/src/components/AmbientKnob.tsx

@@ -2,6 +2,73 @@ import { useId, useRef } from "react";
 import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react";
 import { cn } from "../lib/cn";
 
+/* Straight-knurled silhouettes for the rotating face, in
+   objectBoundingBox units so the clip scales with the component. Each
+   variant family mirrors its referent's rib section
+   (ambient3d/ground_components.py): trapezoid teeth between the outer
+   radius and the tooth-root radius. The circular body underneath keeps
+   the smooth drop shadow. */
+type KnurlSpec = {
+  teeth: number; // rib count
+  root: number; // tooth-root radius (bounding-box units; outer is 0.5)
+  rise: number; // fraction of the pitch spent climbing to the crest
+  fall: [number, number]; // crest-end and root-return pitch fractions
+};
+
+const KNURLS: Record<"standard" | "flute" | "fine", KnurlSpec> = {
+  /* 36 ribs — the grounded referent knob (dot and line variants) */
+  standard: { teeth: 36, root: 0.468, rise: 0.12, fall: [0.5, 0.62] },
+  /* 14 broad flutes with deeper roots (OP-Z-style flute variant) */
+  flute: { teeth: 14, root: 0.44, rise: 0.08, fall: [0.72, 0.8] },
+  /* 48-rib fine knurl, shallower (cap and wheel variants) */
+  fine: { teeth: 48, root: 0.476, rise: 0.12, fall: [0.5, 0.62] }
+};
+
+function knurlPath({ teeth, root, rise, fall }: KnurlSpec): string {
+  const outer = 0.5;
+  const pitch = (Math.PI * 2) / teeth;
+  const pts: string[] = [];
+  for (let i = 0; i < teeth; i++) {
+    const a = i * pitch;
+    const tooth: Array<[number, number]> = [
+      [0, root],
+      [rise, outer],
+      [fall[0], outer],
+      [fall[1], root]
+    ];
+    for (const [frac, radius] of tooth) {
+      const t = a + frac * pitch;
+      pts.push(
+        `${(0.5 + radius * Math.cos(t)).toFixed(4)} ${(0.5 + radius * Math.sin(t)).toFixed(4)}`
+      );
+    }
+  }
+  return `M${pts.join(" L")} Z`;
+}
+
+const KNURL_PATHS = {
+  standard: knurlPath(KNURLS.standard),
+  flute: knurlPath(KNURLS.flute),
+  fine: knurlPath(KNURLS.fine)
+};
+
+/* Knob types from the referent lineup (ambient3d/generate.py):
+   - "dot":   the grounded referent — 36-rib knurl, offset indicator dot
+   - "line":  same body with a radial indicator line (classic pot)
+   - "flute": 14 broad flutes, centered dot (OP-Z-style encoder)
+   - "cap":   fine knurl under a smooth accent top disc (OP-1-style)
+   - "wheel": bare fine knurl, no indicator (machined wheel — pair with
+     material="shiny") */
+export type AmbientKnobVariant = "dot" | "line" | "flute" | "cap" | "wheel";
+
+const VARIANT_FAMILY: Record<AmbientKnobVariant, keyof typeof KNURL_PATHS> = {
+  dot: "standard",
+  line: "standard",
+  flute: "flute",
+  cap: "fine",
+  wheel: "fine"
+};
+
 export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
   value: number;
   min?: number;
@@ -9,6 +76,7 @@ export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange">
   step?: number;
   label?: string;
   material?: "matte" | "shiny" | "glass";
+  variant?: AmbientKnobVariant;
   onChange?: (nextValue: number) => void;
 };
 
@@ -23,14 +91,17 @@ export function AmbientKnob({
   step = 1,
   label,
   material,
+  variant = "dot",
   onChange,
   className,
   ...props
 }: AmbientKnobProps) {
   const id = useId();
+  const clipId = `amb-knurl-${id.replace(/:/g, "")}`;
   const draggingRef = useRef(false);
   const knobRef = useRef<HTMLDivElement>(null);
   const safeStep = step > 0 ? step : 1;
+  const family = VARIANT_FAMILY[variant];
 
   const percent = (value - min) / (max - min || 1);
   const rotation = percent * 270 - 135;
@@ -102,7 +173,7 @@ export function AmbientKnob({
     <div className={cn("ambx-stack", className)} {...props}>
       <div
         ref={knobRef}
-        className={cn("ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob", material && `amb-mat-${material}`)}
+        className="amb-knob ambx-knob"
         role="slider"
         aria-label={label}
         aria-valuemin={min}
@@ -127,14 +198,29 @@ export function AmbientKnob({
         }}
         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>
+        <svg width={0} height={0} style={{ position: "absolute" }} aria-hidden focusable={false}>
+          <defs>
+            <clipPath id={clipId} clipPathUnits="objectBoundingBox">
+              <path d={KNURL_PATHS[family]} />
+            </clipPath>
+          </defs>
+        </svg>
+        <span className="amb-knob-body ambient amb-thickness-2 amb-surface" />
+        <div
+          className={cn(
+            "ambx-knob-rotation amb-knob-face",
+            family === "flute" && "amb-knob-face-flute",
+            family === "fine" && "amb-knob-face-fine",
+            variant === "cap" && "amb-knob-face-cap",
+            material && `amb-mat-${material}`
+          )}
+          style={{ transform: `rotate(${rotation}deg)`, clipPath: `url(#${clipId})` }}
+        >
+          {variant === "dot" ? <span className="amb-knob-indicator-dot" /> : null}
+          {variant === "line" ? <span className="amb-knob-indicator-line" /> : null}
+          {variant === "flute" ? (
+            <span className="amb-knob-indicator-dot amb-knob-indicator-dot-center" />
+          ) : null}
         </div>
       </div>
       {label ? (

package/src/components/AmbientSlider.tsx

@@ -91,7 +91,7 @@ export function AmbientSlider({
   return (
     <div className={cn("ambx-stack", className)} {...props}>
       <div
-        className="amb-slider ambx-slider"
+        className="amb-slider amb-groove ambx-slider"
         ref={trackRef}
         role="slider"
         aria-label={label}
@@ -109,15 +109,9 @@ export function AmbientSlider({
         onKeyDown={onKeyDown}
       >
         <div
-          className={cn("amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb", material !== "glass" && "amb-surface-concave-h", material && `amb-mat-${material}`)}
+          className={cn("amb-slider-thumb ambient amb-fillet ambx-slider-thumb", material !== "glass" && "amb-surface-convex", material && `amb-mat-${material}`)}
           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">

package/src/components/AmbientSwitch.tsx

@@ -38,8 +38,8 @@ export function AmbientSwitch({
       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",
+        "amb-switch",
+        active && "amb-switch-on",
         "ambx-switch",
         `ambx-switch-${size}`,
         className
@@ -58,6 +58,9 @@ export function AmbientSwitch({
           style={typeof led === "string" ? { "--amb-led-color": led } as React.CSSProperties : undefined}
         />
       ) : null}
+      <span className="amb-switch-track amb-groove">
+        <span className="amb-switch-pill ambient amb-fillet amb-surface-convex" />
+      </span>
       {children}
     </button>
   );

package/src/index.ts

@@ -5,13 +5,13 @@ export { AmbientPanel } from "./components/AmbientPanel";
 export type { AmbientPanelProps } from "./components/AmbientPanel";
 
 export { AmbientButton } from "./components/AmbientButton";
-export type { AmbientButtonProps } from "./components/AmbientButton";
+export type { AmbientButtonProps, AmbientButtonShape } 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 type { AmbientKnobProps, AmbientKnobVariant } from "./components/AmbientKnob";
 
 export { AmbientFader } from "./components/AmbientFader";
 export type { AmbientFaderProps } from "./components/AmbientFader";

package/src/styles.css

@@ -35,51 +35,264 @@
   letter-spacing: var(--ambx-type-tracking);
 }
 
+/* Button: a chamfered key cap seated in a clearance well — the referent
+   is components/button.py's "flush" style (cap seated into a hole with a
+   shadow gap ring around it). The button element IS the well: a shallow
+   groove (seat depth ~1.2mm = thickness 0.27) whose lume interior shows
+   as the gap ring around the cap. Pressing sinks the cap by the
+   referent's 0.7mm travel (thickness 1 -> 0.84): the chamfer bands and
+   the swept shadow shrink with it for free. */
 .amb-button {
   cursor: pointer;
-  border: medium solid var(--amb-lume);
-  background-color: inherit;
-  padding: calc(var(--ambx-grid) * 2);
+  border: none;
+  padding: var(--ambx-grid-half);       /* the clearance gap ring */
+  --amb-thickness: 0.27;                 /* seat depth of the well */
+  background-color: var(--amb-lume);
+  border-radius: calc(var(--ambx-grid) * 3 + var(--ambx-grid-half));
+  min-width: calc(var(--ambx-grid) * 16);
+}
+
+.amb-button-cap {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  padding: calc(var(--ambx-grid) * 1.5) 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);
+  color: var(--amb-label);
 }
 
 .amb-button:focus {
   outline-offset: var(--ambx-grid);
 }
 
-.amb-button:hover,
-.amb-knob:hover {
-  border-color: var(--amb-highlight-color);
+.amb-button:hover .amb-button-cap {
+  color: var(--amb-highlight-color);
+}
+
+.amb-button:active .amb-button-cap {
+  --amb-thickness: 0.84;
+}
+
+/* Button shapes, matching the referent lineup (ambient3d/generate.py):
+   the default stadium key above, a round key (superellipse exponent 2 —
+   pair with amb-mat-shiny for the machined metal-button look), and a
+   squarer, flatter EP-133-style pad (exponent 6: tighter corners and a
+   3.6mm cap instead of the key's 4.5mm — thickness 0.8 — with the same
+   0.7mm press travel). */
+.amb-button.amb-button-round {
+  min-width: calc(var(--ambx-grid) * 12);
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+.amb-button-round .amb-button-cap {
+  height: 100%;
+  padding: var(--ambx-grid);
+  border-radius: 50%;
+}
+
+.amb-button.amb-button-square {
+  min-width: calc(var(--ambx-grid) * 14);
+  aspect-ratio: 1;
+  border-radius: calc(var(--ambx-grid) * 2);
+}
+
+.amb-button-square .amb-button-cap {
+  height: 100%;
+  padding: var(--ambx-grid);
+  border-radius: calc(var(--ambx-grid) * 1.5);
+  --amb-thickness: 0.8;
 }
 
-.amb-button:active {
-  --amb-elevation: 0;
+.amb-button.amb-button-square:active .amb-button-cap {
+  --amb-thickness: 0.64;
 }
 
+/* Knob: a knob-scale body (thickness 2 = the referent knob.py's 9mm
+   height) resting on the panel. The rotating face carries the knurl — a
+   repeating-conic rib pattern, physically the referent's ribs catching
+   key light on one flank and shading on the other — under a smooth
+   opaque top disc (the OP-1-style cap), with an accent indicator dot.
+   The whole face rotates with the value, so the ribs move under the
+   fingers like the real thing. */
 .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 {
+/* The body is the smooth circle at the tooth-root radius: it carries
+   the ambient drop shadow (kept circular — the teeth are too fine to
+   read in a penumbra) while the clipped face above it supplies the
+   knurled silhouette. */
+.amb-knob-body {
   position: absolute;
-  top: 6px;
+  inset: calc(var(--ambx-grid) / 2);
+  border-radius: 50%;
+}
+
+/* The rotating face: clipped to the straight-knurl silhouette (the
+   inline SVG clipPath in AmbientKnob), opaque at the knob's surface
+   color, with per-tooth flank shading — a lit leading flank and a
+   shaded trailing flank every 10deg, phase-aligned with the clip's
+   teeth (conic 0 is rotated to the +x axis where the tooth path
+   starts) — under the smooth top disc. */
+.amb-knob-face {
+  position: absolute;
+  inset: 0;
+  background-color: hsl(
+    var(--amb-light-hue)
+    var(--amb-light-saturation)
+    calc(
+      var(--amb-key-light-intensity) * 31.5% +
+        var(--amb-fill-light-intensity) * 26.4% + 43.6%
+    )
+  );
+  background-image:
+    radial-gradient(
+      circle,
+      hsl(
+        var(--amb-light-hue)
+        var(--amb-light-saturation)
+        calc(
+          var(--amb-key-light-intensity) * 31.5% +
+            var(--amb-fill-light-intensity) * 26.4% + 43.6%
+        )
+      ) 0 60%,
+      transparent 61%
+    ),
+    repeating-conic-gradient(
+      from 90deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% /
+        calc(var(--amb-key-light-intensity) * 0.35)) 0deg 1.4deg,
+      transparent 2.2deg 4.6deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% /
+        calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity))
+          * 0.3 + 0.16)) 5deg 6.4deg,
+      transparent 7.2deg 10deg
+    );
+}
+
+/* Fluted face (flute variant — the OP-Z-style referent: 14 broad
+   ridges split by narrow grooves, pitch 25.714deg). Flank bands sit on
+   the clip's rising (0–2.1deg) and falling (18.5–20.6deg) flanks;
+   deeper flutes catch more key light, so both bands run stronger than
+   the 36-rib knurl's. */
+.amb-knob-face-flute {
+  background-image:
+    radial-gradient(
+      circle,
+      hsl(
+        var(--amb-light-hue)
+        var(--amb-light-saturation)
+        calc(
+          var(--amb-key-light-intensity) * 31.5% +
+            var(--amb-fill-light-intensity) * 26.4% + 43.6%
+        )
+      ) 0 60%,
+      transparent 61%
+    ),
+    repeating-conic-gradient(
+      from 90deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% /
+        calc(var(--amb-key-light-intensity) * 0.45)) 0deg 2.1deg,
+      transparent 3.2deg 17.4deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% /
+        calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity))
+          * 0.35 + 0.2)) 18.5deg 20.6deg,
+      transparent 21.6deg 25.7143deg
+    );
+}
+
+/* Fine knurl (cap and wheel variants: 48 ribs, pitch 7.5deg) — the
+   36-rib pattern's angles scaled by 3/4, same flank alphas. */
+.amb-knob-face-fine {
+  background-image:
+    radial-gradient(
+      circle,
+      hsl(
+        var(--amb-light-hue)
+        var(--amb-light-saturation)
+        calc(
+          var(--amb-key-light-intensity) * 31.5% +
+            var(--amb-fill-light-intensity) * 26.4% + 43.6%
+        )
+      ) 0 60%,
+      transparent 61%
+    ),
+    repeating-conic-gradient(
+      from 90deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% /
+        calc(var(--amb-key-light-intensity) * 0.35)) 0deg 1.05deg,
+      transparent 1.65deg 3.45deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% /
+        calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity))
+          * 0.3 + 0.16)) 3.75deg 4.8deg,
+      transparent 5.4deg 7.5deg
+    );
+}
+
+/* Encoder cap (cap variant — the OP-1-style referent's smooth
+   contrasting top disc, 0.35mm proud of the knurl): the accent disc
+   replaces the surface-colored center disc over the fine knurl. */
+.amb-knob-face-cap {
+  background-image:
+    radial-gradient(circle, var(--amb-highlight-color) 0 65%, transparent 66%),
+    repeating-conic-gradient(
+      from 90deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% /
+        calc(var(--amb-key-light-intensity) * 0.35)) 0deg 1.05deg,
+      transparent 1.65deg 3.45deg,
+      hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% /
+        calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity))
+          * 0.3 + 0.16)) 3.75deg 4.8deg,
+      transparent 5.4deg 7.5deg
+    );
+}
+
+.amb-knob-indicator-dot {
+  position: absolute;
+  top: 16%;
   left: 50%;
   transform: translateX(-50%);
+  width: calc(var(--ambx-grid) * 2);
+  height: calc(var(--ambx-grid) * 2);
+  border-radius: 50%;
+  background: var(--amb-highlight-color);
 }
 
-.amb-knob-grip {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+/* Centered dot (flute variant): the OP-Z referent's dot sits in the
+   middle of the cap (dot_frac 0.32), not at the rim. */
+.amb-knob-indicator-dot-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--ambx-grid) * 4.5);
+  height: calc(var(--ambx-grid) * 4.5);
 }
 
+/* Radial indicator line (line variant): the referent's accent bar,
+   center to ~85% of the cap radius, pointing at 12 o'clock. */
+.amb-knob-indicator-line {
+  position: absolute;
+  top: 12%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(var(--ambx-grid) * 0.75);
+  height: 34%;
+  border-radius: calc(var(--ambx-grid) * 0.375);
+  background: var(--amb-highlight-color);
+}
+
+.amb-knob:hover .amb-knob-indicator-dot,
+.amb-knob:hover .amb-knob-indicator-line {
+  background: color-mix(in oklab, var(--amb-highlight-color), white 25%);
+}
+
+/* Tracks are grounded grooves (.amb-groove supplies the recess: lit-wall
+   shadow band + far-wall bounce) with a lume interior — dark in bright
+   light, glowing in low light — overriding the groove's neutral floor. */
 .amb-fader {
   position: relative;
   width: var(--ambx-grid);
@@ -88,6 +301,9 @@
   background-color: var(--amb-lume);
 }
 
+/* Fader thumb: the referent (fader.py) is a pill cap on a stem — 7mm
+   tall (thickness 1.5) riding 2.2mm above the plate (elevation 0.28) —
+   with a single grip line across the top. */
 .amb-fader-thumb {
   position: absolute;
   width: calc(var(--ambx-grid) * 6);
@@ -95,55 +311,41 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  border-radius: calc(var(--ambx-grid) * 3);
+  border-radius: calc(var(--ambx-grid) * 2);
   display: grid;
   place-items: center;
+  --amb-thickness: 1.5;
+  --amb-elevation: 0.28;
 }
 
-.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-fader-gripline {
+  width: 70%;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--amb-lume);
 }
 
+/* Slider: the referent (slider.py) is a shallow concave channel (1mm
+   deep = thickness 0.22), not a through-slot, with a domed disc thumb
+   gliding over it. */
 .amb-slider {
   position: relative;
-  height: var(--ambx-grid);
+  height: calc(var(--ambx-grid) * 1.5);
   width: calc(var(--ambx-grid) * 30);
   border-radius: var(--ambx-grid);
   background-color: var(--amb-lume);
+  --amb-thickness: 0.22;
 }
 
 .amb-slider-thumb {
   position: absolute;
-  width: calc(var(--ambx-grid) * 9);
+  width: calc(var(--ambx-grid) * 6);
   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);
+  border-radius: 50%;
+  --amb-thickness: 0.7;
 }
 
 .amb-led {
@@ -164,16 +366,65 @@
   box-shadow: none;
 }
 
+/* Switch: a slide switch like the referent (switch.py) — a pill riding
+   in a dark stadium recess (well 1.5mm deep = thickness 0.33; the pill
+   stands 2.6mm above the recess floor = thickness 0.58), with an
+   optional LED above. The pill slides, nothing presses. */
 .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);
+  border: none;
+  padding: 0;
+  background: none;
+  display: inline-grid;
+  justify-items: center;
+  gap: var(--ambx-grid);
   margin: 0;
 }
 
+.amb-switch-track {
+  position: relative;
+  display: block;
+  width: var(--ambx-switch-w);
+  height: var(--ambx-switch-h);
+  border-radius: calc(var(--ambx-switch-h) / 2);
+  background-color: var(--amb-lume);
+  --amb-thickness: 0.33;
+}
+
+.amb-switch-pill {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: calc(var(--ambx-switch-w) * 0.52);
+  height: calc(var(--ambx-switch-h) * 0.78);
+  border-radius: calc(var(--ambx-switch-h) * 0.39);
+  transform: translate(calc(var(--ambx-switch-h) * 0.11), -50%);
+  transition: transform 140ms ease;
+  --amb-thickness: 0.58;
+}
+
+.amb-switch-on .amb-switch-pill {
+  transform: translate(
+    calc(var(--ambx-switch-w) - 100% - var(--ambx-switch-h) * 0.11),
+    -50%
+  );
+}
+
+.amb-switch:hover .amb-switch-pill {
+  background-color: color-mix(
+    in oklab,
+    hsl(
+      var(--amb-light-hue)
+      var(--amb-light-saturation)
+      calc(
+        var(--amb-key-light-intensity) * 31.5% +
+          var(--amb-fill-light-intensity) * 26.4% + 43.6%
+      )
+    ),
+    var(--amb-highlight-color) 12%
+  );
+}
+
 .ambx-panel {
   border-radius: calc(var(--ambx-grid) * 4);
   padding: calc(var(--ambx-grid) * 4);
@@ -185,29 +436,23 @@
 }
 
 .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-w: calc(var(--ambx-grid) * 12);
+  --ambx-switch-h: calc(var(--ambx-grid) * 6);
 }
 
 .ambx-switch-sm {
-  --ambx-switch-size: calc(var(--ambx-grid) * 5);
+  --ambx-switch-w: calc(var(--ambx-grid) * 10);
+  --ambx-switch-h: calc(var(--ambx-grid) * 5);
 }
 
 .ambx-switch-md {
-  --ambx-switch-size: calc(var(--ambx-grid) * 6);
+  --ambx-switch-w: calc(var(--ambx-grid) * 12);
+  --ambx-switch-h: 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-switch-w: calc(var(--ambx-grid) * 16);
+  --ambx-switch-h: calc(var(--ambx-grid) * 8);
 }
 
 .ambx-stack {