@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/navigation/tabs/tabs.mjs

@@ -1,21 +1,27 @@
 "use client";
-import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
-import { useEffect, useId, useMemo, useRef } from "react";
+import tabs_module_default from "./tabs.module.mjs";
+import { clsx } from "clsx";
+import { ViewTransition, startTransition, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/tabs/tabs.tsx
 const toAnchorName = (rootId) => `--ao-tab-${rootId.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
 const [TabsProvider, useTabsState] = createSafeContext("useTabsState must be used within a TabsProvider");
 const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children }) => {
 	const defaultIndex = defaultSelectedId !== null && defaultSelectedId !== "" ? ids.indexOf(defaultSelectedId) : 0;
-	const [currentId, setSelectedId] = useControllableState({
+	const [currentId, setCurrentId] = useControllableState({
 		value: selectedId,
 		defaultValue: defaultSelectedId ?? ids[defaultIndex] ?? ids[0],
 		onChange
 	});
+	const setSelectedId = useCallback((id) => {
+		startTransition(() => {
+			setCurrentId(id);
+		});
+	}, [setCurrentId]);
 	const rootId = useId();
 	const contextValue = useMemo(() => ({
 		rootId,
@@ -31,7 +37,7 @@ const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children })
 	return /* @__PURE__ */ jsx(TabsProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col gap-1 overflow-x-auto p-0.5",
+			className: tabs_module_default.root,
 			children
 		})
 	});
@@ -39,19 +45,19 @@ const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children })
 const [TabsListProvider, useTabsListState] = createSafeContext("useTabListState must be used within a TabListProvider");
 const List = ({ label, children }) => {
 	const { rootId } = useTabsState();
-	const setFocusRef = useRef(false);
-	const listRef = useRef(null);
-	const writingMode = useWritingMode(listRef);
+	const tabsRef = useRef(/* @__PURE__ */ new Map());
+	const [tablist, setTablist] = useState(null);
+	const writingMode = useWritingMode(tablist);
 	const listContextValue = useMemo(() => ({
-		setFocusRef,
+		tabsRef,
 		writingMode
 	}), [writingMode]);
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": label,
 		"aria-orientation": writingMode === "vertical" ? "vertical" : "horizontal",
-		className: "border-border-base vertical:border-b-0 vertical:border-l vertical:overflow-x-hidden vertical:overflow-y-auto relative flex overflow-x-auto overflow-y-hidden border-b p-0.5 wrap-normal",
+		className: tabs_module_default.list,
 		id: `${rootId}-tablist`,
-		ref: listRef,
+		ref: setTablist,
 		role: "tablist",
 		style: { anchorScope: toAnchorName(rootId) },
 		children: [/* @__PURE__ */ jsx(TabsListProvider, {
@@ -59,50 +65,48 @@ const List = ({ label, children }) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "ao-tab-indicator bg-primary-border",
+			className: tabs_module_default.indicator,
 			style: { positionAnchor: toAnchorName(rootId) }
 		})]
 	});
 };
 const Tab = ({ id, children }) => {
 	const { rootId, ids, selectedId, setSelectedId } = useTabsState();
-	const { setFocusRef, writingMode } = useTabsListState();
-	const ref = useRef(null);
+	const { tabsRef, writingMode } = useTabsListState();
 	const activeIndex = ids.indexOf(selectedId);
 	const index = ids.indexOf(id);
-	useEffect(() => {
-		if (activeIndex === index && setFocusRef.current) {
-			ref.current?.focus();
-			setFocusRef.current = false;
-		}
-	}, [
-		activeIndex,
-		index,
-		setFocusRef
-	]);
-	const moveTo = (direction) => {
-		const nextActiveIndex = direction === 1 ? index === ids.length - 1 ? 0 : index + 1 : index === 0 ? ids.length - 1 : index - 1;
-		setSelectedId(ids[nextActiveIndex] ?? ids[0]);
-		setFocusRef.current = true;
+	const handleKeyDown = (event) => {
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const [previousKey, nextKey] = writingMode === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+		const target = {
+			[previousKey]: (index - 1 + ids.length) % ids.length,
+			[nextKey]: (index + 1) % ids.length,
+			Home: 0,
+			End: ids.length - 1
+		}[event.key];
+		const targetId = target === void 0 ? void 0 : ids[target];
+		if (targetId === void 0) return;
+		event.preventDefault();
+		if (targetId === id) return;
+		tabsRef.current.get(targetId)?.focus();
+		setSelectedId(targetId);
 	};
 	return /* @__PURE__ */ jsx("div", {
 		"aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
 		"aria-selected": selectedId === id,
-		className: cn("ao-tab relative cursor-pointer rounded-lg p-2 transition-colors", selectedId !== id && "hover:bg-primary-bg-subtle hover:text-primary-fg", FOCUS_RING),
+		className: clsx(tabs_module_default.tab, selectedId !== id && tabs_module_default.unselected, focus_ring_module_default.ring),
 		id: `${rootId}-tab-${id}`,
 		onClick: () => {
 			setSelectedId(id);
 		},
-		onKeyDown: (e) => {
-			const prevKey = writingMode === "vertical" ? "ArrowUp" : "ArrowLeft";
-			const nextKey = writingMode === "vertical" ? "ArrowDown" : "ArrowRight";
-			if (e.key === prevKey) {
-				moveTo(-1);
+		onKeyDown: handleKeyDown,
+		ref: (element) => {
+			if (element === null) {
+				tabsRef.current.delete(id);
 				return;
 			}
-			if (e.key === nextKey) moveTo(1);
+			tabsRef.current.set(id, element);
 		},
-		ref,
 		role: "tab",
 		style: selectedId === id ? { anchorName: toAnchorName(rootId) } : void 0,
 		tabIndex: activeIndex === index ? 0 : -1,
@@ -112,12 +116,17 @@ const Tab = ({ id, children }) => {
 const Panel = ({ id, children }) => {
 	const { rootId, selectedId } = useTabsState();
 	if (selectedId !== id) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"aria-labelledby": `${rootId}-tab-${id}`,
-		className: cn("grow rounded-lg p-2", FOCUS_RING),
-		id: `${rootId}-panel-${id}`,
-		role: "tabpanel",
-		children
+	return /* @__PURE__ */ jsx(ViewTransition, {
+		default: "none",
+		enter: "auto",
+		exit: "auto",
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": `${rootId}-tab-${id}`,
+			className: clsx(tabs_module_default.panel, focus_ring_module_default.ring),
+			id: `${rootId}-panel-${id}`,
+			role: "tabpanel",
+			children
+		})
 	});
 };
 //#endregion

package/dist/components/navigation/tabs/tabs.module.mjs

@@ -0,0 +1,12 @@
+import './tabs.css';
+//#region src/components/navigation/tabs/tabs.module.css
+var tabs_module_default = {
+	"indicator": "puC4KG_indicator",
+	"list": "puC4KG_list",
+	"panel": "puC4KG_panel",
+	"root": "puC4KG_root",
+	"tab": "puC4KG_tab",
+	"unselected": "puC4KG_unselected"
+};
+//#endregion
+export { tabs_module_default as default };

package/dist/components/observers/fragment-instance.d.mts

@@ -0,0 +1 @@
+export {}

package/dist/components/observers/in-view/in-view.d.mts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+//#region src/components/observers/in-view/in-view.d.ts
+export declare const InView: FC<{
+  children: ReactNode;
+  onChange: (isInView: boolean) => void;
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number;
+  once?: boolean;
+}>;
+//#endregion

package/dist/components/observers/in-view/in-view.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { Fragment, useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/observers/in-view/in-view.tsx
+const InView = ({ children, onChange, root = null, rootMargin = "0px", threshold = 0, once = false }) => {
+	const [instance, setInstance] = useState(null);
+	const handleChange = useEffectEvent(onChange);
+	const reportedRef = useRef(void 0);
+	useEffect(() => {
+		if (!instance || once && reportedRef.current === true) return;
+		const intersecting = /* @__PURE__ */ new Set();
+		let stopped = false;
+		const report = () => {
+			const next = intersecting.size > 0;
+			if (stopped || next === reportedRef.current) return;
+			reportedRef.current = next;
+			handleChange(next);
+			if (once && next) {
+				stopped = true;
+				instance.unobserveUsing(observer);
+				observer.disconnect();
+			}
+		};
+		class ChildrenObserver extends IntersectionObserver {
+			unobserve(target) {
+				super.unobserve(target);
+				if (intersecting.delete(target)) report();
+			}
+		}
+		const observer = new ChildrenObserver((entries) => {
+			for (const entry of entries) if (entry.isIntersecting) intersecting.add(entry.target);
+			else intersecting.delete(entry.target);
+			report();
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
+		instance.observeUsing(observer);
+		return () => {
+			if (!stopped) {
+				stopped = true;
+				instance.unobserveUsing(observer);
+			}
+			observer.disconnect();
+		};
+	}, [
+		instance,
+		root,
+		rootMargin,
+		threshold,
+		once
+	]);
+	return /* @__PURE__ */ jsx(Fragment, {
+		ref: setInstance,
+		children
+	});
+};
+//#endregion
+export { InView };

package/dist/components/observers/in-view/index.d.mts

@@ -0,0 +1,2 @@
+import { InView } from "./in-view.mjs";
+export { InView };

package/dist/components/observers/in-view/index.mjs

@@ -0,0 +1 @@
+export { InView } from "./in-view.mjs";

package/dist/components/observers/resize/index.d.mts

@@ -0,0 +1,2 @@
+import { Resize } from "./resize.mjs";
+export { Resize };

package/dist/components/observers/resize/index.mjs

@@ -0,0 +1 @@
+export { Resize } from "./resize.mjs";

package/dist/components/observers/resize/resize.d.mts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+//#region src/components/observers/resize/resize.d.ts
+export declare const Resize: FC<{
+  children: ReactNode;
+  onChange: () => void;
+}>;
+//#endregion

package/dist/components/observers/resize/resize.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment, useEffect, useEffectEvent, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/observers/resize/resize.tsx
+const Resize = ({ children, onChange }) => {
+	const [instance, setInstance] = useState(null);
+	const handleChange = useEffectEvent(onChange);
+	useEffect(() => {
+		if (!instance) return;
+		const observer = new ResizeObserver(() => {
+			handleChange();
+		});
+		instance.observeUsing(observer);
+		return () => {
+			instance.unobserveUsing(observer);
+			observer.disconnect();
+		};
+	}, [instance]);
+	return /* @__PURE__ */ jsx(Fragment, {
+		ref: setInstance,
+		children
+	});
+};
+//#endregion
+export { Resize };

package/dist/components/overlays/_internal/modal-dialog-context.d.mts

@@ -1,14 +1,13 @@
 //#region src/components/overlays/_internal/modal-dialog-context.d.ts
-type ModalDialogContextValue = {
+export type ModalDialogContextValue = {
   registerLabelledBy: (id: string | undefined) => void;
   registerDescribedBy: (id: string | undefined) => void;
 };
-declare const ModalDialogProvider: import("react").Context<ModalDialogContextValue | null>;
+export declare const ModalDialogProvider: import("react").Context<ModalDialogContextValue | null>;
 /**
  * Modal（ネイティブ `<dialog>`）配下かどうか。配下なら値が返り、単体利用では null。
  * createSafeContext を使わないのは、Popover 内・単体でも動く Dialog.Root から
  * 「Modal 配下ではない」を例外なしで判定するため。
  */
-declare const useModalDialogContext: () => ModalDialogContextValue | null;
-//#endregion
-export { ModalDialogContextValue, ModalDialogProvider, useModalDialogContext };
+export declare const useModalDialogContext: () => ModalDialogContextValue | null;
+//#endregion

package/dist/components/overlays/_internal/use-can-hover.d.mts

@@ -4,6 +4,5 @@
  * SSR ではサーバースナップショットとして true を返し、hover 前提の
  * props を初期レンダーに含めてもハイドレーション差分にならないようにする。
  */
-declare const useCanHover: (query?: string) => boolean;
-//#endregion
-export { useCanHover };
+export declare const useCanHover: (query?: string) => boolean;
+//#endregion

package/dist/components/overlays/_internal/use-hover-intent.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/overlays/_internal/use-hover-intent.d.ts
-type HoverIntent = {
+export type HoverIntent = {
   hoverStart: () => void;
   hoverEnd: () => void;
   cancel: () => void;
@@ -14,12 +14,11 @@ type HoverIntent = {
  * タッチデバイス（hover 不能環境）では enabled=false を渡すとハンドラが
  * 何もしなくなるため、呼び出し側で handler を差し替える必要はない。
  */
-declare const useHoverIntent: ({ onOpen, onClose, openDelay, closeDelay, enabled }: {
+export declare const useHoverIntent: ({ onOpen, onClose, openDelay, closeDelay, enabled }: {
   onOpen: () => void;
   onClose: () => void;
   openDelay?: number;
   closeDelay?: number;
   enabled?: boolean;
 }) => HoverIntent;
-//#endregion
-export { HoverIntent, useHoverIntent };
+//#endregion

package/dist/components/overlays/_internal/use-list-navigation.d.mts

@@ -1,19 +1,22 @@
 import { Dispatch, KeyboardEvent, SetStateAction } from "react";
 //#region src/components/overlays/_internal/use-list-navigation.d.ts
-type ListItemProps = {
-  ref: (node: HTMLElement | null) => void;
+export type ListItemProps = {
+  id: string;
+  ref: (node: HTMLElement | null) => (() => void) | undefined;
   tabIndex: number;
   onFocus: () => void;
 };
-type ListNavigation = {
+export type ListNavigation = {
   getContentProps: () => {
     onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
   };
-  getItemProps: (index: number) => ListItemProps;
+  /** `id` は項目自身の `useId`。項目の順番は DOM の並びで決まる */
+  getItemProps: (id: string) => ListItemProps;
+  /** 先頭の項目をアクティブにする。キーボードで開いたときに呼ぶ */
+  activateFirst: () => void;
 };
 /**
  * 矢印キーによる roving-tabindex のリストナビゲーション。
- * floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
  *
  * コンテンツの書字方向に追従してキーを割り当てる:
  * - 横書き: ↑=前 / ↓=次
@@ -22,15 +25,18 @@ type ListNavigation = {
  * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
  * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
  * hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
- * autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+ * autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が activateFirst する。
+ *
+ * 項目は index を受け取らない。子を合成するメニューでは、項目が自分の位置を
+ * 知るには親が数えて注入するしかなく、条件付きで出し入れすると数え直しになる。
+ * 登録された要素を DOM の順に並べ直せば、描かれた並びがそのまま順番になる。
  */
-declare const useListNavigation: ({ open, activeIndex, setActiveIndex, selectedIndex, loop, autoActivateOnOpen }: {
+export declare const useListNavigation: ({ open, activeId, setActiveId, selectedIndex, loop, autoActivateOnOpen }: {
   open: boolean;
-  activeIndex: number | null;
-  setActiveIndex: Dispatch<SetStateAction<number | null>>;
+  activeId: string | null;
+  setActiveId: Dispatch<SetStateAction<string | null>>;
   selectedIndex?: number | null;
   loop?: boolean;
   autoActivateOnOpen?: boolean;
 }) => ListNavigation;
-//#endregion
-export { ListItemProps, ListNavigation, useListNavigation };
+//#endregion

package/dist/components/overlays/_internal/use-list-navigation.mjs

@@ -5,9 +5,9 @@ const isVerticalWritingMode = (el) => {
 	const wm = getComputedStyle(el).writingMode;
 	return wm.startsWith("vertical") || wm.startsWith("sideways");
 };
+const inDocumentOrder = (items) => [...items].toSorted((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
 /**
 * 矢印キーによる roving-tabindex のリストナビゲーション。
-* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
 *
 * コンテンツの書字方向に追従してキーを割り当てる:
 * - 横書き: ↑=前 / ↓=次
@@ -16,34 +16,45 @@ const isVerticalWritingMode = (el) => {
 * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
 * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
 * hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
-* autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+* autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が activateFirst する。
+*
+* 項目は index を受け取らない。子を合成するメニューでは、項目が自分の位置を
+* 知るには親が数えて注入するしかなく、条件付きで出し入れすると数え直しになる。
+* 登録された要素を DOM の順に並べ直せば、描かれた並びがそのまま順番になる。
 */
-const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex = null, loop = true, autoActivateOnOpen = true }) => {
-	const itemElementsRef = useRef([]);
+const useListNavigation = ({ open, activeId, setActiveId, selectedIndex = null, loop = true, autoActivateOnOpen = true }) => {
+	const itemElementsRef = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
 		if (!open) {
-			setActiveIndex(null);
+			setActiveId(null);
 			return;
 		}
 		if (!autoActivateOnOpen) return;
-		setActiveIndex((prev) => prev ?? (selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0));
+		const items = inDocumentOrder(itemElementsRef.current);
+		const initial = selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0;
+		setActiveId((prev) => prev ?? items[initial]?.id ?? null);
 	}, [
 		open,
 		selectedIndex,
-		setActiveIndex,
+		setActiveId,
 		autoActivateOnOpen
 	]);
 	useEffect(() => {
-		if (open && activeIndex !== null) itemElementsRef.current[activeIndex]?.focus();
-	}, [open, activeIndex]);
-	const count = () => itemElementsRef.current.filter(Boolean).length;
+		if (!open || activeId === null) return;
+		for (const item of itemElementsRef.current) if (item.id === activeId) item.focus();
+	}, [open, activeId]);
+	const activateAt = (pick) => {
+		setActiveId(pick(inDocumentOrder(itemElementsRef.current))?.id ?? null);
+	};
 	const move = (delta) => {
-		const total = count();
+		const items = inDocumentOrder(itemElementsRef.current);
+		const total = items.length;
 		if (total === 0) return;
-		setActiveIndex((prev) => {
-			const next = (prev ?? (delta === 1 ? -1 : total)) + delta;
-			if (loop) return (next + total) % total;
-			return Math.max(0, Math.min(total - 1, next));
+		setActiveId((prev) => {
+			const current = items.findIndex((item) => item.id === prev);
+			const next = (current === -1 ? delta === 1 ? -1 : total : current) + delta;
+			const index = loop ? (next + total) % total : Math.max(0, Math.min(total - 1, next));
+			return items[index]?.id ?? prev;
 		});
 	};
 	const onKeyDown = (event) => {
@@ -71,27 +82,32 @@ const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex =
 				break;
 			case "Home":
 				event.preventDefault();
-				setActiveIndex(count() > 0 ? 0 : null);
+				activateAt((items) => items.at(0));
 				break;
-			case "End": {
-				const total = count();
+			case "End":
 				event.preventDefault();
-				setActiveIndex(total > 0 ? total - 1 : null);
-				break;
-			}
+				activateAt((items) => items.at(-1));
 		}
 	};
 	return {
 		getContentProps: () => ({ onKeyDown }),
-		getItemProps: (index) => ({
+		getItemProps: (id) => ({
+			id,
 			ref: (node) => {
-				itemElementsRef.current[index] = node;
+				if (node === null) return;
+				itemElementsRef.current.add(node);
+				return () => {
+					itemElementsRef.current.delete(node);
+				};
 			},
-			tabIndex: activeIndex === index ? 0 : -1,
+			tabIndex: activeId === id ? 0 : -1,
 			onFocus: () => {
-				setActiveIndex(index);
+				setActiveId(id);
 			}
-		})
+		}),
+		activateFirst: () => {
+			activateAt((items) => items.at(0));
+		}
 	};
 };
 //#endregion

package/dist/components/overlays/command-palette/command-palette.css

@@ -0,0 +1,91 @@
+@layer properties, theme, base;
+
+@layer components {
+  .GBl1yq_root {
+    max-height: inherit;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .GBl1yq_search {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-border-mute);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    background-color: #0000;
+
+    &::placeholder {
+      color: var(--color-fg-mute);
+    }
+
+    &:focus-visible {
+      outline-style: none;
+
+      @media (forced-colors: active) {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+  }
+
+  .GBl1yq_results {
+    min-height: 0;
+    padding: calc(var(--spacing) * 2);
+    overflow-y: auto;
+  }
+
+  .GBl1yq_empty {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 6);
+    color: var(--color-fg-mute);
+    text-align: center;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .GBl1yq_groupLabel {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-top: calc(var(--spacing) * 3);
+    padding-bottom: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .GBl1yq_option {
+    cursor: pointer;
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    outline-color: var(--color-border-base);
+    outline-offset: -2px;
+    display: flex;
+  }
+
+  .GBl1yq_active {
+    background-color: var(--color-bg-subtle);
+
+    @media (prefers-contrast: more) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  .GBl1yq_shortcut {
+    gap: calc(var(--spacing) * 1);
+    flex-shrink: 0;
+    display: flex;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/command-palette/command-palette.d.mts

@@ -0,0 +1,25 @@
+import { FC, Ref } from "react";
+//#region src/components/overlays/command-palette/command-palette.d.ts
+export type CommandPaletteItem = Readonly<{
+  id: string;
+  label: string;
+  onSelect: () => void;
+  /** 見出しの付いたまとまり。同じ `group` の項目は最初に現れた位置にまとめる */
+  group?: string;
+  /** 表示名のほかに、検索で当てる語 */
+  keywords?: readonly string[];
+  /** 添えて見せるキー。1 つずつ `Kbd` で描く */
+  shortcut?: readonly string[];
+}>;
+type Props = {
+  items: readonly CommandPaletteItem[];
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onClose?: () => void;
+  placeholder?: string;
+  'aria-label'?: string;
+  ref?: Ref<HTMLDialogElement>;
+};
+export declare const CommandPalette: FC<Props>;
+//#endregion
+export {};