npm - @refineui/mcp - Versions diffs - 0.1.1 → 0.1.3 - Mend

@refineui/mcp 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/lib/{chunk-YVPEZFXV.js → chunk-TAJF3ATB.js} +97 -43
package/lib/index.js +1 -1
package/lib/server.js +1 -1
package/package.json +3 -3

package/lib/{chunk-YVPEZFXV.js → chunk-TAJF3ATB.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 // src/generated/docs-index.json
 var docs_index_default = {
-  generatedAt: "2026-09-08T17:24:36.603Z",
-  llmIndex: '# RefineUI Design System & Component Library\n\n> RefineUI is Pelagornis\'s unified design system. Foundation variables ship as `@refineui/tokens`; UI ships as `@refineui/react`. Docs render real components \u2014 not mockups.\n\n## Installation & Setup\n\n```bash\nbun add @refineui/react @refineui/tokens\n# or\nnpm install @refineui/react @refineui/tokens\n```\n\nStylesheet (app root):\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\nimport "@refineui/react/refineui.css";\n```\n\n## Packages\n\n- `@refineui/react` \u2014 Accessible React components (Tailwind + design tokens)\n- `@refineui/tokens` \u2014 Color, typography, spacing, sizing, radius, elevation, motion, z-index\n- `@refineui/utilities` \u2014 Helpers and layout algorithms\n- `@refineui/web-icons` \u2014 RefineUI System Icons font (used by `WebIcon`)\n- `@refineui/mcp` \u2014 MCP server for docs search, component pages, and design rules\n\n## Guides\n\n- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example\n\n## AI & Tools\n\n- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, and MCP\n- [Skill](https://ui.pelagornis.com/ai-tools/skill/): `refineui` agent skill for doc routing and codegen rules\n- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics\n- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): `@refineui/mcp` documentation server\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt): Curated link index (llmstxt.org)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference\n\n## Foundations\n\n- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model\n- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction\n- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors\n- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles\n- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale\n- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens\n- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius\n- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders\n- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth\n- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays\n- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance\n- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale\n- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout\n- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)\n\n## Components\n\nAlphabetical catalog \u2014 full docs at [/components/](https://ui.pelagornis.com/components/).\n\n- [Accordion](https://ui.pelagornis.com/components/accordion/)\n- [Alert](https://ui.pelagornis.com/components/alert/)\n- [Avatar](https://ui.pelagornis.com/components/avatar/)\n- [Avatars](https://ui.pelagornis.com/components/avatars/)\n- [Badge](https://ui.pelagornis.com/components/badge/)\n- [Box](https://ui.pelagornis.com/components/box/)\n- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)\n- [Bubble](https://ui.pelagornis.com/components/bubble/)\n- [Button](https://ui.pelagornis.com/components/button/)\n- [Button Group](https://ui.pelagornis.com/components/button-group/)\n- [Calendar](https://ui.pelagornis.com/components/calendar/)\n- [Card](https://ui.pelagornis.com/components/card/)\n- [Carousel](https://ui.pelagornis.com/components/carousel/)\n- [Chart](https://ui.pelagornis.com/components/chart/)\n- [Checkbox](https://ui.pelagornis.com/components/checkbox/)\n- [Command](https://ui.pelagornis.com/components/command/): Command palette with search and keyboard navigation\n- [Container](https://ui.pelagornis.com/components/container/)\n- [Dialog](https://ui.pelagornis.com/components/dialog/)\n- [Divider](https://ui.pelagornis.com/components/divider/)\n- [Drawer](https://ui.pelagornis.com/components/drawer/)\n- [Dropdown](https://ui.pelagornis.com/components/dropdown/)\n- [Field](https://ui.pelagornis.com/components/field/)\n- [Footer](https://ui.pelagornis.com/components/footer/)\n- [Grid](https://ui.pelagornis.com/components/grid/)\n- [Input](https://ui.pelagornis.com/components/input/)\n- [Input OTP](https://ui.pelagornis.com/components/input-otp/)\n- [Label](https://ui.pelagornis.com/components/label/)\n- [Link](https://ui.pelagornis.com/components/link/)\n- [Menu](https://ui.pelagornis.com/components/menu/)\n- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)\n- [Pagination](https://ui.pelagornis.com/components/pagination/)\n- [Popover](https://ui.pelagornis.com/components/popover/)\n- [Progress](https://ui.pelagornis.com/components/progress/)\n- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)\n- [Radio](https://ui.pelagornis.com/components/radio/)\n- [Resizable](https://ui.pelagornis.com/components/resizable/)\n- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)\n- [Search Field](https://ui.pelagornis.com/components/search-field/)\n- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)\n- [Select](https://ui.pelagornis.com/components/select/)\n- [Sidebar](https://ui.pelagornis.com/components/sidebar/)\n- [Skeleton](https://ui.pelagornis.com/components/skeleton/)\n- [Slider](https://ui.pelagornis.com/components/slider/)\n- [Spin Button](https://ui.pelagornis.com/components/spin-button/)\n- [Spinner](https://ui.pelagornis.com/components/spinner/)\n- [Stack](https://ui.pelagornis.com/components/stack/)\n- [Stepper](https://ui.pelagornis.com/components/stepper/)\n- [Switch](https://ui.pelagornis.com/components/switch/)\n- [Table](https://ui.pelagornis.com/components/table/)\n- [Tabs](https://ui.pelagornis.com/components/tabs/)\n- [Tag](https://ui.pelagornis.com/components/tag/)\n- [Textarea](https://ui.pelagornis.com/components/textarea/)\n- [Toast](https://ui.pelagornis.com/components/toast/)\n- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)\n- [Tooltip](https://ui.pelagornis.com/components/tooltip/)\n- [Tree](https://ui.pelagornis.com/components/tree/)\n\n## Development\n\n- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code\n- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, and project setup\n- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases\n- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components\n\n## AI & machine-readable docs\n\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md) \u2014 Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt) \u2014 Curated link index (llmstxt.org format)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt) \u2014 Expanded reference for LLM context windows\n- [AI & Tools](https://ui.pelagornis.com/ai-tools/) \u2014 Overview, DESIGN.md, llms.txt, Skill, Doctor, MCP\n- `@refineui/mcp` \u2014 MCP server (`search_docs`, `get_doc_page`, `get_design_rules`, \u2026)\n- [GitHub](https://github.com/pelagornis/refineui) \u2014 Source and issues\n\n## Usage notes for LLMs\n\n- Import components from `@refineui/react` only; do not invent parallel APIs\n- Use design tokens (`bg-refineui-alias-*`, `text-refineui-alias-*`, spacing/radius utilities) \u2014 no arbitrary px or hex in component styles\n- Match Web Kit component scope; do not add variants or convenience props not in Figma Web Kit\n- Prefer composition (`Field` + `Input`, `Command` + `CommandDialog`, `Sidebar` + `SidebarLink`) over raw HTML for forms, navigation, and feedback\n',
-  designMd: '---\nversion: alpha\nname: RefineUI\ndescription: >-\n  Pelagornis design system for product UI. YAML values are light-theme identity\n  snapshots for Stitch and coding agents. Authoritative tokens live in\n  @refineui/tokens; shipped UI lives in @refineui/react. Prefer semantic aliases\n  and components over copying these hex values into product code.\ncolors:\n  primary: "#212121"\n  on-primary: "#FFFFFF"\n  secondary: "#6C6C6C"\n  tertiary: "#7694FF"\n  neutral: "#FFFFFF"\n  surface: "#FFFFFF"\n  surface-sunken: "#F0F0F0"\n  foreground: "#212121"\n  foreground-secondary: "#6C6C6C"\n  border: "#DBDBDB"\n  error: "#FF6969"\n  success: "#26B12D"\n  warning: "#F1B500"\n  discovery: "#BD7BFF"\n  inverse: "#000000"\ntypography:\n  display-lg:\n    fontFamily: Inter\n    fontSize: 64px\n    fontWeight: 800\n    lineHeight: 86px\n  heading-md:\n    fontFamily: Inter\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 60px\n  title-md:\n    fontFamily: Inter\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 36px\n  subtitle-md:\n    fontFamily: Inter\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 24px\n  body-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\n  body-sm:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 20px\n  caption-md:\n    fontFamily: Inter\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 16px\n  label-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\nrounded:\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  "2xl": 16px\n  full: 9999px\nspacing:\n  none: 0px\n  xxxs: 2px\n  xxs: 4px\n  xs: 6px\n  sm: 8px\n  md: 10px\n  lg: 16px\n  xl: 20px\n  "2xl": 24px\n  "3xl": 32px\ncomponents:\n  button-primary:\n    backgroundColor: "{colors.primary}"\n    textColor: "{colors.on-primary}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  button-secondary:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  surface-card:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.xl}"\n    padding: 16px\n---\n\n# RefineUI\n\nHow agents should use this file: treat YAML as the **visual identity snapshot** (Stitch / UI generation). For product code, prefer `@refineui/react` components and `@refineui/tokens` semantic aliases \u2014 do not hardcode these hex/px values. Full page index: https://ui.pelagornis.com/llm.txt \xB7 Live site: https://ui.pelagornis.com\n\n## Overview\n\nRefineUI is Pelagornis\u2019s unified design system: Foundation variables become `@refineui/tokens`; the Web Kit ships as `@refineui/react`. Docs render real package output, not mockups.\n\nThe system feels **precise, neutral, and product-first** \u2014 high-contrast ink on clean surfaces, restrained radius, and semantic color roles (brand, status, discovery) rather than decorative gradients. Light and dark resolve through `[data-theme]` semantic aliases; agents generating screens should assume light tokens unless the task asks for dark.\n\nArchitecture (do not skip layers):\n\n```\nFoundation \u2192 Semantic \u2192 Theme/Context \u2192 Component tokens \u2192 Recipe \u2192 Component \u2192 State/Interaction\n```\n\n## Colors\n\nPalette roles map to semantic aliases (`backgroundBrand`, `foregroundPrimary`, `borderDefault`, \u2026). Light-theme identity values are in the YAML front matter.\n\n- **Primary (#212121):** Brand ink \u2014 primary actions, strong emphasis, brand fills (`backgroundBrand` / `foregroundBrand`).\n- **On-primary (#FFFFFF):** Text and icons on brand fills (`foregroundOnBrand`).\n- **Secondary (#6C6C6C):** Supporting copy and quieter chrome (`foregroundSecondary`).\n- **Tertiary (#7694FF):** Info and links \u2014 not a second brand (`foregroundLink`, `backgroundInfo`).\n- **Neutral / surface (#FFFFFF):** Page and card canvases (`backgroundPrimary`, `backgroundSurface`).\n- **Surface-sunken:** Recessed wells (`surfaceSunken`).\n- **Border (#DBDBDB):** Default dividers and control outlines (`borderDefault`).\n- **Error / success / warning / discovery:** Status and accent roles only \u2014 never as generic decoration.\n\nDark theme flips the same semantic names via CSS variables; do not invent a second hex palette in product CSS.\n\n## Typography\n\nSingle family **Inter** for UI. Prefer semantic text roles (`displayLg`, `headingMd`, `titleMd`, `bodyMd`, `captionMd`, \u2026) over raw Foundation keys.\n\n- **Display / heading:** Heavy\u2013bold for marketing and page titles.\n- **Title / subtitle:** Semibold for component and section headers.\n- **Body:** Medium or regular at 14px for primary reading and controls.\n- **Caption / label:** 12\u201314px for metadata, helpers, and form labels.\n\n## Layout\n\nSpacing uses the RefineUI T-shirt scale (`sizeNone` \u2026 `sizeXXXLarge`: 0\u201332px). Prefer token utilities (`gap-refineui-*`, Box/Stack `gap`) over arbitrary Tailwind spacing.\n\nLayout primitives: `Box`, `Stack`, `Grid`, `Container`. Prefer **logical** insets (`ps`/`pe`/`ms`/`me`, `text-start`) for RTL. Spec `layout.direction=logical` is the contract \u2014 avoid physical `left`/`right` unless intentional (documented in component Spec).\n\n## Elevation & Depth\n\nElevation steps are semantic shadows (`shadow2` \u2026 `shadow64`) with separate light/dark recipes. Use the lowest step that establishes hierarchy; do not stack multi-layer custom box-shadows. Overlays use `surfaceOverlay` scrims, not ad-hoc rgba.\n\n## Shapes\n\nRadius scale: `roundedXSmall` (2px) through `roundedXXLarge` (16px), plus `roundedCircle`. Default interactive controls land around **large (8px)**; cards and panels often **x-large (12px)**. Prefer token radii over arbitrary `rounded-*` values.\n\n## Components\n\nCompose from `@refineui/react` \u2014 no convenience props (`title`, `description`, `items`, `actions`, `onClose`). Match sibling component patterns before inventing APIs.\n\nDOM / state contract:\n\n- `data-refineui` \u2014 component identity\n- `data-variant` / `data-size` \u2014 visual options\n- `data-state` \u2014 open, selected, loading, \u2026\n- Hover / `:focus-visible` / disabled \u2014 `refineui.css` (do not reimplement with `:focus` alone)\n\nImport only from `@refineui/react`. Stylesheet at app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nDeep lookup: catalog at https://ui.pelagornis.com/components/ \xB7 MCP tools `get_component_spec`, `get_component_recipe`, `inspect_token`.\n\n## Do\'s and Don\'ts\n\n**Do**\n\n- Use design tokens for color, spacing, radius, stroke, typography, shadow, z-index, and motion.\n- Follow composable subcomponent APIs and existing `packages/react` patterns.\n- Honor `:focus-visible`, `prefers-reduced-motion`, and forced-colors contracts from Spec / Doctor.\n- Start from https://ui.pelagornis.com/llm.txt (or `@refineui/mcp`) before inventing APIs.\n\n**Don\'t**\n\n- Hardcode hex, rgba, or arbitrary px in component styles.\n- Reference Foundation literals from component tokens \u2014 use semantic / `componentSizes`.\n- Invent variants, props, or dimensions not reflected in tokens + docs.\n- Duplicate this file\u2019s token tables into agent skills \u2014 link here instead.\n',
+  generatedAt: "2026-09-23T05:49:37.733Z",
+  llmIndex: '# RefineUI Design System & Component Library\n\n> RefineUI is Pelagornis\'s unified design system. Foundation variables ship as `@refineui/tokens`; UI ships as `@refineui/react`. Docs render real components \u2014 not mockups.\n\n## Installation & Setup\n\n```bash\nbun add @refineui/react @refineui/tokens\n# or\nnpm install @refineui/react @refineui/tokens\n```\n\nStylesheet (app root):\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\nimport "@refineui/react/refineui.css";\n```\n\n## Packages\n\n- `@refineui/react` \u2014 Accessible React components (Tailwind + design tokens)\n- `@refineui/tokens` \u2014 Color, typography, spacing, sizing, radius, elevation, motion, z-index\n- `@refineui/utilities` \u2014 Helpers and layout algorithms\n- `@refineui/web-icons` \u2014 RefineUI System Icons font (used by `WebIcon`)\n- `@refineui/mcp` \u2014 MCP server for docs search, component pages, and design rules\n\n## Guides\n\n- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example\n\n## AI & Tools\n\n- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, and MCP\n- [Skill](https://ui.pelagornis.com/ai-tools/skill/): `refineui` agent skill for doc routing and codegen rules\n- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics\n- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): `@refineui/mcp` documentation server\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt): Curated link index (llmstxt.org)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference\n\n## Foundations\n\n- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model\n- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction\n- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors\n- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles\n- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale\n- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens\n- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius\n- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders\n- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth\n- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays\n- [Blur](https://ui.pelagornis.com/foundations/blur/): Backdrop / surface frosted blur\n- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance\n- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale\n- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout\n- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)\n\n## Components\n\nAlphabetical catalog \u2014 full docs at [/components/](https://ui.pelagornis.com/components/).\n\n- [Accordion](https://ui.pelagornis.com/components/accordion/)\n- [Alert](https://ui.pelagornis.com/components/alert/)\n- [Avatar](https://ui.pelagornis.com/components/avatar/)\n- [Avatars](https://ui.pelagornis.com/components/avatars/)\n- [Badge](https://ui.pelagornis.com/components/badge/)\n- [Box](https://ui.pelagornis.com/components/box/)\n- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)\n- [Bubble](https://ui.pelagornis.com/components/bubble/)\n- [Button](https://ui.pelagornis.com/components/button/)\n- [Button Group](https://ui.pelagornis.com/components/button-group/)\n- [Calendar](https://ui.pelagornis.com/components/calendar/)\n- [Card](https://ui.pelagornis.com/components/card/)\n- [Carousel](https://ui.pelagornis.com/components/carousel/)\n- [Chart](https://ui.pelagornis.com/components/chart/)\n- [Checkbox](https://ui.pelagornis.com/components/checkbox/)\n- [Collapsible](https://ui.pelagornis.com/components/collapsible/): Show/hide a section from a trigger (`asChild` supported)\n- [Command](https://ui.pelagornis.com/components/command/): Command palette with search and keyboard navigation\n- [Container](https://ui.pelagornis.com/components/container/)\n- [Context Menu](https://ui.pelagornis.com/components/context-menu/): Right-click menu (Menu anatomy + portal)\n- [Dialog](https://ui.pelagornis.com/components/dialog/)\n- [Divider](https://ui.pelagornis.com/components/divider/)\n- [Drawer](https://ui.pelagornis.com/components/drawer/)\n- [Dropdown](https://ui.pelagornis.com/components/dropdown/)\n- [Field](https://ui.pelagornis.com/components/field/)\n- [Footer](https://ui.pelagornis.com/components/footer/)\n- [Grid](https://ui.pelagornis.com/components/grid/)\n- [Input](https://ui.pelagornis.com/components/input/)\n- [Input OTP](https://ui.pelagornis.com/components/input-otp/)\n- [Label](https://ui.pelagornis.com/components/label/)\n- [Link](https://ui.pelagornis.com/components/link/)\n- [Menu](https://ui.pelagornis.com/components/menu/)\n- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)\n- [Pagination](https://ui.pelagornis.com/components/pagination/)\n- [Popover](https://ui.pelagornis.com/components/popover/)\n- [Progress](https://ui.pelagornis.com/components/progress/)\n- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)\n- [Radio](https://ui.pelagornis.com/components/radio/)\n- [Resizable](https://ui.pelagornis.com/components/resizable/)\n- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)\n- [Search Field](https://ui.pelagornis.com/components/search-field/)\n- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)\n- [Select](https://ui.pelagornis.com/components/select/)\n- [Sidebar](https://ui.pelagornis.com/components/sidebar/)\n- [Skeleton](https://ui.pelagornis.com/components/skeleton/)\n- [Slider](https://ui.pelagornis.com/components/slider/)\n- [Spin Button](https://ui.pelagornis.com/components/spin-button/)\n- [Spinner](https://ui.pelagornis.com/components/spinner/)\n- [Stack](https://ui.pelagornis.com/components/stack/)\n- [Stepper](https://ui.pelagornis.com/components/stepper/)\n- [Switch](https://ui.pelagornis.com/components/switch/)\n- [Table](https://ui.pelagornis.com/components/table/)\n- [Tabs](https://ui.pelagornis.com/components/tabs/)\n- [Tag](https://ui.pelagornis.com/components/tag/)\n- [Textarea](https://ui.pelagornis.com/components/textarea/)\n- [Toast](https://ui.pelagornis.com/components/toast/)\n- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)\n- [Tooltip](https://ui.pelagornis.com/components/tooltip/)\n- [Tree](https://ui.pelagornis.com/components/tree/)\n\n## Development\n\n- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code\n- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, and project setup\n- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases\n- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components\n\n## AI & machine-readable docs\n\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md) \u2014 Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt) \u2014 Curated link index (llmstxt.org format)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt) \u2014 Expanded reference for LLM context windows\n- [AI & Tools](https://ui.pelagornis.com/ai-tools/) \u2014 Overview, DESIGN.md, llms.txt, Skill, Doctor, MCP\n- `@refineui/mcp` \u2014 MCP server (`search_docs`, `get_doc_page`, `get_design_rules`, \u2026)\n- [GitHub](https://github.com/pelagornis/refineui) \u2014 Source and issues\n\n## Usage notes for LLMs\n\n- Import components from `@refineui/react` only; do not invent parallel APIs\n- Use design tokens (`bg-refineui-alias-*`, `text-refineui-alias-*`, spacing/radius utilities) \u2014 no arbitrary px or hex in component styles\n- Match Web Kit component scope; do not add variants or convenience props not in Figma Web Kit\n- Prefer composition (`Field` + `Input`, `Command` + `CommandDialog`, `Sidebar` + `SidebarLink`, `Collapsible` + `CollapsibleTrigger`/`Content`, `ContextMenu` + portal content) over raw HTML for forms, navigation, and feedback\n- `Slot` / `asChild` merge props onto a child element \u2014 use for triggers that should render as `Button` or custom hosts\n- **Segmented Control:** sliding brand indicator; until `data-ready`, the selected item keeps a brand fill so SSR/first paint is not blank; transform leads width on slide\n- **Breadcrumb:** `BreadcrumbEllipsis` is presentational (square icon chip); interactive collapse uses `BreadcrumbEllipsisTrigger` (`Button` ghost icon sm)\n- **Input OTP:** empty slots reuse Skeleton opacity pulse (staggered by index); filled, focused, disabled, and `prefers-reduced-motion` stop the pulse\n- **Checkbox** default radius is `roundedLarge`; **Chart** bar tops use `roundedXLarge` (clamped to bar geometry)\n- **Menu / Dropdown / Select / Context Menu / SidebarPeek** panels use frosted glass: `surfaceFrosted` fill + `surfaceFrost` blur (`prefers-reduced-transparency` falls back to opaque `backgroundPrimary`). Docked Sidebar stays opaque.\n',
+  designMd: '---\nversion: alpha\nname: RefineUI\ndescription: >-\n  Pelagornis design system for product UI. YAML values are light-theme identity\n  snapshots for Stitch and coding agents. Authoritative tokens live in\n  @refineui/tokens; shipped UI lives in @refineui/react. Prefer semantic aliases\n  and components over copying these hex values into product code.\ncolors:\n  primary: "#212121"\n  on-primary: "#FFFFFF"\n  secondary: "#6C6C6C"\n  tertiary: "#7694FF"\n  neutral: "#FFFFFF"\n  surface: "#FFFFFF"\n  surface-sunken: "#F0F0F0"\n  foreground: "#212121"\n  foreground-secondary: "#6C6C6C"\n  border: "#DBDBDB"\n  error: "#FF6969"\n  success: "#26B12D"\n  warning: "#F1B500"\n  discovery: "#BD7BFF"\n  inverse: "#000000"\ntypography:\n  display-lg:\n    fontFamily: Inter\n    fontSize: 64px\n    fontWeight: 800\n    lineHeight: 86px\n  heading-md:\n    fontFamily: Inter\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 60px\n  title-md:\n    fontFamily: Inter\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 36px\n  subtitle-md:\n    fontFamily: Inter\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 24px\n  body-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\n  body-sm:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 20px\n  caption-md:\n    fontFamily: Inter\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 16px\n  label-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\nrounded:\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  "2xl": 16px\n  full: 9999px\nspacing:\n  none: 0px\n  xxxs: 2px\n  xxs: 4px\n  xs: 6px\n  sm: 8px\n  md: 10px\n  lg: 16px\n  xl: 20px\n  "2xl": 24px\n  "3xl": 32px\ncomponents:\n  button-primary:\n    backgroundColor: "{colors.primary}"\n    textColor: "{colors.on-primary}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  button-secondary:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  surface-card:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.xl}"\n    padding: 16px\n---\n\n# RefineUI\n\nHow agents should use this file: treat YAML as the **visual identity snapshot** (Stitch / UI generation). For product code, prefer `@refineui/react` components and `@refineui/tokens` semantic aliases \u2014 do not hardcode these hex/px values. Full page index: https://ui.pelagornis.com/llm.txt \xB7 Live site: https://ui.pelagornis.com\n\n## Overview\n\nRefineUI is Pelagornis\u2019s unified design system: Foundation variables become `@refineui/tokens`; the Web Kit ships as `@refineui/react`. Docs render real package output, not mockups.\n\nThe system feels **precise, neutral, and product-first** \u2014 high-contrast ink on clean surfaces, restrained radius, and semantic color roles (brand, status, discovery) rather than decorative gradients. Light and dark resolve through `[data-theme]` semantic aliases; agents generating screens should assume light tokens unless the task asks for dark.\n\nArchitecture (do not skip layers):\n\n```\nFoundation \u2192 Semantic \u2192 Theme/Context \u2192 Component tokens \u2192 Recipe \u2192 Component \u2192 State/Interaction\n```\n\n## Colors\n\nPalette roles map to semantic aliases (`backgroundBrand`, `foregroundPrimary`, `borderDefault`, \u2026). Light-theme identity values are in the YAML front matter.\n\n- **Primary (#212121):** Brand ink \u2014 primary actions, strong emphasis, brand fills (`backgroundBrand` / `foregroundBrand`).\n- **On-primary (#FFFFFF):** Text and icons on brand fills (`foregroundOnBrand`).\n- **Secondary (#6C6C6C):** Supporting copy and quieter chrome (`foregroundSecondary`).\n- **Tertiary (#7694FF):** Info and links \u2014 not a second brand (`foregroundLink`, `backgroundInfo`).\n- **Neutral / surface (#FFFFFF):** Page and card canvases (`backgroundPrimary`, `backgroundSurface`).\n- **Surface-sunken:** Recessed wells (`surfaceSunken`).\n- **Border (#DBDBDB):** Default dividers and control outlines (`borderDefault`).\n- **Error / success / warning / discovery:** Status and accent roles only \u2014 never as generic decoration.\n\nDark theme flips the same semantic names via CSS variables; do not invent a second hex palette in product CSS.\n\n## Typography\n\nSingle family **Inter** for UI. Prefer semantic text roles (`displayLg`, `headingMd`, `titleMd`, `bodyMd`, `captionMd`, \u2026) over raw Foundation keys.\n\n- **Display / heading:** Heavy\u2013bold for marketing and page titles.\n- **Title / subtitle:** Semibold for component and section headers.\n- **Body:** Medium or regular at 14px for primary reading and controls.\n- **Caption / label:** 12\u201314px for metadata, helpers, and form labels.\n\n## Layout\n\nSpacing uses the RefineUI T-shirt scale (`sizeNone` \u2026 `sizeXXXLarge`: 0\u201332px). Prefer token utilities (`gap-refineui-*`, Box/Stack `gap`) over arbitrary Tailwind spacing.\n\nLayout primitives: `Box`, `Stack`, `Grid`, `Container`. Prefer **logical** insets (`ps`/`pe`/`ms`/`me`, `text-start`) for RTL. Spec `layout.direction=logical` is the contract \u2014 avoid physical `left`/`right` unless intentional (documented in component Spec).\n\n## Elevation & Depth\n\nElevation steps are semantic shadows (`shadow2` \u2026 `shadow64`) with separate light/dark recipes. Use the lowest step that establishes hierarchy; do not stack multi-layer custom box-shadows. Overlays use `surfaceOverlay` scrims, not ad-hoc rgba.\n\nBackdrop **blur** is separate from tint: prefer semantic roles `overlayScrim` / `surfaceFrost` (`--refineui-blur-*`). Frosted floating panels (Menu family, SidebarPeek) pair blur with translucent **`surfaceFrosted`** fill \u2014 do not borrow spacing tokens for `backdrop-filter`. Docked Sidebar stays opaque `backgroundPrimary`.\n\n## Shapes\n\nRadius scale: `roundedXSmall` (2px) through `roundedXXLarge` (16px), plus `roundedCircle`. Default interactive controls land around **large (8px)**; cards and panels often **x-large (12px)**. Prefer token radii over arbitrary `rounded-*` values.\n\n## Components\n\nCompose from `@refineui/react` \u2014 no convenience props (`title`, `description`, `items`, `actions`, `onClose`). Match sibling component patterns before inventing APIs.\n\nDOM / state contract:\n\n- `data-refineui` \u2014 component identity\n- `data-variant` / `data-size` \u2014 visual options\n- `data-state` \u2014 open, selected, loading, \u2026\n- Hover / `:focus-visible` / disabled \u2014 `refineui.css` (do not reimplement with `:focus` alone)\n\n**Composition highlights**\n\n- **Collapsible** \u2014 `Collapsible` + `CollapsibleTrigger` + `CollapsibleContent`; trigger supports `asChild` (often a ghost icon `Button`)\n- **Context Menu** \u2014 same Menu item anatomy as Dropdown/Menu, opened from `ContextMenuTrigger` via right-click; content lives in `ContextMenuPortal`\n- **Slot / asChild** \u2014 merge host props onto a single child; prefer this over wrapping extra DOM for triggers\n- **Segmented Control** \u2014 mutually exclusive pill; brand indicator slides after first layout (`data-ready` / `data-animate`); empty first paint uses selected-item fill fallback\n- **Breadcrumb** \u2014 trail composition; square `BreadcrumbEllipsis` (presentational) vs `BreadcrumbEllipsisTrigger` (interactive icon Button)\n- **Input OTP** \u2014 per-digit slots; empty cells pulse like Skeleton until filled\n- **Checkbox** \u2014 default corner `roundedLarge`; circular variant uses `roundedCircle`\n- **Chart bars** \u2014 top corners use `roundedXLarge` (clamped to width/height)\n\nImport only from `@refineui/react`. Stylesheet at app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nDeep lookup: catalog at https://ui.pelagornis.com/components/ \xB7 MCP tools `get_component_spec`, `get_component_recipe`, `inspect_token`.\n\n## Do\'s and Don\'ts\n\n**Do**\n\n- Use design tokens for color, spacing, radius, stroke, typography, shadow, z-index, and motion.\n- Follow composable subcomponent APIs and existing `packages/react` patterns.\n- Honor `:focus-visible`, `prefers-reduced-motion`, and forced-colors contracts from Spec / Doctor.\n- Start from https://ui.pelagornis.com/llm.txt (or `@refineui/mcp`) before inventing APIs.\n\n**Don\'t**\n\n- Hardcode hex, rgba, or arbitrary px in component styles.\n- Reference Foundation literals from component tokens \u2014 use semantic / `componentSizes`.\n- Invent variants, props, or dimensions not reflected in tokens + docs.\n- Duplicate this file\u2019s token tables into agent skills \u2014 link here instead.\n',
   pages: [
     {
       slug: "ai-tools/doctor",
@@ -100,8 +100,8 @@ var docs_index_default = {
       title: "Breadcrumb",
       description: "Hierarchical trail showing page location.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\n### Breadcrumb\n\nRoot container (`<nav>` element).\n\n### BreadcrumbList\n\nOrdered list of breadcrumb items.\n\n### BreadcrumbItem\n\nList item wrapper.\n\n### BreadcrumbLink\n\nLink to a page.\n\n### BreadcrumbPage\n\nCurrent page (non-clickable).\n\n### BreadcrumbSeparator\n\nVisual separator between items.\n\n### BreadcrumbEllipsis\n\nCollapsed items indicator.',
-      searchText: 'breadcrumb hierarchical trail showing page location. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api reference\n\n### breadcrumb\n\nroot container (`<nav>` element).\n\n### breadcrumblist\n\nordered list of breadcrumb items.\n\n### breadcrumbitem\n\nlist item wrapper.\n\n### breadcrumblink\n\nlink to a page.\n\n### breadcrumbpage\n\ncurrent page (non-clickable).\n\n### breadcrumbseparator\n\nvisual separator between items.\n\n### breadcrumbellipsis\n\ncollapsed items indicator.\n\n'
+      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\n### Breadcrumb\n\nRoot container (`<nav>` element).\n\n### BreadcrumbList\n\nOrdered list of breadcrumb items.\n\n### BreadcrumbItem\n\nList item wrapper.\n\n### BreadcrumbLink\n\nLink to a page.\n\n### BreadcrumbPage\n\nCurrent page (non-clickable).\n\n### BreadcrumbSeparator\n\nVisual separator between items.\n\n### BreadcrumbEllipsis\n\nPresentational collapsed marker (square icon chip, not interactive).\n\n### BreadcrumbEllipsisTrigger\n\nInteractive collapsed control \u2014 ghost icon `Button` (`layout="icon"` `size="sm"`). Use when the ellipsis should open a menu or expand the trail.',
+      searchText: 'breadcrumb hierarchical trail showing page location. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api reference\n\n### breadcrumb\n\nroot container (`<nav>` element).\n\n### breadcrumblist\n\nordered list of breadcrumb items.\n\n### breadcrumbitem\n\nlist item wrapper.\n\n### breadcrumblink\n\nlink to a page.\n\n### breadcrumbpage\n\ncurrent page (non-clickable).\n\n### breadcrumbseparator\n\nvisual separator between items.\n\n### breadcrumbellipsis\n\npresentational collapsed marker (square icon chip, not interactive).\n\n### breadcrumbellipsistrigger\n\ninteractive collapsed control \u2014 ghost icon `button` (`layout="icon"` `size="sm"`). use when the ellipsis should open a menu or expand the trail.\n\n'
     },
     {
       slug: "components/bubble",
@@ -163,8 +163,8 @@ var docs_index_default = {
       title: "Chart",
       description: "Data visualization chart primitive.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API Reference\n\n### Chart\n\nRoot chart container.\n\n### ChartBody\n\nMain chart body section.\n\n### ChartContent\n\nChart content wrapper.\n\n### ChartPlot\n\nSVG plot area.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the chart." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "Horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale derivation." }\n    ]}\n  />\n</div>\n### ChartBars\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "Shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showArea", default: "false", type: "boolean", description: "Area fill under the line." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "Point markers on each value." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY-axis tick labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "Custom formatter." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX-axis labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "Label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "Alignment style." }\n    ]}\n  />\n</div>\n### ChartLegend\n\nLegend list container.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key (required)." }\n    ]}\n  />\n</div>',
-      searchText: 'chart data visualization chart primitive. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api reference\n\n### chart\n\nroot chart container.\n\n### chartbody\n\nmain chart body section.\n\n### chartcontent\n\nchart content wrapper.\n\n### chartplot\n\nsvg plot area.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the chart." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale derivation." }\n    ]}\n  />\n</div>\n### chartbars\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showarea", default: "false", type: "boolean", description: "area fill under the line." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "point markers on each value." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny-axis tick labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "custom formatter." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx-axis labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "alignment style." }\n    ]}\n  />\n</div>\n### chartlegend\n\nlegend list container.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key (required)." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API Reference\n\n### Chart\n\nRoot chart container.\n\n### ChartBody\n\nMain chart body section.\n\n### ChartContent\n\nChart content wrapper.\n\n### ChartPlot\n\nSVG plot area.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the chart." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "Horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale derivation." }\n    ]}\n  />\n</div>\n### ChartBars\n\nBar tops use `roundedXLarge` (clamped to bar width/height).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "Shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showArea", default: "false", type: "boolean", description: "Area fill under the line." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "Point markers on each value." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY-axis tick labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "Custom formatter." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX-axis labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "Label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "Alignment style." }\n    ]}\n  />\n</div>\n### ChartLegend\n\nLegend list container.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key (required)." }\n    ]}\n  />\n</div>',
+      searchText: 'chart data visualization chart primitive. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api reference\n\n### chart\n\nroot chart container.\n\n### chartbody\n\nmain chart body section.\n\n### chartcontent\n\nchart content wrapper.\n\n### chartplot\n\nsvg plot area.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the chart." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale derivation." }\n    ]}\n  />\n</div>\n### chartbars\n\nbar tops use `roundedxlarge` (clamped to bar width/height).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showarea", default: "false", type: "boolean", description: "area fill under the line." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "point markers on each value." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny-axis tick labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "custom formatter." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx-axis labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "alignment style." }\n    ]}\n  />\n</div>\n### chartlegend\n\nlegend list container.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key (required)." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "components/checkbox",
@@ -172,8 +172,17 @@ var docs_index_default = {
       title: "Checkbox",
       description: "Binary selection control for forms.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "Checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "Visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
-      searchText: 'checkbox binary selection control for forms. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\nDefault (square) controls use `roundedLarge`. The `circular` variant uses `roundedCircle`.\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "Checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "Visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'checkbox binary selection control for forms. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\ndefault (square) controls use `roundedlarge`. the `circular` variant uses `roundedcircle`.\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/collapsible",
+      href: "/components/collapsible/",
+      title: "Collapsible",
+      description: "Show and hide a section from a trigger.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CollapsiblePreview client:load />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Collapsible defaultOpen>\n  <CollapsibleTrigger>Details</CollapsibleTrigger>\n  <CollapsibleContent>\n    Hidden until the trigger opens it.\n  </CollapsibleContent>\n</Collapsible>\n```\n\n`open` and `onOpenChange` make it controlled. `CollapsibleTrigger` accepts `asChild` and merges onto its child. Closed content stays mounted and is hidden.',
+      searchText: 'collapsible show and hide a section from a trigger. <div class="not-content my-6">\n  <collapsiblepreview client:load />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<collapsible defaultopen>\n  <collapsibletrigger>details</collapsibletrigger>\n  <collapsiblecontent>\n    hidden until the trigger opens it.\n  </collapsiblecontent>\n</collapsible>\n```\n\n`open` and `onopenchange` make it controlled. `collapsibletrigger` accepts `aschild` and merges onto its child. closed content stays mounted and is hidden.\n'
     },
     {
       slug: "components/command",
@@ -193,6 +202,15 @@ var docs_index_default = {
       content: '`Container` centers content horizontally with optional spacing-token padding. Use it as a page or section shell.\n\n<div class="not-content my-6">\n  <ContainerPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="container" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Container padding="sizeXXLarge">\n  <Stack gap="sizeLarge">\n    <Text variant="headingMd" as="h1">Page title</Text>\n    <Text variant="bodyMd">Body</Text>\n  </Stack>\n</Container>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "Padding on all sides." }\n    ]}\n  />\n</div>',
       searchText: 'container centered page shell with token padding and full max width. `container` centers content horizontally with optional spacing-token padding. use it as a page or section shell.\n\n<div class="not-content my-6">\n  <containerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="container" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<container padding="sizexxlarge">\n  <stack gap="sizelarge">\n    <text variant="headingmd" as="h1">page title</text>\n    <text variant="bodymd">body</text>\n  </stack>\n</container>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "padding on all sides." }\n    ]}\n  />\n</div>\n'
     },
+    {
+      slug: "components/context-menu",
+      href: "/components/context-menu/",
+      title: "Context Menu",
+      description: "A menu opened from a right click.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ContextMenuPreview client:load />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<ContextMenu>\n  <ContextMenuTrigger asChild>\n    <div>Right click</div>\n  </ContextMenuTrigger>\n  <ContextMenuPortal>\n    <ContextMenuContent>\n      <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>\n      <ContextMenuSeparator />\n      <ContextMenuSub>\n        <ContextMenuSubTrigger>More</ContextMenuSubTrigger>\n        <ContextMenuPortal>\n          <ContextMenuSubContent>\n            <ContextMenuItem>Rename</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuPortal>\n      </ContextMenuSub>\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</ContextMenu>\n```\n\n`onSelect` receives an event. Call `preventDefault()` on it to keep the menu open. Disabled items do not select.',
+      searchText: 'context menu a menu opened from a right click. <div class="not-content my-6">\n  <contextmenupreview client:load />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<contextmenu>\n  <contextmenutrigger aschild>\n    <div>right click</div>\n  </contextmenutrigger>\n  <contextmenuportal>\n    <contextmenucontent>\n      <contextmenuitem onselect={() => copy()}>copy</contextmenuitem>\n      <contextmenuseparator />\n      <contextmenusub>\n        <contextmenusubtrigger>more</contextmenusubtrigger>\n        <contextmenuportal>\n          <contextmenusubcontent>\n            <contextmenuitem>rename</contextmenuitem>\n          </contextmenusubcontent>\n        </contextmenuportal>\n      </contextmenusub>\n    </contextmenucontent>\n  </contextmenuportal>\n</contextmenu>\n```\n\n`onselect` receives an event. call `preventdefault()` on it to keep the menu open. disabled items do not select.\n'
+    },
     {
       slug: "components/dialog",
       href: "/components/dialog/",
@@ -271,8 +289,8 @@ var docs_index_default = {
       title: "Input OTP",
       description: "One-time password code input field.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\n## API Reference\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled OTP string." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when value changes." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "Number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "Per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "Auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the control." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "Zero-based slot index (required)." }\n    ]}\n  />\n</div>',
-      searchText: 'input otp one-time password code input field. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\n## api reference\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled otp string." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when value changes." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the control." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "zero-based slot index (required)." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\nEmpty slots pulse with the same opacity motion as Skeleton (staggered by index). The pulse stops when a slot is filled, focused, disabled, or when `prefers-reduced-motion` is set.\n\n## API Reference\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled OTP string." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when value changes." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "Number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "Per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "Auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the control." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "Zero-based slot index (required)." }\n    ]}\n  />\n</div>',
+      searchText: 'input otp one-time password code input field. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\nempty slots pulse with the same opacity motion as skeleton (staggered by index). the pulse stops when a slot is filled, focused, disabled, or when `prefers-reduced-motion` is set.\n\n## api reference\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled otp string." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when value changes." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the control." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "zero-based slot index (required)." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "components/input",
@@ -307,8 +325,8 @@ var docs_index_default = {
       title: "Menu",
       description: "Action menu dropdown with list items.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuSection>\n        <MenuItem\n          startIcon={<Icon />}\n          endIcon={<Badge />}\n          description="Description text"\n          shortcut="\u2318N"\n        >\n          Menu Item\n        </MenuItem>\n        <MenuSubTrigger>Submenu</MenuSubTrigger>\n        <MenuSubContent>\n          <MenuItem>Submenu Item</MenuItem>\n        </MenuSubContent>\n      </MenuSection>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "Positioning configuration." }\n    ]}\n  />\n</div>\n### MenuPopover\n\nPopover container for the menu.\n\n### MenuList\n\nList container for menu items.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuSection\n\nGroups related menu items.\n\n### MenuDivider\n\nVisual separator between items.\n\n### MenuSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\nSubmenu panel.',
-      searchText: 'menu action menu dropdown with list items. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menusection>\n        <menuitem\n          starticon={<icon />}\n          endicon={<badge />}\n          description="description text"\n          shortcut="\u2318n"\n        >\n          menu item\n        </menuitem>\n        <menusubtrigger>submenu</menusubtrigger>\n        <menusubcontent>\n          <menuitem>submenu item</menuitem>\n        </menusubcontent>\n      </menusection>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api reference\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "positioning configuration." }\n    ]}\n  />\n</div>\n### menupopover\n\npopover container for the menu.\n\n### menulist\n\nlist container for menu items.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menusection\n\ngroups related menu items.\n\n### menudivider\n\nvisual separator between items.\n\n### menusubtrigger\n\nsubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menusubcontent\n\nsubmenu panel.\n\n'
+      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuLabel>File</MenuLabel>\n      <MenuItem\n        startIcon={<Icon />}\n        endIcon={<Badge />}\n        description="Description text"\n        shortcut="\u2318N"\n      >\n        Menu Item\n      </MenuItem>\n      <MenuSubTrigger>Submenu</MenuSubTrigger>\n      <MenuSubContent>\n        <MenuItem>Submenu Item</MenuItem>\n      </MenuSubContent>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "Positioning configuration." }\n    ]}\n  />\n</div>\n### MenuPopover\n\nPopover container for the menu.\n\n### MenuList\n\nList container for menu items.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuLabel\n\nHeading label for a group of related items.\n\n### MenuDivider\n\nVisual separator between items.\n\n### MenuSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\nSubmenu panel.',
+      searchText: 'menu action menu dropdown with list items. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menulabel>file</menulabel>\n      <menuitem\n        starticon={<icon />}\n        endicon={<badge />}\n        description="description text"\n        shortcut="\u2318n"\n      >\n        menu item\n      </menuitem>\n      <menusubtrigger>submenu</menusubtrigger>\n      <menusubcontent>\n        <menuitem>submenu item</menuitem>\n      </menusubcontent>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api reference\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "positioning configuration." }\n    ]}\n  />\n</div>\n### menupopover\n\npopover container for the menu.\n\n### menulist\n\nlist container for menu items.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menulabel\n\nheading label for a group of related items.\n\n### menudivider\n\nvisual separator between items.\n\n### menusubtrigger\n\nsubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menusubcontent\n\nsubmenu panel.\n\n'
     },
     {
       slug: "components/navigation-menu",
@@ -316,8 +334,8 @@ var docs_index_default = {
       title: "Navigation Menu",
       description: "Top-level responsive header navigation menu.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API Reference\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled open item value (empty string = closed)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial open item." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when open item changes." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "Delay (ms) before opening on pointer enter." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "Delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "Accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\nList of navigation items.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\nTrigger button for dropdown content.\n\n### NavigationMenuContent\n\nDropdown panel content.\n\n### NavigationMenuLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\nActive item indicator (visual underline).',
-      searchText: 'navigation menu top-level responsive header navigation menu. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api reference\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled open item value (empty string = closed)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial open item." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when open item changes." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "delay (ms) before opening on pointer enter." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\nlist of navigation items.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\ntrigger button for dropdown content.\n\n### navigationmenucontent\n\ndropdown panel content.\n\n### navigationmenulink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\nactive item indicator (visual underline).\n\n'
+      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API Reference\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled open item value (empty string = closed)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial open item." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when open item changes." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "Delay (ms) before opening on pointer enter." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "Delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "Accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\nList of navigation items.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\nTrigger button for dropdown content.\n\n### NavigationMenuContent\n\nDropdown panel content.\n\n### NavigationMenuLink\n\nDirect top-level links do not reserve space for a dropdown chevron. Every top-level item shares an 80px minimum width and a 28px minimum height, so typical labels remain the same size regardless of whether they have a chevron. Longer labels expand rather than truncate.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\nActive item indicator (visual underline).',
+      searchText: 'navigation menu top-level responsive header navigation menu. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api reference\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled open item value (empty string = closed)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial open item." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when open item changes." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "delay (ms) before opening on pointer enter." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\nlist of navigation items.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\ntrigger button for dropdown content.\n\n### navigationmenucontent\n\ndropdown panel content.\n\n### navigationmenulink\n\ndirect top-level links do not reserve space for a dropdown chevron. every top-level item shares an 80px minimum width and a 28px minimum height, so typical labels remain the same size regardless of whether they have a chevron. longer labels expand rather than truncate.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\nactive item indicator (visual underline).\n'
     },
     {
       slug: "components/pagination",
@@ -397,8 +415,8 @@ var docs_index_default = {
       title: "Segmented Control",
       description: "Linear set of mutually exclusive options.",
       category: "components",
-      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API Reference\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this option." }\n    ]}\n  />\n</div>',
-      searchText: 'segmented control linear set of mutually exclusive options. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api reference\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this option." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\nThe selected thumb is a sliding brand indicator. Until geometry is ready (`data-ready`), the selected item keeps a brand fill so the first paint is not blank. After the first layout, transform leads width slightly so the slide feels less mechanical.\n\n## API Reference\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this option." }\n    ]}\n  />\n</div>',
+      searchText: 'segmented control linear set of mutually exclusive options. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\nthe selected thumb is a sliding brand indicator. until geometry is ready (`data-ready`), the selected item keeps a brand fill so the first paint is not blank. after the first layout, transform leads width slightly so the slide feels less mechanical.\n\n## api reference\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this option." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "components/select",
@@ -580,6 +598,15 @@ var docs_index_default = {
       content: 'RefineUI themes resolve through semantic aliases (`--refineui-color-alias-*`). Toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## Rules\n\n- Consume **aliases** in UI (`background-brand`, `foreground-primary`), not raw palette steps\n- Component sizes stay linked to Foundation size steps\n- Do not invent theme-specific hex in product CSS\n\nSee [Color](/foundations/color/) for the visual token map.',
       searchText: 'theming light and dark surfaces from semantic color aliases. \nrefineui themes resolve through semantic aliases (`--refineui-color-alias-*`). toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## rules\n\n- consume **aliases** in ui (`background-brand`, `foreground-primary`), not raw palette steps\n- component sizes stay linked to foundation size steps\n- do not invent theme-specific hex in product css\n\nsee [color](/foundations/color/) for the visual token map.\n'
     },
+    {
+      slug: "foundations/blur",
+      href: "/foundations/blur/",
+      title: "Blur",
+      description: "Backdrop and surface blur steps for frosted chrome.",
+      category: "foundations",
+      content: 'Prefer **semantic roles** (`overlayScrim`, `surfaceFrost`) \u2014 CSS `--refineui-blur-overlay-scrim`. Do not invent a one-off `blur(2px)` in components.\n\n## Semantic roles\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Semantic blur roles"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "css", header: "CSS variable", mono: true },\n      { key: "foundation", header: "Foundation", mono: true },\n      { key: "use", header: "Use" },\n    ]}\n    rows={[\n      {\n        token: "overlayScrim",\n        css: "--refineui-blur-overlay-scrim",\n        foundation: "blur2",\n        use: "Dialog / Drawer scrim backdrop-filter",\n      },\n      {\n        token: "surfaceFrost",\n        css: "--refineui-blur-surface-frost",\n        foundation: "blur16",\n        use: "Menu / Dropdown / Select / Context Menu / SidebarPeek frosted panels",\n      },\n    ]}\n  />\n</div>\n\nPair the blur with translucent fill **`surfaceFrosted`** (`--refineui-color-alias-surface-frosted`). Opaque `backgroundPrimary` alone will hide the blur.\n\n## Foundation steps\n\nValue-based keys only \u2014 extend here before adding new semantic roles.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Foundation blur steps"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n    ]}\n    rows={[\n      { token: "blurNone", value: "0" },\n      { token: "blur2", value: "2px" },\n      { token: "blur4", value: "4px" },\n      { token: "blur8", value: "8px" },\n      { token: "blur12", value: "12px" },\n      { token: "blur16", value: "16px" },\n    ]}\n  />\n</div>\n\nScrim **tint** stays on `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Opacity](/foundations/opacity/) and [Color](/foundations/color/)). Blur is the filter radius only.\n\n`prefers-reduced-transparency: reduce` collapses Dialog/Drawer `backdrop-filter` to `none` in `refineui.css`.\n\n## Usage\n\n```css\n.menu-panel {\n  background: var(--refineui-color-alias-surface-frosted);\n  backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```',
+      searchText: 'blur backdrop and surface blur steps for frosted chrome. \nprefer **semantic roles** (`overlayscrim`, `surfacefrost`) \u2014 css `--refineui-blur-overlay-scrim`. do not invent a one-off `blur(2px)` in components.\n\n## semantic roles\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="semantic blur roles"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "css", header: "css variable", mono: true },\n      { key: "foundation", header: "foundation", mono: true },\n      { key: "use", header: "use" },\n    ]}\n    rows={[\n      {\n        token: "overlayscrim",\n        css: "--refineui-blur-overlay-scrim",\n        foundation: "blur2",\n        use: "dialog / drawer scrim backdrop-filter",\n      },\n      {\n        token: "surfacefrost",\n        css: "--refineui-blur-surface-frost",\n        foundation: "blur16",\n        use: "menu / dropdown / select / context menu / sidebarpeek frosted panels",\n      },\n    ]}\n  />\n</div>\n\npair the blur with translucent fill **`surfacefrosted`** (`--refineui-color-alias-surface-frosted`). opaque `backgroundprimary` alone will hide the blur.\n\n## foundation steps\n\nvalue-based keys only \u2014 extend here before adding new semantic roles.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="foundation blur steps"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n    ]}\n    rows={[\n      { token: "blurnone", value: "0" },\n      { token: "blur2", value: "2px" },\n      { token: "blur4", value: "4px" },\n      { token: "blur8", value: "8px" },\n      { token: "blur12", value: "12px" },\n      { token: "blur16", value: "16px" },\n    ]}\n  />\n</div>\n\nscrim **tint** stays on `surfaceoverlay` / `--refineui-overlay-backdrop` (see [opacity](/foundations/opacity/) and [color](/foundations/color/)). blur is the filter radius only.\n\n`prefers-reduced-transparency: reduce` collapses dialog/drawer `backdrop-filter` to `none` in `refineui.css`.\n\n## usage\n\n```css\n.menu-panel {\n  background: var(--refineui-color-alias-surface-frosted);\n  backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```\n'
+    },
     {
       slug: "foundations/border",
       href: "/foundations/border/",
@@ -604,8 +631,8 @@ var docs_index_default = {
       title: "Design tokens",
       description: "Semantic variables that power RefineUI \u2014 color, type, space, motion, and stacking.",
       category: "foundations",
-      content: 'Tokens are the single source for visual values. `@refineui/tokens` maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference **semantic names**, not palette hex or raw `px`.\n\n## Categories\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Token categories"\n    columns={[\n      { key: "category", header: "Category", hrefKey: "href" },\n      { key: "use", header: "Use for" },\n    ]}\n    rows={[\n      { category: "Color", href: "/foundations/color/", use: "Surfaces, text, borders, brand, status" },\n      { category: "Typography", href: "/foundations/typography/", use: "Text roles (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/foundations/spacing/", use: "Gaps, padding, margins" },\n      { category: "Sizing", href: "/foundations/sizing/", use: "Control heights, icons, layout steps" },\n      { category: "Radius", href: "/foundations/radius/", use: "Corner radii" },\n      { category: "Border", href: "/foundations/border/", use: "Stroke widths" },\n      { category: "Elevation", href: "/foundations/elevation/", use: "Shadows / depth" },\n      { category: "Opacity", href: "/foundations/opacity/", use: "Disabled wash, overlay helpers" },\n      { category: "Motion", href: "/foundations/motion/", use: "Duration, easing, press scale" },\n      { category: "Z-index", href: "/foundations/z-index/", use: "Overlay stacking" },\n    ]}\n  />\n</div>\n\n## Rules\n\n1. Prefer semantic aliases (`backgroundSurface`, `sizeMedium`, `fast`) over Foundation primitives in product code.\n2. If a value is missing, update Foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. Import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.',
-      searchText: 'design tokens semantic variables that power refineui \u2014 color, type, space, motion, and stacking. \ntokens are the single source for visual values. `@refineui/tokens` maps foundation scales to css variables and tailwind utilities. components and product ui should reference **semantic names**, not palette hex or raw `px`.\n\n## categories\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="token categories"\n    columns={[\n      { key: "category", header: "category", hrefkey: "href" },\n      { key: "use", header: "use for" },\n    ]}\n    rows={[\n      { category: "color", href: "/foundations/color/", use: "surfaces, text, borders, brand, status" },\n      { category: "typography", href: "/foundations/typography/", use: "text roles (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/foundations/spacing/", use: "gaps, padding, margins" },\n      { category: "sizing", href: "/foundations/sizing/", use: "control heights, icons, layout steps" },\n      { category: "radius", href: "/foundations/radius/", use: "corner radii" },\n      { category: "border", href: "/foundations/border/", use: "stroke widths" },\n      { category: "elevation", href: "/foundations/elevation/", use: "shadows / depth" },\n      { category: "opacity", href: "/foundations/opacity/", use: "disabled wash, overlay helpers" },\n      { category: "motion", href: "/foundations/motion/", use: "duration, easing, press scale" },\n      { category: "z-index", href: "/foundations/z-index/", use: "overlay stacking" },\n    ]}\n  />\n</div>\n\n## rules\n\n1. prefer semantic aliases (`backgroundsurface`, `sizemedium`, `fast`) over foundation primitives in product code.\n2. if a value is missing, update foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.\n'
+      content: 'Tokens are the single source for visual values. `@refineui/tokens` maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference **semantic names**, not palette hex or raw `px`.\n\n## Categories\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Token categories"\n    columns={[\n      { key: "category", header: "Category", hrefKey: "href" },\n      { key: "use", header: "Use for" },\n    ]}\n    rows={[\n      { category: "Color", href: "/foundations/color/", use: "Surfaces, text, borders, brand, status" },\n      { category: "Typography", href: "/foundations/typography/", use: "Text roles (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/foundations/spacing/", use: "Gaps, padding, margins" },\n      { category: "Sizing", href: "/foundations/sizing/", use: "Control heights, icons, layout steps" },\n      { category: "Radius", href: "/foundations/radius/", use: "Corner radii" },\n      { category: "Border", href: "/foundations/border/", use: "Stroke widths" },\n      { category: "Elevation", href: "/foundations/elevation/", use: "Shadows / depth" },\n      { category: "Opacity", href: "/foundations/opacity/", use: "Disabled wash, overlay helpers" },\n      { category: "Blur", href: "/foundations/blur/", use: "Backdrop / surface frosted blur" },\n      { category: "Motion", href: "/foundations/motion/", use: "Duration, easing, press scale" },\n      { category: "Z-index", href: "/foundations/z-index/", use: "Overlay stacking" },\n    ]}\n  />\n</div>\n\n## Rules\n\n1. Prefer semantic aliases (`backgroundSurface`, `sizeMedium`, `fast`) over Foundation primitives in product code.\n2. If a value is missing, update Foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. Import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.',
+      searchText: 'design tokens semantic variables that power refineui \u2014 color, type, space, motion, and stacking. \ntokens are the single source for visual values. `@refineui/tokens` maps foundation scales to css variables and tailwind utilities. components and product ui should reference **semantic names**, not palette hex or raw `px`.\n\n## categories\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="token categories"\n    columns={[\n      { key: "category", header: "category", hrefkey: "href" },\n      { key: "use", header: "use for" },\n    ]}\n    rows={[\n      { category: "color", href: "/foundations/color/", use: "surfaces, text, borders, brand, status" },\n      { category: "typography", href: "/foundations/typography/", use: "text roles (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/foundations/spacing/", use: "gaps, padding, margins" },\n      { category: "sizing", href: "/foundations/sizing/", use: "control heights, icons, layout steps" },\n      { category: "radius", href: "/foundations/radius/", use: "corner radii" },\n      { category: "border", href: "/foundations/border/", use: "stroke widths" },\n      { category: "elevation", href: "/foundations/elevation/", use: "shadows / depth" },\n      { category: "opacity", href: "/foundations/opacity/", use: "disabled wash, overlay helpers" },\n      { category: "blur", href: "/foundations/blur/", use: "backdrop / surface frosted blur" },\n      { category: "motion", href: "/foundations/motion/", use: "duration, easing, press scale" },\n      { category: "z-index", href: "/foundations/z-index/", use: "overlay stacking" },\n    ]}\n  />\n</div>\n\n## rules\n\n1. prefer semantic aliases (`backgroundsurface`, `sizemedium`, `fast`) over foundation primitives in product code.\n2. if a value is missing, update foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.\n'
     },
     {
       slug: "foundations/elevation",
@@ -613,8 +640,8 @@ var docs_index_default = {
       title: "Elevation",
       description: "Shadow recipes for cards, popovers, and floating surfaces.",
       category: "foundations",
-      content: 'Each elevation step (`--refineui-elevation-N`) automatically switches between light and dark values based on the active theme. Use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS variables"\n    columns={[\n      { key: "use", header: "Use" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "Theme-aware (recommended)", css: "--refineui-elevation-8" },\n      { use: "Force light", css: "--refineui-elevation-8light" },\n      { use: "Force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## Usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```',
-      searchText: 'elevation shadow recipes for cards, popovers, and floating surfaces. \neach elevation step (`--refineui-elevation-n`) automatically switches between light and dark values based on the active theme. use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css variables"\n    columns={[\n      { key: "use", header: "use" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "theme-aware (recommended)", css: "--refineui-elevation-8" },\n      { use: "force light", css: "--refineui-elevation-8light" },\n      { use: "force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```\n'
+      content: 'Each Foundation step (`--refineui-elevation-N`) automatically switches between light and dark values based on the active theme. Components should prefer the intent-level aliases below, which remain mapped to those Foundation steps. Use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS variables"\n    columns={[\n      { key: "use", header: "Use" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "Surface / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n      { use: "Overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n      { use: "Foundation step", css: "--refineui-elevation-8" },\n      { use: "Force light", css: "--refineui-elevation-8light" },\n      { use: "Force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## Usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-floating);\n}\n```',
+      searchText: 'elevation shadow recipes for cards, popovers, and floating surfaces. \neach foundation step (`--refineui-elevation-n`) automatically switches between light and dark values based on the active theme. components should prefer the intent-level aliases below, which remain mapped to those foundation steps. use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css variables"\n    columns={[\n      { key: "use", header: "use" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "surface / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n      { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n      { use: "foundation step", css: "--refineui-elevation-8" },\n      { use: "force light", css: "--refineui-elevation-8light" },\n      { use: "force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-floating);\n}\n```\n'
     },
     {
       slug: "foundations/index",
@@ -649,8 +676,8 @@ var docs_index_default = {
       title: "Opacity",
       description: "Shared opacity steps and overlay helpers.",
       category: "foundations",
-      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Opacity tokens"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n      { key: "use", header: "Use" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "Default" },\n      { token: "opacityDisabled", value: "0.5", use: "Disabled wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\nPage dimmers use `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## Usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
-      searchText: 'opacity shared opacity steps and overlay helpers. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="opacity tokens"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n      { key: "use", header: "use" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "default" },\n      { token: "opacitydisabled", value: "0.5", use: "disabled wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\npage dimmers use `surfaceoverlay` / `--refineui-overlay-backdrop` (see [color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
+      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Opacity tokens"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n      { key: "use", header: "Use" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "Default" },\n      { token: "opacityDisabled", value: "0.5", use: "Disabled wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\nPage dimmers use `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Color](/foundations/color/)), not a custom alpha. Backdrop **blur** radius lives under [Blur](/foundations/blur/) (`overlayScrim`).\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## Usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
+      searchText: 'opacity shared opacity steps and overlay helpers. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="opacity tokens"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n      { key: "use", header: "use" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "default" },\n      { token: "opacitydisabled", value: "0.5", use: "disabled wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\npage dimmers use `surfaceoverlay` / `--refineui-overlay-backdrop` (see [color](/foundations/color/)), not a custom alpha. backdrop **blur** radius lives under [blur](/foundations/blur/) (`overlayscrim`).\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
     },
     {
       slug: "foundations/radius",
@@ -811,8 +838,8 @@ var docs_index_default = {
       title: "Breadcrumb",
       description: "\uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### BreadcrumbList\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### BreadcrumbItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### BreadcrumbLink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### BreadcrumbPage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### BreadcrumbSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### BreadcrumbEllipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.',
-      searchText: 'breadcrumb \uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### breadcrumblist\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### breadcrumbitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### breadcrumblink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### breadcrumbpage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### breadcrumbseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### breadcrumbellipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.\n\n'
+      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### BreadcrumbList\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### BreadcrumbItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### BreadcrumbLink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### BreadcrumbPage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### BreadcrumbSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### BreadcrumbEllipsis\n\n\uD45C\uC2DC\uC6A9 \uC811\uD798 \uB9C8\uCEE4(\uC815\uC0AC\uAC01 \uC544\uC774\uCF58 \uCE69, \uBE44\uC778\uD130\uB799\uD2F0\uBE0C).\n\n### BreadcrumbEllipsisTrigger\n\n\uC778\uD130\uB799\uD2F0\uBE0C \uC811\uD798 \uCEE8\uD2B8\uB864 \u2014 ghost icon `Button`(`layout="icon"` `size="sm"`). ellipsis\uAC00 \uBA54\uB274\uB97C \uC5F4\uAC70\uB098 trail\uC744 \uD3BC\uCE60 \uB54C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.',
+      searchText: 'breadcrumb \uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### breadcrumblist\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### breadcrumbitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### breadcrumblink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### breadcrumbpage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### breadcrumbseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### breadcrumbellipsis\n\n\uD45C\uC2DC\uC6A9 \uC811\uD798 \uB9C8\uCEE4(\uC815\uC0AC\uAC01 \uC544\uC774\uCF58 \uCE69, \uBE44\uC778\uD130\uB799\uD2F0\uBE0C).\n\n### breadcrumbellipsistrigger\n\n\uC778\uD130\uB799\uD2F0\uBE0C \uC811\uD798 \uCEE8\uD2B8\uB864 \u2014 ghost icon `button`(`layout="icon"` `size="sm"`). ellipsis\uAC00 \uBA54\uB274\uB97C \uC5F4\uAC70\uB098 trail\uC744 \uD3BC\uCE60 \uB54C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n'
     },
     {
       slug: "ko/components/bubble",
@@ -874,8 +901,8 @@ var docs_index_default = {
       title: "Chart",
       description: "\uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartBody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### ChartContent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### ChartPlot\n\nSVG \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### ChartBars\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showArea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### ChartLegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
-      searchText: 'chart \uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartbody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### chartcontent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### chartplot\n\nsvg \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### chartbars\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showarea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### chartlegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartBody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### ChartContent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### ChartPlot\n\nSVG \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### ChartBars\n\n\uB9C9\uB300 \uC0C1\uB2E8\uC740 `roundedXLarge`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4(\uD3ED/\uB192\uC774\uC5D0 \uB9DE\uAC8C \uD074\uB7A8\uD504).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showArea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### ChartLegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'chart \uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartbody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### chartcontent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### chartplot\n\nsvg \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### chartbars\n\n\uB9C9\uB300 \uC0C1\uB2E8\uC740 `roundedxlarge`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4(\uD3ED/\uB192\uC774\uC5D0 \uB9DE\uAC8C \uD074\uB7A8\uD504).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showarea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### chartlegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "ko/components/checkbox",
@@ -883,8 +910,17 @@ var docs_index_default = {
       title: "Checkbox",
       description: "\uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
-      searchText: 'checkbox \uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n\uAE30\uBCF8(\uC0AC\uAC01)\uC740 `roundedLarge`, `circular` \uBCC0\uD615\uC740 `roundedCircle`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'checkbox \uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n\uAE30\uBCF8(\uC0AC\uAC01)\uC740 `roundedlarge`, `circular` \uBCC0\uD615\uC740 `roundedcircle`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/collapsible",
+      href: "/ko/components/collapsible/",
+      title: "Collapsible",
+      description: "\uD2B8\uB9AC\uAC70\uB85C \uC139\uC158\uC744 \uBCF4\uC774\uAC70\uB098 \uC228\uAE41\uB2C8\uB2E4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CollapsiblePreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Collapsible defaultOpen>\n  <CollapsibleTrigger>Details</CollapsibleTrigger>\n  <CollapsibleContent>\n    Hidden until the trigger opens it.\n  </CollapsibleContent>\n</Collapsible>\n```\n\n`open`\uACFC `onOpenChange`\uB85C \uC81C\uC5B4\uD615\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. `CollapsibleTrigger`\uB294 `asChild`\uB97C \uBC1B\uC544 \uC790\uC2DD\uC5D0 props\uB97C \uBCD1\uD569\uD569\uB2C8\uB2E4. \uB2EB\uD78C content\uB294 \uB9C8\uC6B4\uD2B8\uB41C \uCC44 \uC228\uACA8\uC9D1\uB2C8\uB2E4.',
+      searchText: 'collapsible \uD2B8\uB9AC\uAC70\uB85C \uC139\uC158\uC744 \uBCF4\uC774\uAC70\uB098 \uC228\uAE41\uB2C8\uB2E4. <div class="not-content my-6">\n  <collapsiblepreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<collapsible defaultopen>\n  <collapsibletrigger>details</collapsibletrigger>\n  <collapsiblecontent>\n    hidden until the trigger opens it.\n  </collapsiblecontent>\n</collapsible>\n```\n\n`open`\uACFC `onopenchange`\uB85C \uC81C\uC5B4\uD615\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. `collapsibletrigger`\uB294 `aschild`\uB97C \uBC1B\uC544 \uC790\uC2DD\uC5D0 props\uB97C \uBCD1\uD569\uD569\uB2C8\uB2E4. \uB2EB\uD78C content\uB294 \uB9C8\uC6B4\uD2B8\uB41C \uCC44 \uC228\uACA8\uC9D1\uB2C8\uB2E4.\n'
     },
     {
       slug: "ko/components/command",
@@ -904,6 +940,15 @@ var docs_index_default = {
       content: '`Container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <ContainerPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Container padding="sizeXXLarge">\n  <Stack gap="sizeLarge">\n    <Text variant="headingMd" as="h1">Page title</Text>\n    <Text variant="bodyMd">Body</Text>\n  </Stack>\n</Container>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n    ]}\n  />\n</div>',
       searchText: 'container \uD1A0\uD070 \uD328\uB529\uACFC \uC804\uCCB4 max width\uB97C \uAC00\uC9C4 \uAC00\uC6B4\uB370 \uC815\uB82C \uD398\uC774\uC9C0 \uC178. `container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <containerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<container padding="sizexxlarge">\n  <stack gap="sizelarge">\n    <text variant="headingmd" as="h1">page title</text>\n    <text variant="bodymd">body</text>\n  </stack>\n</container>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n    ]}\n  />\n</div>\n'
     },
+    {
+      slug: "ko/components/context-menu",
+      href: "/ko/components/context-menu/",
+      title: "Context Menu",
+      description: "\uC6B0\uD074\uB9AD\uC73C\uB85C \uC5F4\uB9AC\uB294 \uBA54\uB274\uC785\uB2C8\uB2E4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ContextMenuPreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<ContextMenu>\n  <ContextMenuTrigger asChild>\n    <div>Right click</div>\n  </ContextMenuTrigger>\n  <ContextMenuPortal>\n    <ContextMenuContent>\n      <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>\n      <ContextMenuSeparator />\n      <ContextMenuSub>\n        <ContextMenuSubTrigger>More</ContextMenuSubTrigger>\n        <ContextMenuPortal>\n          <ContextMenuSubContent>\n            <ContextMenuItem>Rename</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuPortal>\n      </ContextMenuSub>\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</ContextMenu>\n```\n\n`onSelect`\uB294 \uC774\uBCA4\uD2B8\uB97C \uBC1B\uC2B5\uB2C8\uB2E4. `preventDefault()`\uB97C \uD638\uCD9C\uD558\uBA74 \uBA54\uB274\uAC00 \uC5F4\uB9B0 \uCC44\uB85C \uC720\uC9C0\uB429\uB2C8\uB2E4. disabled \uD56D\uBAA9\uC740 \uC120\uD0DD\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.',
+      searchText: 'context menu \uC6B0\uD074\uB9AD\uC73C\uB85C \uC5F4\uB9AC\uB294 \uBA54\uB274\uC785\uB2C8\uB2E4. <div class="not-content my-6">\n  <contextmenupreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<contextmenu>\n  <contextmenutrigger aschild>\n    <div>right click</div>\n  </contextmenutrigger>\n  <contextmenuportal>\n    <contextmenucontent>\n      <contextmenuitem onselect={() => copy()}>copy</contextmenuitem>\n      <contextmenuseparator />\n      <contextmenusub>\n        <contextmenusubtrigger>more</contextmenusubtrigger>\n        <contextmenuportal>\n          <contextmenusubcontent>\n            <contextmenuitem>rename</contextmenuitem>\n          </contextmenusubcontent>\n        </contextmenuportal>\n      </contextmenusub>\n    </contextmenucontent>\n  </contextmenuportal>\n</contextmenu>\n```\n\n`onselect`\uB294 \uC774\uBCA4\uD2B8\uB97C \uBC1B\uC2B5\uB2C8\uB2E4. `preventdefault()`\uB97C \uD638\uCD9C\uD558\uBA74 \uBA54\uB274\uAC00 \uC5F4\uB9B0 \uCC44\uB85C \uC720\uC9C0\uB429\uB2C8\uB2E4. disabled \uD56D\uBAA9\uC740 \uC120\uD0DD\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n'
+    },
     {
       slug: "ko/components/dialog",
       href: "/ko/components/dialog/",
@@ -982,8 +1027,8 @@ var docs_index_default = {
       title: "Input OTP",
       description: "\uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 OTP \uBB38\uC790\uC5F4." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
-      searchText: 'input otp \uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 otp \uBB38\uC790\uC5F4." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\n\uBE48 \uC2AC\uB86F\uC740 Skeleton\uACFC \uAC19\uC740 opacity pulse\uB97C \uC4F0\uBA70(index \uC2DC\uCC28), \uC785\uB825\xB7\uD3EC\uCEE4\uC2A4\xB7disabled\xB7`prefers-reduced-motion`\uC5D0\uC11C\uB294 \uBA48\uCDA5\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 OTP \uBB38\uC790\uC5F4." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'input otp \uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\n\uBE48 \uC2AC\uB86F\uC740 skeleton\uACFC \uAC19\uC740 opacity pulse\uB97C \uC4F0\uBA70(index \uC2DC\uCC28), \uC785\uB825\xB7\uD3EC\uCEE4\uC2A4\xB7disabled\xB7`prefers-reduced-motion`\uC5D0\uC11C\uB294 \uBA48\uCDA5\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 otp \uBB38\uC790\uC5F4." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "ko/components/input",
@@ -1018,8 +1063,8 @@ var docs_index_default = {
       title: "Menu",
       description: "\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuSection>\n        <MenuItem\n          startIcon={<Icon />}\n          endIcon={<Badge />}\n          description="Description text"\n          shortcut="\u2318N"\n        >\n          Menu Item\n        </MenuItem>\n        <MenuSubTrigger>Submenu</MenuSubTrigger>\n        <MenuSubContent>\n          <MenuItem>Submenu Item</MenuItem>\n        </MenuSubContent>\n      </MenuSection>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### MenuPopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### MenuList\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuSection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### MenuDivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### MenuSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
-      searchText: 'menu \uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menusection>\n        <menuitem\n          starticon={<icon />}\n          endicon={<badge />}\n          description="description text"\n          shortcut="\u2318n"\n        >\n          menu item\n        </menuitem>\n        <menusubtrigger>submenu</menusubtrigger>\n        <menusubcontent>\n          <menuitem>submenu item</menuitem>\n        </menusubcontent>\n      </menusection>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### menupopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### menulist\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menusection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### menudivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### menusubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menusubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n\n'
+      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuLabel>File</MenuLabel>\n      <MenuItem\n        startIcon={<Icon />}\n        endIcon={<Badge />}\n        description="Description text"\n        shortcut="\u2318N"\n      >\n        Menu Item\n      </MenuItem>\n      <MenuSubTrigger>Submenu</MenuSubTrigger>\n      <MenuSubContent>\n        <MenuItem>Submenu Item</MenuItem>\n      </MenuSubContent>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### MenuPopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### MenuList\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuLabel\n\n\uAD00\uB828 \uD56D\uBAA9 \uADF8\uB8F9\uC758 \uD5E4\uB529 \uB77C\uBCA8.\n\n### MenuDivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### MenuSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
+      searchText: 'menu \uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menulabel>file</menulabel>\n      <menuitem\n        starticon={<icon />}\n        endicon={<badge />}\n        description="description text"\n        shortcut="\u2318n"\n      >\n        menu item\n      </menuitem>\n      <menusubtrigger>submenu</menusubtrigger>\n      <menusubcontent>\n        <menuitem>submenu item</menuitem>\n      </menusubcontent>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### menupopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### menulist\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menulabel\n\n\uAD00\uB828 \uD56D\uBAA9 \uADF8\uB8F9\uC758 \uD5E4\uB529 \uB77C\uBCA8.\n\n### menudivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### menusubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menusubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n'
     },
     {
       slug: "ko/components/navigation-menu",
@@ -1027,8 +1072,8 @@ var docs_index_default = {
       title: "Navigation Menu",
       description: "\uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### NavigationMenuContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### NavigationMenuLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).',
-      searchText: 'navigation menu \uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### navigationmenucontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### navigationmenulink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).\n\n'
+      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### NavigationMenuContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### NavigationMenuLink\n\n\uC0C1\uB2E8 \uC9C1\uC811 \uB9C1\uD06C\uC5D0\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uD654\uC0B4\uD45C\uC6A9 \uBE48 \uACF5\uAC04\uC744 \uB0A8\uAE30\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uBAA8\uB4E0 \uC0C1\uB2E8 \uD56D\uBAA9\uC740 \uCD5C\uC18C 80px \uB108\uBE44\uC640 28px \uB192\uC774\uB97C \uACF5\uC720\uD558\uBBC0\uB85C, \uC77C\uBC18\uC801\uC778 \uB808\uC774\uBE14 \uAE38\uC774\uC5D0\uC11C\uB294 chevron \uC720\uBB34\uC640 \uAD00\uACC4\uC5C6\uC774 \uAC19\uC740 \uD06C\uAE30\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4. \uB354 \uAE34 \uB808\uC774\uBE14\uC740 \uC798\uB9AC\uC9C0 \uC54A\uB3C4\uB85D \uD655\uC7A5\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).',
+      searchText: 'navigation menu \uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### navigationmenucontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### navigationmenulink\n\n\uC0C1\uB2E8 \uC9C1\uC811 \uB9C1\uD06C\uC5D0\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uD654\uC0B4\uD45C\uC6A9 \uBE48 \uACF5\uAC04\uC744 \uB0A8\uAE30\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uBAA8\uB4E0 \uC0C1\uB2E8 \uD56D\uBAA9\uC740 \uCD5C\uC18C 80px \uB108\uBE44\uC640 28px \uB192\uC774\uB97C \uACF5\uC720\uD558\uBBC0\uB85C, \uC77C\uBC18\uC801\uC778 \uB808\uC774\uBE14 \uAE38\uC774\uC5D0\uC11C\uB294 chevron \uC720\uBB34\uC640 \uAD00\uACC4\uC5C6\uC774 \uAC19\uC740 \uD06C\uAE30\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4. \uB354 \uAE34 \uB808\uC774\uBE14\uC740 \uC798\uB9AC\uC9C0 \uC54A\uB3C4\uB85D \uD655\uC7A5\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).\n'
     },
     {
       slug: "ko/components/pagination",
@@ -1108,8 +1153,8 @@ var docs_index_default = {
       title: "Segmented Control",
       description: "\uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569.",
       category: "guides",
-      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
-      searchText: 'segmented control \uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n\uC120\uD0DD thumb\uB294 \uC2AC\uB77C\uC774\uB529 brand indicator\uC785\uB2C8\uB2E4. geometry\uAC00 \uC900\uBE44\uB418\uAE30 \uC804(`data-ready`)\uC5D0\uB294 selected item\uC774 brand fill\uC744 \uC720\uC9C0\uD574 \uCCAB \uD398\uC778\uD2B8\uAC00 \uBE44\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uCCAB \uB808\uC774\uC544\uC6C3 \uC774\uD6C4\uC5D0\uB294 transform\uC774 width\uBCF4\uB2E4 \uC870\uAE08 \uC55E\uC11C \uC2AC\uB77C\uC774\uB4DC\uAC00 \uB35C \uAE30\uACC4\uC801\uC73C\uB85C \uBCF4\uC785\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'segmented control \uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n\uC120\uD0DD thumb\uB294 \uC2AC\uB77C\uC774\uB529 brand indicator\uC785\uB2C8\uB2E4. geometry\uAC00 \uC900\uBE44\uB418\uAE30 \uC804(`data-ready`)\uC5D0\uB294 selected item\uC774 brand fill\uC744 \uC720\uC9C0\uD574 \uCCAB \uD398\uC778\uD2B8\uAC00 \uBE44\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uCCAB \uB808\uC774\uC544\uC6C3 \uC774\uD6C4\uC5D0\uB294 transform\uC774 width\uBCF4\uB2E4 \uC870\uAE08 \uC55E\uC11C \uC2AC\uB77C\uC774\uB4DC\uAC00 \uB35C \uAE30\uACC4\uC801\uC73C\uB85C \uBCF4\uC785\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
     },
     {
       slug: "ko/components/select",
@@ -1291,6 +1336,15 @@ var docs_index_default = {
       content: 'RefineUI \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- UI\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 Foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 CSS\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.',
       searchText: '\uD14C\uB9C8 \uC2DC\uB9E8\uD2F1 \uCEEC\uB7EC \uBCC4\uCE6D\uC73C\uB85C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uC11C\uD53C\uC2A4\uB97C \uAD6C\uC131\uD569\uB2C8\uB2E4. \nrefineui \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- ui\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 css\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.\n'
     },
+    {
+      slug: "ko/foundations/blur",
+      href: "/ko/foundations/blur/",
+      title: "Blur",
+      description: "\uD504\uB85C\uC2A4\uD2F0\uB4DC \uD06C\uB86C\uC6A9 backdrop / surface blur \uC2A4\uD15D.",
+      category: "guides",
+      content: '**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`overlayScrim`, `surfaceFrost`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 CSS `--refineui-blur-overlay-scrim`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC77C\uD68C\uC131 `blur(2px)`\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uC2DC\uB9E8\uD2F1 blur \uC5ED\uD560"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "css", header: "CSS \uBCC0\uC218", mono: true },\n      { key: "foundation", header: "Foundation", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      {\n        token: "overlayScrim",\n        css: "--refineui-blur-overlay-scrim",\n        foundation: "blur2",\n        use: "Dialog / Drawer scrim backdrop-filter",\n      },\n      {\n        token: "surfaceFrost",\n        css: "--refineui-blur-surface-frost",\n        foundation: "blur16",\n        use: "Menu / Dropdown / Select / Context Menu / SidebarPeek frosted \uD328\uB110",\n      },\n    ]}\n  />\n</div>\n\nBlur\uB294 \uBC18\uD22C\uBA85 fill **`surfaceFrosted`**(`--refineui-color-alias-surface-frosted`)\uC640 \uD568\uAED8 \uC501\uB2C8\uB2E4. \uBD88\uD22C\uBA85 `backgroundPrimary`\uB9CC \uC788\uC73C\uBA74\uBA74 blur\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## Foundation \uC2A4\uD15D\n\n\uAC12 \uAE30\uBC18 \uD0A4\uB9CC \u2014 \uC0C8 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uCD94\uAC00\uD558\uAE30 \uC804\uC5D0 \uC5EC\uAE30\uB97C \uD655\uC7A5\uD558\uC138\uC694.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Foundation blur \uC2A4\uD15D"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "blurNone", value: "0" },\n      { token: "blur2", value: "2px" },\n      { token: "blur4", value: "4px" },\n      { token: "blur8", value: "8px" },\n      { token: "blur12", value: "12px" },\n      { token: "blur16", value: "16px" },\n    ]}\n  />\n</div>\n\nScrim **\uD2F4\uD2B8**\uB294 `surfaceOverlay` / `--refineui-overlay-backdrop`\uC5D0 \uB461\uB2C8\uB2E4 ([\uD22C\uBA85\uB3C4](/ko/foundations/opacity/), [\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). Blur\uB294 \uD544\uD130 \uBC18\uACBD\uB9CC \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n`prefers-reduced-transparency: reduce`\uC77C \uB54C Dialog/Drawer `backdrop-filter`\uB294 `refineui.css`\uC5D0\uC11C `none`\uC73C\uB85C \uC811\uD799\uB2C8\uB2E4.\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu-panel {\n  background: var(--refineui-color-alias-surface-frosted);\n  backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```',
+      searchText: 'blur \uD504\uB85C\uC2A4\uD2F0\uB4DC \uD06C\uB86C\uC6A9 backdrop / surface blur \uC2A4\uD15D. \n**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`overlayscrim`, `surfacefrost`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 css `--refineui-blur-overlay-scrim`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC77C\uD68C\uC131 `blur(2px)`\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uC2DC\uB9E8\uD2F1 blur \uC5ED\uD560"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "css", header: "css \uBCC0\uC218", mono: true },\n      { key: "foundation", header: "foundation", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      {\n        token: "overlayscrim",\n        css: "--refineui-blur-overlay-scrim",\n        foundation: "blur2",\n        use: "dialog / drawer scrim backdrop-filter",\n      },\n      {\n        token: "surfacefrost",\n        css: "--refineui-blur-surface-frost",\n        foundation: "blur16",\n        use: "menu / dropdown / select / context menu / sidebarpeek frosted \uD328\uB110",\n      },\n    ]}\n  />\n</div>\n\nblur\uB294 \uBC18\uD22C\uBA85 fill **`surfacefrosted`**(`--refineui-color-alias-surface-frosted`)\uC640 \uD568\uAED8 \uC501\uB2C8\uB2E4. \uBD88\uD22C\uBA85 `backgroundprimary`\uB9CC \uC788\uC73C\uBA74\uBA74 blur\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## foundation \uC2A4\uD15D\n\n\uAC12 \uAE30\uBC18 \uD0A4\uB9CC \u2014 \uC0C8 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uCD94\uAC00\uD558\uAE30 \uC804\uC5D0 \uC5EC\uAE30\uB97C \uD655\uC7A5\uD558\uC138\uC694.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="foundation blur \uC2A4\uD15D"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "blurnone", value: "0" },\n      { token: "blur2", value: "2px" },\n      { token: "blur4", value: "4px" },\n      { token: "blur8", value: "8px" },\n      { token: "blur12", value: "12px" },\n      { token: "blur16", value: "16px" },\n    ]}\n  />\n</div>\n\nscrim **\uD2F4\uD2B8**\uB294 `surfaceoverlay` / `--refineui-overlay-backdrop`\uC5D0 \uB461\uB2C8\uB2E4 ([\uD22C\uBA85\uB3C4](/ko/foundations/opacity/), [\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). blur\uB294 \uD544\uD130 \uBC18\uACBD\uB9CC \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n`prefers-reduced-transparency: reduce`\uC77C \uB54C dialog/drawer `backdrop-filter`\uB294 `refineui.css`\uC5D0\uC11C `none`\uC73C\uB85C \uC811\uD799\uB2C8\uB2E4.\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu-panel {\n  background: var(--refineui-color-alias-surface-frosted);\n  backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```\n'
+    },
     {
       slug: "ko/foundations/border",
       href: "/ko/foundations/border/",
@@ -1315,8 +1369,8 @@ var docs_index_default = {
       title: "\uB514\uC790\uC778 \uD1A0\uD070",
       description: "RefineUI\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9.",
       category: "guides",
-      content: '\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 Foundation \uC2A4\uCF00\uC77C\uC744 CSS \uBCC0\uC218\uC640 Tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 UI\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefKey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, Border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "Sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "Radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "Border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "Elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "Z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 Foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundSurface`, `sizeMedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 Foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.',
-      searchText: '\uB514\uC790\uC778 \uD1A0\uD070 refineui\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9. \n\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 foundation \uC2A4\uCF00\uC77C\uC744 css \uBCC0\uC218\uC640 tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 ui\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefkey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundsurface`, `sizemedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.\n'
+      content: '\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 Foundation \uC2A4\uCF00\uC77C\uC744 CSS \uBCC0\uC218\uC640 Tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 UI\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefKey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, Border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "Sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "Radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "Border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "Elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "Blur", href: "/ko/foundations/blur/", use: "Backdrop / surface frosted blur" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "Z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 Foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundSurface`, `sizeMedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 Foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.',
+      searchText: '\uB514\uC790\uC778 \uD1A0\uD070 refineui\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9. \n\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 foundation \uC2A4\uCF00\uC77C\uC744 css \uBCC0\uC218\uC640 tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 ui\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefkey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "blur", href: "/ko/foundations/blur/", use: "backdrop / surface frosted blur" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundsurface`, `sizemedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.\n'
     },
     {
       slug: "ko/foundations/elevation",
@@ -1324,8 +1378,8 @@ var docs_index_default = {
       title: "Elevation",
       description: "\uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C.",
       category: "guides",
-      content: '\uAC01 Elevation \uC2A4\uD15D(`--refineui-elevation-N`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "\uD14C\uB9C8 \uC778\uC2DD (\uAD8C\uC7A5)", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```',
-      searchText: 'elevation \uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C. \n\uAC01 elevation \uC2A4\uD15D(`--refineui-elevation-n`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "\uD14C\uB9C8 \uC778\uC2DD (\uAD8C\uC7A5)", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```\n'
+      content: '\uAC01 Foundation \uC2A4\uD15D(`--refineui-elevation-N`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB294 Foundation \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC544\uB798 \uC758\uB3C4\uD615 alias\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "\uC11C\uD53C\uC2A4 / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n      { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n      { use: "Foundation \uC2A4\uD15D", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-floating);\n}\n```',
+      searchText: 'elevation \uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C. \n\uAC01 foundation \uC2A4\uD15D(`--refineui-elevation-n`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB294 foundation \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC544\uB798 \uC758\uB3C4\uD615 alias\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "\uC11C\uD53C\uC2A4 / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n      { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n      { use: "foundation \uC2A4\uD15D", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-floating);\n}\n```\n'
     },
     {
       slug: "ko/foundations/index",
@@ -1360,8 +1414,8 @@ var docs_index_default = {
       title: "\uD22C\uBA85\uB3C4",
       description: "\uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C.",
       category: "guides",
-      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacityDisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceOverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
-      searchText: '\uD22C\uBA85\uB3C4 \uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacitydisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceoverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
+      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacityDisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 `surfaceOverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). Backdrop **blur** \uBC18\uACBD\uC740 [Blur](/ko/foundations/blur/)(`overlayScrim`)\uC5D0 \uC788\uC2B5\uB2C8\uB2E4.\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
+      searchText: '\uD22C\uBA85\uB3C4 \uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacitydisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 `surfaceoverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). backdrop **blur** \uBC18\uACBD\uC740 [blur](/ko/foundations/blur/)(`overlayscrim`)\uC5D0 \uC788\uC2B5\uB2C8\uB2E4.\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
     },
     {
       slug: "ko/foundations/radius",

package/lib/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ import {
   listTokenCategories,
   normalizeSlug,
   searchDocs
-} from "./chunk-YVPEZFXV.js";
+} from "./chunk-TAJF3ATB.js";
 export {
   DESIGN_RULES,
   getDesignMd,

package/lib/server.js CHANGED Viewed

@@ -9,7 +9,7 @@ import {
   listTokenCategories,
   normalizeSlug,
   searchDocs
-} from "./chunk-YVPEZFXV.js";
+} from "./chunk-TAJF3ATB.js";
 // src/server.ts
 import { McpServer } from "@modelcontextprotocol/server";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/mcp",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "MCP server for RefineUI docs, components, and design-system rules",
   "type": "module",
   "license": "MIT",
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/server": "2.0.0",
-    "@refineui/doctor": "0.1.0",
-    "@refineui/tokens": "1.0.0",
+    "@refineui/doctor": "0.1.1",
+    "@refineui/tokens": "1.0.2",
     "zod": "4.5.4"
   },
   "devDependencies": {