@santi020k/lumen-astro 1.0.0 → 1.2.0

package/README.md

@@ -51,6 +51,40 @@ import { Button, Card, Input } from '@santi020k/lumen-astro'
 </Card>
 ```
 
+`Input` and `NativeSelect` preserve the native numeric `size` attribute. Use `visualSize="sm"` or
+`visualSize="lg"` for presentation. The pre-1.0 `size="sm|lg"` visual alias remains available for
+incremental migrations, but new code should keep native behavior and visual styling separate.
+
+```astro
+<Input size={32} visualSize="sm" />
+<NativeSelect size={8} visualSize="lg" />
+```
+
+## 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,
@@ -218,6 +252,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/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/Input.astro

@@ -6,20 +6,33 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
   class?: string | null
   className?: string
-  size?: 'default' | 'lg' | 'sm'
+  size?: HTMLAttributes<'input'>['size']
+  visualSize?: 'default' | 'lg' | 'sm'
 }
 
-const { class: classProp = '', className = '', size = 'default', type = 'text', ...rest } = Astro.props
+const {
+  class: classProp = '',
+  className = '',
+  size,
+  type = 'text',
+  visualSize,
+  ...rest
+} = Astro.props
+
+const legacyVisualSize = size === 'default' || size === 'lg' || size === 'sm' ? size : undefined
+const resolvedVisualSize = visualSize ?? legacyVisualSize ?? 'default'
+const nativeSize = legacyVisualSize ? undefined : size
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-input',
-  size === 'sm' && 'ui-input--sm',
-  size === 'lg' && 'ui-input--lg'
+  resolvedVisualSize === 'sm' && 'ui-input--sm',
+  resolvedVisualSize === 'lg' && 'ui-input--lg'
 ], classProp, className)
 ---
 
 <input
   class:list={classList}
+  size={nativeSize}
   type={type}
   {...passthrough}
 />

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/NativeSelect.astro

@@ -14,20 +14,33 @@ type SelectOption = Option | string
 interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
   class?: string | null
   className?: string
-  size?: 'default' | 'lg' | 'sm'
+  size?: HTMLAttributes<'select'>['size']
   options?: SelectOption[]
   placeholder?: string
+  visualSize?: 'default' | 'lg' | 'sm'
 }
 
-const { class: classProp = '', className = '', options = [], placeholder, size = 'default', ...rest } = Astro.props
+const {
+  class: classProp = '',
+  className = '',
+  options = [],
+  placeholder,
+  size,
+  visualSize,
+  ...rest
+} = Astro.props
+
 const hasValue = Object.hasOwn(rest, 'value')
 const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option)
+const legacyVisualSize = size === 'default' || size === 'lg' || size === 'sm' ? size : undefined
+const resolvedVisualSize = visualSize ?? legacyVisualSize ?? 'default'
+const nativeSize = legacyVisualSize ? undefined : size
 
-const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-select', size === 'sm' && 'ui-select--sm', size === 'lg' && 'ui-select--lg'
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-select', resolvedVisualSize === 'sm' && 'ui-select--sm', resolvedVisualSize === 'lg' && 'ui-select--lg'
 ], classProp, className)
 ---
 
-<select class:list={classList} {...passthrough}>
+<select class:list={classList} size={nativeSize} {...passthrough}>
   {placeholder && <option disabled selected={!hasValue} value="">{placeholder}</option>}
   <slot />
   {normalizedOptions.map(option => (

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'
@@ -68,6 +69,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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,12 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.0.0",
-    "@santi020k/lumen-core": "^1.0.0"
+    "@santi020k/lumen": "^1.2.0",
+    "@santi020k/lumen-core": "^1.2.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",
-    "astro": "^7.1.3",
+    "astro": "^7.2.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.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,6 +10,7 @@
 
 <script>
 import {
+  createLumenKanbanMoveDetail,
   createThemeFromHue,
   exportThemeCss,
   exportThemeDesignTokens,
@@ -3237,6 +3238,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
@@ -5252,6 +5486,8 @@ const initUiPrimitives = (scope: ParentNode = document): void => {
 
   initSchedules(scope)
 
+  initKanbanBoards(scope)
+
   initTreeCollections(scope)
 
   initVirtualLists(scope)