@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/overlays/dropdown-menu/shared.css

@@ -0,0 +1,51 @@
+@layer properties, theme, base;
+
+@layer components {
+  .PNaAlq_panel {
+    min-width: calc(var(--spacing) * 40);
+    border-radius: var(--radius-lg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    padding-block: calc(var(--spacing) * 2);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      min-width: 0;
+      min-height: calc(var(--spacing) * 40);
+    }
+  }
+
+  .PNaAlq_item {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    text-align: left;
+    outline-offset: -2px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    outline-color: #0000;
+
+    &:focus-visible {
+      background-color: var(--color-bg-subtle);
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (prefers-contrast: more) {
+      outline-color: var(--color-border-base);
+    }
+  }
+
+  @media (hover: hover) {
+    .PNaAlq_item:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dropdown-menu/shared.d.mts

@@ -1,7 +1,4 @@
-import { ReactNode } from "react";
 //#region src/components/overlays/dropdown-menu/shared.d.ts
-declare const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
-declare const itemClass: string;
-declare const cloneWithIndex: (children: ReactNode) => ReactNode;
-//#endregion
-export { cloneWithIndex, itemClass, panelClass };
+export declare const panelClass: any;
+export declare const itemClass: any;
+//#endregion

package/dist/components/overlays/dropdown-menu/shared.mjs

@@ -1,8 +1,6 @@
-import { cn } from "../../../helpers/cn.mjs";
-import { Children, cloneElement, isValidElement } from "react";
+import shared_module_default from "./shared.module.mjs";
 //#region src/components/overlays/dropdown-menu/shared.ts
-const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
-const itemClass = cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:bg-bg-subtle focus-visible:outline-hidden");
-const cloneWithIndex = (children) => Children.toArray(children).map((child, index) => isValidElement(child) ? cloneElement(child, { index }) : child);
+const panelClass = shared_module_default.panel;
+const itemClass = shared_module_default.item;
 //#endregion
-export { cloneWithIndex, itemClass, panelClass };
+export { itemClass, panelClass };

package/dist/components/overlays/dropdown-menu/shared.module.mjs

@@ -0,0 +1,8 @@
+import './shared.css';
+//#region src/components/overlays/dropdown-menu/shared.module.css
+var shared_module_default = {
+	"item": "PNaAlq_item",
+	"panel": "PNaAlq_panel"
+};
+//#endregion
+export { shared_module_default as default };

package/dist/components/overlays/dropdown-menu/sub-menu.css

@@ -0,0 +1,28 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._3Nd7bW_trigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+    position: relative;
+  }
+
+  ._3Nd7bW_open {
+    background-color: var(--color-bg-subtle);
+  }
+
+  ._3Nd7bW_safeTriangle:after {
+    content: "";
+    top: var(--safe-top);
+    left: var(--safe-left);
+    z-index: var(--z-index-raised);
+    height: var(--safe-height);
+    width: var(--safe-width);
+    clip-path: var(--safe-clip);
+    position: absolute;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dropdown-menu/sub-menu.d.mts

@@ -1,10 +1,7 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/overlays/dropdown-menu/sub-menu.d.ts
-type SubMenuProps = PropsWithChildren<{
+export type SubMenuProps = PropsWithChildren<{
   label: string;
 }>;
-declare const SubMenu: FC<SubMenuProps & {
-  index?: number;
-}>;
-//#endregion
-export { SubMenu, SubMenuProps };
+export declare const SubMenu: FC<SubMenuProps>;
+//#endregion

package/dist/components/overlays/dropdown-menu/sub-menu.mjs

@@ -1,20 +1,20 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useCanHover } from "../_internal/use-can-hover.mjs";
 import { useHoverIntent } from "../_internal/use-hover-intent.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useOpenContext, usePopoverContext } from "../popover/hooks.mjs";
-import { Popover } from "../popover/popover.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
+import { Popover } from "../popover/index.mjs";
 import { MenuContextProvider, useMenuContext } from "./hooks.mjs";
-import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
+import { itemClass, panelClass } from "./shared.mjs";
 import { useSafeTriangle } from "./use-safe-triangle.mjs";
-import { useEffect, useRef, useState } from "react";
+import sub_menu_module_default from "./sub-menu.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dropdown-menu/sub-menu.tsx
 const SUBMENU_CLOSE_DELAY = 150;
-const safeTriangleClass = cn("after:absolute after:z-10", "after:top-(--safe-top) after:left-(--safe-left)", "after:h-(--safe-height) after:w-(--safe-width)", "after:[clip-path:var(--safe-clip)]");
 const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"ArrowDown",
 	"ArrowUp",
@@ -22,21 +22,21 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"Home",
 	"End"
 ]);
-const SubMenu = ({ label, children, index = 0 }) => {
+const SubMenu = ({ label, children }) => {
 	const { isOpen: isParentOpen } = useOpenContext();
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		placement: "right-start",
 		trapFocus: false,
 		role: "menu",
 		children: /* @__PURE__ */ jsx(SubMenuInner, {
-			index,
 			isParentOpen,
 			label,
 			children
 		})
 	});
 };
-const SubMenuInner = ({ label, index, isParentOpen, children }) => {
+const SubMenuInner = ({ label, isParentOpen, children }) => {
+	const id = useId();
 	const parentMenu = useMenuContext();
 	const popover = usePopoverContext();
 	const canHover = useCanHover("(hover: hover) and (pointer: fine)");
@@ -48,11 +48,11 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 		closeDelay: SUBMENU_CLOSE_DELAY,
 		enabled: canHover
 	});
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: popover.isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		loop: true,
 		autoActivateOnOpen: false
 	});
@@ -81,7 +81,7 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 	const openByKeyboard = () => {
 		openedByKeyboardRef.current = true;
 		popover.onOpen();
-		setActiveIndex(0);
+		nav.activateFirst();
 	};
 	const handleTriggerKeyDown = (event) => {
 		if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
@@ -101,12 +101,12 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 		if (NAVIGATION_KEYS.has(event.key)) event.stopPropagation();
 	};
 	const updateSafeTriangle = useSafeTriangle(panelRef, popover.isOpen && canHover);
-	const parentItemProps = parentMenu.getItemProps(index);
+	const parentItemProps = parentMenu.getItemProps(id);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 		"aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
 		"aria-expanded": popover.isOpen,
 		"aria-haspopup": "menu",
-		className: cn(itemClass, "relative flex items-center justify-between gap-2", popover.isOpen && "bg-bg-subtle", popover.isOpen && canHover && safeTriangleClass),
+		className: clsx(itemClass, sub_menu_module_default.trigger, popover.isOpen && sub_menu_module_default.open, popover.isOpen && canHover && sub_menu_module_default.safeTriangle),
 		"data-submenu-trigger": "",
 		onClick: popover.onOpen,
 		onKeyDown: handleTriggerKeyDown,
@@ -135,7 +135,7 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 			ref: mergeRefs(props.ref, panelRef),
 			role: "menu",
 			tabIndex: -1,
-			children: cloneWithIndex(children)
+			children
 		}) })
 	})] });
 };

package/dist/components/overlays/dropdown-menu/sub-menu.module.mjs

@@ -0,0 +1,9 @@
+import './sub-menu.css';
+//#region src/components/overlays/dropdown-menu/sub-menu.module.css
+var sub_menu_module_default = {
+	"open": "_3Nd7bW_open",
+	"safeTriangle": "_3Nd7bW_safeTriangle",
+	"trigger": "_3Nd7bW_trigger"
+};
+//#endregion
+export { sub_menu_module_default as default };

package/dist/components/overlays/dropdown-menu/use-safe-triangle.d.mts

@@ -13,6 +13,5 @@ import { PointerEvent, RefObject } from "react";
  *
  * 参考: https://ics.media/entry/260803/
  */
-declare const useSafeTriangle: (panelRef: RefObject<HTMLElement | null>, enabled: boolean) => ((event: PointerEvent<HTMLElement>) => void);
-//#endregion
-export { useSafeTriangle };
+export declare const useSafeTriangle: (panelRef: RefObject<HTMLElement | null>, enabled: boolean) => ((event: PointerEvent<HTMLElement>) => void);
+//#endregion

package/dist/components/overlays/list-box/hooks.d.mts

@@ -7,7 +7,7 @@ type MenuContext = ListNavigation & {
   handleSelect: (index: number) => void;
 };
 declare const MenuContextProvider: import("react").Context<MenuContext | null>;
-declare const useMenuContent: () => {
+export declare const useMenuContent: () => {
   options: readonly Readonly<{
     value: string;
     label: string;
@@ -17,10 +17,11 @@ declare const useMenuContent: () => {
     onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
   };
 };
-declare const useMenuItem: (index: number) => {
+export declare const useMenuItem: (index: number, id: string) => {
   selected: boolean;
   props: {
-    ref: (node: HTMLElement | null) => void;
+    id: string;
+    ref: (node: HTMLElement | null) => (() => void) | undefined;
     tabIndex: number;
     onFocus: () => void;
     role: 'option';
@@ -28,8 +29,8 @@ declare const useMenuItem: (index: number) => {
     onClick: () => void;
   };
 };
-declare const useMenuTrigger: () => {
+export declare const useMenuTrigger: () => {
   valueLabel: string;
 };
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };
+export { MenuContextProvider };

package/dist/components/overlays/list-box/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { useMemo } from "react";
@@ -13,7 +13,7 @@ const useMenuContent = () => {
 		contentProps: menu.getContentProps()
 	}), [menu]);
 };
-const useMenuItem = (index) => {
+const useMenuItem = (index, id) => {
 	const menu = useMenuContext();
 	const { onClose } = useOpenContext();
 	return useMemo(() => ({
@@ -21,13 +21,14 @@ const useMenuItem = (index) => {
 		props: {
 			role: "option",
 			"aria-selected": menu.selectedIndex === index,
-			...menu.getItemProps(index),
+			...menu.getItemProps(id),
 			onClick: () => {
 				menu.handleSelect(index);
 				onClose();
 			}
 		}
 	}), [
+		id,
 		index,
 		menu,
 		onClose
@@ -35,7 +36,7 @@ const useMenuItem = (index) => {
 };
 const useMenuTrigger = () => {
 	const menu = useMenuContext();
-	const defaultLabel = useMessages().listBoxPlaceholder;
+	const defaultLabel = getMessages().listBoxPlaceholder;
 	const valueLabel = menu.selectedIndex < 0 ? defaultLabel : menu.options[menu.selectedIndex]?.label ?? defaultLabel;
 	return useMemo(() => ({ valueLabel }), [valueLabel]);
 };

package/dist/components/overlays/list-box/index.d.mts

@@ -1,2 +1,27 @@
-import { ListBox } from "./list-box.mjs";
-export { ListBox };
+import { Button } from "../../buttons/button/button.mjs";
+import { Option, Placement } from "../../../types/variables.mjs";
+import "../../index.mjs";
+import "../../../index.mjs";
+//#region src/components/overlays/list-box/index.d.ts
+export declare const ListBox: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    placement?: Placement;
+    options: readonly Option[];
+    value?: Option['value'];
+    defaultValue?: Option['value'];
+    onChange?: (value: Option['value']) => void;
+  }>>;
+  readonly Content: import("react").FC<{
+    helpContent?: import("react").ReactElement;
+  }>;
+  readonly Trigger: import("react").FC<{
+    size?: import("react").ComponentProps<typeof Button>['size'];
+    label?: string;
+  }>;
+  readonly IconTrigger: import("react").FC<{
+    size?: import("react").ComponentProps<typeof Button>['size'];
+    icon: import("react").ReactElement;
+    label?: string;
+  }>;
+};
+//#endregion

package/dist/components/overlays/list-box/index.mjs

@@ -1,2 +1,10 @@
-import { ListBox } from "./list-box.mjs";
+import { Content, IconTrigger, Root, Trigger } from "./list-box.mjs";
+//#region src/components/overlays/list-box/index.ts
+const ListBox = {
+	Root,
+	Content,
+	Trigger,
+	IconTrigger
+};
+//#endregion
 export { ListBox };

package/dist/components/overlays/list-box/list-box.css

@@ -0,0 +1,74 @@
+@layer properties, theme, base;
+
+@layer components {
+  .jzknNW_panel {
+    max-height: calc(var(--spacing) * 48);
+    min-width: calc(var(--spacing) * 40);
+    border-radius: var(--radius-lg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    padding-block: calc(var(--spacing) * 2);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      min-width: 0;
+      max-height: none;
+      max-width: calc(var(--spacing) * 48);
+      min-height: calc(var(--spacing) * 40);
+    }
+  }
+
+  .jzknNW_list {
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    overflow-y: auto;
+
+    @container style(--writing: vertical) {
+      overflow: auto visible;
+    }
+  }
+
+  .jzknNW_item {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    text-align: left;
+    outline-offset: -2px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    outline-color: #0000;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+
+    &:focus-visible {
+      background-color: var(--color-bg-subtle);
+      border-color: #0000;
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (prefers-contrast: more) {
+      outline-color: var(--color-border-base);
+    }
+  }
+
+  @media (hover: hover) {
+    .jzknNW_item:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  .jzknNW_check {
+    color: var(--color-fg-success);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/list-box/list-box.d.mts

@@ -3,26 +3,23 @@ import "../../buttons/button/index.mjs";
 import { Option, Placement } from "../../../types/variables.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactElement } from "react";
 //#region src/components/overlays/list-box/list-box.d.ts
-declare const ListBox: {
-  readonly Root: FC<PropsWithChildren<{
-    placement?: Placement;
-    options: readonly Option[];
-    value?: Option['value'];
-    defaultValue?: Option['value'];
-    onChange?: (value: Option['value']) => void;
-  }>>;
-  readonly Content: FC<{
-    helpContent?: ReactElement;
-  }>;
-  readonly Trigger: FC<{
-    size?: ComponentProps<typeof Button>['size'];
-    label?: string;
-  }>;
-  readonly IconTrigger: FC<{
-    size?: ComponentProps<typeof Button>['size'];
-    icon: ReactElement;
-    label?: string;
-  }>;
-};
-//#endregion
-export { ListBox };
+export declare const Root: FC<PropsWithChildren<{
+  placement?: Placement;
+  options: readonly Option[];
+  value?: Option['value'];
+  defaultValue?: Option['value'];
+  onChange?: (value: Option['value']) => void;
+}>>;
+export declare const Content: FC<{
+  helpContent?: ReactElement;
+}>;
+export declare const Trigger: FC<{
+  size?: ComponentProps<typeof Button>['size'];
+  label?: string;
+}>;
+export declare const IconTrigger: FC<{
+  size?: ComponentProps<typeof Button>['size'];
+  icon: ReactElement;
+  label?: string;
+}>;
+//#endregion

package/dist/components/overlays/list-box/list-box.mjs

@@ -1,13 +1,14 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
 import { Button } from "../../buttons/button/button.mjs";
+import { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
-import { Popover } from "../popover/popover.mjs";
+import { Popover } from "../popover/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from "./hooks.mjs";
+import list_box_module_default from "./list-box.module.mjs";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/list-box/list-box.tsx
@@ -34,11 +35,11 @@ const Root = ({ children, placement = "bottom", options, value, defaultValue, on
 const MenuProvider = ({ children, options, onChange, value }) => {
 	const { isOpen } = useOpenContext();
 	const selectedIndex = options.findIndex((option) => option.value === value);
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		selectedIndex,
 		loop: true
 	});
@@ -60,7 +61,7 @@ const Content = ({ helpContent }) => {
 	const { options, contentProps } = useMenuContent();
 	const helpId = useId();
 	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ ref, ...listProps }) => /* @__PURE__ */ jsxs("div", {
-		className: "bg-bg-raised border-border-subtle vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 flex max-h-48 min-w-40 flex-col rounded-lg border py-2 shadow-md",
+		className: list_box_module_default.panel,
 		ref,
 		children: [helpContent === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			id: helpId,
@@ -69,7 +70,7 @@ const Content = ({ helpContent }) => {
 			...listProps,
 			...contentProps,
 			"aria-describedby": helpContent === void 0 ? void 0 : helpId,
-			className: "vertical:overflow-x-auto vertical:overflow-y-visible flex min-h-0 min-w-0 flex-col overflow-y-auto",
+			className: list_box_module_default.list,
 			children: options.map(({ value, label }, idx) => /* @__PURE__ */ jsx(Item, {
 				index: idx,
 				label
@@ -78,13 +79,14 @@ const Content = ({ helpContent }) => {
 	}) });
 };
 const Item = ({ label, index }) => {
-	const { props, selected } = useMenuItem(index);
+	const id = useId();
+	const { props, selected } = useMenuItem(index, id);
 	return /* @__PURE__ */ jsxs("button", {
-		className: cn("flex w-full items-center justify-between px-3 py-2 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:border-transparent focus-visible:bg-bg-subtle focus-visible:outline-hidden"),
+		className: list_box_module_default.item,
 		type: "button",
 		...props,
 		children: [label, selected && /* @__PURE__ */ jsx("span", {
-			className: "text-fg-success",
+			className: list_box_module_default.check,
 			children: /* @__PURE__ */ jsx(CheckIcon, {})
 		})]
 	});
@@ -103,7 +105,7 @@ const useTriggerLabels = (label) => {
 const Trigger = ({ size = "md", label }) => {
 	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
+		className: sr_only_module_default.srOnly,
 		id: labelId,
 		children: label
 	}), /* @__PURE__ */ jsx(Button, {
@@ -124,7 +126,7 @@ const Trigger = ({ size = "md", label }) => {
 const IconTrigger = ({ size = "md", icon, label }) => {
 	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
+		className: sr_only_module_default.srOnly,
 		id: labelId,
 		children: label
 	}), /* @__PURE__ */ jsxs(IconButton, {
@@ -134,17 +136,11 @@ const IconTrigger = ({ size = "md", icon, label }) => {
 		tooltipDisabled: true,
 		...props,
 		children: [icon, /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
+			className: sr_only_module_default.srOnly,
 			id: valueId,
 			children: valueLabel
 		})]
 	})] }) });
 };
-const ListBox = {
-	Root,
-	Content,
-	Trigger,
-	IconTrigger
-};
 //#endregion
-export { ListBox };
+export { Content, IconTrigger, Root, Trigger };

package/dist/components/overlays/list-box/list-box.module.mjs

@@ -0,0 +1,10 @@
+import './list-box.css';
+//#region src/components/overlays/list-box/list-box.module.css
+var list_box_module_default = {
+	"check": "jzknNW_check",
+	"item": "jzknNW_item",
+	"list": "jzknNW_list",
+	"panel": "jzknNW_panel"
+};
+//#endregion
+export { list_box_module_default as default };