@pathscale/ui 1.1.47 → 1.1.49

package/dist/components/fieldset/Fieldset.js

@@ -1,11 +1,11 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import "./Fieldset.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Fieldset.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<fieldset>"), _tmpl$2 = /*#__PURE__*/ template("<legend>"), _tmpl$3 = /*#__PURE__*/ template("<div>");
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Fieldset_classes_js_d31e01e5__ from "./Fieldset.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<fieldset>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<legend>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const FieldsetRoot = (props)=>{
-    const [local, others] = splitProps(props, [
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
         "className",
@@ -14,8 +14,8 @@ const FieldsetRoot = (props)=>{
     ]);
     return (()=>{
         var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, local.class, local.className)
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Fieldset_classes_js_d31e01e5__.CLASSES.Root.base, local.class, local.className)
             }), {
             "data-slot": "fieldset",
             get ["data-theme"] () {
@@ -25,12 +25,12 @@ const FieldsetRoot = (props)=>{
                 return local.style;
             }
         }), false, true);
-        insert(_el$, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();
 };
 const FieldsetLegend = (props)=>{
-    const [local, others] = splitProps(props, [
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
         "className",
@@ -39,8 +39,8 @@ const FieldsetLegend = (props)=>{
     ]);
     return (()=>{
         var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Legend.base, local.class, local.className)
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Fieldset_classes_js_d31e01e5__.CLASSES.Legend.base, local.class, local.className)
             }), {
             "data-slot": "fieldset-legend",
             get ["data-theme"] () {
@@ -50,12 +50,12 @@ const FieldsetLegend = (props)=>{
                 return local.style;
             }
         }), false, true);
-        insert(_el$2, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
         return _el$2;
     })();
 };
 const FieldGroup = (props)=>{
-    const [local, others] = splitProps(props, [
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
         "className",
@@ -64,8 +64,8 @@ const FieldGroup = (props)=>{
     ]);
     return (()=>{
         var _el$3 = _tmpl$3();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, local.class, local.className)
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Fieldset_classes_js_d31e01e5__.CLASSES.Group.base, local.class, local.className)
             }), {
             "data-slot": "fieldset-field-group",
             get ["data-theme"] () {
@@ -75,12 +75,12 @@ const FieldGroup = (props)=>{
                 return local.style;
             }
         }), false, true);
-        insert(_el$3, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
         return _el$3;
     })();
 };
 const FieldsetActions = (props)=>{
-    const [local, others] = splitProps(props, [
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
         "className",
@@ -89,8 +89,8 @@ const FieldsetActions = (props)=>{
     ]);
     return (()=>{
         var _el$4 = _tmpl$3();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Actions.base, local.class, local.className)
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Fieldset_classes_js_d31e01e5__.CLASSES.Actions.base, local.class, local.className)
             }), {
             "data-slot": "fieldset-actions",
             get ["data-theme"] () {
@@ -100,7 +100,7 @@ const FieldsetActions = (props)=>{
                 return local.style;
             }
         }), false, true);
-        insert(_el$4, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
         return _el$4;
     })();
 };

package/dist/components/fieldset/index.js

@@ -1,2 +1,8 @@
-import external_Fieldset_js_default, { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot } from "./Fieldset.js";
-export { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot, external_Fieldset_js_default as default };
+import * as __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__ from "./Fieldset.js";
+var __webpack_exports__FieldGroup = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__.FieldGroup;
+var __webpack_exports__Fieldset = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__.Fieldset;
+var __webpack_exports__FieldsetActions = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__.FieldsetActions;
+var __webpack_exports__FieldsetLegend = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__.FieldsetLegend;
+var __webpack_exports__FieldsetRoot = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__.FieldsetRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__["default"];
+export { __webpack_exports__FieldGroup as FieldGroup, __webpack_exports__Fieldset as Fieldset, __webpack_exports__FieldsetActions as FieldsetActions, __webpack_exports__FieldsetLegend as FieldsetLegend, __webpack_exports__FieldsetRoot as FieldsetRoot, __webpack_exports__default as default };

package/dist/components/flex/Flex.js

@@ -1,12 +1,12 @@
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import "./Flex.css";
-import { children, createMemo, splitProps } from "solid-js";
-import external_clsx_default from "clsx";
-import { twMerge } from "tailwind-merge";
-import { mapResponsiveProp } from "../utils.js";
-import { CLASSES } from "./Flex.classes.js";
-const Flex = (props)=>{
-    const [local, rest] = splitProps(props, [
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__ from "./Flex.classes.js";
+const Flex_Flex = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "as",
         "class",
         "className",
@@ -22,10 +22,10 @@ const Flex = (props)=>{
         "shrink",
         "basis"
     ]);
-    const tag = createMemo(()=>local.as || "div");
-    const resolvedChildren = children(()=>local.children);
-    const classes = createMemo(()=>twMerge(external_clsx_default(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
-    return createComponent(Dynamic, mergeProps({
+    const tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "div");
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.direction, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.direction), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.justify, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.justify), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.align, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.align), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.wrap, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.wrap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapX, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gapX), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapY, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gapY), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.grow, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.grow), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.shrink, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.shrink), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.basis, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.basis), local.class, local.className)));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         get component () {
             return tag();
         }
@@ -37,5 +37,5 @@ const Flex = (props)=>{
         }
     }));
 };
-const flex_Flex = Flex;
-export { flex_Flex as default };
+const Flex = Flex_Flex;
+export { Flex as default };

package/dist/components/flex/index.js

@@ -1,2 +1,3 @@
-import external_Flex_js_default from "./Flex.js";
-export { external_Flex_js_default as default };
+import * as __WEBPACK_EXTERNAL_MODULE__Flex_js_adef8f0b__ from "./Flex.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Flex_js_adef8f0b__["default"];
+export { __webpack_exports__default as default };

package/dist/components/floating-dock/FloatingDock.css

@@ -1,19 +1,49 @@
 @layer components {
   /* -------------------------------------------------------------------------------------------------
-   * Dock container
+   * Liquid Glass FloatingDock
+   *
+   * Technique mirrors:
+   *   https://css-tricks.com/getting-clarity-on-apples-liquid-glass/
+   *
+   *   1. SVG filter (#fd-liquid-glass) with a pre-rendered displacement map (feImage)
+   *      → bends the backdrop like a real glass lens.
+   *   2. backdrop-filter: blur() url(#fd-liquid-glass) saturate()  — chained.
+   *   3. Multi-layer inset box-shadow built from `color-mix(... var(--c-light/dark))`
+   *      simulates light glints and dark refractive edges.
+   *   4. -webkit-backdrop-filter falls back to blur+saturate (Safari ignores url()).
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock {
     position: relative;
     display: inline-flex;
     align-items: flex-end;
     overflow: visible;
+
+    /* Glass color tokens — override per instance to retint */
+    --fd-c-glass: rgba(255, 255, 255, 1);
+    --fd-c-light: rgba(255, 255, 255, 1);
+    --fd-c-dark: rgba(0, 0, 0, 1);
+    --fd-glass-reflex-light: 1;
+    --fd-glass-reflex-dark: 1;
+    --fd-glass-saturation: 180%;
+    --fd-glass-blur: 8px;
+    --fd-glass-radius: 9999px;
+    --fd-glass-item-radius: 9999px;
+  }
+
+  .floating-dock__filter-defs {
+    position: absolute;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: -1;
   }
 
   .floating-dock__bar {
     position: relative;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     overflow: visible;
+    isolation: isolate;
   }
 
   .floating-dock__bar--horizontal {
@@ -26,42 +56,65 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Background panel — stretches with magnified items
+   * Background panel — the glass pill itself
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__bg {
     position: absolute;
     inset: 0;
     z-index: -1;
-    border-radius: 1rem;
-    background-color: var(--color-base-100);
-    box-shadow:
-      inset 0 1px 0 0 var(--color-base-300),
-      0 1px 0 0 var(--color-base-100);
     pointer-events: none;
+    border-radius: var(--fd-glass-radius);
+    background-color: color-mix(in srgb, var(--fd-c-glass) 12%, transparent);
+
+    backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+    -webkit-backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+
+    /* The article's exact glint stack — translated 1:1, only the var prefix changes. */
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 10%), transparent),
+      inset 1.8px 3px 0 -2px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 90%), transparent),
+      inset -2px -2px 0 -2px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 80%), transparent),
+      inset -3px -8px 1px -6px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 60%), transparent),
+      inset -0.3px -1px 4px 0 color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 12%), transparent),
+      inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 20%), transparent),
+      inset 0 3px 4px -2px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 20%), transparent),
+      inset 2px -6.5px 1px -4px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 10%), transparent),
+      0 1px 5px 0 color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 10%), transparent),
+      0 6px 16px 0 color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 8%), transparent);
+
+    transition:
+      background-color 400ms cubic-bezier(1, 0, 0.4, 1),
+      box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
   }
 
+  /* NOTE: We intentionally do NOT chain url(#fd-liquid-glass) into backdrop-filter here.
+     The article's displacement map is sized for a small pill (~244×70). When stretched
+     across the long Studio dock it produces a visible smear/blob in Chrome regardless of
+     scale. The multi-layer box-shadow + blur+saturate stack above already delivers the
+     bulk of the Liquid Glass look. The SVG filter remains exported for opt-in use on
+     small elements (e.g. a future round button) via `filter: url(#fd-liquid-glass)`. */
+
   /* -------------------------------------------------------------------------------------------------
-   * Item wrapper
+   * Item wrapper — flat, no per-item lens (calm dock; no hover scale/width-expand)
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__item {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
-    background-color: var(--color-base-200);
-    opacity: 0.8;
-    transform-origin: bottom center;
+    border-radius: var(--fd-glass-item-radius);
+    background: transparent;
+    transform-origin: center;
     will-change: transform;
-    transition: opacity 150ms ease;
+    transition: background-color 200ms ease, color 200ms ease;
   }
 
   .floating-dock__item:hover {
-    opacity: 1;
+    background-color: color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 10%), transparent);
   }
 
   .floating-dock__item:active {
-    opacity: 0.6;
+    background-color: color-mix(in srgb, var(--fd-c-dark) 8%, transparent);
   }
 
   .floating-dock__button-reset {
@@ -84,7 +137,7 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Tooltip
+   * Tooltip — glass chip
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__tooltip {
     position: fixed;
@@ -92,12 +145,19 @@
     width: fit-content;
     pointer-events: none;
     white-space: pre;
-    border-radius: var(--radius-field, 0.375rem);
-    border: 1px solid var(--color-base-300);
-    background-color: var(--color-base-100);
-    color: var(--color-base-content);
-    padding: 0.125rem 0.5rem;
+    padding: 0.25rem 0.625rem;
     font-size: 0.75rem;
+    line-height: 1.1;
+    color: var(--color-base-content, #fff);
+    border-radius: 0.5rem;
+    background-color: color-mix(in srgb, var(--fd-c-glass) 18%, transparent);
+    backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+    -webkit-backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 12%), transparent),
+      inset 1px 1.5px 0 -1px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 60%), transparent),
+      inset -1px -1px 0 -1px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 25%), transparent),
+      0 6px 18px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 20%), transparent);
     opacity: 0;
     animation: floating-dock-fade-in 150ms ease forwards;
   }
@@ -109,7 +169,7 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Mobile
+   * Mobile burger toggle — uses the same glass treatment as the bar
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__mobile {
     position: relative;
@@ -120,11 +180,27 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
-    background-color: var(--color-base-200);
     border: none;
     padding: 0;
     cursor: pointer;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--fd-c-glass) 14%, transparent);
+    backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+    -webkit-backdrop-filter: blur(var(--fd-glass-blur)) saturate(var(--fd-glass-saturation));
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 12%), transparent),
+      inset 1.5px 2px 0 -1.5px color-mix(in srgb, var(--fd-c-light) calc(var(--fd-glass-reflex-light) * 70%), transparent),
+      inset -1.5px -1.5px 0 -1.5px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 25%), transparent),
+      0 6px 16px color-mix(in srgb, var(--fd-c-dark) calc(var(--fd-glass-reflex-dark) * 14%), transparent);
+    transition: background-color 250ms ease, transform 150ms ease;
+  }
+
+  .floating-dock__mobile-toggle:hover {
+    background-color: color-mix(in srgb, var(--fd-c-glass) 22%, transparent);
+  }
+
+  .floating-dock__mobile-toggle:active {
+    transform: scale(0.96);
   }
 
   .floating-dock__mobile-popup {
@@ -164,7 +240,31 @@
   .floating-dock__menu-icon {
     width: 1.25rem;
     height: 1.25rem;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dark mode — boost dark-edge intensity, calm down light glints
+   * -----------------------------------------------------------------------------------------------*/
+  @media (prefers-color-scheme: dark) {
+    .floating-dock {
+      --fd-glass-reflex-dark: 2;
+      --fd-glass-reflex-light: 0.7;
+      --fd-glass-saturation: 200%;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Reduced transparency (a11y)
+   * -----------------------------------------------------------------------------------------------*/
+  @media (prefers-reduced-transparency: reduce) {
+    .floating-dock__bg,
+    .floating-dock__tooltip,
+    .floating-dock__mobile-toggle {
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      background-color: var(--color-base-100, rgba(20, 22, 28, 0.96));
+    }
   }
 
   /* -------------------------------------------------------------------------------------------------
@@ -175,7 +275,6 @@
       display: none;
     }
 
-    /* mobileMode="dock": show the full bar on mobile instead of burger */
     .floating-dock__bar--mobile-dock {
       display: flex;
     }