@pathscale/ui 1.1.56 → 1.1.58

package/dist/components/fieldset/Fieldset.js

@@ -1,73 +1,114 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Fieldset.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<legend class="text-lg font-semibold">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-sm text-base-content/60 mt-1">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<fieldset>");
-const GAP_MAP = {
-    none: "gap-0",
-    xs: "gap-1",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
-};
-const Fieldset_Fieldset = (props)=>{
-    const descriptionId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+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] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "legend",
-        "description",
-        "disabled",
-        "gap",
         "children",
         "class",
         "className",
         "dataTheme",
         "style"
     ]);
-    const gap = ()=>local.gap ?? "md";
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex flex-col", GAP_MAP[gap()], local.class, local.className);
     return (()=>{
-        var _el$ = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return classes();
-            },
+        var _el$ = _tmpl$();
+        (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"] () {
                 return local.dataTheme;
             },
             get style () {
                 return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const FieldsetLegend = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (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"] () {
+                return local.dataTheme;
             },
-            get disabled () {
-                return local.disabled;
-            },
-            get ["aria-describedby"] () {
-                return local.description ? descriptionId : void 0;
+            get style () {
+                return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return local.legend;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const FieldGroup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        (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"] () {
+                return local.dataTheme;
             },
-            get children () {
-                var _el$2 = _tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.legend);
-                return _el$2;
+            get style () {
+                return local.style;
             }
-        }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return local.description;
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const FieldsetActions = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$3();
+        (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"] () {
+                return local.dataTheme;
             },
-            get children () {
-                var _el$3 = _tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "id", descriptionId);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.description);
-                return _el$3;
+            get style () {
+                return local.style;
             }
-        }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
-        return _el$;
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
     })();
 };
-const Fieldset = Fieldset_Fieldset;
-export { Fieldset as default };
+const Fieldset = Object.assign(FieldsetRoot, {
+    Root: FieldsetRoot,
+    Legend: FieldsetLegend,
+    Group: FieldGroup,
+    Actions: FieldsetActions
+});
+const fieldset_Fieldset = Fieldset;
+export { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot, fieldset_Fieldset as default };

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

@@ -1,2 +1 @@
-export { default as Fieldset } from "./Fieldset";
-export type { FieldsetProps } from "./Fieldset";
+export { default, Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions, type FieldsetProps, type FieldsetRootProps, type FieldsetLegendProps, type FieldGroupProps, type FieldsetActionsProps, } from "./Fieldset";

package/dist/components/fieldset/index.js

@@ -1,3 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__ from "./Fieldset.js";
-var __webpack_exports__Fieldset = __WEBPACK_EXTERNAL_MODULE__Fieldset_js_9a590ee6__["default"];
-export { __webpack_exports__Fieldset as Fieldset };
+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.classes.d.ts

@@ -0,0 +1,65 @@
+export declare const CLASSES: {
+    readonly base: "flex-layout";
+    readonly direction: {
+        readonly row: "flex-row";
+        readonly col: "flex-col";
+        readonly "row-reverse": "flex-row-reverse";
+        readonly "col-reverse": "flex-col-reverse";
+    };
+    readonly justify: {
+        readonly start: "justify-start";
+        readonly center: "justify-center";
+        readonly end: "justify-end";
+        readonly between: "justify-between";
+        readonly around: "justify-around";
+        readonly evenly: "justify-evenly";
+    };
+    readonly align: {
+        readonly start: "items-start";
+        readonly center: "items-center";
+        readonly end: "items-end";
+        readonly stretch: "items-stretch";
+        readonly baseline: "items-baseline";
+    };
+    readonly wrap: {
+        readonly wrap: "flex-wrap";
+        readonly nowrap: "flex-nowrap";
+        readonly "wrap-reverse": "flex-wrap-reverse";
+    };
+    readonly gap: {
+        readonly none: "gap-0";
+        readonly sm: "gap-2";
+        readonly md: "gap-4";
+        readonly lg: "gap-6";
+        readonly xl: "gap-8";
+    };
+    readonly gapX: {
+        readonly none: "gap-x-0";
+        readonly sm: "gap-x-2";
+        readonly md: "gap-x-4";
+        readonly lg: "gap-x-6";
+        readonly xl: "gap-x-8";
+    };
+    readonly gapY: {
+        readonly none: "gap-y-0";
+        readonly sm: "gap-y-2";
+        readonly md: "gap-y-4";
+        readonly lg: "gap-y-6";
+        readonly xl: "gap-y-8";
+    };
+    readonly grow: {
+        readonly true: "flex-grow";
+        readonly false: "flex-grow-0";
+    };
+    readonly shrink: {
+        readonly true: "flex-shrink";
+        readonly false: "flex-shrink-0";
+    };
+    readonly basis: {
+        readonly none: "basis-0";
+        readonly sm: "basis-8";
+        readonly md: "basis-16";
+        readonly lg: "basis-24";
+        readonly xl: "basis-32";
+    };
+};

package/dist/components/flex/Flex.classes.js

@@ -0,0 +1,66 @@
+const CLASSES = {
+    base: "flex-layout",
+    direction: {
+        row: "flex-row",
+        col: "flex-col",
+        "row-reverse": "flex-row-reverse",
+        "col-reverse": "flex-col-reverse"
+    },
+    justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly"
+    },
+    align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline"
+    },
+    wrap: {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        "wrap-reverse": "flex-wrap-reverse"
+    },
+    gap: {
+        none: "gap-0",
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+        xl: "gap-8"
+    },
+    gapX: {
+        none: "gap-x-0",
+        sm: "gap-x-2",
+        md: "gap-x-4",
+        lg: "gap-x-6",
+        xl: "gap-x-8"
+    },
+    gapY: {
+        none: "gap-y-0",
+        sm: "gap-y-2",
+        md: "gap-y-4",
+        lg: "gap-y-6",
+        xl: "gap-y-8"
+    },
+    grow: {
+        true: "flex-grow",
+        false: "flex-grow-0"
+    },
+    shrink: {
+        true: "flex-shrink",
+        false: "flex-shrink-0"
+    },
+    basis: {
+        none: "basis-0",
+        sm: "basis-8",
+        md: "basis-16",
+        lg: "basis-24",
+        xl: "basis-32"
+    }
+};
+export { CLASSES };

package/dist/components/flex/Flex.css

@@ -0,0 +1,5 @@
+@layer components {
+  .flex-layout {
+    display: flex;
+  }
+}

package/dist/components/flex/Flex.d.ts

@@ -1,3 +1,4 @@
+import "./Flex.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { ResponsiveProp } from "../types";

package/dist/components/flex/Flex.js

@@ -1,74 +1,15 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Flex.css";
 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";
-const directionMap = {
-    row: "flex-row",
-    col: "flex-col",
-    "row-reverse": "flex-row-reverse",
-    "col-reverse": "flex-col-reverse"
-};
-const justifyMap = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around",
-    evenly: "justify-evenly"
-};
-const alignMap = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch",
-    baseline: "items-baseline"
-};
-const wrapMap = {
-    wrap: "flex-wrap",
-    nowrap: "flex-nowrap",
-    "wrap-reverse": "flex-wrap-reverse"
-};
-const gapMap = {
-    none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
-};
-const gapXMap = {
-    none: "gap-x-0",
-    sm: "gap-x-2",
-    md: "gap-x-4",
-    lg: "gap-x-6",
-    xl: "gap-x-8"
-};
-const gapYMap = {
-    none: "gap-y-0",
-    sm: "gap-y-2",
-    md: "gap-y-4",
-    lg: "gap-y-6",
-    xl: "gap-y-8"
-};
-const growMap = {
-    true: "flex-grow",
-    false: "flex-grow-0"
-};
-const shrinkMap = {
-    true: "flex-shrink",
-    false: "flex-shrink-0"
-};
-const basisMap = {
-    none: "basis-0",
-    sm: "basis-8",
-    md: "basis-16",
-    lg: "basis-24",
-    xl: "basis-32"
-};
-const Flex = (props)=>{
+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",
         "children",
         "direction",
         "justify",
@@ -83,19 +24,18 @@ const Flex = (props)=>{
     ]);
     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"])("flex", (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.direction, directionMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.justify, justifyMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.align, alignMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.wrap, wrapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, gapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapX, gapXMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapY, gapYMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.grow, growMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.shrink, shrinkMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.basis, basisMap), local.class)));
+    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();
-        },
-        get ["class"] () {
-            return classes();
         }
-    }, rest, {
+    }, ()=>({
+            class: classes()
+        }), rest, {
         get children () {
             return resolvedChildren();
         }
     }));
 };
-const flex_Flex = Flex;
-export { flex_Flex as default };
+const Flex = Flex_Flex;
+export { Flex as default };

package/dist/components/floating-dock/FloatingDock.classes.d.ts

@@ -0,0 +1,25 @@
+export declare const CLASSES: {
+    readonly base: "floating-dock";
+    readonly bar: "floating-dock__bar";
+    readonly barOrientation: {
+        readonly horizontal: "floating-dock__bar--horizontal";
+        readonly vertical: "floating-dock__bar--vertical";
+    };
+    readonly barMobileDock: "floating-dock__bar--mobile-dock";
+    readonly bg: "floating-dock__bg";
+    readonly item: "floating-dock__item";
+    readonly icon: "floating-dock__icon";
+    readonly tooltip: "floating-dock__tooltip";
+    readonly mobile: "floating-dock__mobile";
+    readonly mobileToggle: "floating-dock__mobile-toggle";
+    readonly mobilePopup: "floating-dock__mobile-popup";
+    readonly mobilePopupDirection: {
+        readonly top: "floating-dock__mobile-popup--top";
+        readonly bottom: "floating-dock__mobile-popup--bottom";
+        readonly left: "floating-dock__mobile-popup--left";
+        readonly right: "floating-dock__mobile-popup--right";
+    };
+    readonly mobileItem: "floating-dock__mobile-item";
+    readonly buttonReset: "floating-dock__button-reset";
+    readonly menuIcon: "floating-dock__menu-icon";
+};

package/dist/components/floating-dock/FloatingDock.classes.js

@@ -0,0 +1,26 @@
+const CLASSES = {
+    base: "floating-dock",
+    bar: "floating-dock__bar",
+    barOrientation: {
+        horizontal: "floating-dock__bar--horizontal",
+        vertical: "floating-dock__bar--vertical"
+    },
+    barMobileDock: "floating-dock__bar--mobile-dock",
+    bg: "floating-dock__bg",
+    item: "floating-dock__item",
+    icon: "floating-dock__icon",
+    tooltip: "floating-dock__tooltip",
+    mobile: "floating-dock__mobile",
+    mobileToggle: "floating-dock__mobile-toggle",
+    mobilePopup: "floating-dock__mobile-popup",
+    mobilePopupDirection: {
+        top: "floating-dock__mobile-popup--top",
+        bottom: "floating-dock__mobile-popup--bottom",
+        left: "floating-dock__mobile-popup--left",
+        right: "floating-dock__mobile-popup--right"
+    },
+    mobileItem: "floating-dock__mobile-item",
+    buttonReset: "floating-dock__button-reset",
+    menuIcon: "floating-dock__menu-icon"
+};
+export { CLASSES };

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

@@ -26,14 +26,17 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Background panel — stretches with magnified items
+   * Background panel — original soft-edge shape with a subtle glass treatment.
+   * Per customer feedback: keep the prior shape/borders, only add a glass feel.
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__bg {
     position: absolute;
     inset: 0;
     z-index: -1;
     border-radius: 1rem;
-    background-color: var(--color-base-100);
+    background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
+    backdrop-filter: blur(12px) saturate(160%);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
     box-shadow:
       inset 0 1px 0 0 var(--color-base-300),
       0 1px 0 0 var(--color-base-100);
@@ -41,7 +44,7 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Item wrapper
+   * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__item {
     position: relative;
@@ -49,7 +52,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
-    background-color: var(--color-base-200);
+    background-color: transparent;
     opacity: 0.8;
     transform-origin: bottom center;
     will-change: transform;
@@ -64,6 +67,14 @@
     opacity: 0.6;
   }
 
+  .floating-dock__button-reset {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Icon container
    * -----------------------------------------------------------------------------------------------*/
@@ -86,7 +97,9 @@
     white-space: pre;
     border-radius: var(--radius-field, 0.375rem);
     border: 1px solid var(--color-base-300);
-    background-color: var(--color-base-100);
+    background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
+    backdrop-filter: blur(8px) saturate(160%);
+    -webkit-backdrop-filter: blur(8px) saturate(160%);
     color: var(--color-base-content);
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
@@ -153,6 +166,22 @@
     animation: floating-dock-fade-in 200ms ease forwards;
   }
 
+  .floating-dock__menu-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  /* a11y */
+  @media (prefers-reduced-transparency: reduce) {
+    .floating-dock__bg,
+    .floating-dock__tooltip {
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      background-color: var(--color-base-100);
+    }
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Responsive: hide desktop on small, mobile on large
    * -----------------------------------------------------------------------------------------------*/