@bolerish/ui 0.13.0 → 0.16.0

package/dist/slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/slider.tsx", "../src/styles/merge-styles.ts"],
-  "sourcesContent": ["\"use client\";\n\nimport { c as _c } from \"react/compiler-runtime\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { colorVars, motionVars, opacityVars, radiusVars, sizeVars } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\nimport type { ControlLayoutStyles } from \"./styles/control-layout\";\nimport { mergeStyles } from \"./styles/merge-styles\";\nimport type { StyledProps } from \"./styles/merge-styles\";\nconst styles = {\n  root: {\n    kSiTet: \"x1hc1fzr x1qx4qp5\",\n    kIyJzY: \"xznvecg\",\n    k1ekBW: \"x19991ni\",\n    kAMwcw: \"xrkjf8i\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  }\n};\nexport type SliderProps = StyledProps<ComponentProps<typeof SliderPrimitive.Root>> & {\n  /** Returns an accessible name for each thumb in a range slider. */\n  getAriaLabel?: (index: number) => string;\n  xstyle?: ControlLayoutStyles;\n};\nexport function Slider(t0) {\n  const $ = _c(26);\n  let className;\n  let defaultValue;\n  let getAriaLabel;\n  let props;\n  let style;\n  let value;\n  let xstyle;\n  if ($[0] !== t0) {\n    ({\n      className,\n      style,\n      defaultValue,\n      getAriaLabel,\n      value,\n      xstyle,\n      ...props\n    } = t0);\n    $[0] = t0;\n    $[1] = className;\n    $[2] = defaultValue;\n    $[3] = getAriaLabel;\n    $[4] = props;\n    $[5] = style;\n    $[6] = value;\n    $[7] = xstyle;\n  } else {\n    className = $[1];\n    defaultValue = $[2];\n    getAriaLabel = $[3];\n    props = $[4];\n    style = $[5];\n    value = $[6];\n    xstyle = $[7];\n  }\n  const currentValue = value ?? defaultValue;\n  const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1;\n  let t1;\n  if ($[8] !== className || $[9] !== style || $[10] !== xstyle) {\n    t1 = mergeStyles(stylex.props(styles.root, xstyle), className, style);\n    $[8] = className;\n    $[9] = style;\n    $[10] = xstyle;\n    $[11] = t1;\n  } else {\n    t1 = $[11];\n  }\n  let t2;\n  if ($[12] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t2 = {\n      className: \"x6s0dn4 x78zum5 x1rrewj3 x1n2onr6 x5ve5x3 xh8yej3\"\n    };\n    $[12] = t2;\n  } else {\n    t2 = $[12];\n  }\n  let t3;\n  if ($[13] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t3 = {\n      className: \"xmqg8ag xwhwt5f xg80tyb xb3r6kr xh8yej3\"\n    };\n    $[13] = t3;\n  } else {\n    t3 = $[13];\n  }\n  let t4;\n  if ($[14] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t4 = <SliderPrimitive.Track {...t3}><SliderPrimitive.Indicator className=\"x1k98rc1 xwhwt5f x5yr21d\" /></SliderPrimitive.Track>;\n    $[14] = t4;\n  } else {\n    t4 = $[14];\n  }\n  let t5;\n  if ($[15] !== getAriaLabel || $[16] !== thumbCount) {\n    let t6;\n    if ($[18] !== getAriaLabel) {\n      t6 = (_, index) => <SliderPrimitive.Thumb getAriaLabel={getAriaLabel} index={index} key={index} className=\"xcc0o6n x1lpgi1j xwhwt5f x1y0btm7 x1al7nqq x32j0x8 x1a2a7pz x10sws06 x768paa x1m0b1kh x9v5kkp x1k4h2j2\" />;\n      $[18] = getAriaLabel;\n      $[19] = t6;\n    } else {\n      t6 = $[19];\n    }\n    t5 = <SliderPrimitive.Control {...t2}>{t4}{Array.from({\n        length: thumbCount\n      }, t6)}</SliderPrimitive.Control>;\n    $[15] = getAriaLabel;\n    $[16] = thumbCount;\n    $[17] = t5;\n  } else {\n    t5 = $[17];\n  }\n  let t6;\n  if ($[20] !== defaultValue || $[21] !== props || $[22] !== t1 || $[23] !== t5 || $[24] !== value) {\n    t6 = <SliderPrimitive.Root {...props} defaultValue={defaultValue} value={value} {...t1}>{t5}</SliderPrimitive.Root>;\n    $[20] = defaultValue;\n    $[21] = props;\n    $[22] = t1;\n    $[23] = t5;\n    $[24] = value;\n    $[25] = t6;\n  } else {\n    t6 = $[25];\n  }\n  return t6;\n}", "import type * as stylex from \"@stylexjs/stylex\";\nimport type { CSSProperties } from \"react\";\nexport type StyledProps<Props> = Props extends unknown ? Omit<Props, \"className\" | \"style\"> & {\n  className?: string;\n  style?: CSSProperties;\n} : never;\nexport function mergeStyles(base: ReturnType<typeof stylex.props>, className?: string, style?: CSSProperties): {\n  className?: string;\n  style?: CSSProperties;\n} {\n  if (className === undefined && style === undefined) return base;\n  return {\n    ...base,\n    className: [base.className, className].filter(Boolean).join(\" \") || undefined,\n    style: base.style || style ? {\n      ...base.style,\n      ...style\n    } : undefined\n  };\n}"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\";\n\nimport { c as _c } from \"react/compiler-runtime\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { colorVars, motionVars, opacityVars, radiusVars, sizeVars } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\nimport type { ControlLayoutStyles } from \"./styles/control-layout\";\nimport { mergeStyles } from \"./styles/merge-styles\";\nimport type { StyledProps } from \"./styles/merge-styles\";\nconst styles = {\n  root: {\n    kSiTet: \"x1hc1fzr x1qx4qp5\",\n    kIyJzY: \"xznvecg\",\n    k1ekBW: \"x19991ni\",\n    kAMwcw: \"xrkjf8i\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  }\n};\nexport type SliderProps = StyledProps<ComponentProps<typeof SliderPrimitive.Root>> & {\n  /** Returns an accessible name for each thumb in a range slider. */\n  getAriaLabel?: (index: number) => string;\n  xstyle?: ControlLayoutStyles;\n};\nexport function Slider(t0) {\n  const $ = _c(32);\n  let ariaLabel;\n  let ariaLabelledBy;\n  let className;\n  let defaultValue;\n  let getAriaLabel;\n  let props;\n  let style;\n  let value;\n  let xstyle;\n  if ($[0] !== t0) {\n    ({\n      className,\n      style,\n      defaultValue,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      getAriaLabel,\n      value,\n      xstyle,\n      ...props\n    } = t0);\n    $[0] = t0;\n    $[1] = ariaLabel;\n    $[2] = ariaLabelledBy;\n    $[3] = className;\n    $[4] = defaultValue;\n    $[5] = getAriaLabel;\n    $[6] = props;\n    $[7] = style;\n    $[8] = value;\n    $[9] = xstyle;\n  } else {\n    ariaLabel = $[1];\n    ariaLabelledBy = $[2];\n    className = $[3];\n    defaultValue = $[4];\n    getAriaLabel = $[5];\n    props = $[6];\n    style = $[7];\n    value = $[8];\n    xstyle = $[9];\n  }\n  const currentValue = value ?? defaultValue;\n  const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1;\n  let t1;\n  if ($[10] !== className || $[11] !== style || $[12] !== xstyle) {\n    t1 = mergeStyles(stylex.props(styles.root, xstyle), className, style);\n    $[10] = className;\n    $[11] = style;\n    $[12] = xstyle;\n    $[13] = t1;\n  } else {\n    t1 = $[13];\n  }\n  let t2;\n  if ($[14] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t2 = {\n      className: \"x6s0dn4 x78zum5 x1rrewj3 x1n2onr6 x5ve5x3 xh8yej3\"\n    };\n    $[14] = t2;\n  } else {\n    t2 = $[14];\n  }\n  let t3;\n  if ($[15] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t3 = {\n      className: \"xmqg8ag xwhwt5f xg80tyb xb3r6kr xh8yej3\"\n    };\n    $[15] = t3;\n  } else {\n    t3 = $[15];\n  }\n  let t4;\n  if ($[16] === Symbol.for(\"react.memo_cache_sentinel\")) {\n    t4 = <SliderPrimitive.Track {...t3}><SliderPrimitive.Indicator className=\"x1k98rc1 xwhwt5f x5yr21d\" /></SliderPrimitive.Track>;\n    $[16] = t4;\n  } else {\n    t4 = $[16];\n  }\n  let t5;\n  if ($[17] !== ariaLabel || $[18] !== ariaLabelledBy || $[19] !== getAriaLabel || $[20] !== thumbCount) {\n    let t6;\n    if ($[22] !== ariaLabel || $[23] !== ariaLabelledBy || $[24] !== getAriaLabel) {\n      t6 = (_, index) => <SliderPrimitive.Thumb aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} getAriaLabel={getAriaLabel} index={index} key={index} className=\"xcc0o6n x1lpgi1j xwhwt5f x1y0btm7 x1al7nqq x32j0x8 x1a2a7pz x10sws06 x768paa x1m0b1kh x9v5kkp x1k4h2j2\" />;\n      $[22] = ariaLabel;\n      $[23] = ariaLabelledBy;\n      $[24] = getAriaLabel;\n      $[25] = t6;\n    } else {\n      t6 = $[25];\n    }\n    t5 = <SliderPrimitive.Control {...t2}>{t4}{Array.from({\n        length: thumbCount\n      }, t6)}</SliderPrimitive.Control>;\n    $[17] = ariaLabel;\n    $[18] = ariaLabelledBy;\n    $[19] = getAriaLabel;\n    $[20] = thumbCount;\n    $[21] = t5;\n  } else {\n    t5 = $[21];\n  }\n  let t6;\n  if ($[26] !== defaultValue || $[27] !== props || $[28] !== t1 || $[29] !== t5 || $[30] !== value) {\n    t6 = <SliderPrimitive.Root {...props} defaultValue={defaultValue} value={value} {...t1}>{t5}</SliderPrimitive.Root>;\n    $[26] = defaultValue;\n    $[27] = props;\n    $[28] = t1;\n    $[29] = t5;\n    $[30] = value;\n    $[31] = t6;\n  } else {\n    t6 = $[31];\n  }\n  return t6;\n}", "import type * as stylex from \"@stylexjs/stylex\";\nimport type { CSSProperties } from \"react\";\nexport type StyledProps<Props> = Props extends unknown ? Omit<Props, \"className\" | \"style\"> & {\n  className?: string;\n  style?: CSSProperties;\n} : never;\nexport function mergeStyles(base: ReturnType<typeof stylex.props>, className?: string, style?: CSSProperties): {\n  className?: string;\n  style?: CSSProperties;\n} {\n  if (className === undefined && style === undefined) return base;\n  return {\n    ...base,\n    className: [base.className, className].filter(Boolean).join(\" \") || undefined,\n    style: base.style || style ? {\n      ...base.style,\n      ...style\n    } : undefined\n  };\n}"],
+  "mappings": "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",
   "names": ["props", "t6"]
 }

package/dist/styles/liquid-map.d.ts

@@ -0,0 +1,5 @@
+export declare function createLiquidMap(width: number, height: number, radius: number): {
+    width: number;
+    height: number;
+    data: Uint8ClampedArray<ArrayBuffer>;
+};

package/dist/styles/surface.d.ts

@@ -1,33 +1,172 @@
 import * as stylex from "@stylexjs/stylex";
-export declare const surfaceStyles: Readonly<{
-    readonly edge: Readonly<{
+export declare const surfaceStyles: {
+    edge: Readonly<{
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
         readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
             readonly borderColor: "CanvasText";
         }>;
     }>;
-    readonly translucent: Readonly<{
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(16px)">;
+    panel: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
         readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
-            readonly backgroundColor: stylex.StyleXVar<string>;
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
             readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
         }>;
         readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
             readonly backgroundColor: "Canvas";
             readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
         }>;
-    }>;
-    readonly floating: Readonly<{
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(16px)">;
+    }> | Readonly<{
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-panel-opacity, 100%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-panel-filter, none)">;
+    }>)[];
+    control: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
         readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
-            readonly backgroundColor: stylex.StyleXVar<string>;
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
             readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
         }>;
         readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
             readonly backgroundColor: "Canvas";
             readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
         }>;
-    }>;
-}>;
+    }> | Readonly<{
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-control-opacity, 100%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-control-filter, none)">;
+    }>)[];
+    subtle: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
+        readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
+        }>;
+        readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
+            readonly backgroundColor: "Canvas";
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
+        }>;
+    }> | Readonly<{
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-control-opacity, 100%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-control-filter, none)">;
+    }>)[];
+    outline: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
+        readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
+        }>;
+        readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
+            readonly backgroundColor: "Canvas";
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
+        }>;
+    }> | Readonly<{
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-control-opacity, 100%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-control-filter, none)">;
+    }>)[];
+    raised: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
+        readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
+        }>;
+        readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
+            readonly backgroundColor: "Canvas";
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
+        }>;
+    }> | Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", `var(--bolerish-raised-shadow, ${stylex.StyleXVar<string>})`>;
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-floating-opacity, 100%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-floating-filter, none)">;
+    }>)[];
+    translucent: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
+        readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
+        }>;
+        readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
+            readonly backgroundColor: "Canvas";
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
+        }>;
+    }> | Readonly<{
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-panel-opacity, 92%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-panel-filter, blur(16px))">;
+    }>)[];
+    floating: (Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", "0 0 transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "var(--bolerish-material-shadow)" | "var(--bolerish-surface-reflection, 0 0 transparent), var(--bolerish-material-shadow)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, var(--bolerish-material-color, ${stylex.StyleXVar<string>}) var(--bolerish-material-opacity), transparent)` | `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "none" | "var(--bolerish-material-filter)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | "var(--bolerish-surface-sheen, none)">;
+        readonly "@media (prefers-reduced-transparency: reduce)": stylex.StyleXClassNameFor<"@media (prefers-reduced-transparency: reduce)", {
+            readonly backgroundColor: `var(--bolerish-material-color, ${stylex.StyleXVar<string>})`;
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "var(--bolerish-material-shadow)";
+        }>;
+        readonly "@media (forced-colors: active)": stylex.StyleXClassNameFor<"@media (forced-colors: active)", {
+            readonly backgroundColor: "Canvas";
+            readonly backdropFilter: "none";
+            readonly backgroundImage: "none";
+            readonly boxShadow: "none";
+        }>;
+    }> | Readonly<{
+        readonly "--bolerish-material-shadow": stylex.StyleXClassNameFor<"--bolerish-material-shadow", `var(--bolerish-floating-shadow, ${stylex.StyleXVar<string>})`>;
+        readonly "--bolerish-material-color": stylex.StyleXClassNameFor<"--bolerish-material-color", string>;
+        readonly "--bolerish-material-opacity": stylex.StyleXClassNameFor<"--bolerish-material-opacity", "var(--bolerish-floating-opacity, 94%)">;
+        readonly "--bolerish-material-filter": stylex.StyleXClassNameFor<"--bolerish-material-filter", "var(--bolerish-floating-filter, blur(16px))">;
+    }>)[];
+};

package/dist/stylex.css

@@ -423,6 +423,10 @@
     .x1w1tqly.x1w1tqly {
       border-color: canvastext;
     }
+
+    .x1mncknp.x1mncknp {
+      outline: 2px solid highlight;
+    }
   }
 
   .x8jboxv:disabled:hover {
@@ -495,8 +499,8 @@
     aspect-ratio: var(--x-aspectRatio);
   }
 
-  .x1jh03n0 {
-    backdrop-filter: blur(16px);
+  .x1t853zo {
+    backdrop-filter: none;
   }
 
   .xtwfq29 {
@@ -507,6 +511,10 @@
     background-color: #0000;
   }
 
+  .x1s4uome {
+    background-color: var(--bolerish-material-color, var(--x1v7ela7));
+  }
+
   .xezvvoc {
     background-color: var(--x11x010x);
   }
@@ -615,6 +623,10 @@
     box-shadow: none;
   }
 
+  .x16ifxj2 {
+    box-shadow: var(--bolerish-material-shadow);
+  }
+
   .xms81ks {
     box-shadow: var(--x1tk9q2c);
   }
@@ -723,6 +735,10 @@
     display: inline-flex;
   }
 
+  .x1ctqcxj {
+    display: var(--bolerish-liquid-display, none);
+  }
+
   .x1839e5r {
     fill: var(--x11f2mpi);
   }
@@ -1265,12 +1281,12 @@
   }
 
   @supports (backdrop-filter: blur(1px)) and (background-color: color-mix(in srgb, white, transparent)) {
-    .x6pgpxb.x6pgpxb {
-      background-color: color-mix(in srgb,var(--x1v7ela7) 92%,transparent);
+    .x1o5bnqd.x1o5bnqd {
+      backdrop-filter: var(--bolerish-material-filter);
     }
 
-    .x1r7obb8.x1r7obb8 {
-      background-color: color-mix(in srgb,var(--x6f99ho) 94%,transparent);
+    .x1u5mdis.x1u5mdis {
+      background-color: color-mix(in srgb,var(--bolerish-material-color, var(--x1v7ela7)) var(--bolerish-material-opacity),transparent);
     }
   }
 
@@ -1280,6 +1296,16 @@
     }
   }
 
+  @supports (backdrop-filter: blur(1px)) and (background-color: color-mix(in srgb, white, transparent)) {
+    .xxit9r9.xxit9r9 {
+      background-image: var(--bolerish-surface-sheen, none);
+    }
+
+    .xpqbwuo.xpqbwuo {
+      box-shadow: var(--bolerish-surface-reflection, 0 0 transparent),var(--bolerish-material-shadow);
+    }
+  }
+
   .x13zvigl:is([data-disabled] *) {
     background-color: var(--x19j9y2e);
   }
@@ -1296,6 +1322,10 @@
     background-color: var(--xbs6o6w);
   }
 
+  .xm8hp6d:focus-visible {
+    box-shadow: 0 var(--xx1jdaa) 0 var(--bolerish-input-focus-color);
+  }
+
   .x5ezrf1[data-disabled] {
     cursor: not-allowed;
   }
@@ -1316,7 +1346,11 @@
     outline-color: #0000;
   }
 
-  .x1rovn1u:focus-visible, .xlfzi52:focus-within {
+  .xyz7ihz:focus-visible {
+    outline-color: var(--bolerish-input-focus-color);
+  }
+
+  .x1rovn1u:focus-visible, .x7vy0yh:is([aria-invalid="true"], :user-invalid), .xlfzi52:focus-within {
     outline-color: var(--x1wmomuh);
   }
 
@@ -1340,7 +1374,7 @@
     outline-offset: var(--xc1hqty);
   }
 
-  .x1p3hdyt:focus-visible, .x1vzskv2:focus-within {
+  .x1p3hdyt:focus-visible, .x1vzskv2:focus-within, .x4w8ylm:is([aria-invalid="true"], :user-invalid) {
     outline-offset: var(--xx1jdaa);
   }
 
@@ -1348,7 +1382,7 @@
     outline-style: none;
   }
 
-  .x14xc8xn:focus-within, .x9v5kkp:focus-visible {
+  .x14xc8xn:focus-within, .x4wip10:is([aria-invalid="true"], :user-invalid), .x9v5kkp:focus-visible {
     outline-style: solid;
   }
 
@@ -1360,6 +1394,10 @@
     outline-width: var(--xc1hqty);
   }
 
+  .x18myw3g:is([aria-invalid="true"], :user-invalid) {
+    outline-width: var(--xx1jdaa);
+  }
+
   .xjtggp9:is([data-hovering], [data-scrolling]) {
     pointer-events: auto;
   }
@@ -1480,6 +1518,10 @@
     border-start-end-radius: var(--x1odqryn);
   }
 
+  .x1pq16l0:focus-visible:is([aria-invalid="true"], :user-invalid) {
+    outline-width: var(--xc1hqty);
+  }
+
   .x1oqui1x:disabled {
     background-color: #0000;
   }
@@ -1595,12 +1637,8 @@
   }
 
   @media (prefers-reduced-transparency: reduce) {
-    .x1rxs12l.x1rxs12l {
-      background-color: var(--x1v7ela7);
-    }
-
-    .x1psyy34.x1psyy34 {
-      background-color: var(--x6f99ho);
+    .x1cg02ou.x1cg02ou {
+      background-color: var(--bolerish-material-color, var(--x1v7ela7));
     }
   }
 
@@ -1616,12 +1654,48 @@
     }
   }
 
+  @media (prefers-reduced-transparency: reduce) {
+    .x1ile18z.x1ile18z {
+      background-image: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .xwaqzdf.xwaqzdf {
+      box-shadow: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .x1m3y3zz.x1m3y3zz {
+      box-shadow: var(--bolerish-material-shadow);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .x1c7sf14.x1c7sf14 {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .x1izksy.x1izksy {
+      display: none;
+    }
+  }
+
   @media (width <= 40rem) {
     .xrezwjf.xrezwjf {
       justify-content: center;
     }
   }
 
+  @media (forced-colors: active) {
+    .xs9jlpd.xs9jlpd {
+      outline-offset: -2px;
+    }
+  }
+
   .x1eqo6io:disabled:hover {
     background-color: #0000;
   }
@@ -1634,7 +1708,15 @@
     .x15puxn2.x15puxn2:not(:root[data-bolerish-motion="on"] *) {
       animation-name: none;
     }
+  }
+
+  @media (forced-colors: active) {
+    .x1cg32vb.x1cg32vb:focus-visible {
+      box-shadow: none;
+    }
+  }
 
+  @media (prefers-reduced-motion: reduce) {
     .xjilbjb.xjilbjb:not(:root[data-bolerish-motion="on"] *) {
       transform: none;
     }
@@ -1926,6 +2008,10 @@
     max-height: min(20rem,var(--available-height));
   }
 
+  .x1374xjt {
+    max-height: var(--available-height);
+  }
+
   .x193iq5w {
     max-width: 100%;
   }
@@ -2122,8 +2208,8 @@
     top: auto;
   }
 
-  .x10fobg2 {
-    top: calc(50% - var(--xisj2jh) / 2);
+  .x11u2n0f {
+    top: calc(50% - var(--xbrfw55) / 2);
   }
 
   .x10uur0e {
@@ -2254,6 +2340,10 @@
     width: var(--xz6d21);
   }
 
+  .x5swq7u:focus-visible {
+    border-bottom-color: var(--bolerish-input-focus-color);
+  }
+
   .xnbj6on[data-expanded] {
     height: var(--toast-height);
   }
@@ -2281,6 +2371,12 @@
   .xghm9d:last-child {
     border-top-right-radius: var(--x1odqryn);
   }
+
+  @media (forced-colors: active) {
+    .x34zm41.x34zm41:focus-visible {
+      border-bottom-width: var(--xc1hqty);
+    }
+  }
 }
 
 @layer priority6 {
@@ -2919,6 +3015,94 @@
   --bolerish-gradient-glow: var(--x---bolerish-gradient-glow);
 }
 
+.xnholtd {
+  --bolerish-input-focus-color: var(--x1wmomuh);
+}
+
+.x10nrt0v {
+  --bolerish-input-focus-color: var(--x3ef5vz);
+}
+
+.x1819ggx {
+  --bolerish-material-color: var(--x1oing0p);
+}
+
+.x14zkn9l {
+  --bolerish-material-color: var(--x1v7ela7);
+}
+
+.x3m3fbl {
+  --bolerish-material-color: var(--x4kr36v);
+}
+
+.x1y5ilfp {
+  --bolerish-material-color: var(--x6f99ho);
+}
+
+.x9f78pr {
+  --bolerish-material-filter: none;
+}
+
+.x1mpfm11 {
+  --bolerish-material-filter: var(--bolerish-control-filter, none);
+}
+
+.xunhrho {
+  --bolerish-material-filter: var(--bolerish-floating-filter, blur(16px));
+}
+
+.x1gkvbmm {
+  --bolerish-material-filter: var(--bolerish-floating-filter, none);
+}
+
+.xhu24am {
+  --bolerish-material-filter: var(--bolerish-panel-filter, blur(16px));
+}
+
+.x1n6mwez {
+  --bolerish-material-filter: var(--bolerish-panel-filter, none);
+}
+
+.xg4j6g8 {
+  --bolerish-material-opacity: var(--bolerish-control-opacity, 100%);
+}
+
+.x1nqk09 {
+  --bolerish-material-opacity: var(--bolerish-floating-opacity, 100%);
+}
+
+.x14p89z6 {
+  --bolerish-material-opacity: var(--bolerish-floating-opacity, 94%);
+}
+
+.xf4qlvf {
+  --bolerish-material-opacity: var(--bolerish-liquid-opacity, 100%);
+}
+
+.x8fe23t {
+  --bolerish-material-opacity: var(--bolerish-panel-opacity, 100%);
+}
+
+.xoh9gux {
+  --bolerish-material-opacity: var(--bolerish-panel-opacity, 92%);
+}
+
+.xvd6nka {
+  --bolerish-material-shadow: 0 0 transparent;
+}
+
+.xu02b4h {
+  --bolerish-material-shadow: var(--bolerish-floating-shadow, var(--x1tk9q2c));
+}
+
+.x1l9gcvt {
+  --bolerish-material-shadow: var(--bolerish-raised-shadow, var(--x4xk9rt));
+}
+
+.xepbi11 {
+  --bolerish-surface-reflection: var(--bolerish-liquid-reflection, 0 0 transparent);
+}
+
 .xfm59fq {
   --x1b09lcw: 0px;
 }
@@ -2950,3 +3134,7 @@
 .xapp0bv[data-expanded] {
   --x4bl00v: auto;
 }
+
+.x7dg23c:user-invalid {
+  --bolerish-input-focus-color: var(--x1wmomuh);
+}

package/dist/surface.d.ts

@@ -0,0 +1,12 @@
+export type SurfaceOptions = {
+    mode: "solid" | "liquid";
+};
+export type SurfaceProps = {
+    "data-bolerish-surface": SurfaceOptions["mode"];
+};
+declare function props({ mode }: SurfaceOptions): SurfaceProps;
+/** Selects the shared material without replacing an element's className or style. */
+export declare const surface: {
+    props: typeof props;
+};
+export {};

package/dist/surface.js

@@ -0,0 +1,12 @@
+// src/surface.ts
+function props({ mode }) {
+  if (mode !== "solid" && mode !== "liquid") {
+    throw new TypeError('surface.props requires mode "solid" or "liquid".');
+  }
+  return { "data-bolerish-surface": mode };
+}
+var surface = { props };
+export {
+  surface
+};
+//# sourceMappingURL=surface.js.map

package/dist/surface.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/surface.ts"],
+  "sourcesContent": ["export type SurfaceOptions = {\n  mode: \"solid\" | \"liquid\";\n};\n\nexport type SurfaceProps = {\n  \"data-bolerish-surface\": SurfaceOptions[\"mode\"];\n};\n\nfunction props({ mode }: SurfaceOptions): SurfaceProps {\n  if (mode !== \"solid\" && mode !== \"liquid\") {\n    throw new TypeError('surface.props requires mode \"solid\" or \"liquid\".');\n  }\n  return { \"data-bolerish-surface\": mode };\n}\n\n/** Selects the shared material without replacing an element's className or style. */\nexport const surface = { props };\n"],
+  "mappings": ";AAQA,SAAS,MAAM,EAAE,KAAK,GAAiC;AACrD,MAAI,SAAS,WAAW,SAAS,UAAU;AACzC,UAAM,IAAI,UAAU,kDAAkD;AAAA,EACxE;AACA,SAAO,EAAE,yBAAyB,KAAK;AACzC;AAGO,IAAM,UAAU,EAAE,MAAM;",
+  "names": []
+}