@ngrok/mantle 0.66.17 → 0.68.0

package/dist/input.d.ts

@@ -1,3 +1,3 @@
-import { a as WithInputType, i as WithAutoComplete, n as InputType, o as WithValidation, r as Validation, t as AutoComplete } from "./types-DgXUgkpc.js";
-import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-DWqhfw9n.js";
+import { a as WithInputType, i as WithAutoComplete, n as InputType, o as WithValidation, r as Validation, t as AutoComplete } from "./types-Cq6RWU7Q.js";
+import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-Bw97R9Kw.js";
 export { AutoComplete, Input, InputCapture, InputCaptureProps, InputProps, InputType, PasswordInput, PasswordInputProps, Validation, WithAutoComplete, WithInputType, WithValidation, isInput };

package/dist/input.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./is-input-BFR8yMM7.js";import{createContext as i,forwardRef as a,useContext as o,useEffect as s,useRef as c,useState as l}from"react";import u from"clsx";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{EyeIcon as g}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as _}from"@phosphor-icons/react/EyeClosed";const v=a(({children:e,className:t,...n},r)=>{let i=!!e,a=c(null);return i?d(x,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(x,{...n,className:t,forwardedRef:r,innerRef:a,children:d(y,{...n})})});v.displayName=`Input`;const y=a(({"aria-invalid":t,className:r,validation:i,...a},s)=>{let{"aria-invalid":c,forwardedRef:l,innerRef:u,validation:f,...p}=o(b),m=f??i,h=(typeof m==`function`?m():m)||void 0,g=c??t??m===`error`,_={...p,...a,type:a.type??p.type??`text`};return d(`input`,{"aria-invalid":g,"data-validation":h,className:e(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:n(s,l,u),..._})});y.displayName=`InputCapture`;const b=i({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:r,className:i,disabled:a,forwardedRef:o,innerRef:s,style:c,type:l,validation:u,...p})=>{let m=t!=null&&t!==`false`?`error`:typeof u==`function`?u():u;return d(b.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:a,type:l,validation:m,...p,forwardedRef:o,innerRef:s},children:f(`div`,{role:`none`,"data-disabled":(a??n)||void 0,"data-validation":m||void 0,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent`,`data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,d(S,{name:p.name,validation:m})]})})};x.displayName=`InputContainer`;const S=({name:e,validation:n})=>{switch(n){case`error`:return f(`div`,{className:`text-danger-600 pointer-events-none order-last select-none`,children:[d(`span`,{className:`sr-only`,children:u(`The value entered for the`,e,`input has failed validation.`)}),d(t,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(h,{weight:`fill`})})});default:return null}};S.displayName=`ValidationFeedback`;const C=a(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[a,o]=l(n),c=a?`text`:`password`,u=a?g:_;return s(()=>{o(n)},[n]),f(v,{type:c,ref:i,...r,children:[d(y,{}),f(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{o(!a),e?.(!a)},children:[f(`span`,{className:`sr-only`,children:[`Turn password visibility `,a?`off`:`on`]}),d(t,{svg:d(u,{"aria-hidden":!0})})]})]})});C.displayName=`PasswordInput`;export{v as Input,y as InputCapture,C as PasswordInput,r as isInput};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./compose-refs-DeIsFv68.js";import{t as r}from"./is-input-CC_n6EGM.js";import{createContext as i,forwardRef as a,useContext as o,useEffect as s,useRef as c,useState as l}from"react";import u from"clsx";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{EyeIcon as g}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as _}from"@phosphor-icons/react/EyeClosed";const v=a(({children:e,className:t,...n},r)=>{let i=!!e,a=c(null);return i?d(x,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(x,{...n,className:t,forwardedRef:r,innerRef:a,children:d(y,{...n})})});v.displayName=`Input`;const y=a(({"aria-invalid":t,className:r,validation:i,...a},s)=>{let{"aria-invalid":c,forwardedRef:l,innerRef:u,validation:f,...p}=o(b),m=f??i,h=(typeof m==`function`?m():m)||void 0,g=c??t??m===`error`,_={...p,...a,type:a.type??p.type??`text`};return d(`input`,{"aria-invalid":g,"data-validation":h,className:e(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:n(s,l,u),..._})});y.displayName=`InputCapture`;const b=i({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:r,className:i,disabled:a,forwardedRef:o,innerRef:s,style:c,type:l,validation:u,...p})=>{let m=t!=null&&t!==`false`?`error`:typeof u==`function`?u():u;return d(b.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:a,type:l,validation:m,...p,forwardedRef:o,innerRef:s},children:f(`div`,{role:`none`,"data-disabled":(a??n)||void 0,"data-validation":m||void 0,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent`,`data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,d(S,{name:p.name,validation:m})]})})};x.displayName=`InputContainer`;const S=({name:e,validation:n})=>{switch(n){case`error`:return f(`div`,{className:`text-danger-600 pointer-events-none order-last select-none`,children:[d(`span`,{className:`sr-only`,children:u(`The value entered for the`,e,`input has failed validation.`)}),d(t,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 pointer-events-none order-last select-none`,children:d(t,{svg:d(h,{weight:`fill`})})});default:return null}};S.displayName=`ValidationFeedback`;const C=a(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[a,o]=l(n),c=a?`text`:`password`,u=a?g:_;return s(()=>{o(n)},[n]),f(v,{type:c,ref:i,...r,children:[d(y,{}),f(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{o(!a),e?.(!a)},children:[f(`span`,{className:`sr-only`,children:[`Turn password visibility `,a?`off`:`on`]}),d(t,{svg:d(u,{"aria-hidden":!0})})]})]})});C.displayName=`PasswordInput`;export{v as Input,y as InputCapture,C as PasswordInput,r as isInput};
 //# sourceMappingURL=input.js.map

package/dist/{is-input-BFR8yMM7.js → is-input-CC_n6EGM.js}

@@ -1,2 +1,2 @@
 function e(e){return e!=null&&e instanceof HTMLInputElement}export{e as t};
-//# sourceMappingURL=is-input-BFR8yMM7.js.map
+//# sourceMappingURL=is-input-CC_n6EGM.js.map

package/dist/{is-input-BFR8yMM7.js.map → is-input-CC_n6EGM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"is-input-BFR8yMM7.js","names":[],"sources":["../src/components/input/is-input.ts"],"sourcesContent":["/**\n * Type guard for an HTMLInputElement.\n *\n * @example\n * ```tsx\n * function handleElement(element: HTMLElement) {\n *   if (isInput(element)) {\n *     // TypeScript now knows element is HTMLInputElement\n *     element.value = \"new value\";\n *     element.focus();\n *   }\n * }\n * ```\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"AAcA,SAAgB,EAAQ,EAA2C,CAClE,OAAO,GAAS,MAAQ,aAAiB"}
+{"version":3,"file":"is-input-CC_n6EGM.js","names":[],"sources":["../src/components/input/is-input.ts"],"sourcesContent":["/**\n * Type guard for an HTMLInputElement.\n *\n * @example\n * ```tsx\n * function handleElement(element: HTMLElement) {\n *   if (isInput(element)) {\n *     // TypeScript now knows element is HTMLInputElement\n *     element.value = \"new value\";\n *     element.focus();\n *   }\n * }\n * ```\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"AAcA,SAAgB,EAAQ,EAA2C,CAClE,OAAO,GAAS,MAAQ,aAAiB"}

package/dist/{kbd-CtTyMWXB.js → kbd-wgm9K9D5.js}

@@ -1,2 +1,2 @@
 import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};
-//# sourceMappingURL=kbd-CtTyMWXB.js.map
+//# sourceMappingURL=kbd-wgm9K9D5.js.map

package/dist/{kbd-CtTyMWXB.js.map → kbd-wgm9K9D5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"kbd-CtTyMWXB.js","names":[],"sources":["../src/components/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A square, centered keyboard “key” chip for rendering shortcut hints\n * (e.g., \"K\", \"⌘\", \"⌃\"). Designed so every key—letters and modifiers—shares\n * the same visual height/width and baseline. Renders a native `<kbd>` element.\n *\n * Accessibility:\n * - When showing a symbol (⌘/⌃), provide an accessible name via `aria-label`\n *   or include an sr-only label inside. The visible glyph may be marked\n *   `aria-hidden`.\n *\n * @example Basic letter key\n * <Kbd>K</Kbd>\n */\nfunction Kbd({ children, className, ...props }: ComponentProps<\"kbd\">) {\n\treturn (\n\t\t<kbd\n\t\t\tclassName={cx(\n\t\t\t\t\"[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]\",\n\t\t\t\t\"appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</kbd>\n\t);\n}\n\nexport {\n\t//,\n\tKbd,\n};\n"],"mappings":"6EAgBA,SAAS,EAAI,CAAE,WAAU,YAAW,GAAG,GAAgC,CACtE,OACC,EAAC,MAAD,CACC,UAAW,EACV,6EACA,qIACA,EACA,CACD,GAAI,EAEH,WACI,CAAA"}
+{"version":3,"file":"kbd-wgm9K9D5.js","names":[],"sources":["../src/components/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A square, centered keyboard “key” chip for rendering shortcut hints\n * (e.g., \"K\", \"⌘\", \"⌃\"). Designed so every key—letters and modifiers—shares\n * the same visual height/width and baseline. Renders a native `<kbd>` element.\n *\n * Accessibility:\n * - When showing a symbol (⌘/⌃), provide an accessible name via `aria-label`\n *   or include an sr-only label inside. The visible glyph may be marked\n *   `aria-hidden`.\n *\n * @example Basic letter key\n * <Kbd>K</Kbd>\n */\nfunction Kbd({ children, className, ...props }: ComponentProps<\"kbd\">) {\n\treturn (\n\t\t<kbd\n\t\t\tclassName={cx(\n\t\t\t\t\"[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]\",\n\t\t\t\t\"appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</kbd>\n\t);\n}\n\nexport {\n\t//,\n\tKbd,\n};\n"],"mappings":"6EAgBA,SAAS,EAAI,CAAE,WAAU,YAAW,GAAG,GAAgC,CACtE,OACC,EAAC,MAAD,CACC,UAAW,EACV,6EACA,qIACA,EACA,CACD,GAAI,EAEH,WACI,CAAA"}

package/dist/kbd.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/kbd/kbd.d.ts
 /**
@@ -19,7 +19,7 @@ declare function Kbd({
   children,
   className,
   ...props
-}: ComponentProps<"kbd">): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<"kbd">): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Kbd };
 //# sourceMappingURL=kbd.d.ts.map

package/dist/kbd.js

@@ -1 +1 @@
-import{t as e}from"./kbd-CtTyMWXB.js";export{e as Kbd};
+import{t as e}from"./kbd-wgm9K9D5.js";export{e as Kbd};

package/dist/label.d.ts

@@ -1,4 +1,4 @@
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/label/label.d.ts
 /**
@@ -21,12 +21,12 @@ import * as react from "react";
  * </div>
  * ```
  */
-declare const Label: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+declare const Label: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
   /**
    * If set, the label will appear disabled.
    */
   disabled?: boolean;
-} & react.RefAttributes<HTMLLabelElement>>;
+} & _$react.RefAttributes<HTMLLabelElement>>;
 //#endregion
 export { Label };
 //# sourceMappingURL=label.d.ts.map

package/dist/mantle-dark-high-contrast.css

@@ -243,9 +243,21 @@ MARK: DARK HICON DEFS
 	--background-color-popover: var(--color-neutral-50);
 	--background-color-dialog: var(--color-neutral-50);
 	--background-color-base-hover: var(--color-neutral-100);
-	--background-color-card-hover: var(--color-neutral-100);
-	--background-color-popover-hover: var(--color-neutral-100);
-	--background-color-dialog-hover: var(--color-neutral-100);
+	--background-color-card-hover: color-mix(
+		in oklab,
+		var(--color-neutral-50) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-popover-hover: color-mix(
+		in oklab,
+		var(--color-neutral-50) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-dialog-hover: color-mix(
+		in oklab,
+		var(--color-neutral-50) 50%,
+		var(--color-neutral-100)
+	);
 	--background-color-form: var(--color-white);
 	--background-color-form-hover: --alpha(var(--color-neutral-500) / 0.05);
 	--background-color-form-active: --alpha(var(--color-neutral-500) / 0.1);
@@ -290,12 +302,6 @@ MARK: DARK HICON DEFS
 	--background-color-filled-warning-hover: var(--color-warning-600);
 	--background-color-filled-success-hover: var(--color-success-600);
 
-	--background-color-filled-neutral-active: var(--color-neutral-700);
-	--background-color-filled-accent-active: var(--color-accent-700);
-	--background-color-filled-danger-active: var(--color-danger-700);
-	--background-color-filled-warning-active: var(--color-warning-700);
-	--background-color-filled-success-active: var(--color-success-700);
-
 	/* Focus tokens */
 	--ring-color-focus-neutral: --alpha(var(--color-neutral-500) / 0.3);
 	--ring-color-focus-accent: --alpha(var(--color-accent-500) / 0.3);
@@ -307,4 +313,7 @@ MARK: DARK HICON DEFS
 	--shadow-first-opacity: 60%;
 	--shadow-second-opacity: 80%;
 	--navigation-shadow: #000;
+
+	--bg-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.7071 4.29289c.3905.39053.3905 1.02369 0 1.41422L6.70711 11.7071c-.39053.3905-1.02369.3905-1.41422 0l-2-1.99999c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L6 9.58579l5.2929-5.2929c.3905-.39052 1.0237-.39052 1.4142 0Z'/%3e%3c/svg%3e");
+	--bg-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
 }

package/dist/mantle-dark.css

@@ -23,24 +23,24 @@ MARK: DARK DEFS
 	--color-neutral-900: oklch(97% 0 0);
 	--color-neutral-950: oklch(98.5% 0 0);
 
-	/* gray is identical to neutral in dark mode */
-	--color-gray-50: var(--color-neutral-50);
-	--color-gray-100: var(--color-neutral-100);
-	--color-gray-200: var(--color-neutral-200);
-	--color-gray-300: var(--color-neutral-300);
-	--color-gray-400: var(--color-neutral-400);
-	--color-gray-500: var(--color-neutral-500);
-	--color-gray-600: var(--color-neutral-600);
-	--color-gray-700: var(--color-neutral-700);
-	--color-gray-800: var(--color-neutral-800);
-	--color-gray-900: var(--color-neutral-900);
-	--color-gray-950: var(--color-neutral-950);
+	--color-gray-50: oklch(18.2% 0 0);
+	--color-gray-100: oklch(20.5% 0 0);
+	--color-gray-200: oklch(26.9% 0 0);
+	--color-gray-300: oklch(37.1% 0 0);
+	--color-gray-400: oklch(43.9% 0 0);
+	--color-gray-500: oklch(55.6% 0 0);
+	--color-gray-600: oklch(70.8% 0 0);
+	--color-gray-700: oklch(87% 0 0);
+	--color-gray-800: oklch(92.2% 0 0);
+	--color-gray-900: oklch(97% 0 0);
+	--color-gray-950: oklch(98.5% 0 0);
 
 	--color-blue-50: oklch(26.6% 0.0958 273.2);
 	--color-blue-100: oklch(35.3% 0.1525 269.7);
 	--color-blue-200: oklch(39.8% 0.1951 268.1);
 	--color-blue-300: oklch(45.4% 0.2358 266.7);
 	--color-blue-400: oklch(52.1% 0.2298 266.7);
+	--color-blue-500: oklch(58.4% 0.2069 265.3);
 	--color-blue-600: oklch(69.6% 0.1539 262.9);
 	--color-blue-700: oklch(77.9% 0.1078 262.4);
 	--color-blue-800: oklch(86.7% 0.0622 264.2);
@@ -280,10 +280,18 @@ MARK: DARK DEFS
 	--background-color-popover: var(--color-neutral-100);
 	--background-color-dialog: var(--color-neutral-50);
 	--background-color-base-hover: var(--color-neutral-100);
-	--background-color-card-hover: var(--color-neutral-200);
-	--background-color-popover-hover: var(--color-neutral-200);
+	--background-color-card-hover: color-mix(
+		in oklab,
+		var(--color-neutral-100) 50%,
+		var(--color-neutral-200)
+	);
+	--background-color-popover-hover: color-mix(
+		in oklab,
+		var(--color-neutral-100) 50%,
+		var(--color-neutral-200)
+	);
 	--background-color-dialog-hover: var(--color-neutral-100);
-	--background-color-form: var(--color-neutral-50);
+	--background-color-form: var(--background-color-card);
 	--background-color-form-hover: --alpha(var(--color-neutral-500) / 0.05);
 	--background-color-form-active: --alpha(var(--color-neutral-500) / 0.1);
 	--background-color-overlay: --alpha(#000 / 0.6);
@@ -304,10 +312,6 @@ MARK: DARK DEFS
 	--color-card-border: var(--color-neutral-300);
 	--color-card-border-muted: var(--color-neutral-200);
 
-	--color-active-menu-item: var(--color-neutral-200);
-	--color-selected-menu-item: var(--color-accent-50);
-	--color-active-selected-menu-item: var(--color-accent-100);
-
 	--text-color-strong: #fff;
 	--text-color-body: --alpha(#fff / 0.7);
 	--text-color-muted: --alpha(#fff / 0.5);
@@ -315,34 +319,24 @@ MARK: DARK DEFS
 	--text-color-on-filled: #fff;
 
 	/* Theme tokens */
-	--background-color-filled-neutral: var(--color-neutral-500);
-	--background-color-filled-accent: var(--color-accent-500);
-	--background-color-filled-danger: var(--color-danger-500);
-	--background-color-filled-warning: var(--color-warning-500);
-	--background-color-filled-success: var(--color-success-500);
-
-	--background-color-filled-neutral-hover: --alpha(var(--color-neutral-500) / 0.9);
-	--background-color-filled-accent-hover: --alpha(var(--color-accent-500) / 0.9);
-	--background-color-filled-danger-hover: --alpha(var(--color-danger-500) / 0.9);
-	--background-color-filled-warning-hover: --alpha(var(--color-warning-500) / 0.9);
-	--background-color-filled-success-hover: --alpha(var(--color-success-500) / 0.9);
-
-	--background-color-filled-neutral-active: --alpha(var(--color-neutral-500) / 0.8);
-	--background-color-filled-accent-active: --alpha(var(--color-accent-500) / 0.8);
-	--background-color-filled-danger-active: --alpha(var(--color-danger-500) / 0.8);
-	--background-color-filled-warning-active: --alpha(var(--color-warning-500) / 0.8);
-	--background-color-filled-success-active: --alpha(var(--color-success-500) / 0.8);
-
-	/* focus tokens */
-	--ring-color-focus-neutral: --alpha(var(--color-neutral-500) / 0.5);
-	--ring-color-focus-accent: --alpha(var(--color-accent-500) / 0.5);
-	--ring-color-focus-danger: --alpha(var(--color-danger-500) / 0.5);
-	--ring-color-focus-warning: --alpha(var(--color-warning-500) / 0.5);
-	--ring-color-focus-success: --alpha(var(--color-success-500) / 0.5);
+	--background-color-filled-neutral: var(--color-neutral-900);
+	--background-color-filled-accent: var(--color-accent-600);
+	--background-color-filled-danger: var(--color-danger-600);
+	--background-color-filled-warning: var(--color-warning-600);
+	--background-color-filled-success: var(--color-success-600);
+
+	--background-color-filled-neutral-hover: var(--color-black);
+	--background-color-filled-accent-hover: var(--color-accent-700);
+	--background-color-filled-danger-hover: var(--color-danger-700);
+	--background-color-filled-warning-hover: var(--color-warning-700);
+	--background-color-filled-success-hover: var(--color-success-700);
 
 	--shadow-color: #000;
 	--shadow-first-opacity: 15%;
 	--shadow-second-opacity: 30%;
 
 	--navigation-shadow: --alpha(var(--shadow-color) / 40%);
+
+	--bg-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.7071 4.29289c.3905.39053.3905 1.02369 0 1.41422L6.70711 11.7071c-.39053.3905-1.02369.3905-1.41422 0l-2-1.99999c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L6 9.58579l5.2929-5.2929c.3905-.39052 1.0237-.39052 1.4142 0Z'/%3e%3c/svg%3e");
+	--bg-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
 }

package/dist/mantle-light-high-contrast.css

@@ -242,9 +242,21 @@ MARK: LIGHT HICON DEFS
 	--background-color-popover: var(--color-white);
 	--background-color-dialog: var(--color-white);
 	--background-color-base-hover: var(--color-neutral-100);
-	--background-color-card-hover: var(--color-neutral-100);
-	--background-color-popover-hover: var(--color-neutral-100);
-	--background-color-dialog-hover: var(--color-neutral-100);
+	--background-color-card-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-popover-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
+	--background-color-dialog-hover: color-mix(
+		in oklab,
+		var(--color-white) 50%,
+		var(--color-neutral-100)
+	);
 	--background-color-form: var(--color-white);
 	--background-color-form-hover: --alpha(var(--color-neutral-500) / 0.05);
 	--background-color-form-active: --alpha(var(--color-neutral-500) / 0.1);
@@ -289,12 +301,6 @@ MARK: LIGHT HICON DEFS
 	--background-color-filled-warning-hover: var(--color-warning-600);
 	--background-color-filled-success-hover: var(--color-success-600);
 
-	--background-color-filled-neutral-active: var(--color-neutral-700);
-	--background-color-filled-accent-active: var(--color-accent-700);
-	--background-color-filled-danger-active: var(--color-danger-700);
-	--background-color-filled-warning-active: var(--color-warning-700);
-	--background-color-filled-success-active: var(--color-success-700);
-
 	/* Focus tokens */
 	--ring-color-focus-neutral: --alpha(var(--color-neutral-500) / 0.3);
 	--ring-color-focus-accent: --alpha(var(--color-accent-500) / 0.3);