@pathscale/ui 2.7.2 → 2.7.4

package/dist/components/metal-border/engine/glow/glow.js

@@ -1,7 +1,7 @@
+import { hsvToRgb, rgbToHsv } from "../color.js";
 import { EXTRA_SEGMENTS, HALO_SEGMENTS } from "../perfConfig.js";
 import { sampleShaderLumAt, sampleShaderRGBAt, sampleShaderRGBChromatic } from "../renderer/sampling.js";
 import { ease, tween, tweenStart, tweenTick } from "../tween.js";
-import { hsvToRgb, rgbToHsv } from "../color.js";
 import { buildPerimTable, buildStaticBlobPath, buildSvgMarkup, rrPerim, sampleAtArc, shapePerim, smoothstep, tangentAngleAtArc } from "./geometry.js";
 const FADE_RATE = 0.00875;
 const LO = 0.08, HI = 0.32;
@@ -26,46 +26,46 @@ const _pt = {
 };
 function injectGlow(container, opts) {
     const p = `mfxg_${++glowIdSeq}`;
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('class', 'metal-fx-glow-svg');
-    svg.setAttribute('preserveAspectRatio', 'none');
-    svg.setAttribute('viewBox', `0 0 ${opts.width} ${opts.height}`);
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "metal-fx-glow-svg");
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("viewBox", `0 0 ${opts.width} ${opts.height}`);
     svg.innerHTML = buildSvgMarkup(opts, p);
     container.appendChild(svg);
     const q = (id)=>svg.querySelector(`#${p}_${id}`);
-    const haloGroup = q('h');
-    const haloInner = q('hI');
-    const extraGroup = q('e');
-    const extraInner = q('eI');
-    const fadeCircle = q('fc');
+    const haloGroup = q("h");
+    const haloInner = q("hI");
+    const extraGroup = q("e");
+    const extraInner = q("eI");
+    const fadeCircle = q("fc");
     const ratio = shapePerim(opts.width, opts.height, opts.cornerRadius, opts.kind) / rrPerim(REF_W, REF_H, REF_R);
     const haloHL = Math.max(1, HALO_HALFLEN * ratio);
     const extraHL = Math.max(0.6, EXTRA_HALFLEN * EXTRA_SCALE * ratio);
     const haloD = buildStaticBlobPath(haloHL, HALO_SEGMENTS);
     const extraD = buildStaticBlobPath(extraHL, EXTRA_SEGMENTS);
     const haloPaths = [
-        q('pXl'),
-        q('pLg'),
-        q('pMd'),
-        q('pSm')
+        q("pXl"),
+        q("pLg"),
+        q("pMd"),
+        q("pSm")
     ];
     const extraPaths = [
-        q('eO'),
-        q('eC')
+        q("eO"),
+        q("eC")
     ];
-    for (const path of haloPaths)path.setAttribute('d', haloD);
-    for (const path of extraPaths)path.setAttribute('d', extraD);
-    haloInner.style.transformOrigin = '0 0';
-    extraInner.style.transformOrigin = '0 0';
-    haloInner.style.willChange = 'transform';
-    extraInner.style.willChange = 'transform';
-    haloInner.style.transition = 'transform 100ms linear';
-    extraInner.style.transition = 'transform 100ms linear';
-    haloGroup.style.willChange = 'opacity';
-    extraGroup.style.willChange = 'opacity';
-    haloGroup.style.transition = 'opacity 100ms linear';
-    extraGroup.style.transition = 'opacity 100ms linear';
-    fadeCircle.style.willChange = 'transform';
+    for (const path of haloPaths)path.setAttribute("d", haloD);
+    for (const path of extraPaths)path.setAttribute("d", extraD);
+    haloInner.style.transformOrigin = "0 0";
+    extraInner.style.transformOrigin = "0 0";
+    haloInner.style.willChange = "transform";
+    extraInner.style.willChange = "transform";
+    haloInner.style.transition = "transform 100ms linear";
+    extraInner.style.transition = "transform 100ms linear";
+    haloGroup.style.willChange = "opacity";
+    extraGroup.style.willChange = "opacity";
+    haloGroup.style.transition = "opacity 100ms linear";
+    extraGroup.style.transition = "opacity 100ms linear";
+    fadeCircle.style.willChange = "transform";
     return {
         svg,
         haloGroup,
@@ -99,11 +99,11 @@ function injectGlow(container, opts) {
         },
         tintTween: null,
         tintHoldUntil: 0,
-        lastHaloStroke: '',
-        lastExtraStroke: ''
+        lastHaloStroke: "",
+        lastExtraStroke: ""
     };
 }
-function updateGlow(h, inst, nowMs, strengthMul, theme = 'dark') {
+function updateGlow(h, inst, nowMs, strengthMul, theme = "dark") {
     const { width: W, height: H, cornerRadius: R, perim } = h;
     if (0 === perim.length) return;
     const halfWin = 2;
@@ -164,7 +164,7 @@ function updateGlow(h, inst, nowMs, strengthMul, theme = 'dark') {
     sampleAtArc(blobArc, W, H, R, insetS, extraOut, h.kind, _pt);
     h.extraInner.style.transform = `translate(${_pt.x.toFixed(3)}px,${_pt.y.toFixed(3)}px) rotate(${tangent.toFixed(4)}rad)`;
     h.fadeCircle.style.transform = `translate(${_pt.x.toFixed(3)}px,${_pt.y.toFixed(3)}px)`;
-    const light = 'light' === theme;
+    const light = "light" === theme;
     const samp = light ? sampleShaderRGBChromatic(inst, blobX, blobY, halfWin) : sampleShaderRGBAt(inst, blobX, blobY, halfWin);
     if (h.tintTween) {
         if (h.tintTween.done) {
@@ -231,16 +231,16 @@ function updateGlow(h, inst, nowMs, strengthMul, theme = 'dark') {
             h.lastExtraStroke = extraTinted;
             h.extraInner.style.stroke = extraTinted;
         }
-    } else if ('#ffffff' !== h.lastExtraStroke) {
-        h.lastExtraStroke = '#ffffff';
-        h.extraInner.style.stroke = '#ffffff';
+    } else if ("#ffffff" !== h.lastExtraStroke) {
+        h.lastExtraStroke = "#ffffff";
+        h.extraInner.style.stroke = "#ffffff";
     }
     const m = Math.max(0, Math.min(1, strengthMul));
     h.haloGroup.style.opacity = (h.glowOpacity * HALO_OP_MUL * m).toFixed(3);
     h.extraGroup.style.opacity = Math.min(1, h.glowOpacity * EXTRA_INTENSITY * m).toFixed(3);
 }
 function resizeGlow(handles, container, opts) {
-    for (const svg of Array.from(container.querySelectorAll('.metal-fx-glow-svg')))if (svg.parentNode === container) container.removeChild(svg);
+    for (const svg of Array.from(container.querySelectorAll(".metal-fx-glow-svg")))if (svg.parentNode === container) container.removeChild(svg);
     return injectGlow(container, opts);
 }
 export { injectGlow, resizeGlow, updateGlow };

package/dist/components/metal-border/engine/index.d.ts

@@ -1,4 +1,4 @@
-export { createInstance, destroyInstance, updateInstance, setInstanceVisible, registerGlowInstance, unregisterGlowInstance, setGlowCallback, } from "./renderer/loop";
-export { injectGlow, updateGlow, resizeGlow, type GlowHandles, } from "./glow/glow";
-export type { MetalFxInstance } from "./renderer/core";
+export { type GlowHandles, injectGlow, resizeGlow, updateGlow, } from "./glow/glow";
 export type { PresetName, PresetTheme } from "./presets";
+export type { MetalFxInstance } from "./renderer/core";
+export { createInstance, destroyInstance, registerGlowInstance, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateInstance, } from "./renderer/loop";

package/dist/components/metal-border/engine/index.js

@@ -1,2 +1,2 @@
-export { createInstance, destroyInstance, registerGlowInstance, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateInstance } from "./renderer/loop.js";
 export { injectGlow, resizeGlow, updateGlow } from "./glow/glow.js";
+export { createInstance, destroyInstance, registerGlowInstance, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateInstance } from "./renderer/loop.js";

package/dist/components/metal-border/engine/presets.d.ts

@@ -17,8 +17,8 @@
  * a future variant could opt into other effects without re-importing the
  * preset definitions.
  */
-export type PresetName = 'chromatic' | 'silver' | 'gold';
-export type PresetTheme = 'dark' | 'light';
+export type PresetName = "chromatic" | "silver" | "gold";
+export type PresetTheme = "dark" | "light";
 export interface PresetMode {
     /** 7-stop palette, indexed against `u_color1..u_color7`. */
     colors: [string, string, string, string, string, string, string];
@@ -54,4 +54,4 @@ export interface Preset {
     modes: Record<PresetTheme, PresetMode>;
 }
 export declare const PRESETS: Record<PresetName, Preset>;
-export { hexToRgb } from './color';
+export { hexToRgb } from "./color";

package/dist/components/metal-border/engine/presets.js

@@ -1,15 +1,15 @@
 const CHROMATIC = {
-    name: 'chromatic',
+    name: "chromatic",
     modes: {
         dark: {
             colors: [
-                '#000000',
-                '#aae8ff',
-                '#c5fe9e',
-                '#f7888d',
-                '#0d0d0d',
-                '#fffdc3',
-                '#007cff'
+                "#000000",
+                "#aae8ff",
+                "#c5fe9e",
+                "#f7888d",
+                "#0d0d0d",
+                "#fffdc3",
+                "#007cff"
             ],
             alphas: [
                 1,
@@ -35,13 +35,13 @@ const CHROMATIC = {
         },
         light: {
             colors: [
-                '#ffffff',
-                '#ffffff',
-                '#ffffff',
-                '#ffb3b3',
-                '#adadad',
-                '#f5ff70',
-                '#007cff'
+                "#ffffff",
+                "#ffffff",
+                "#ffffff",
+                "#ffb3b3",
+                "#adadad",
+                "#f5ff70",
+                "#007cff"
             ],
             alphas: [
                 1,
@@ -68,17 +68,17 @@ const CHROMATIC = {
     }
 };
 const SILVER = {
-    name: 'silver',
+    name: "silver",
     modes: {
         dark: {
             colors: [
-                '#000000',
-                '#dedede',
-                '#747270',
-                '#e5e5e5',
-                '#0d0d0d',
-                '#ffffff',
-                '#e6e6e6'
+                "#000000",
+                "#dedede",
+                "#747270",
+                "#e5e5e5",
+                "#0d0d0d",
+                "#ffffff",
+                "#e6e6e6"
             ],
             alphas: [
                 1,
@@ -104,13 +104,13 @@ const SILVER = {
         },
         light: {
             colors: [
-                '#f6f6f6',
-                '#ffffff',
-                '#ffffff',
-                '#f7f7f7',
-                '#c9c9c9',
-                '#d0d0d0',
-                '#d1d1d1'
+                "#f6f6f6",
+                "#ffffff",
+                "#ffffff",
+                "#f7f7f7",
+                "#c9c9c9",
+                "#d0d0d0",
+                "#d1d1d1"
             ],
             alphas: [
                 1,
@@ -137,17 +137,17 @@ const SILVER = {
     }
 };
 const GOLD = {
-    name: 'gold',
+    name: "gold",
     modes: {
         dark: {
             colors: [
-                '#000000',
-                '#ffffff',
-                '#ffffff',
-                '#f7d488',
-                '#0d0d0d',
-                '#fffdc3',
-                '#ffffff'
+                "#000000",
+                "#ffffff",
+                "#ffffff",
+                "#f7d488",
+                "#0d0d0d",
+                "#fffdc3",
+                "#ffffff"
             ],
             alphas: [
                 1,
@@ -173,13 +173,13 @@ const GOLD = {
         },
         light: {
             colors: [
-                '#fff8e1',
-                '#fffbe0',
-                '#ffffff',
-                '#fff6d6',
-                '#d2c7a7',
-                '#dcd2bc',
-                '#f9f7e5'
+                "#fff8e1",
+                "#fffbe0",
+                "#ffffff",
+                "#fff6d6",
+                "#d2c7a7",
+                "#dcd2bc",
+                "#f9f7e5"
             ],
             alphas: [
                 1,

package/dist/components/metal-border/engine/renderer/core.d.ts

@@ -14,7 +14,7 @@ export interface MetalFxInstance {
     cssWidth: number;
     cssHeight: number;
     cornerRadius: number;
-    kind: 'pill' | 'circle';
+    kind: "pill" | "circle";
     ringCssPx: number;
     shaderScale: number;
     opacityMul: number;

package/dist/components/metal-border/engine/shaders.js

@@ -189,26 +189,26 @@ const FRAG_SHADER_SRC = `
 `;
 function compileShader(gl, type, source) {
     const shader = gl.createShader(type);
-    if (!shader) throw new Error('metal-fx: gl.createShader returned null');
+    if (!shader) throw new Error("metal-fx: gl.createShader returned null");
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
         const info = gl.getShaderInfoLog(shader);
         gl.deleteShader(shader);
-        throw new Error(`metal-fx: shader compile failed: ${info ?? '(no info log)'}`);
+        throw new Error(`metal-fx: shader compile failed: ${info ?? "(no info log)"}`);
     }
     return shader;
 }
 function linkProgram(gl, vert, frag) {
     const program = gl.createProgram();
-    if (!program) throw new Error('metal-fx: gl.createProgram returned null');
+    if (!program) throw new Error("metal-fx: gl.createProgram returned null");
     gl.attachShader(program, vert);
     gl.attachShader(program, frag);
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
         const info = gl.getProgramInfoLog(program);
         gl.deleteProgram(program);
-        throw new Error(`metal-fx: program link failed: ${info ?? '(no info log)'}`);
+        throw new Error(`metal-fx: program link failed: ${info ?? "(no info log)"}`);
     }
     return program;
 }

package/dist/components/metal-border/index.d.ts

@@ -1,2 +1,2 @@
+export type { MetalBorderKind, MetalBorderPreset, MetalBorderProps, MetalBorderResolvedTheme, MetalBorderTheme, } from "./MetalBorder.generated";
 export { default as MetalBorder } from "./MetalBorder.generated";
-export type { MetalBorderProps, MetalBorderKind, MetalBorderPreset, MetalBorderResolvedTheme, MetalBorderTheme, } from "./MetalBorder.generated";

package/dist/components/meter/Meter.css

@@ -54,11 +54,6 @@
     height: 0.75rem;
   }
 
-
-
-
-
-
   .meter--disabled,
   .meter[aria-disabled="true"],
   .meter[data-disabled="true"] {

package/dist/components/meter/index.d.ts

@@ -1 +1 @@
-export { default, Meter, MeterRoot, MeterOutput, MeterTrack, MeterFill, type MeterProps, type MeterRootProps, type MeterOutputProps, type MeterTrackProps, type MeterFillProps, type MeterSize, type MeterColor, type MeterRenderState, } from "./Meter.generated";
+export { default, Meter, type MeterColor, MeterFill, type MeterFillProps, MeterOutput, type MeterOutputProps, type MeterProps, type MeterRenderState, MeterRoot, type MeterRootProps, type MeterSize, MeterTrack, type MeterTrackProps, } from "./Meter.generated";

package/dist/components/navbar/Navbar.css

@@ -56,7 +56,8 @@
   }
 
   .navbar__row--bordered {
-    border-bottom: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
+    border-bottom: var(--border, 1px) solid
+      color-mix(in oklab, var(--color-base-content) 16%, transparent);
   }
 
   .navbar__row--padded {

package/dist/components/navbar/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from "./Navbar.generated";
 export type { NavbarProps } from "./Navbar.generated";
-export type { NavbarStackProps } from "./NavbarStack.generated";
+export { default } from "./Navbar.generated";
 export type { NavbarRowProps } from "./NavbarRow.generated";
+export type { NavbarStackProps } from "./NavbarStack.generated";

package/dist/components/noise-background/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./NoiseBackground.generated";
 export type { NoiseBackgroundProps } from "./NoiseBackground.generated";
+export { default } from "./NoiseBackground.generated";

package/dist/components/pagination/Pagination.css

@@ -118,4 +118,3 @@
     padding-inline: 0.625rem;
   }
 }
-

package/dist/components/password-field/index.d.ts

@@ -1,3 +1,3 @@
-export { PasswordFieldLayout as default, PasswordFieldLayout as PasswordField, } from "./PasswordField.generated";
 export type { PasswordFieldProps } from "./PasswordField.generated";
-export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon, type PasswordFieldLike, type PasswordToggleSnapshot, } from "./PasswordField.interactions";
+export { PasswordFieldLayout as default, PasswordFieldLayout as PasswordField, } from "./PasswordField.generated";
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, getPasswordInputType, type PasswordFieldLike, type PasswordToggleSnapshot, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon, } from "./PasswordField.interactions";

package/dist/components/password-requirements/index.d.ts

@@ -1,2 +1,2 @@
-export { PasswordRequirementsLayout as default, PasswordRequirementsLayout as PasswordRequirements, } from "./PasswordRequirements.generated";
 export type { PasswordRequirementsProps } from "./PasswordRequirements.generated";
+export { PasswordRequirementsLayout as default, PasswordRequirementsLayout as PasswordRequirements, } from "./PasswordRequirements.generated";

package/dist/components/popover/Popover.css

@@ -13,7 +13,11 @@
     line-height: 1.25rem;
     background-color: var(--color-overlay, var(--color-base-100));
     color: var(--color-overlay-foreground, var(--color-base-content));
-    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 20%, transparent));
+    box-shadow: var(
+      --shadow-overlay,
+      0 24px 48px
+        color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 20%, transparent)
+    );
     opacity: 0;
     pointer-events: none;
     transform: translateY(-4px) scale(0.96);

package/dist/components/popover/index.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "solid-js";
-import Popover, { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading } from "./Popover.generated";
+import Popover, { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from "./Popover.generated";
 export type PopoverProps = ComponentProps<typeof PopoverRoot>;
 export type PopoverRootProps = ComponentProps<typeof PopoverRoot>;
 export type PopoverTriggerProps = ComponentProps<typeof PopoverTrigger>;
@@ -8,5 +8,5 @@ export type PopoverDialogProps = ComponentProps<typeof PopoverDialog>;
 export type PopoverArrowProps = ComponentProps<typeof PopoverArrow>;
 export type PopoverHeadingProps = ComponentProps<typeof PopoverHeading>;
 export type { PopoverAnchor, PopoverAnchorRect } from "./Popover.generated";
-export { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading, };
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger, };
 export default Popover;

package/dist/components/progress/Progress.css

@@ -46,7 +46,8 @@
 
   .progress--indeterminate .progress__indicator {
     width: 40%;
-    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1)
+      infinite;
   }
 
   .progress--disabled,
@@ -63,11 +64,6 @@
     height: 0.75rem;
   }
 
-
-
-
-
-
   @keyframes progress-indeterminate {
     0% {
       transform: translateX(-100%);

package/dist/components/progress/index.d.ts

@@ -1,2 +1,2 @@
+export type { ProgressColor, ProgressProps, ProgressSize, } from "./Progress.generated";
 export { default } from "./Progress.generated";
-export type { ProgressProps, ProgressSize, ProgressColor } from "./Progress.generated";

package/dist/components/radial-progress/RadialProgress.css

@@ -41,11 +41,6 @@
     height: 2.25rem;
   }
 
-
-
-
-
-
   @keyframes radial-progress-spin {
     from {
       transform: rotate(0deg);

package/dist/components/radial-progress/index.d.ts

@@ -1,2 +1,2 @@
+export type { RadialProgressColor, RadialProgressProps, RadialProgressSize, } from "./RadialProgress.generated";
 export { default } from "./RadialProgress.generated";
-export type { RadialProgressProps, RadialProgressSize, RadialProgressColor, } from "./RadialProgress.generated";

package/dist/components/radio/Radio.css

@@ -79,7 +79,8 @@
   .radio__input:focus-visible + .radio__control,
   .radio[data-focus-visible="true"] .radio__control {
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-accent) 22%, transparent);
   }
 
   /*
@@ -99,14 +100,26 @@
    * it reads on a petal whose entire surface is already a colour.
    */
   @media (hover: hover) {
-    .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__control,
-    .radio[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) .radio__control {
-      border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    .radio:hover:not([data-selected="true"]):not([data-disabled="true"])
+      .radio__control,
+    .radio[data-hovered="true"]:not([data-selected="true"]):not(
+        [data-disabled="true"]
+      )
+      .radio__control {
+      border-color: color-mix(
+        in oklab,
+        var(--color-base-content) 24%,
+        transparent
+      );
       transform: scale(1.12);
     }
 
-    .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__indicator:empty::before,
-    .radio[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) .radio__indicator:empty::before {
+    .radio:hover:not([data-selected="true"]):not([data-disabled="true"])
+      .radio__indicator:empty::before,
+    .radio[data-hovered="true"]:not([data-selected="true"]):not(
+        [data-disabled="true"]
+      )
+      .radio__indicator:empty::before {
       background-color: var(--color-base-200);
     }
   }
@@ -126,7 +139,8 @@
     transform: scale(0.4286);
   }
 
-  .radio[data-selected="true"][data-pressed="true"] .radio__indicator:empty::before {
+  .radio[data-selected="true"][data-pressed="true"]
+    .radio__indicator:empty::before {
     transform: scale(0.5714);
   }
 
@@ -136,7 +150,8 @@
 
   .radio[data-invalid="true"]:focus-within .radio__control,
   .radio[data-invalid="true"] .radio__input:focus-visible + .radio__control {
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 22%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-error) 22%, transparent);
   }
 
   .radio[data-disabled="true"] {

package/dist/components/radio-group/RadioGroup.css

@@ -45,9 +45,17 @@
   }
 
   @media (hover: hover) {
-    .radio-group--secondary .radio:not([data-selected="true"]):hover .radio__control,
-    .radio-group--secondary .radio:not([data-selected="true"])[data-hovered="true"] .radio__control {
-      border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    .radio-group--secondary
+      .radio:not([data-selected="true"]):hover
+      .radio__control,
+    .radio-group--secondary
+      .radio:not([data-selected="true"])[data-hovered="true"]
+      .radio__control {
+      border-color: color-mix(
+        in oklab,
+        var(--color-base-content) 24%,
+        transparent
+      );
       background-color: var(--color-base-200);
     }
   }

package/dist/components/radio-group/index.d.ts

@@ -1,4 +1,4 @@
 import RadioGroup from "./RadioGroup.generated";
-export type { RadioGroupProps, RadioGroupOrientation, RadioGroupVariant } from "./RadioGroup.generated";
+export type { RadioGroupOrientation, RadioGroupProps, RadioGroupVariant, } from "./RadioGroup.generated";
 export { RadioGroup };
 export default RadioGroup;

package/dist/components/range-calendar/RangeCalendar.css

@@ -28,8 +28,10 @@
     border-radius: 0.5rem;
   }
 
-  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--in-range,
-  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--in-preview-range {
+  .range-calendar__calendar
+    .calendar__cell--range-start.calendar__cell--in-range,
+  .range-calendar__calendar
+    .calendar__cell--range-start.calendar__cell--in-preview-range {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
     border-top-right-radius: 0.5rem;
@@ -37,15 +39,16 @@
   }
 
   .range-calendar__calendar .calendar__cell--range-end.calendar__cell--in-range,
-  .range-calendar__calendar .calendar__cell--range-end.calendar__cell--in-preview-range {
+  .range-calendar__calendar
+    .calendar__cell--range-end.calendar__cell--in-preview-range {
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
   }
 
-  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--range-end {
+  .range-calendar__calendar
+    .calendar__cell--range-start.calendar__cell--range-end {
     border-radius: var(--radius-pill, 9999px);
   }
 }
-