@santi020k/lumen-astro 1.1.0 → 1.3.0

package/README.md

@@ -60,6 +60,88 @@ incremental migrations, but new code should keep native behavior and visual styl
 <NativeSelect size={8} visualSize="lg" />
 ```
 
+## Compound interactive components
+
+Popover, dropdown menu, tabs, and tooltip parts expose the DOM and ARIA contracts consumed by the
+shared progressive-enhancement runtime. Prefer these parts over recreating roles and `data-ui-*`
+attributes by hand.
+
+```astro
+---
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Popover,
+  PopoverPanel,
+  PopoverTrigger,
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent
+} from '@santi020k/lumen-astro'
+---
+
+<DropdownMenu>
+  <DropdownMenuTrigger>Download</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>macOS</DropdownMenuItem>
+    <DropdownMenuItem>Windows</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem disabled status="Soon">Android</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+
+<Popover>
+  <PopoverTrigger>Filters</PopoverTrigger>
+  <PopoverPanel>Filter controls</PopoverPanel>
+</Popover>
+
+<Tabs initialValue="preview">
+  <TabsList aria-label="Workspace view">
+    <TabsTrigger value="preview">Preview</TabsTrigger>
+    <TabsTrigger value="code">Code</TabsTrigger>
+  </TabsList>
+  <TabsPanel value="preview">Rendered result</TabsPanel>
+  <TabsPanel value="code">Source code</TabsPanel>
+</Tabs>
+
+<Tooltip>
+  <Button aria-label="Save changes">Save</Button>
+  <TooltipContent>Save changes</TooltipContent>
+</Tooltip>
+```
+
+## Context navigation
+
+Use `ContextNavigation` below a primary header when the available links change with a selected
+platform, product, or workspace. Put the stable selector or identity in the `context` slot and one
+independently named `NavigationMenu` in the default slot. Long link sets scroll horizontally.
+
+```astro
+---
+import { ContextNavigation, NativeSelect, NavigationMenu } from '@santi020k/lumen-astro'
+---
+
+<ContextNavigation>
+  <NativeSelect slot="context" aria-label="Documentation platform" visualSize="sm">
+    <option>Web</option>
+    <option>Apple</option>
+    <option>Android</option>
+  </NativeSelect>
+  <NavigationMenu aria-label="Web documentation" variant="unstyled">
+    <a href="/docs/web" aria-current="page">Overview</a>
+    <a href="/docs/components">Components</a>
+    <a href="/docs/web/playground">Playground</a>
+  </NavigationMenu>
+</ContextNavigation>
+```
+
 ## Forms and Astro Actions
 
 `Form` renders a semantic form and preserves native `method`, `action`, `enctype`, autocomplete,
@@ -227,6 +309,14 @@ with `--ui-logo-delay`.
 
 The package ships the complete Astro primitive catalog plus a small progressive-enhancement runtime for dialogs, popovers, tabs, menus, command filtering, carousels, and toasts.
 
+## Kanban boards
+
+Compose `KanbanBoard` and `KanbanColumn` with ordinary `Card` items. Give every item a stable
+`data-ui-kanban-item` and add a dedicated button with `data-ui-kanban-handle`. `UIPrimitives` emits
+the cancellable `ui:kanban-move-request` event for keyboard, mouse, and touch movement without
+changing the DOM. Keep persistence, pending state, rollback, and status rules in the application.
+Use `Empty variant="compact"` inside empty columns and `Skeleton` cards while loading.
+
 ## Motion
 
 Use the shared `fast`, `standard`, and `slow` duration vocabulary across motion primitives.

package/components/ContextNavigation.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  variant?: 'default' | 'unstyled'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  variant = 'default',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-context-navigation',
+  variant === 'unstyled' && 'ui-context-navigation--unstyled'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-slot="context-navigation"
+  data-variant={variant}
+  {...passthrough}
+>
+  {Astro.slots.has('context') && (
+    <div class="ui-context-navigation__context" data-slot="context-navigation-context">
+      <slot name="context" />
+    </div>
+  )}
+  <slot />
+</div>

package/components/DropdownMenuContent.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  role = 'menu',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-menu__content'],
+  classProp,
+  className
+)
+---
+
+<div role={role} class:list={classList} {...passthrough}>
+  <slot />
+</div>

package/components/DropdownMenuItem.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+  status?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  status,
+  type = 'button',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-menu__item'],
+  classProp,
+  className
+)
+---
+
+<button
+  type={type}
+  role="menuitem"
+  class:list={classList}
+  disabled={disabled}
+  aria-disabled={disabled ? 'true' : undefined}
+  {...passthrough}
+>
+  <span class="ui-menu__item-label"><slot /></span>
+  {status && <span class="ui-menu__item-status">{status}</span>}
+</button>

package/components/DropdownMenuSeparator.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-menu__separator'],
+  classProp,
+  className
+)
+---
+
+<div role="separator" class:list={classList} {...passthrough} />

package/components/DropdownMenuTrigger.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  type = 'button',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  [
+    'ui-button',
+    'ui-button--outline',
+    'ui-button--default-size',
+    'ui-menu__trigger'
+  ],
+  classProp,
+  className
+)
+---
+
+<button
+  type={type}
+  class:list={classList}
+  data-ui-trigger
+  aria-haspopup="menu"
+  {...passthrough}
+>
+  <slot />
+</button>

package/components/Empty.astro

@@ -7,17 +7,20 @@ interface Props extends HTMLAttributes<'section'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  variant?: 'compact' | 'default'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
+  variant = 'default',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-empty',
+  variant === 'compact' && 'ui-empty--compact',
   glass && 'ui-empty--glass',
   glass === 'subtle' && 'ui-glass-subtle',
   glass === 'strong' && 'ui-glass-strong'

package/components/KanbanBoard.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  tabindex = '0',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-kanban-board',
+  'ui-kanban'
+], classProp, className)
+---
+
+<section
+  aria-orientation="horizontal"
+  class:list={classList}
+  data-ui-kanban
+  tabindex={tabindex}
+  {...passthrough}
+>
+  <slot />
+</section>

package/components/KanbanColumn.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  class?: string | null
+  className?: string
+  value: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  value,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-kanban__column'
+], classProp, className)
+---
+
+<section
+  class:list={classList}
+  data-ui-kanban-column={value}
+  {...passthrough}
+>
+  <slot />
+</section>

package/components/LanguageToggle.astro

@@ -1,20 +1,41 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import {
+  formatLumenLanguageLabel,
+  getLumenLocalePair,
+  type LumenLocaleOption,
+  normalizeLumenLocales,
+  resolveLumenAstroProps
+} from '@santi020k/lumen-core'
 
 interface Props extends HTMLAttributes<'button'> {
   class?: string | null
   className?: string
+  defaultValue?: string
+  labelTemplate?: string
+  locales?: readonly LumenLocaleOption[]
+  storageKey?: string
+  value?: string
 }
 
 const {
   class: classProp = '',
   className = '',
+  defaultValue,
+  labelTemplate = 'Change language from {current} to {next}',
+  locales: localeOptions,
+  storageKey,
   type = 'button',
+  value,
   ...rest
 } = Astro.props
 
+const locales = normalizeLumenLocales(localeOptions)
+const initialValue = value ?? defaultValue ?? locales[0]?.value
+const { current, next } = getLumenLocalePair(locales, initialValue)
+const accessibleLabel = formatLumenLanguageLabel(labelTemplate, current, next)
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-language-toggle'
 ], classProp, className)
@@ -24,7 +45,19 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   type={type}
   class:list={classList}
   data-ui-language-toggle
+  data-ui-language-controlled={value === undefined ? undefined : ''}
+  data-ui-language-initial-value={initialValue}
+  data-ui-language-label-template={labelTemplate}
+  data-ui-language-locales={JSON.stringify(locales)}
+  data-ui-language-value={current.value}
+  data-ui-language-next-value={next.value}
+  data-ui-language-storage-key={storageKey}
+  aria-label={accessibleLabel}
   {...passthrough}
 >
-  <slot />
+  {
+    Astro.slots.has('default') ?
+      <slot /> :
+      <span data-ui-language-label lang={next.value}>{next.label}</span>
+  }
 </button>

package/components/PopoverPanel.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-popover__panel'],
+  classProp,
+  className
+)
+---
+
+<div class:list={classList} {...passthrough}>
+  <slot />
+</div>

package/components/PopoverTrigger.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  type = 'button',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-button', 'ui-button--outline', 'ui-button--default-size'],
+  classProp,
+  className
+)
+---
+
+<button
+  type={type}
+  class:list={classList}
+  data-ui-trigger
+  aria-haspopup="menu"
+  {...passthrough}
+>
+  <slot />
+</button>

package/components/TabsList.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  orientation = 'horizontal',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  [],
+  classProp,
+  className
+)
+---
+
+<div
+  role="tablist"
+  aria-orientation={orientation}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/TabsPanel.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  value: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  value,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  [],
+  classProp,
+  className
+)
+---
+
+<div
+  role="tabpanel"
+  data-value={value}
+  tabindex="0"
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/TabsTrigger.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+  value: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  type = 'button',
+  value,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  [],
+  classProp,
+  className
+)
+---
+
+<button
+  type={type}
+  role="tab"
+  data-value={value}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</button>

package/components/TooltipContent.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string | null
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  [],
+  classProp,
+  className
+)
+---
+
+<span role="tooltip" class:list={classList} {...passthrough}>
+  <slot />
+</span>

package/index.ts

@@ -40,6 +40,7 @@ export { default as Combobox } from './components/Combobox.astro'
 export { default as Command } from './components/Command.astro'
 export { default as Container } from './components/Container.astro'
 export { default as ContextMenu } from './components/ContextMenu.astro'
+export { default as ContextNavigation } from './components/ContextNavigation.astro'
 export { default as CopyButton } from './components/CopyButton.astro'
 export { default as CoverImage } from './components/CoverImage.astro'
 export { default as DataTable } from './components/DataTable.astro'
@@ -50,6 +51,10 @@ export { default as Dialog } from './components/Dialog.astro'
 export { default as Direction } from './components/Direction.astro'
 export { default as Drawer } from './components/Drawer.astro'
 export { default as DropdownMenu } from './components/DropdownMenu.astro'
+export { default as DropdownMenuContent } from './components/DropdownMenuContent.astro'
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.astro'
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.astro'
+export { default as DropdownMenuTrigger } from './components/DropdownMenuTrigger.astro'
 export { default as Empty } from './components/Empty.astro'
 export { default as ErrorSummary } from './components/ErrorSummary.astro'
 export { default as Eyebrow } from './components/Eyebrow.astro'
@@ -68,6 +73,8 @@ export { default as Input } from './components/Input.astro'
 export { default as InputGroup } from './components/InputGroup.astro'
 export { default as InputOTP } from './components/InputOTP.astro'
 export { default as Item } from './components/Item.astro'
+export { default as KanbanBoard } from './components/KanbanBoard.astro'
+export { default as KanbanColumn } from './components/KanbanColumn.astro'
 export { default as Kbd } from './components/Kbd.astro'
 export { default as Label } from './components/Label.astro'
 export { default as LanguageToggle } from './components/LanguageToggle.astro'
@@ -92,6 +99,8 @@ export { default as PieChart } from './components/PieChart.astro'
 export { default as Pill } from './components/Pill.astro'
 export { default as Popconfirm } from './components/Popconfirm.astro'
 export { default as Popover } from './components/Popover.astro'
+export { default as PopoverPanel } from './components/PopoverPanel.astro'
+export { default as PopoverTrigger } from './components/PopoverTrigger.astro'
 export { default as Progress } from './components/Progress.astro'
 export { default as Prose } from './components/Prose.astro'
 export { default as QRCode } from './components/QRCode.astro'
@@ -128,6 +137,9 @@ export { default as Stepper } from './components/Stepper.astro'
 export { default as Switch } from './components/Switch.astro'
 export { default as Table } from './components/Table.astro'
 export { default as Tabs } from './components/Tabs.astro'
+export { default as TabsList } from './components/TabsList.astro'
+export { default as TabsPanel } from './components/TabsPanel.astro'
+export { default as TabsTrigger } from './components/TabsTrigger.astro'
 export { default as TagGroup } from './components/TagGroup.astro'
 export { default as Textarea } from './components/Textarea.astro'
 export { default as ThemeBuilder } from './components/ThemeBuilder.astro'
@@ -140,6 +152,7 @@ export { default as Toggle } from './components/Toggle.astro'
 export { default as ToggleGroup } from './components/ToggleGroup.astro'
 export { default as Toolbar } from './components/Toolbar.astro'
 export { default as Tooltip } from './components/Tooltip.astro'
+export { default as TooltipContent } from './components/TooltipContent.astro'
 export { default as Tour } from './components/Tour.astro'
 export { default as Transfer } from './components/Transfer.astro'
 export { default as Tree } from './components/Tree.astro'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.1.0",
-    "@santi020k/lumen-core": "^1.1.0"
+    "@santi020k/lumen": "^1.3.0",
+    "@santi020k/lumen-core": "^1.3.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",
@@ -57,10 +57,19 @@
     "url": "https://github.com/santi020k/lumen.git",
     "directory": "packages/astro"
   },
-  "homepage": "https://lumen.santi020k.com",
+  "homepage": "https://lumen.santi020k.com/docs/frameworks/astro",
   "bugs": {
     "url": "https://github.com/santi020k/lumen/issues"
   },
+  "keywords": [
+    "astro",
+    "astro-components",
+    "accessible-ui",
+    "component-library",
+    "design-system",
+    "lumen",
+    "ui"
+  ],
   "author": {
     "name": "Santiago Molina",
     "url": "https://santi020k.com"

package/runtime/UIPrimitives.astro

@@ -10,17 +10,21 @@
 
 <script>
 import {
+  createLumenKanbanMoveDetail,
   createThemeFromHue,
   exportThemeCss,
   exportThemeDesignTokens,
   exportThemeFigmaVariables,
+  formatLumenLanguageLabel,
+  getLumenLocalePair,
   getLumenRichTextShortcut,
   isLumenRichTextToggleCommand,
+  type LumenLocaleOption,
   type LumenRichTextChangeDetail,
   type LumenRichTextCommandDetail,
   type LumenThemeTokens,
-  lumenTokenNames
-} from '@santi020k/lumen-core'
+  lumenTokenNames,
+  normalizeLumenLocales } from '@santi020k/lumen-core'
 
 /* eslint-disable complexity */
 /* Stateful DOM handlers stay local so Astro consumers do not need a framework runtime. */
@@ -236,6 +240,18 @@ const initDisclosures = (scope: ParentNode): void => {
       nextItem?.focus()
     })
 
+    if (root.hasAttribute('data-ui-dropdown-menu')) {
+      panel.addEventListener('click', event => {
+        const item = event.target instanceof Element ?
+          event.target.closest<HTMLElement>('[role="menuitem"]') :
+          null
+
+        if (!item || item.matches(':disabled, [aria-disabled="true"]')) return
+
+        setOpen(trigger, panel, false)
+      })
+    }
+
     if (root.hasAttribute('data-ui-hover-card')) {
       root.addEventListener('mouseenter', () => setOpen(trigger, panel, true))
 
@@ -932,6 +948,12 @@ const initTabs = (scope: ParentNode): void => {
     const panels = [...root.querySelectorAll<HTMLElement>('[role="tabpanel"]')]
       .filter(panel => panel.closest('[data-ui-tabs]') === root)
 
+    const tabList = tabs[0]?.closest<HTMLElement>('[role="tablist"]')
+
+    const orientation = tabList?.getAttribute('aria-orientation') === 'vertical' ?
+      'vertical' :
+      'horizontal'
+
     if (!tabs.length || !panels.length) continue
 
     const rootId = root.id || `ui-tabs-${++uiTabsCount}`
@@ -1033,13 +1055,22 @@ const initTabs = (scope: ParentNode): void => {
       tab.addEventListener('click', () => activate(tab))
 
       tab.addEventListener('keydown', event => {
-        const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
+        const keys = orientation === 'vertical' ?
+          ['ArrowUp', 'ArrowDown', 'Home', 'End'] :
+          ['ArrowLeft', 'ArrowRight', 'Home', 'End']
 
         if (!keys.includes(event.key)) return
 
         event.preventDefault()
 
-        const nextTab = tabs[getLoopedIndex(event.key, index, tabs.length, ['ArrowRight'])]
+        const nextTab = tabs[
+          getLoopedIndex(
+            event.key,
+            index,
+            tabs.length,
+            orientation === 'vertical' ? ['ArrowDown'] : ['ArrowRight']
+          )
+        ]
 
         if (nextTab) {
           activate(nextTab)
@@ -1281,6 +1312,109 @@ const initThemeToggles = (scope: ParentNode): void => {
   }
 }
 
+const isUnknownArray = (value: unknown): value is unknown[] => Array.isArray(value)
+
+const parseLanguageToggleLocales = (value: string | undefined): readonly LumenLocaleOption[] => {
+  if (!value) return normalizeLumenLocales(undefined)
+
+  try {
+    const parsed: unknown = JSON.parse(value)
+
+    if (!isUnknownArray(parsed)) return normalizeLumenLocales(undefined)
+
+    const locales = parsed.flatMap(item => {
+      if (!item || typeof item !== 'object' || !('label' in item) || !('value' in item)) return []
+
+      const { label, value: localeValue } = item
+
+      return typeof label === 'string' && typeof localeValue === 'string' ?
+        [{ label, value: localeValue }] :
+        []
+    })
+
+    return normalizeLumenLocales(locales)
+  } catch {
+    return normalizeLumenLocales(undefined)
+  }
+}
+
+const initLanguageToggles = (scope: ParentNode): void => {
+  for (const control of scope.querySelectorAll<HTMLButtonElement>('[data-ui-language-toggle]')) {
+    if (control.dataset.uiBound === 'true') continue
+
+    control.dataset.uiBound = 'true'
+
+    const locales = parseLanguageToggleLocales(control.dataset.uiLanguageLocales)
+    const storageKey = control.dataset.uiLanguageStorageKey
+    const controlled = control.hasAttribute('data-ui-language-controlled')
+
+    const labelTemplate = control.dataset.uiLanguageLabelTemplate ??
+      'Change language from {current} to {next}'
+
+    const sync = (value: string): void => {
+      const { current, next } = getLumenLocalePair(locales, value)
+      const label = control.querySelector<HTMLElement>('[data-ui-language-label]')
+
+      control.dataset.uiLanguageValue = current.value
+
+      control.dataset.uiLanguageNextValue = next.value
+
+      control.setAttribute('aria-label', formatLumenLanguageLabel(labelTemplate, current, next))
+
+      if (label) {
+        label.lang = next.value
+
+        label.textContent = next.label
+      }
+    }
+
+    let storedValue: string | null = null
+
+    if (!controlled && storageKey) {
+      try {
+        storedValue = localStorage.getItem(storageKey)
+      } catch {
+        // Storage can be unavailable in privacy modes.
+      }
+    }
+
+    const documentValue = document.documentElement.lang || undefined
+
+    const initialValue = controlled ?
+      control.dataset.uiLanguageValue :
+      storedValue ?? control.dataset.uiLanguageInitialValue ?? documentValue
+
+    const initialPair = getLumenLocalePair(locales, initialValue)
+
+    sync(initialPair.current.value)
+
+    if (!controlled) document.documentElement.lang = initialPair.current.value
+
+    control.addEventListener('click', () => {
+      const { current, next } = getLumenLocalePair(locales, control.dataset.uiLanguageValue)
+
+      if (!controlled) {
+        document.documentElement.lang = next.value
+
+        sync(next.value)
+
+        if (storageKey) {
+          try {
+            localStorage.setItem(storageKey, next.value)
+          } catch {
+            // Storage can be unavailable in privacy modes.
+          }
+        }
+      }
+
+      control.dispatchEvent(new CustomEvent('ui:language-change', {
+        bubbles: true,
+        detail: { previousValue: current.value, value: next.value }
+      }))
+    })
+  }
+}
+
 const getVisibleItems = (items: HTMLElement[]): HTMLElement[] => items.filter(item => !item.hidden &&
   item.offsetParent !== null &&
   !item.hasAttribute('disabled') &&
@@ -3237,6 +3371,239 @@ const initSchedules = (scope: ParentNode): void => {
   }
 }
 
+const kanbanColumnSelector = '[data-ui-kanban-column]'
+
+const initKanbanBoards = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-kanban]')) {
+    if (root.dataset.uiKanbanBound === 'true') continue
+
+    root.dataset.uiKanbanBound = 'true'
+
+    for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-kanban-handle]'))
+      handle.draggable = true
+
+    let pointer: {
+      active: boolean
+      handle: HTMLElement
+      item: HTMLElement
+      pointerId: number
+      startX: number
+      startY: number
+    } | undefined
+
+    const itemFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
+      target.closest<HTMLElement>('[data-ui-kanban-item]') :
+      null
+
+    const columnFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
+      target.closest<HTMLElement>(kanbanColumnSelector) :
+      null
+
+    const clearState = (): void => {
+      pointer = undefined
+
+      for (const item of root.querySelectorAll<HTMLElement>('[data-ui-kanban-item]'))
+        if (item.dataset.state === 'dragging') delete item.dataset.state
+
+      for (const column of root.querySelectorAll<HTMLElement>(kanbanColumnSelector))
+        if (column.dataset.state === 'drop-target') delete column.dataset.state
+    }
+
+    const announce = (column: HTMLElement): void => {
+      let live = root.querySelector<HTMLElement>('[data-ui-kanban-live]')
+
+      if (!live) {
+        live = document.createElement('span')
+
+        live.className = 'ui-visually-hidden'
+
+        live.dataset.uiKanbanLive = ''
+
+        live.setAttribute('aria-live', 'polite')
+
+        live.setAttribute('role', 'status')
+
+        root.append(live)
+      }
+
+      const label = column.getAttribute('aria-label') ||
+        column.querySelector('h2, h3, [data-ui-kanban-column-label]')?.textContent?.trim() ||
+        column.dataset.uiKanbanColumn || ''
+
+      live.textContent = `Move requested to ${label}.`
+    }
+
+    const requestMove = (
+      item: HTMLElement,
+      targetColumn: HTMLElement,
+      input: 'keyboard' | 'pointer'
+    ): void => {
+      const fromColumn = item.closest<HTMLElement>(kanbanColumnSelector)
+        ?.dataset.uiKanbanColumn ?? ''
+
+      const detail = createLumenKanbanMoveDetail({
+        fromColumn,
+        input,
+        itemId: item.dataset.uiKanbanItem ?? item.id,
+        toColumn: targetColumn.dataset.uiKanbanColumn ?? ''
+      })
+
+      if (!detail) return
+
+      const accepted = root.dispatchEvent(new CustomEvent('ui:kanban-move-request', {
+        bubbles: true,
+        cancelable: true,
+        detail
+      }))
+
+      if (accepted) announce(targetColumn)
+    }
+
+    root.addEventListener('dragstart', event => {
+      const handle = event.target instanceof Element ?
+        event.target.closest<HTMLElement>('[data-ui-kanban-handle]') :
+        null
+
+      const item = itemFor(handle)
+
+      if (!handle || !item || item.getAttribute('aria-busy') === 'true') {
+        event.preventDefault()
+
+        return
+      }
+
+      event.dataTransfer?.setData('text/plain', item.dataset.uiKanbanItem ?? item.id)
+
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+
+      item.dataset.state = 'dragging'
+    })
+
+    root.addEventListener('dragend', clearState)
+
+    root.addEventListener('dragover', event => {
+      const column = columnFor(event.target)
+
+      if (!column) return
+
+      event.preventDefault()
+
+      column.dataset.state = 'drop-target'
+
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+    })
+
+    root.addEventListener('dragleave', event => {
+      const column = columnFor(event.target)
+
+      if (
+        !column ||
+        (event.relatedTarget instanceof Node && column.contains(event.relatedTarget))
+      ) return
+
+      delete column.dataset.state
+    })
+
+    root.addEventListener('drop', event => {
+      const column = columnFor(event.target)
+      const itemId = event.dataTransfer?.getData('text/plain') ?? ''
+
+      const item = [...root.querySelectorAll<HTMLElement>('[data-ui-kanban-item]')]
+        .find(candidate => (candidate.dataset.uiKanbanItem ?? candidate.id) === itemId)
+
+      if (!column || !item) return
+
+      event.preventDefault()
+
+      requestMove(item, column, 'pointer')
+
+      clearState()
+    })
+
+    root.addEventListener('keydown', event => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+
+      const handle = event.target instanceof Element ?
+        event.target.closest<HTMLElement>('[data-ui-kanban-handle]') :
+        null
+
+      const item = itemFor(handle)
+      const currentColumn = columnFor(item)
+
+      if (!handle || !item || !currentColumn || item.getAttribute('aria-busy') === 'true') return
+
+      const columns = [...root.querySelectorAll<HTMLElement>(kanbanColumnSelector)]
+      const currentIndex = columns.indexOf(currentColumn)
+      const direction = event.key === 'ArrowRight' ? 1 : -1
+      const rtl = getComputedStyle(root).direction === 'rtl'
+      const target = columns[currentIndex + (rtl ? -direction : direction)]
+
+      if (!target) return
+
+      event.preventDefault()
+
+      requestMove(item, target, 'keyboard')
+    })
+
+    root.addEventListener('pointerdown', event => {
+      if (event.pointerType === 'mouse') return
+
+      const handle = event.target instanceof Element ?
+        event.target.closest<HTMLElement>('[data-ui-kanban-handle]') :
+        null
+
+      const item = itemFor(handle)
+
+      if (!handle || !item || item.getAttribute('aria-busy') === 'true') return
+
+      pointer = {
+        active: false,
+        handle,
+        item,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY
+      }
+    })
+
+    root.addEventListener('pointermove', event => {
+      if (!pointer || pointer.pointerId !== event.pointerId) return
+
+      if (!pointer.active && Math.hypot(
+        event.clientX - pointer.startX,
+        event.clientY - pointer.startY
+      ) < 8) return
+
+      pointer.active = true
+
+      pointer.handle.setPointerCapture(event.pointerId)
+
+      pointer.item.dataset.state = 'dragging'
+
+      const target = document.elementFromPoint(event.clientX, event.clientY)
+        ?.closest<HTMLElement>(kanbanColumnSelector)
+
+      for (const column of root.querySelectorAll<HTMLElement>(kanbanColumnSelector)) {
+        if (column === target) column.dataset.state = 'drop-target'
+        else delete column.dataset.state
+      }
+    })
+
+    root.addEventListener('pointerup', event => {
+      if (!pointer || pointer.pointerId !== event.pointerId) return
+
+      const target = document.elementFromPoint(event.clientX, event.clientY)
+        ?.closest<HTMLElement>(kanbanColumnSelector)
+
+      if (pointer.active && target) requestMove(pointer.item, target, 'pointer')
+
+      clearState()
+    })
+
+    root.addEventListener('pointercancel', clearState)
+  }
+}
+
 const initTreeCollections = (scope: ParentNode): void => {
   for (const root of scope.querySelectorAll<HTMLElement>('[role="tree"], [role="treegrid"]')) {
     if (root.dataset.uiBound === 'true') continue
@@ -5226,6 +5593,8 @@ const initUiPrimitives = (scope: ParentNode = document): void => {
 
   initThemeToggles(scope)
 
+  initLanguageToggles(scope)
+
   initCommand(scope)
 
   initComboboxes(scope)
@@ -5252,6 +5621,8 @@ const initUiPrimitives = (scope: ParentNode = document): void => {
 
   initSchedules(scope)
 
+  initKanbanBoards(scope)
+
   initTreeCollections(scope)
 
   initVirtualLists(scope)