@santi020k/lumen-astro 0.1.0

package/runtime/UIPrimitives.astro

@@ -0,0 +1,4649 @@
+---
+/**
+ * Astro UI primitives controller.
+ *
+ * Provides progressive enhancement for local UI components without
+ * adding a framework runtime.
+ */
+---
+
+<script>
+  import {
+    createThemeFromHue,
+    exportThemeCss,
+    exportThemeDesignTokens,
+    exportThemeFigmaVariables,
+    getLumenRichTextShortcut,
+    isLumenRichTextToggleCommand,
+    type LumenRichTextChangeDetail,
+    type LumenRichTextCommandDetail,
+    type LumenThemeTokens,
+    lumenTokenNames
+  } from '@santi020k/lumen-core'
+
+  /* eslint-disable complexity, unicorn/consistent-function-scoping -- The runtime keeps stateful DOM handlers close to each primitive so Astro consumers do not need a framework runtime. */
+  type ThemeBuilderExportFormat = 'css' | 'figma' | 'tokens'
+
+  type ThemeBuilderMode = 'generated' | 'manual'
+
+  type ThemeBuilderScheme = 'dark' | 'light'
+
+  interface RichTextCommandDocument {
+    execCommand?: (command: string, showUi?: boolean, value?: string) => boolean
+    queryCommandState?: (command: string) => boolean
+    queryCommandValue?: (command: string) => string
+  }
+
+  const focusableSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(',')
+
+  const disclosureSelector = '[data-ui-popover], [data-ui-dropdown-menu], [data-ui-hover-card]'
+
+  const fieldControlSelector = [
+    'input:not([type="hidden"])',
+    'select',
+    'textarea',
+    '[contenteditable="true"]',
+    '[role="combobox"]',
+    '[role="listbox"]',
+    '[role="spinbutton"]',
+    '[role="textbox"]'
+  ].join(',')
+
+  const fieldDescriptionSelector = '[data-ui-field-hint], [data-ui-field-error], .ui-field__hint, .ui-field__error'
+  const fieldErrorSelector = '[data-ui-field-error], .ui-field__error'
+
+  const formControlSelector = [
+    'input:not([type="hidden"])',
+    'select',
+    'textarea'
+  ].join(',')
+
+  const validityMessageAttributes = [
+    ['valueMissing', 'data-error-required'],
+    ['typeMismatch', 'data-error-type'],
+    ['patternMismatch', 'data-error-pattern'],
+    ['tooShort', 'data-error-too-short'],
+    ['tooLong', 'data-error-too-long'],
+    ['rangeUnderflow', 'data-error-min'],
+    ['rangeOverflow', 'data-error-max'],
+    ['stepMismatch', 'data-error-step'],
+    ['badInput', 'data-error-bad-input'],
+    ['customError', 'data-error-custom']
+  ] as const
+
+  /**
+   * Top-layer mode: when the browser supports both the Popover API and CSS
+   * anchor positioning, floating panels are promoted to [popover] so they
+   * escape overflow clipping and get collision-aware placement via
+   * position-try-fallbacks. Other browsers keep the absolute fallback.
+   */
+  const supportsAnchoredPopovers =
+    typeof HTMLElement !== 'undefined' &&
+    'showPopover' in HTMLElement.prototype &&
+    typeof CSS !== 'undefined' &&
+    CSS.supports('anchor-name: --ui-anchor') &&
+    CSS.supports('position-area: block-end')
+
+  let uiAnchorCount = 0
+  const nextAnchorName = (): string => `--ui-anchor-${++uiAnchorCount}`
+
+  const isElementVisible = (element: HTMLElement): boolean =>
+    typeof element.checkVisibility === 'function'
+      ? element.checkVisibility()
+      : element.offsetParent !== null
+
+  const getFocusable = (root: ParentNode): HTMLElement[] =>
+    [...root.querySelectorAll<HTMLElement>(focusableSelector)]
+      .filter(element => !element.hasAttribute('hidden') && isElementVisible(element))
+
+  const getPanel = (trigger: HTMLElement): HTMLElement | null => {
+    const controls = trigger.getAttribute('aria-controls')
+
+    if (controls) {
+      return document.getElementById(controls)
+    }
+
+    return trigger.nextElementSibling instanceof HTMLElement ? trigger.nextElementSibling : null
+  }
+
+  const getLoopedIndex = (
+    key: string,
+    currentIndex: number,
+    itemCount: number,
+    forwardKeys: readonly string[]
+  ): number => {
+    const lastIndex = itemCount - 1
+
+    if (key === 'Home') return 0
+
+    if (key === 'End') return lastIndex
+
+    if (forwardKeys.includes(key)) return (currentIndex + 1) % itemCount
+
+    return (currentIndex - 1 + itemCount) % itemCount
+  }
+
+  const setOpen = (trigger: HTMLElement, panel: HTMLElement, open: boolean): void => {
+    trigger.setAttribute('aria-expanded', String(open))
+
+    if (panel.hasAttribute('popover')) {
+      try {
+        if (open) {
+          panel.hidden = false
+
+          panel.showPopover()
+        } else {
+          panel.hidePopover()
+        }
+      } catch {
+        /* popover already in requested state */
+      }
+
+      panel.hidden = !open
+    } else {
+      panel.hidden = !open
+    }
+
+    panel.dataset.state = open ? 'open' : 'closed'
+  }
+
+  const closeDisclosure = (root: HTMLElement): void => {
+    const trigger = root.querySelector<HTMLElement>('[data-ui-trigger]')
+
+    if (!trigger) return
+
+    const panel = getPanel(trigger)
+
+    if (!panel) return
+
+    setOpen(trigger, panel, false)
+  }
+
+  const initDisclosures = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>(disclosureSelector)) {
+      const trigger = root.querySelector<HTMLElement>('[data-ui-trigger]')
+
+      if (!trigger) continue
+
+      const panel = getPanel(trigger)
+
+      if (!panel || trigger.dataset.uiBound === 'true') continue
+
+      trigger.dataset.uiBound = 'true'
+
+      trigger.setAttribute('aria-haspopup', trigger.getAttribute('aria-haspopup') ?? 'menu')
+
+      if (supportsAnchoredPopovers) {
+        const anchorName = nextAnchorName()
+
+        panel.hidden = false
+
+        panel.setAttribute('popover', 'manual')
+
+        trigger.style.setProperty('anchor-name', anchorName)
+
+        panel.style.setProperty('position-anchor', anchorName)
+      }
+
+      setOpen(trigger, panel, trigger.getAttribute('aria-expanded') === 'true')
+
+      trigger.addEventListener('click', () => {
+        setOpen(trigger, panel, trigger.getAttribute('aria-expanded') !== 'true')
+      })
+
+      trigger.addEventListener('keydown', event => {
+        if (event.key !== 'ArrowDown' && event.key !== 'Enter' && event.key !== ' ') return
+
+        event.preventDefault()
+
+        setOpen(trigger, panel, true)
+
+        getFocusable(panel)[0]?.focus()
+      })
+
+      panel.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+
+          setOpen(trigger, panel, false)
+
+          trigger.focus({ preventScroll: true })
+
+          return
+        }
+
+        if (root.hasAttribute('data-ui-cascader')) return
+
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return
+
+        const items = getFocusable(panel)
+
+        if (!items.length) return
+
+        event.preventDefault()
+
+        const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+        const nextItem = items[getLoopedIndex(event.key, Math.max(0, currentIndex), items.length, ['ArrowDown'])]
+
+        nextItem?.focus()
+      })
+
+      if (root.hasAttribute('data-ui-hover-card')) {
+        root.addEventListener('mouseenter', () => setOpen(trigger, panel, true))
+
+        root.addEventListener('mouseleave', () => setOpen(trigger, panel, false))
+      }
+    }
+  }
+
+  const initTooltips = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('.ui-tooltip, [data-ui-tooltip]')) {
+      if (root.dataset.uiTooltipBound === 'true') continue
+
+      const tip = root.querySelector<HTMLElement>('[role="tooltip"]')
+      const trigger = root.querySelector<HTMLElement>('[data-ui-tooltip-trigger], [data-ui-trigger], button, a[href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')
+
+      if (!tip) continue
+
+      root.dataset.uiTooltipBound = 'true'
+
+      if (trigger && !trigger.closest('[role="tooltip"]')) {
+        if (!tip.id) {
+          tip.id = `ui-tooltip-${crypto.randomUUID()}`
+        }
+
+        const describedBy = new Set((trigger.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean))
+
+        describedBy.add(tip.id)
+
+        trigger.setAttribute('aria-describedby', [...describedBy].join(' '))
+      }
+
+      if (supportsAnchoredPopovers) {
+        const anchorName = nextAnchorName()
+
+        tip.setAttribute('popover', 'manual')
+
+        root.style.setProperty('anchor-name', anchorName)
+
+        tip.style.setProperty('position-anchor', anchorName)
+
+        let showTimer = 0
+
+        const show = (delay: number): void => {
+          window.clearTimeout(showTimer)
+
+          showTimer = window.setTimeout(() => {
+            try {
+              tip.showPopover()
+            } catch {
+              /* already open */
+            }
+          }, delay)
+        }
+
+        const hide = (): void => {
+          window.clearTimeout(showTimer)
+
+          try {
+            tip.hidePopover()
+          } catch {
+            /* already closed */
+          }
+        }
+
+        root.addEventListener('mouseenter', () => show(250))
+
+        root.addEventListener('mouseleave', hide)
+
+        root.addEventListener('focusin', () => show(0))
+
+        root.addEventListener('focusout', hide)
+
+        root.addEventListener('keydown', event => {
+          if (event.key === 'Escape') hide()
+        })
+      } else {
+        /* WCAG 1.4.13: hover/focus tooltips must be dismissible with Escape. */
+        root.addEventListener('keydown', event => {
+          if (event.key !== 'Escape') return
+
+          tip.style.visibility = 'hidden'
+        })
+
+        root.addEventListener('mouseleave', () => {
+          tip.style.removeProperty('visibility')
+        })
+
+        root.addEventListener('focusout', () => {
+          tip.style.removeProperty('visibility')
+        })
+      }
+    }
+  }
+
+  const initGlassTracking = (scope: ParentNode): void => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    for (const element of scope.querySelectorAll<HTMLElement>('[data-ui-glass-track]')) {
+      if (element.dataset.uiGlassBound === 'true') continue
+
+      element.dataset.uiGlassBound = 'true'
+
+      element.addEventListener('pointermove', event => {
+        const rect = element.getBoundingClientRect()
+
+        if (!rect.width || !rect.height) return
+
+        element.style.setProperty('--glass-x', `${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`)
+
+        element.style.setProperty('--glass-y', `${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`)
+      })
+
+      element.addEventListener('pointerleave', () => {
+        element.style.removeProperty('--glass-x')
+
+        element.style.removeProperty('--glass-y')
+      })
+    }
+  }
+
+  const initDialogs = (scope: ParentNode): void => {
+    for (const dialog of scope.querySelectorAll<HTMLDialogElement>('[data-ui-dialog], [data-ui-alert-dialog], [data-ui-drawer], [data-ui-sheet]')) {
+      if (dialog.dataset.uiBound === 'true') continue
+
+      dialog.dataset.uiBound = 'true'
+
+      dialog.setAttribute('aria-modal', 'true')
+
+      dialog.setAttribute('role', dialog.hasAttribute('data-ui-alert-dialog') ? 'alertdialog' : 'dialog')
+
+      dialog.addEventListener('click', event => {
+        if (event.target === dialog && !dialog.hasAttribute('data-ui-alert-dialog')) {
+          dialog.close()
+        }
+      })
+
+      dialog.addEventListener('close', () => {
+        const triggerId = dialog.dataset.uiLastTrigger
+        const trigger = triggerId ? document.getElementById(triggerId) : null
+
+        if (trigger instanceof HTMLElement) {
+          trigger.focus({ preventScroll: true })
+        }
+      })
+    }
+
+    for (const trigger of scope.querySelectorAll<HTMLElement>('[data-ui-dialog-trigger], [data-ui-alert-dialog-trigger], [data-ui-drawer-trigger], [data-ui-sheet-trigger]')) {
+      if (trigger.dataset.uiBound === 'true') continue
+
+      trigger.dataset.uiBound = 'true'
+
+      trigger.setAttribute('aria-haspopup', 'dialog')
+
+      trigger.addEventListener('click', () => {
+        const targetId =
+          trigger.dataset.uiDialogTrigger ??
+          trigger.dataset.uiAlertDialogTrigger ??
+          trigger.dataset.uiDrawerTrigger ??
+          trigger.dataset.uiSheetTrigger
+
+        if (!targetId) return
+
+        const dialog = document.getElementById(targetId)
+
+        if (!(dialog instanceof HTMLDialogElement)) return
+
+        if (!trigger.id) {
+          trigger.id = `ui-trigger-${crypto.randomUUID()}`
+        }
+
+        dialog.dataset.uiLastTrigger = trigger.id
+
+        dialog.showModal()
+
+        getFocusable(dialog)[0]?.focus({ preventScroll: true })
+      })
+    }
+
+    for (const closeButton of scope.querySelectorAll<HTMLElement>('[data-ui-dialog-close], [data-ui-alert-dialog-close], [data-ui-drawer-close], [data-ui-sheet-close]')) {
+      if (closeButton.dataset.uiBound === 'true') continue
+
+      closeButton.dataset.uiBound = 'true'
+
+      closeButton.addEventListener('click', () => {
+        closeButton.closest<HTMLDialogElement>('dialog')?.close()
+      })
+    }
+  }
+
+  const getFieldControl = (root: HTMLElement): HTMLElement | null => {
+    const controlId = root.dataset.uiFieldControl
+
+    if (controlId) {
+      const control = document.getElementById(controlId)
+
+      if (control instanceof HTMLElement) return control
+    }
+
+    return root.querySelector<HTMLElement>(fieldControlSelector)
+  }
+
+  const getFieldDescriptionId = (element: HTMLElement): string => {
+    if (!element.id) {
+      element.id = `ui-field-description-${crypto.randomUUID()}`
+    }
+
+    return element.id
+  }
+
+  const getFieldRoot = (control: HTMLElement): HTMLElement | null =>
+    control.closest<HTMLElement>('.ui-field, [data-ui-field]')
+
+  const isNativeFormControl = (element: EventTarget | null): element is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLSelectElement ||
+    element instanceof HTMLTextAreaElement
+
+  const getValidationMessage = (
+    control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    field: HTMLElement | null
+  ): string => {
+    const validity = control.validity
+
+    for (const [validityKey, attributeName] of validityMessageAttributes) {
+      if (!validity[validityKey]) continue
+
+      return control.getAttribute(attributeName) ??
+        field?.getAttribute(attributeName) ??
+        control.validationMessage
+    }
+
+    return control.validationMessage
+  }
+
+  const setFieldValidity = (
+    control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    invalid: boolean,
+    message = ''
+  ): void => {
+    const field = getFieldRoot(control)
+
+    if (invalid) {
+      control.setAttribute('aria-invalid', 'true')
+
+      control.dataset.uiValidationInvalid = 'true'
+    } else if (control.dataset.uiValidationInvalid === 'true') {
+      control.removeAttribute('aria-invalid')
+
+      delete control.dataset.uiValidationInvalid
+    }
+
+    if (!field) return
+
+    field.dataset.invalid = String(invalid)
+
+    for (const error of field.querySelectorAll<HTMLElement>(fieldErrorSelector)) {
+      error.dataset.uiValidationErrorBound = 'true'
+
+      error.hidden = !invalid
+
+      error.textContent = invalid ? message : ''
+    }
+  }
+
+  const validateControl = (
+    control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    form: HTMLFormElement
+  ): boolean => {
+    form.dispatchEvent(new CustomEvent('ui:validate', {
+      bubbles: true,
+      detail: { control, form, value: control.value }
+    }))
+
+    const invalid = !control.validity.valid
+    const message = invalid ? getValidationMessage(control, getFieldRoot(control)) : ''
+
+    setFieldValidity(control, invalid, message)
+
+    return !invalid
+  }
+
+  const getFormControls = (form: HTMLFormElement): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> =>
+    [...form.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(formControlSelector)]
+      .filter(control => control.form === form && !control.disabled)
+
+  const validateForm = (form: HTMLFormElement): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> => {
+    const invalidControls: Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> = []
+
+    for (const control of getFormControls(form)) {
+      if (!validateControl(control, form)) {
+        invalidControls.push(control)
+      }
+    }
+
+    return invalidControls
+  }
+
+  const initFields = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('.ui-field, [data-ui-field]')) {
+      if (root.dataset.uiFieldBound === 'true') continue
+
+      const control = getFieldControl(root)
+
+      if (!control) continue
+
+      root.dataset.uiFieldBound = 'true'
+
+      const existingIds = control.getAttribute('aria-describedby')?.trim().split(/\s+/) ?? []
+      const configuredIds = root.dataset.uiFieldDescribedby?.trim().split(/\s+/) ?? []
+
+      const descriptionIds = [...root.querySelectorAll<HTMLElement>(fieldDescriptionSelector)]
+        .map(element => getFieldDescriptionId(element))
+
+      const describedBy = [...new Set([...existingIds, ...configuredIds, ...descriptionIds].filter(Boolean))]
+
+      if (describedBy.length) {
+        control.setAttribute('aria-describedby', describedBy.join(' '))
+      }
+    }
+  }
+
+  const initForms = (scope: ParentNode): void => {
+    for (const form of scope.querySelectorAll<HTMLFormElement>('form[data-ui-form]')) {
+      if (form.dataset.uiFormBound === 'true') continue
+
+      form.dataset.uiFormBound = 'true'
+
+      form.noValidate = true
+
+      form.addEventListener('focusout', event => {
+        if (!isNativeFormControl(event.target) || event.target.form !== form) return
+
+        const valid = validateControl(event.target, form)
+
+        form.dispatchEvent(new CustomEvent(valid ? 'ui:valid' : 'ui:invalid', {
+          bubbles: true,
+          detail: valid
+            ? { control: event.target, form }
+            : { control: event.target, controls: [event.target], form }
+        }))
+      })
+
+      form.addEventListener('submit', event => {
+        const invalidControls = validateForm(form)
+
+        if (invalidControls.length) {
+          event.preventDefault()
+
+          const firstInvalid = invalidControls[0]
+
+          form.dispatchEvent(new CustomEvent('ui:invalid', {
+            bubbles: true,
+            detail: { control: firstInvalid, controls: invalidControls, form }
+          }))
+
+          firstInvalid?.focus({ preventScroll: true })
+
+          firstInvalid?.reportValidity()
+
+          return
+        }
+
+        form.dispatchEvent(new CustomEvent('ui:valid', {
+          bubbles: true,
+          detail: { controls: getFormControls(form), form }
+        }))
+      })
+    }
+  }
+
+  const initTabs = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-tabs]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      const tabs = [...root.querySelectorAll<HTMLElement>('[role="tab"]')]
+      const panels = [...root.querySelectorAll<HTMLElement>('[role="tabpanel"]')]
+
+      if (!tabs.length || !panels.length) continue
+
+      const activate = (tab: HTMLElement): void => {
+        for (const item of tabs) {
+          const selected = item === tab
+          const panelId = item.getAttribute('aria-controls')
+          const panel = panelId ? document.getElementById(panelId) : null
+
+          item.setAttribute('aria-selected', String(selected))
+
+          item.tabIndex = selected ? 0 : -1
+
+          if (panel) {
+            panel.hidden = !selected
+          }
+        }
+      }
+
+      const initiallySelected = tabs.find(tab => tab.getAttribute('aria-selected') === 'true') ?? tabs[0]
+
+      if (initiallySelected) activate(initiallySelected)
+
+      for (const [index, tab] of tabs.entries()) {
+        tab.addEventListener('click', () => activate(tab))
+
+        tab.addEventListener('keydown', event => {
+          const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
+
+          if (!keys.includes(event.key)) return
+
+          event.preventDefault()
+
+          const nextTab = tabs[getLoopedIndex(event.key, index, tabs.length, ['ArrowRight'])]
+
+          if (nextTab) {
+            activate(nextTab)
+
+            nextTab.focus()
+          }
+        })
+      }
+    }
+  }
+
+  const initRovingGroups = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-menubar], [data-ui-navigation-menu], [data-ui-radio-group], [data-ui-toggle-group], [data-ui-toolbar]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      const items = [...root.querySelectorAll<HTMLElement>('button, a[href], input[type="radio"], [role="menuitem"], [role="radio"]')]
+
+      if (!items.length) continue
+
+      for (const [index, item] of items.entries()) {
+        item.tabIndex = index === 0 ? 0 : -1
+
+        item.addEventListener('keydown', event => {
+          const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']
+
+          if (!keys.includes(event.key)) return
+
+          event.preventDefault()
+
+          for (const nextItem of items) {
+            nextItem.tabIndex = -1
+          }
+
+          const nextItem = items[getLoopedIndex(event.key, index, items.length, ['ArrowRight', 'ArrowDown'])]
+
+          if (nextItem) {
+            nextItem.tabIndex = 0
+
+            nextItem.focus()
+
+            if (nextItem instanceof HTMLInputElement && nextItem.type === 'radio') {
+              nextItem.checked = true
+
+              nextItem.dispatchEvent(new Event('input', { bubbles: true }))
+
+              nextItem.dispatchEvent(new Event('change', { bubbles: true }))
+            } else if (nextItem.getAttribute('role') === 'radio') {
+              for (const radio of items) {
+                if (radio.getAttribute('role') === 'radio') {
+                  radio.setAttribute('aria-checked', String(radio === nextItem))
+                }
+              }
+
+              nextItem.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+          }
+        })
+      }
+    }
+  }
+
+  const initToggles = (scope: ParentNode): void => {
+    for (const toggle of scope.querySelectorAll<HTMLButtonElement>('[data-ui-toggle]')) {
+      if (toggle.dataset.uiBound === 'true') continue
+
+      toggle.dataset.uiBound = 'true'
+
+      toggle.addEventListener('click', () => {
+        const pressed = toggle.getAttribute('aria-pressed') !== 'true'
+
+        toggle.setAttribute('aria-pressed', String(pressed))
+
+        toggle.classList.toggle('ui-toggle--pressed', pressed)
+      })
+    }
+  }
+
+  const getVisibleItems = (items: HTMLElement[]): HTMLElement[] =>
+    items.filter(item => !item.hidden && item.offsetParent !== null && !item.hasAttribute('disabled') && item.getAttribute('aria-disabled') !== 'true')
+
+  const closeCombobox = (root: HTMLElement): void => {
+    const input = root.querySelector<HTMLInputElement>('input[role="combobox"]')
+    const listbox = root.querySelector<HTMLElement>('[role="listbox"]')
+
+    if (!input || !listbox) return
+
+    input.setAttribute('aria-expanded', 'false')
+
+    listbox.hidden = true
+
+    listbox.dataset.state = 'closed'
+  }
+
+  const openCombobox = (root: HTMLElement): void => {
+    const input = root.querySelector<HTMLInputElement>('input[role="combobox"]')
+    const listbox = root.querySelector<HTMLElement>('[role="listbox"]')
+
+    if (!input || !listbox) return
+
+    input.setAttribute('aria-expanded', 'true')
+
+    listbox.hidden = false
+
+    listbox.dataset.state = 'open'
+  }
+
+  let codeCopyLiveRegion: HTMLElement | undefined
+
+  const getCodeCopyLiveRegion = (): HTMLElement => {
+    if (codeCopyLiveRegion) return codeCopyLiveRegion
+
+    codeCopyLiveRegion = document.createElement('div')
+
+    codeCopyLiveRegion.setAttribute('aria-atomic', 'true')
+
+    codeCopyLiveRegion.setAttribute('aria-live', 'polite')
+
+    codeCopyLiveRegion.style.position = 'absolute'
+
+    codeCopyLiveRegion.style.width = '1px'
+
+    codeCopyLiveRegion.style.height = '1px'
+
+    codeCopyLiveRegion.style.overflow = 'hidden'
+
+    codeCopyLiveRegion.style.clipPath = 'inset(50%)'
+
+    codeCopyLiveRegion.style.whiteSpace = 'nowrap'
+
+    document.body.append(codeCopyLiveRegion)
+
+    return codeCopyLiveRegion
+  }
+
+  const initCodeCopy = (scope: ParentNode): void => {
+    for (const button of scope.querySelectorAll<HTMLButtonElement>('[data-ui-code-copy]')) {
+      if (button.dataset.uiCodeCopyBound === 'true') continue
+
+      button.dataset.uiCodeCopyBound = 'true'
+
+      button.addEventListener('click', async () => {
+        const root = button.closest<HTMLElement>('[data-ui-code]')
+        const code = root?.querySelector<HTMLElement>('pre code, code')
+        const text = code?.innerText ?? code?.textContent
+
+        if (!text || !navigator.clipboard) return
+
+        try {
+          await navigator.clipboard.writeText(text)
+        } catch {
+          return
+        }
+
+        button.classList.add('ui-code__copy--copied')
+
+        button.setAttribute('aria-label', 'Code copied!')
+
+        getCodeCopyLiveRegion().textContent = 'Code copied to clipboard'
+
+        window.setTimeout(() => {
+          button.classList.remove('ui-code__copy--copied')
+
+          button.setAttribute('aria-label', 'Copy code to clipboard')
+
+          getCodeCopyLiveRegion().textContent = ''
+        }, 2000)
+      })
+    }
+  }
+
+  const filterItems = (input: HTMLInputElement, items: HTMLElement[]): void => {
+    const query = input.value.trim().toLowerCase()
+
+    for (const item of items) {
+      const text = item.textContent?.toLowerCase() ?? ''
+
+      item.hidden = Boolean(query) && !text.includes(query)
+    }
+  }
+
+  const selectComboboxOption = (root: HTMLElement, option: HTMLElement): void => {
+    const input = root.querySelector<HTMLInputElement>('input[role="combobox"]')
+
+    if (!input) return
+
+    input.value = option.dataset.value ?? option.textContent?.trim() ?? ''
+
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+
+    closeCombobox(root)
+
+    input.focus({ preventScroll: true })
+  }
+
+  const closeSelect = (root: HTMLElement): void => {
+    const trigger = root.querySelector<HTMLElement>('[data-ui-select-trigger]')
+    const listbox = root.querySelector<HTMLElement>('[data-ui-select-list]')
+
+    if (!trigger || !listbox) return
+
+    trigger.setAttribute('aria-expanded', 'false')
+
+    listbox.hidden = true
+
+    listbox.dataset.state = 'closed'
+  }
+
+  const openSelect = (root: HTMLElement): void => {
+    const trigger = root.querySelector<HTMLElement>('[data-ui-select-trigger]')
+    const listbox = root.querySelector<HTMLElement>('[data-ui-select-list]')
+
+    if (!trigger || !listbox) return
+
+    trigger.setAttribute('aria-expanded', 'true')
+
+    listbox.hidden = false
+
+    listbox.dataset.state = 'open'
+  }
+
+  const getSelectItems = (root: HTMLElement): HTMLElement[] =>
+    [...root.querySelectorAll<HTMLElement>('[data-ui-select-option]')]
+
+  const getEnabledSelectItems = (root: HTMLElement): HTMLElement[] =>
+    getSelectItems(root).filter(item => !item.hasAttribute('disabled') && item.getAttribute('aria-disabled') !== 'true')
+
+  const getSelectedSelectItem = (root: HTMLElement): HTMLElement | undefined =>
+    getEnabledSelectItems(root).find(item => item.getAttribute('aria-selected') === 'true')
+
+  const isPrintableKey = (event: KeyboardEvent): boolean =>
+    event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey
+
+  const renderSelectOptions = (select: HTMLSelectElement, listbox: HTMLElement): void => {
+    const items = [...select.options]
+      .filter(option => !option.hasAttribute('data-ui-select-placeholder'))
+      .map(option => {
+        const item = document.createElement('button')
+
+        item.type = 'button'
+
+        item.role = 'option'
+
+        item.dataset.uiSelectOption = ''
+
+        item.dataset.value = option.value
+
+        item.textContent = option.label
+
+        if (option.disabled) {
+          item.disabled = true
+
+          item.setAttribute('aria-disabled', 'true')
+        }
+
+        return item
+      })
+
+    listbox.replaceChildren(...items)
+  }
+
+  const syncSelectValue = (root: HTMLElement): void => {
+    const select = root.querySelector<HTMLSelectElement>('[data-ui-select-native]')
+    const trigger = root.querySelector<HTMLElement>('[data-ui-select-trigger]')
+    const value = root.querySelector<HTMLElement>('[data-ui-select-value]')
+
+    if (!select || !trigger || !value) return
+
+    const selectedOption = select.selectedOptions[0]
+    const hasSelection = Boolean(selectedOption && !selectedOption.hasAttribute('data-ui-select-placeholder'))
+    const placeholder = select.querySelector<HTMLOptionElement>('[data-ui-select-placeholder]')
+
+    value.textContent = hasSelection
+      ? selectedOption.label
+      : placeholder?.textContent?.trim() || 'Select an option'
+
+    root.dataset.placeholder = hasSelection ? 'false' : 'true'
+
+    for (const item of getSelectItems(root)) {
+      item.setAttribute('aria-selected', String(hasSelection && item.dataset.value === select.value))
+    }
+  }
+
+  const selectSelectOption = (root: HTMLElement, item: HTMLElement): void => {
+    const select = root.querySelector<HTMLSelectElement>('[data-ui-select-native]')
+    const trigger = root.querySelector<HTMLElement>('[data-ui-select-trigger]')
+
+    if (!select || !trigger || item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true') return
+
+    select.value = item.dataset.value ?? ''
+
+    select.dispatchEvent(new Event('input', { bubbles: true }))
+
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+
+    syncSelectValue(root)
+
+    closeSelect(root)
+
+    trigger.focus({ preventScroll: true })
+  }
+
+  const focusSelectOption = (
+    root: HTMLElement,
+    key: string,
+    currentItem?: HTMLElement
+  ): void => {
+    const items = getEnabledSelectItems(root)
+
+    if (!items.length) return
+
+    const current = currentItem ?? getSelectedSelectItem(root) ?? items[0]
+    const currentIndex = items.indexOf(current)
+    const nextItem = items[getLoopedIndex(key, Math.max(0, currentIndex), items.length, ['ArrowDown'])]
+
+    nextItem?.focus()
+  }
+
+  const focusLoopedOption = (
+    items: HTMLElement[],
+    currentItem: HTMLElement,
+    key: string
+  ): void => {
+    const visibleItems = getVisibleItems(items)
+
+    if (!visibleItems.length) return
+
+    const currentIndex = visibleItems.indexOf(currentItem)
+    const nextItem = visibleItems[getLoopedIndex(key, Math.max(0, currentIndex), visibleItems.length, ['ArrowDown'])]
+
+    nextItem?.focus()
+  }
+
+  const initCommand = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-command]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLInputElement>('input[type="search"], input[type="text"], input:not([type])')
+
+      if (!input) continue
+
+      root.dataset.uiBound = 'true'
+
+      const items = [...root.querySelectorAll<HTMLElement>('[data-ui-command-item], [role="option"], option')]
+
+      input.addEventListener('input', () => {
+        filterItems(input, items)
+      })
+    }
+  }
+
+  const initComboboxes = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-combobox]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLInputElement>('input[role="combobox"]')
+      const listbox = root.querySelector<HTMLElement>('[role="listbox"]')
+
+      if (!input || !listbox) continue
+
+      root.dataset.uiBound = 'true'
+
+      const items = [...listbox.querySelectorAll<HTMLElement>('[role="option"]')]
+
+      closeCombobox(root)
+
+      input.addEventListener('focus', () => openCombobox(root))
+
+      input.addEventListener('input', () => {
+        filterItems(input, items)
+
+        openCombobox(root)
+      })
+
+      input.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          closeCombobox(root)
+
+          return
+        }
+
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') return
+
+        const visibleItems = getVisibleItems(items)
+
+        if (!visibleItems.length) return
+
+        event.preventDefault()
+
+        openCombobox(root)
+
+        if (event.key === 'Enter') {
+          selectComboboxOption(root, visibleItems[0])
+
+          return
+        }
+
+        const targetIndex = event.key === 'ArrowUp' ? visibleItems.length - 1 : 0
+
+        visibleItems[targetIndex]?.focus()
+      })
+
+      for (const item of items) {
+        item.tabIndex = -1
+
+        item.addEventListener('click', () => selectComboboxOption(root, item))
+
+        item.addEventListener('keydown', event => {
+          if (event.key === 'Escape') {
+            closeCombobox(root)
+
+            input.focus({ preventScroll: true })
+
+            return
+          }
+
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+
+            selectComboboxOption(root, item)
+
+            return
+          }
+
+          if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return
+
+          event.preventDefault()
+
+          focusLoopedOption(items, item, event.key)
+        })
+      }
+    }
+  }
+
+  const initSelects = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-select]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const select = root.querySelector<HTMLSelectElement>('[data-ui-select-native]')
+      const control = root.querySelector<HTMLElement>('[data-ui-select-control]')
+      const trigger = root.querySelector<HTMLButtonElement>('[data-ui-select-trigger]')
+      const listbox = root.querySelector<HTMLElement>('[data-ui-select-list]')
+
+      if (!select || !control || !trigger || !listbox) continue
+
+      root.dataset.uiBound = 'true'
+
+      renderSelectOptions(select, listbox)
+
+      control.hidden = false
+
+      select.dataset.uiEnhanced = 'true'
+
+      select.tabIndex = -1
+
+      select.setAttribute('aria-hidden', 'true')
+
+      trigger.disabled = select.disabled
+
+      trigger.setAttribute('aria-haspopup', 'listbox')
+
+      for (const attribute of ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid']) {
+        const value = select.getAttribute(attribute)
+
+        if (value) {
+          trigger.setAttribute(attribute, value)
+        }
+      }
+
+      if (select.required) {
+        trigger.setAttribute('aria-required', 'true')
+      }
+
+      if (!trigger.hasAttribute('aria-label') && !trigger.hasAttribute('aria-labelledby')) {
+        const label = [...(select.labels ?? [])].find(item => item.textContent?.trim())
+
+        if (label?.textContent) {
+          trigger.setAttribute('aria-label', label.textContent.trim())
+        }
+      }
+
+      for (const label of select.labels ?? []) {
+        label.addEventListener('click', event => {
+          event.preventDefault()
+
+          trigger.focus({ preventScroll: true })
+        })
+      }
+
+      let typeahead = ''
+      let typeaheadTimer = 0
+
+      const focusTypeaheadOption = (currentItem?: HTMLElement): void => {
+        const items = getEnabledSelectItems(root)
+
+        if (!items.length || !typeahead) return
+
+        const currentIndex = currentItem ? items.indexOf(currentItem) : items.indexOf(getSelectedSelectItem(root) ?? items[0])
+        const orderedItems = [...items.slice(Math.max(0, currentIndex + 1)), ...items.slice(0, Math.max(0, currentIndex + 1))]
+        const nextItem = orderedItems.find(item => item.textContent?.trim().toLowerCase().startsWith(typeahead))
+
+        nextItem?.focus()
+      }
+
+      const handleTypeahead = (event: KeyboardEvent, currentItem?: HTMLElement): boolean => {
+        if (!isPrintableKey(event)) return false
+
+        event.preventDefault()
+
+        typeahead += event.key.toLowerCase()
+
+        window.clearTimeout(typeaheadTimer)
+
+        typeaheadTimer = window.setTimeout(() => {
+          typeahead = ''
+        }, 700)
+
+        openSelect(root)
+
+        focusTypeaheadOption(currentItem)
+
+        return true
+      }
+
+      syncSelectValue(root)
+
+      closeSelect(root)
+
+      trigger.addEventListener('click', () => {
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true'
+
+        if (isOpen) {
+          closeSelect(root)
+        } else {
+          openSelect(root)
+        }
+      })
+
+      trigger.addEventListener('keydown', event => {
+        if (handleTypeahead(event)) return
+
+        if (event.key === 'Escape') {
+          closeSelect(root)
+
+          return
+        }
+
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End' && event.key !== 'Enter' && event.key !== ' ') return
+
+        event.preventDefault()
+
+        openSelect(root)
+
+        if (event.key === 'Enter' || event.key === ' ') {
+          ;
+
+(getSelectedSelectItem(root) ?? getEnabledSelectItems(root)[0])?.focus()
+
+          return
+        }
+
+        focusSelectOption(root, event.key)
+      })
+
+      select.addEventListener('change', () => syncSelectValue(root))
+
+      select.form?.addEventListener('reset', () => {
+        window.setTimeout(() => syncSelectValue(root))
+      })
+
+      for (const item of getSelectItems(root)) {
+        item.tabIndex = -1
+
+        item.addEventListener('click', () => selectSelectOption(root, item))
+
+        item.addEventListener('keydown', event => {
+          if (handleTypeahead(event, item)) return
+
+          if (event.key === 'Escape') {
+            closeSelect(root)
+
+            trigger.focus({ preventScroll: true })
+
+            return
+          }
+
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+
+            selectSelectOption(root, item)
+
+            return
+          }
+
+          if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return
+
+          event.preventDefault()
+
+          focusSelectOption(root, event.key, item)
+        })
+      }
+    }
+  }
+
+  const parseNumberList = (value: string | undefined, count: number, fallback: number): number[] => {
+    const values = (value ?? '')
+      .split(',')
+      .map(item => Number.parseFloat(item.trim()))
+      .filter(Number.isFinite)
+
+    return Array.from({ length: count }, (_, index) => values[index] ?? values[0] ?? fallback)
+  }
+
+  const normalizeSizes = (sizes: number[], count: number): number[] => {
+    const fallbackSize = 100 / Math.max(1, count)
+
+    const usableSizes = Array.from({ length: count }, (_, index) => {
+      const size = sizes[index] ?? fallbackSize
+
+      return Number.isFinite(size) && size > 0 ? size : fallbackSize
+    })
+
+    const total = usableSizes.reduce((sum, size) => sum + size, 0)
+
+    if (total <= 0) return Array.from({ length: count }, () => fallbackSize)
+
+    return usableSizes.map(size => (size / total) * 100)
+  }
+
+  const initResizableGroups = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-resizable]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const panes = [...root.children].filter((child): child is HTMLElement =>
+        child instanceof HTMLElement &&
+        !child.hasAttribute('data-ui-resizable-handle') &&
+        !child.hasAttribute('data-ui-resizable-handle-template')
+      )
+
+      if (panes.length < 2) continue
+
+      root.dataset.uiBound = 'true'
+
+      root.dataset.uiResizableEnhanced = 'true'
+
+      const direction = root.dataset.orientation === 'vertical' ? 'vertical' : 'horizontal'
+      const separatorOrientation = direction === 'horizontal' ? 'vertical' : 'horizontal'
+      const axis = direction === 'horizontal' ? 'clientX' : 'clientY'
+      const sizeProperty = direction === 'horizontal' ? 'width' : 'height'
+      const minSizes = parseNumberList(root.dataset.uiResizableMinSize, panes.length, 12)
+      const maxSizes = parseNumberList(root.dataset.uiResizableMaxSize, panes.length, 88)
+
+      const initialSizes = normalizeSizes(
+        parseNumberList(root.dataset.uiResizableDefaultSizes, panes.length, 100 / panes.length),
+        panes.length
+      )
+
+      const handleTemplate = root.querySelector<HTMLTemplateElement>(':scope > [data-ui-resizable-handle-template]')
+    let sizes = [...initialSizes]
+
+      const applySizes = (): void => {
+        for (const [index, pane] of panes.entries()) {
+        pane.dataset.uiResizablePanel = ''
+
+        pane.style.setProperty('--ui-resizable-size', `${sizes[index]}%`)
+      }
+
+        for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-resizable-handle]')) {
+          const index = Number.parseInt(handle.dataset.index ?? '0', 10)
+
+          handle.setAttribute('aria-valuemin', String(Math.round(minSizes[index] ?? 0)))
+
+          handle.setAttribute('aria-valuemax', String(Math.round(maxSizes[index] ?? 100)))
+
+          handle.setAttribute('aria-valuenow', String(Math.round(sizes[index] ?? 0)))
+        }
+      }
+
+      const resizePair = (index: number, nextSize: number): void => {
+        const nextIndex = index + 1
+        const total = sizes[index] + sizes[nextIndex]
+        const min = Math.max(minSizes[index] ?? 0, total - (maxSizes[nextIndex] ?? 100))
+        const max = Math.min(maxSizes[index] ?? 100, total - (minSizes[nextIndex] ?? 0))
+        const paneSize = Math.min(max, Math.max(min, nextSize))
+
+        sizes[index] = paneSize
+
+        sizes[nextIndex] = total - paneSize
+
+        applySizes()
+      }
+
+      for (const [index, pane] of panes.entries()) {
+      pane.dataset.uiResizablePanel = ''
+
+      if (index >= panes.length - 1) continue
+
+      const handleFromTemplate = handleTemplate?.content
+        .querySelector<HTMLButtonElement>('[data-ui-resizable-handle]')
+        ?.cloneNode(true)
+
+      const handle = handleFromTemplate instanceof HTMLButtonElement
+        ? handleFromTemplate
+        : document.createElement('button')
+
+      handle.type = 'button'
+
+      handle.className = 'ui-resizable__handle'
+
+      handle.dataset.uiResizableHandle = ''
+
+      handle.dataset.index = String(index)
+
+      handle.tabIndex = 0
+
+      handle.setAttribute('aria-label', `Resize panel ${index + 1}`)
+
+      handle.setAttribute('role', 'separator')
+
+      handle.setAttribute('aria-orientation', separatorOrientation)
+
+      pane.after(handle)
+
+      let startPosition = 0
+      let startSize = 0
+      let containerSize = 1
+
+      handle.addEventListener('pointerdown', event => {
+        if (event.button !== 0) return
+
+        event.preventDefault()
+
+        startPosition = event[axis]
+
+        startSize = sizes[index]
+
+        containerSize = Math.max(1, root.getBoundingClientRect()[sizeProperty])
+
+        root.dataset.resizing = 'true'
+
+        handle.dataset.active = 'true'
+
+        handle.setPointerCapture(event.pointerId)
+      })
+
+      handle.addEventListener('pointermove', event => {
+        if (handle.dataset.active !== 'true') return
+
+        const delta = ((event[axis] - startPosition) / containerSize) * 100
+
+        resizePair(index, startSize + delta)
+      })
+
+      handle.addEventListener('pointerup', event => {
+        if (handle.dataset.active !== 'true') return
+
+        delete handle.dataset.active
+
+        delete root.dataset.resizing
+
+        handle.releasePointerCapture(event.pointerId)
+      })
+
+      handle.addEventListener('dblclick', () => {
+        if (root.dataset.uiResizableReset !== 'true') return
+
+        sizes = [...initialSizes]
+
+        applySizes()
+      })
+
+      handle.addEventListener('keydown', event => {
+        const step = event.shiftKey ? 10 : 2
+
+        const keyDeltas: Record<string, number> = direction === 'horizontal'
+          ? { ArrowLeft: -step, ArrowRight: step }
+          : { ArrowDown: step, ArrowUp: -step }
+
+        if (event.key === 'Home') {
+          event.preventDefault()
+
+          resizePair(index, minSizes[index] ?? 0)
+
+          return
+        }
+
+        if (event.key === 'End') {
+          event.preventDefault()
+
+          resizePair(index, maxSizes[index] ?? 100)
+
+          return
+        }
+
+        const delta = keyDeltas[event.key]
+
+        if (delta === undefined) return
+
+        event.preventDefault()
+
+        resizePair(index, sizes[index] + delta)
+      })
+    }
+
+      applySizes()
+    }
+  }
+
+  const sanitizeOtpValue = (input: HTMLInputElement, value: string, length: number): string => {
+    const numericOnly = input.inputMode === 'numeric' || input.getAttribute('pattern') === '[0-9]*'
+    const normalized = numericOnly ? value.replaceAll(/\D/g, '') : value.replaceAll(/\s/g, '')
+
+    return normalized.slice(0, length)
+  }
+
+  const initInputOtpFields = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-input-otp]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLInputElement>('[data-ui-input-otp-native]')
+      const segments = [...root.querySelectorAll<HTMLButtonElement>('[data-ui-input-otp-segment]')]
+
+      if (!input || segments.length === 0) continue
+
+      root.dataset.uiBound = 'true'
+
+      const length = Number.parseInt(root.dataset.uiInputOtpLength ?? '', 10) || segments.length
+
+      input.dataset.uiEnhanced = 'true'
+
+      const syncSegments = (): void => {
+        const value = sanitizeOtpValue(input, input.value, length)
+
+        if (input.value !== value) {
+          input.value = value
+        }
+
+        const activeIndex = Math.min(length - 1, Math.max(0, input.selectionStart ?? value.length))
+
+        root.dataset.disabled = input.disabled ? 'true' : 'false'
+
+        root.dataset.invalid = input.getAttribute('aria-invalid') === 'true' ? 'true' : 'false'
+
+        for (const [index, segment] of segments.entries()) {
+        const char = segment.querySelector<HTMLElement>('[data-ui-input-otp-char]')
+
+        segment.disabled = input.disabled
+
+        segment.dataset.active = String(document.activeElement === input && index === activeIndex)
+
+        if (char) {
+          char.textContent = value[index] ?? '\u00a0'
+        }
+      }
+      }
+
+      const setSelection = (index: number): void => {
+        const position = Math.min(input.value.length, Math.max(0, index))
+
+        input.focus({ preventScroll: true })
+
+        input.setSelectionRange(position, position)
+
+        syncSegments()
+      }
+
+      const setValue = (value: string): void => {
+        input.value = sanitizeOtpValue(input, value, length)
+
+        input.setSelectionRange(input.value.length, input.value.length)
+
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+
+        syncSegments()
+      }
+
+      const segmentsRoot = root.querySelector<HTMLElement>('[data-ui-input-otp-segments]')
+
+      if (segmentsRoot) {
+        segmentsRoot.hidden = false
+      }
+
+      syncSegments()
+
+      input.addEventListener('input', syncSegments)
+
+      input.addEventListener('change', syncSegments)
+
+      input.addEventListener('focus', syncSegments)
+
+      input.addEventListener('blur', syncSegments)
+
+      input.addEventListener('click', syncSegments)
+
+      input.addEventListener('keyup', syncSegments)
+
+      input.addEventListener('keydown', event => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+
+          setSelection((input.selectionStart ?? input.value.length) - 1)
+
+          return
+        }
+
+        if (event.key === 'ArrowRight') {
+          event.preventDefault()
+
+          setSelection((input.selectionStart ?? input.value.length) + 1)
+
+          return
+        }
+
+        if (event.key === 'Home') {
+          event.preventDefault()
+
+          setSelection(0)
+
+          return
+        }
+
+        if (event.key === 'End') {
+          event.preventDefault()
+
+          setSelection(input.value.length)
+        }
+      })
+
+      input.addEventListener('paste', event => {
+        const pasted = event.clipboardData?.getData('text') ?? ''
+
+        if (!pasted) return
+
+        event.preventDefault()
+
+        setValue(pasted)
+      })
+
+      input.form?.addEventListener('reset', () => {
+        window.setTimeout(syncSegments)
+      })
+
+      for (const [index, segment] of segments.entries()) {
+      segment.addEventListener('click', () => setSelection(index))
+    }
+    }
+  }
+
+  /* cspell:ignore Datatable datatable */
+  /* eslint-disable @stylistic/padding-line-between-statements, no-nested-ternary, unicorn/no-array-for-each, unicorn/prefer-string-replace-all */
+  const getDataTableSortValue = (cell: HTMLTableCellElement | undefined): string =>
+    cell?.dataset.sortValue ?? cell?.textContent?.trim() ?? ''
+
+  const compareDataTableValues = (value: string, other: string, sortType: string | undefined): number => {
+    const numericValue = Number(value.replace(/,/g, ''))
+    const numericOther = Number(other.replace(/,/g, ''))
+    const useNumeric = sortType === 'number' || (
+      sortType !== 'string' &&
+      value.trim() !== '' &&
+      other.trim() !== '' &&
+      Number.isFinite(numericValue) &&
+      Number.isFinite(numericOther)
+    )
+
+    if (useNumeric) {
+      return numericValue - numericOther
+    }
+
+    return value.localeCompare(other, undefined, { numeric: true, sensitivity: 'base' })
+  }
+
+  const sortDataTableRows = (
+    table: HTMLTableElement,
+    header: HTMLTableCellElement,
+    columnIndex: number,
+    direction: 'ascending' | 'descending' | 'none'
+  ): void => {
+    const body = table.tBodies[0]
+
+    if (!body) return
+
+    const rows = [...body.rows]
+    const sortType = header.dataset.uiDatatableSortType
+
+    rows.sort((row, other) => {
+      if (direction === 'none') {
+        return Number(row.dataset.uiDatatableIndex ?? '0') - Number(other.dataset.uiDatatableIndex ?? '0')
+      }
+
+      const result = compareDataTableValues(
+        getDataTableSortValue(row.cells[columnIndex]),
+        getDataTableSortValue(other.cells[columnIndex]),
+        sortType
+      )
+
+      return (direction === 'ascending' ? result : -result) ||
+        Number(row.dataset.uiDatatableIndex ?? '0') - Number(other.dataset.uiDatatableIndex ?? '0')
+    })
+
+    rows.forEach(row => body.append(row))
+  }
+
+  const updateDataTableSort = (
+    root: HTMLElement,
+    table: HTMLTableElement,
+    header: HTMLTableCellElement,
+    direction: 'ascending' | 'descending' | 'none'
+  ): void => {
+    for (const item of table.querySelectorAll<HTMLTableCellElement>('thead th[aria-sort]')) {
+      item.setAttribute('aria-sort', item === header ? direction : 'none')
+      item.dataset.sort = item === header ? direction : 'none'
+    }
+
+    root.dataset.uiDatatableSortDirection = direction
+
+    if (direction === 'none') {
+      delete root.dataset.uiDatatableSortColumn
+    } else {
+      root.dataset.uiDatatableSortColumn = header.dataset.uiDatatableColumn ?? ''
+    }
+  }
+
+  const initDataTableSorting = (root: HTMLElement, table: HTMLTableElement): void => {
+    const headers = [...table.querySelectorAll<HTMLTableCellElement>('thead th')].filter(header =>
+      header.dataset.uiDatatableSortable === 'true' ||
+      header.dataset.sortable === 'true' ||
+      header.hasAttribute('data-sortable')
+    )
+
+    for (const header of headers) {
+      if (header.dataset.uiDatatableSortBound === 'true') continue
+
+      const row = header.parentElement
+      const columnIndex = row ? [...row.children].indexOf(header) : -1
+
+      if (columnIndex < 0) continue
+
+      header.dataset.uiDatatableSortBound = 'true'
+      header.dataset.uiDatatableColumn = String(columnIndex)
+      header.setAttribute('aria-sort', 'none')
+
+      const button = document.createElement('button')
+
+      button.type = 'button'
+      button.className = 'ui-data-table__sort'
+      button.dataset.uiDatatableSort = ''
+
+      while (header.firstChild) {
+        button.append(header.firstChild)
+      }
+
+      header.append(button)
+
+      button.addEventListener('click', () => {
+        const currentColumn = root.dataset.uiDatatableSortColumn
+        const currentDirection = header.getAttribute('aria-sort')
+        const nextDirection = currentColumn !== String(columnIndex) || currentDirection === 'none'
+          ? 'ascending'
+          : currentDirection === 'ascending'
+            ? 'descending'
+            : 'none'
+
+        updateDataTableSort(root, table, header, nextDirection)
+        sortDataTableRows(table, header, columnIndex, nextDirection)
+      })
+    }
+
+    const body = table.tBodies[0]
+
+    if (!body) return
+
+    ;[...body.rows].forEach((row, index) => {
+      row.dataset.uiDatatableIndex = row.dataset.uiDatatableIndex ?? String(index)
+    })
+  }
+
+  const getDataTableRows = (table: HTMLTableElement): HTMLTableRowElement[] =>
+    [...(table.tBodies[0]?.rows ?? [])]
+
+  const getDataTableRowValue = (row: HTMLTableRowElement, index: number): string =>
+    row.dataset.value ?? row.id ?? String(index)
+
+  const syncDataTableSelection = (
+    root: HTMLElement,
+    table: HTMLTableElement,
+    selectAll: HTMLInputElement,
+    dispatch = false
+  ): void => {
+    const rows = getDataTableRows(table)
+    const selectedValues: string[] = []
+
+    rows.forEach((row, index) => {
+      const checkbox = row.querySelector<HTMLInputElement>('[data-ui-datatable-row-select]')
+      const selected = checkbox?.checked === true
+
+      row.setAttribute('aria-selected', String(selected))
+
+      if (selected) {
+        row.dataset.state = 'selected'
+        selectedValues.push(getDataTableRowValue(row, index))
+      } else {
+        delete row.dataset.state
+      }
+    })
+
+    selectAll.checked = rows.length > 0 && selectedValues.length === rows.length
+    selectAll.indeterminate = selectedValues.length > 0 && selectedValues.length < rows.length
+
+    const name = root.dataset.uiDatatableName
+    let inputs = root.querySelector<HTMLElement>('[data-ui-datatable-inputs]')
+
+    if (name) {
+      if (!inputs) {
+        inputs = document.createElement('div')
+        inputs.hidden = true
+        inputs.dataset.uiDatatableInputs = ''
+        root.append(inputs)
+      }
+
+      inputs.replaceChildren(...selectedValues.map(value => {
+        const input = document.createElement('input')
+
+        input.type = 'hidden'
+        input.name = name
+        input.value = value
+
+        return input
+      }))
+    } else {
+      inputs?.replaceChildren()
+    }
+
+    if (dispatch) {
+      root.dispatchEvent(new CustomEvent('ui:datatable-selection-change', {
+        bubbles: true,
+        detail: { values: selectedValues }
+      }))
+    }
+  }
+
+  const initDataTableSelection = (root: HTMLElement, table: HTMLTableElement): void => {
+    if (root.dataset.uiDatatableSelectable !== 'true' || root.dataset.uiDatatableSelectionBound === 'true') return
+
+    const headRow = table.tHead?.rows[0]
+    const body = table.tBodies[0]
+
+    if (!headRow || !body) return
+
+    root.dataset.uiDatatableSelectionBound = 'true'
+
+    const headerCell = document.createElement('th')
+    const selectAll = document.createElement('input')
+
+    headerCell.className = 'ui-data-table__selection'
+    headerCell.scope = 'col'
+    selectAll.type = 'checkbox'
+    selectAll.className = 'ui-data-table__checkbox'
+    selectAll.dataset.uiDatatableSelectAll = ''
+    selectAll.setAttribute('aria-label', 'Select all rows')
+    headerCell.append(selectAll)
+    headRow.prepend(headerCell)
+
+    getDataTableRows(table).forEach((row, index) => {
+      row.dataset.uiDatatableRow = ''
+      row.dataset.value = getDataTableRowValue(row, index)
+
+      const cell = document.createElement('td')
+      const checkbox = document.createElement('input')
+      const selected = row.dataset.state === 'selected' || row.getAttribute('aria-selected') === 'true'
+
+      cell.className = 'ui-data-table__selection'
+      checkbox.type = 'checkbox'
+      checkbox.className = 'ui-data-table__checkbox'
+      checkbox.dataset.uiDatatableRowSelect = ''
+      checkbox.checked = selected
+      checkbox.defaultChecked = selected
+      checkbox.setAttribute('aria-label', `Select row ${index + 1}`)
+      checkbox.addEventListener('change', () => syncDataTableSelection(root, table, selectAll, true))
+
+      cell.append(checkbox)
+      row.prepend(cell)
+    })
+
+    selectAll.addEventListener('change', () => {
+      for (const checkbox of table.querySelectorAll<HTMLInputElement>('[data-ui-datatable-row-select]')) {
+        checkbox.checked = selectAll.checked
+      }
+
+      syncDataTableSelection(root, table, selectAll, true)
+    })
+
+    root.closest('form')?.addEventListener('reset', () => {
+      window.setTimeout(() => syncDataTableSelection(root, table, selectAll, true))
+    })
+
+    syncDataTableSelection(root, table, selectAll)
+  }
+
+  const initDataTables = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-datatable]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const table = root.querySelector<HTMLTableElement>('table')
+
+      if (!table) continue
+
+      root.dataset.uiBound = 'true'
+
+      initDataTableSelection(root, table)
+      initDataTableSorting(root, table)
+    }
+  }
+  /* eslint-enable @stylistic/padding-line-between-statements, no-nested-ternary, unicorn/no-array-for-each, unicorn/prefer-string-replace-all */
+
+  const calendarDatePattern = /^\d{4}-\d{2}-\d{2}$/
+  const calendarMonthPattern = /^\d{4}-\d{2}$/
+
+  const parseCalendarDate = (value: string | null | undefined): Date | null => {
+    if (!value || !calendarDatePattern.test(value)) return null
+
+    const [year, month, day] = value.split('-').map(Number)
+    const date = new Date(Date.UTC(year, month - 1, day))
+
+    return date.getUTCFullYear() === year &&
+      date.getUTCMonth() === month - 1 &&
+      date.getUTCDate() === day
+      ? date
+      : null
+  }
+
+  const parseCalendarMonth = (value: string | null | undefined): Date | null => {
+    if (!value || !calendarMonthPattern.test(value)) return null
+
+    const [year, month] = value.split('-').map(Number)
+    const date = new Date(Date.UTC(year, month - 1, 1))
+
+    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 ? date : null
+  }
+
+  const formatCalendarDate = (date: Date): string => date.toISOString().slice(0, 10)
+  const formatCalendarMonth = (date: Date): string => date.toISOString().slice(0, 7)
+
+  const addCalendarDays = (date: Date, days: number): Date =>
+    new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days))
+
+  const getCalendarDaysInMonth = (date: Date): number =>
+    new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate()
+
+  const addCalendarMonths = (date: Date, months: number): Date => {
+    const year = date.getUTCFullYear()
+    const month = date.getUTCMonth() + months
+    const day = date.getUTCDate()
+    const targetMonth = new Date(Date.UTC(year, month, 1))
+    const daysInTargetMonth = getCalendarDaysInMonth(targetMonth)
+
+    return new Date(Date.UTC(
+      targetMonth.getUTCFullYear(),
+      targetMonth.getUTCMonth(),
+      Math.min(day, daysInTargetMonth)
+    ))
+  }
+
+  const compareCalendarDates = (date: Date, other: Date | null): number => {
+    if (!other) return 0
+
+    return formatCalendarDate(date).localeCompare(formatCalendarDate(other))
+  }
+
+  const isCalendarDateDisabled = (
+    root: HTMLElement,
+    date: Date,
+    min: Date | null,
+    max: Date | null
+  ): boolean =>
+    root.dataset.disabled === 'true' ||
+    compareCalendarDates(date, min) < 0 ||
+    compareCalendarDates(date, max) > 0
+
+  const clampCalendarDate = (date: Date, min: Date | null, max: Date | null): Date => {
+    if (min && compareCalendarDates(date, min) < 0) return min
+
+    if (max && compareCalendarDates(date, max) > 0) return max
+
+    return date
+  }
+
+  const getCalendarLocale = (): string => document.documentElement.lang || navigator.language || 'en'
+
+  const getCalendarToday = (): Date => {
+    const today = new Date()
+
+    return new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()))
+  }
+
+  const getCalendarGridStart = (month: Date): Date =>
+    addCalendarDays(month, -((month.getUTCDay() + 6) % 7))
+
+  const getCalendarFocusDate = (
+    root: HTMLElement,
+    month: Date,
+    min: Date | null,
+    max: Date | null,
+    requestedDate?: Date | null
+  ): Date => {
+    const selectedDate = parseCalendarDate(root.dataset.uiCalendarValue)
+    const today = getCalendarToday()
+    const candidates = [requestedDate, selectedDate, today, month]
+
+    for (const candidate of candidates) {
+      if (
+        candidate &&
+        formatCalendarMonth(candidate) === formatCalendarMonth(month) &&
+        !isCalendarDateDisabled(root, candidate, min, max)
+      ) {
+        return candidate
+      }
+    }
+
+    for (let index = 0; index < getCalendarDaysInMonth(month); index += 1) {
+      const date = addCalendarDays(month, index)
+
+      if (!isCalendarDateDisabled(root, date, min, max)) return date
+    }
+
+    return month
+  }
+
+  const syncCalendarNavigation = (
+    root: HTMLElement,
+    month: Date,
+    min: Date | null,
+    max: Date | null
+  ): void => {
+    const previous = root.querySelector<HTMLButtonElement>('[data-ui-calendar-prev]')
+    const next = root.querySelector<HTMLButtonElement>('[data-ui-calendar-next]')
+    const disabled = root.dataset.disabled === 'true'
+    const previousMonthLastDay = addCalendarDays(month, -1)
+    const nextMonthFirstDay = addCalendarMonths(month, 1)
+
+    if (previous) {
+      previous.disabled = disabled || compareCalendarDates(previousMonthLastDay, min) < 0
+    }
+
+    if (next) {
+      next.disabled = disabled || compareCalendarDates(nextMonthFirstDay, max) > 0
+    }
+  }
+
+  const renderCalendar = (
+    root: HTMLElement,
+    requestedFocusDate?: Date | null,
+    shouldFocus = false
+  ): void => {
+    const label = root.querySelector<HTMLElement>('[data-ui-calendar-label]')
+    const grid = root.querySelector<HTMLElement>('[data-ui-calendar-grid]')
+
+    if (!label || !grid) return
+
+    const locale = getCalendarLocale()
+    const min = parseCalendarDate(root.dataset.uiCalendarMin)
+    const max = parseCalendarDate(root.dataset.uiCalendarMax)
+    const selectedDate = parseCalendarDate(root.dataset.uiCalendarValue)
+    const todayIso = formatCalendarDate(getCalendarToday())
+
+    const month = parseCalendarMonth(root.dataset.uiCalendarMonth) ??
+      (selectedDate ? new Date(Date.UTC(selectedDate.getUTCFullYear(), selectedDate.getUTCMonth(), 1)) : null) ??
+      getCalendarToday()
+
+    const visibleMonth = new Date(Date.UTC(month.getUTCFullYear(), month.getUTCMonth(), 1))
+    const focusDate = getCalendarFocusDate(root, visibleMonth, min, max, requestedFocusDate)
+    const focusIso = formatCalendarDate(focusDate)
+    const selectedIso = selectedDate ? formatCalendarDate(selectedDate) : ''
+
+    const monthLabel = new Intl.DateTimeFormat(locale, {
+      month: 'long',
+      timeZone: 'UTC',
+      year: 'numeric'
+    }).format(visibleMonth)
+
+    const dayLabel = new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'long',
+      timeZone: 'UTC',
+      weekday: 'long',
+      year: 'numeric'
+    })
+
+    const weekdayLabel = new Intl.DateTimeFormat(locale, {
+      timeZone: 'UTC',
+      weekday: 'short'
+    })
+
+    const table = grid instanceof HTMLTableElement ? grid : null
+
+    root.dataset.uiCalendarMonth = formatCalendarMonth(visibleMonth)
+
+    label.textContent = monthLabel
+
+    syncCalendarNavigation(root, visibleMonth, min, max)
+
+    const header = document.createElement('thead')
+    const headerRow = document.createElement('tr')
+
+    headerRow.role = 'row'
+
+    for (let index = 0; index < 7; index += 1) {
+      const cell = document.createElement('th')
+
+      cell.scope = 'col'
+
+      cell.role = 'columnheader'
+
+      cell.textContent = weekdayLabel.format(new Date(Date.UTC(2026, 0, 5 + index)))
+
+      headerRow.append(cell)
+    }
+
+    header.append(headerRow)
+
+    const body = document.createElement('tbody')
+    const firstCell = getCalendarGridStart(visibleMonth)
+
+    for (let rowIndex = 0; rowIndex < 6; rowIndex += 1) {
+      const row = document.createElement('tr')
+
+      row.role = 'row'
+
+      for (let columnIndex = 0; columnIndex < 7; columnIndex += 1) {
+        const date = addCalendarDays(firstCell, rowIndex * 7 + columnIndex)
+        const dateIso = formatCalendarDate(date)
+        const cell = document.createElement('td')
+        const unavailable = isCalendarDateDisabled(root, date, min, max)
+
+        cell.role = 'gridcell'
+
+        cell.tabIndex = !unavailable && dateIso === focusIso ? 0 : -1
+
+        cell.textContent = String(date.getUTCDate())
+
+        cell.dataset.date = dateIso
+
+        cell.dataset.uiCalendarDay = ''
+
+        cell.setAttribute('aria-label', dayLabel.format(date))
+
+        cell.setAttribute('aria-selected', String(selectedIso === dateIso))
+
+        if (unavailable) {
+          cell.setAttribute('aria-disabled', 'true')
+        }
+
+        if (formatCalendarMonth(date) !== formatCalendarMonth(visibleMonth)) {
+          cell.dataset.outside = 'true'
+        }
+
+        if (dateIso === todayIso) {
+          cell.dataset.today = 'true'
+        }
+
+        if (selectedIso === dateIso) {
+          cell.dataset.selected = 'true'
+        }
+
+        row.append(cell)
+      }
+
+      body.append(row)
+    }
+
+    if (table) {
+      table.replaceChildren(header, body)
+    } else {
+      grid.replaceChildren(header, body)
+    }
+
+    if (shouldFocus) {
+      root.querySelector<HTMLElement>(`[data-ui-calendar-day][data-date="${focusIso}"]`)?.focus({ preventScroll: true })
+    }
+  }
+
+  const selectCalendarDate = (root: HTMLElement, date: Date): void => {
+    const input = root.querySelector<HTMLInputElement>('[data-ui-calendar-input]')
+
+    if (!input || root.dataset.disabled === 'true') return
+
+    const min = parseCalendarDate(root.dataset.uiCalendarMin)
+    const max = parseCalendarDate(root.dataset.uiCalendarMax)
+    const nextDate = clampCalendarDate(date, min, max)
+
+    if (isCalendarDateDisabled(root, nextDate, min, max)) return
+
+    input.value = formatCalendarDate(nextDate)
+
+    root.dataset.uiCalendarValue = input.value
+
+    root.dataset.uiCalendarMonth = formatCalendarMonth(nextDate)
+
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+
+    renderCalendar(root, nextDate, true)
+  }
+
+  const focusCalendarDate = (root: HTMLElement, date: Date): void => {
+    const min = parseCalendarDate(root.dataset.uiCalendarMin)
+    const max = parseCalendarDate(root.dataset.uiCalendarMax)
+    const nextDate = clampCalendarDate(date, min, max)
+
+    root.dataset.uiCalendarMonth = formatCalendarMonth(nextDate)
+
+    renderCalendar(root, nextDate, true)
+  }
+
+  const moveCalendarFocus = (root: HTMLElement, currentDate: Date, key: string): void => {
+    const column = (currentDate.getUTCDay() + 6) % 7
+
+    const keyOffsets: Record<string, number> = {
+      ArrowDown: 7,
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      End: 6 - column,
+      Home: -column
+    }
+
+    if (key === 'PageDown' || key === 'PageUp') {
+      focusCalendarDate(root, addCalendarMonths(currentDate, key === 'PageDown' ? 1 : -1))
+
+      return
+    }
+
+    const offset = keyOffsets[key]
+
+    if (offset === undefined) return
+
+    focusCalendarDate(root, addCalendarDays(currentDate, offset))
+  }
+
+  const initCalendars = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-calendar]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLInputElement>('[data-ui-calendar-input]')
+
+      if (!input) continue
+
+      root.dataset.uiBound = 'true'
+
+      renderCalendar(root)
+
+      root.querySelector<HTMLButtonElement>('[data-ui-calendar-prev]')?.addEventListener('click', () => {
+        const month = parseCalendarMonth(root.dataset.uiCalendarMonth)
+
+        if (!month) return
+
+        const nextMonth = addCalendarMonths(month, -1)
+
+        root.dataset.uiCalendarMonth = formatCalendarMonth(nextMonth)
+
+        renderCalendar(root, nextMonth, true)
+      })
+
+      root.querySelector<HTMLButtonElement>('[data-ui-calendar-next]')?.addEventListener('click', () => {
+        const month = parseCalendarMonth(root.dataset.uiCalendarMonth)
+
+        if (!month) return
+
+        const nextMonth = addCalendarMonths(month, 1)
+
+        root.dataset.uiCalendarMonth = formatCalendarMonth(nextMonth)
+
+        renderCalendar(root, nextMonth, true)
+      })
+
+      root.addEventListener('click', event => {
+        const target = event.target
+
+        if (!(target instanceof Element)) return
+
+        const cell = target.closest<HTMLElement>('[data-ui-calendar-day]')
+
+        if (!cell || !root.contains(cell) || cell.getAttribute('aria-disabled') === 'true') return
+
+        const date = parseCalendarDate(cell.dataset.date)
+
+        if (date) {
+          selectCalendarDate(root, date)
+        }
+      })
+
+      root.addEventListener('keydown', event => {
+        const target = event.target
+
+        if (!(target instanceof HTMLElement) || !target.hasAttribute('data-ui-calendar-day')) return
+
+        const date = parseCalendarDate(target.dataset.date)
+
+        if (!date) return
+
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+
+          selectCalendarDate(root, date)
+
+          return
+        }
+
+        if (
+          event.key !== 'ArrowDown' &&
+          event.key !== 'ArrowLeft' &&
+          event.key !== 'ArrowRight' &&
+          event.key !== 'ArrowUp' &&
+          event.key !== 'End' &&
+          event.key !== 'Home' &&
+          event.key !== 'PageDown' &&
+          event.key !== 'PageUp'
+        ) {
+          return
+        }
+
+        event.preventDefault()
+
+        moveCalendarFocus(root, date, event.key)
+      })
+
+      input.form?.addEventListener('reset', () => {
+        window.setTimeout(() => {
+          root.dataset.uiCalendarValue = input.value
+
+          root.dataset.uiCalendarMonth = root.dataset.uiCalendarInitialMonth ?? root.dataset.uiCalendarMonth
+
+          renderCalendar(root)
+        })
+      })
+    }
+  }
+
+  const formatDatePickerValue = (value: string, placeholder: string): string => {
+    const date = parseCalendarDate(value)
+
+    if (!date) return placeholder
+
+    return new Intl.DateTimeFormat(getCalendarLocale(), {
+      day: 'numeric',
+      month: 'short',
+      timeZone: 'UTC',
+      year: 'numeric'
+    }).format(date)
+  }
+
+  const closeDatePicker = (root: HTMLElement, restoreFocus = false): void => {
+    const trigger = root.querySelector<HTMLButtonElement>('[data-ui-date-picker-trigger]')
+    const popover = root.querySelector<HTMLElement>('[data-ui-date-picker-popover]')
+
+    if (!trigger || !popover || popover.hidden) return
+
+    popover.hidden = true
+
+    popover.dataset.state = 'closed'
+
+    trigger.setAttribute('aria-expanded', 'false')
+
+    if (restoreFocus) trigger.focus()
+  }
+
+  const syncDatePickerValue = (root: HTMLElement): void => {
+    const native = root.querySelector<HTMLInputElement>('[data-ui-date-picker-native]')
+    const value = root.querySelector<HTMLElement>('[data-ui-date-picker-value]')
+
+    if (!native || !value) return
+
+    const placeholder = native.getAttribute('placeholder') || 'Choose a date'
+
+    value.textContent = formatDatePickerValue(native.value, placeholder)
+
+    if (native.value) {
+      delete root.dataset.placeholder
+    } else {
+      root.dataset.placeholder = 'true'
+    }
+
+    if (native.validity.valid) {
+      root.querySelector<HTMLElement>('[data-ui-date-picker-trigger]')?.removeAttribute('aria-invalid')
+    }
+  }
+
+  const openDatePicker = (root: HTMLElement): void => {
+    const native = root.querySelector<HTMLInputElement>('[data-ui-date-picker-native]')
+    const trigger = root.querySelector<HTMLButtonElement>('[data-ui-date-picker-trigger]')
+    const popover = root.querySelector<HTMLElement>('[data-ui-date-picker-popover]')
+    const calendar = root.querySelector<HTMLElement>('[data-ui-calendar]')
+
+    if (!native || !trigger || !popover || native.disabled) return
+
+    for (const other of document.querySelectorAll<HTMLElement>('[data-ui-date-picker]')) {
+      if (other !== root) closeDatePicker(other)
+    }
+
+    if (calendar) {
+      calendar.dataset.uiCalendarValue = native.value
+
+      if (native.value) calendar.dataset.uiCalendarMonth = native.value.slice(0, 7)
+
+      if (native.min) calendar.dataset.uiCalendarMin = native.min
+      else delete calendar.dataset.uiCalendarMin
+
+      if (native.max) calendar.dataset.uiCalendarMax = native.max
+      else delete calendar.dataset.uiCalendarMax
+
+      renderCalendar(calendar)
+    }
+
+    popover.hidden = false
+
+    popover.dataset.state = 'open'
+
+    trigger.setAttribute('aria-expanded', 'true')
+
+    window.requestAnimationFrame(() => {
+      calendar?.querySelector<HTMLElement>('[data-ui-calendar-day][tabindex="0"]')?.focus({ preventScroll: true })
+    })
+  }
+
+  const initDatePickers = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-date-picker]')) {
+      if (root.dataset.uiDatePickerBound === 'true') continue
+
+      const native = root.querySelector<HTMLInputElement>('[data-ui-date-picker-native]')
+      const control = root.querySelector<HTMLElement>('[data-ui-date-picker-control]')
+      const trigger = root.querySelector<HTMLButtonElement>('[data-ui-date-picker-trigger]')
+      const popover = root.querySelector<HTMLElement>('[data-ui-date-picker-popover]')
+      const calendarInput = root.querySelector<HTMLInputElement>('[data-ui-calendar-input]')
+
+      if (!native || !control || !trigger || !popover || !calendarInput) continue
+
+      root.dataset.uiDatePickerBound = 'true'
+
+      native.dataset.uiEnhanced = 'true'
+
+      native.setAttribute('aria-hidden', 'true')
+
+      native.tabIndex = -1
+
+      control.hidden = false
+
+      const accessibleName = native.getAttribute('aria-label')
+      const labelledBy = native.getAttribute('aria-labelledby')
+      const describedBy = native.getAttribute('aria-describedby')
+
+      if (accessibleName) trigger.setAttribute('aria-label', accessibleName)
+
+      if (labelledBy) trigger.setAttribute('aria-labelledby', labelledBy)
+
+      if (describedBy) trigger.setAttribute('aria-describedby', describedBy)
+
+      syncDatePickerValue(root)
+
+      trigger.addEventListener('click', () => {
+        if (popover.hidden) openDatePicker(root)
+        else closeDatePicker(root)
+      })
+
+      trigger.addEventListener('keydown', event => {
+        if (event.key !== 'ArrowDown') return
+
+        event.preventDefault()
+
+        openDatePicker(root)
+      })
+
+      calendarInput.addEventListener('change', () => {
+        native.value = calendarInput.value
+
+        syncDatePickerValue(root)
+
+        native.dispatchEvent(new Event('input', { bubbles: true }))
+
+        native.dispatchEvent(new Event('change', { bubbles: true }))
+
+        closeDatePicker(root, true)
+      })
+
+      native.addEventListener('change', () => syncDatePickerValue(root))
+
+      native.addEventListener('invalid', event => {
+        event.preventDefault()
+
+        trigger.setAttribute('aria-invalid', 'true')
+
+        trigger.focus()
+      })
+
+      native.form?.addEventListener('reset', () => {
+        window.setTimeout(() => {
+          syncDatePickerValue(root)
+
+          closeDatePicker(root)
+        })
+      })
+    }
+  }
+
+  const initCarousel = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-carousel]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const viewport = root.querySelector<HTMLElement>('[data-ui-carousel-viewport]')
+
+      if (!viewport) continue
+
+      root.dataset.uiBound = 'true'
+
+      for (const button of root.querySelectorAll<HTMLElement>('[data-ui-carousel-prev]')) {
+        button.addEventListener('click', () => viewport.scrollBy({ behavior: 'smooth', left: -viewport.clientWidth }))
+      }
+
+      for (const button of root.querySelectorAll<HTMLElement>('[data-ui-carousel-next]')) {
+        button.addEventListener('click', () => viewport.scrollBy({ behavior: 'smooth', left: viewport.clientWidth }))
+      }
+    }
+  }
+
+  const initSchedules = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-schedule]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      for (const event of root.querySelectorAll<HTMLElement>('[data-ui-schedule-event]')) {
+        event.draggable = event.draggable || event.dataset.uiDraggable === 'true'
+
+        event.addEventListener('dragstart', dragEvent => {
+          dragEvent.dataTransfer?.setData('text/plain', event.id || event.textContent?.trim() || '')
+
+          root.dataset.uiDragging = 'true'
+        })
+
+        event.addEventListener('dragend', () => {
+          delete root.dataset.uiDragging
+        })
+      }
+
+      for (const dropzone of root.querySelectorAll<HTMLElement>('[data-ui-schedule-slot]')) {
+        dropzone.addEventListener('dragover', event => {
+          event.preventDefault()
+
+          dropzone.dataset.state = 'drag-over'
+        })
+
+        dropzone.addEventListener('dragleave', () => {
+          delete dropzone.dataset.state
+        })
+
+        dropzone.addEventListener('drop', event => {
+          event.preventDefault()
+
+          delete dropzone.dataset.state
+
+          const draggedId = event.dataTransfer?.getData('text/plain')
+          const dragged = draggedId ? document.getElementById(draggedId) : null
+
+          if (dragged instanceof HTMLElement) {
+            dropzone.append(dragged)
+          }
+
+          root.dispatchEvent(new CustomEvent('ui:schedule-change', {
+            bubbles: true,
+            detail: {
+              eventId: draggedId,
+              slot: dropzone.dataset.uiScheduleSlot
+            }
+          }))
+        })
+      }
+    }
+  }
+
+  const initTreeCollections = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[role="tree"], [role="treegrid"]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const items = [...root.querySelectorAll<HTMLElement>('[role="treeitem"], [role="row"]')]
+
+      if (!items.length) continue
+
+      root.dataset.uiBound = 'true'
+
+      for (const [index, item] of items.entries()) {
+        item.tabIndex = index === 0 ? 0 : -1
+
+        item.addEventListener('keydown', event => {
+          const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ']
+
+          if (!keys.includes(event.key)) return
+
+          if ((event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') && item.hasAttribute('aria-expanded')) {
+            event.preventDefault()
+
+            item.setAttribute('aria-expanded', 'true')
+
+            return
+          }
+
+          if (event.key === 'ArrowLeft' && item.hasAttribute('aria-expanded')) {
+            event.preventDefault()
+
+            item.setAttribute('aria-expanded', 'false')
+
+            return
+          }
+
+          if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return
+
+          event.preventDefault()
+
+          for (const nextItem of items) {
+            nextItem.tabIndex = -1
+          }
+
+          const nextItem = items[getLoopedIndex(event.key, index, items.length, ['ArrowDown'])]
+
+          if (nextItem) {
+            nextItem.tabIndex = 0
+
+            nextItem.focus()
+          }
+        })
+      }
+    }
+  }
+
+  const initVirtualLists = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-virtual-list]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const items = [...root.children].filter((child): child is HTMLElement => child instanceof HTMLElement)
+
+      if (!items.length) continue
+
+      root.dataset.uiBound = 'true'
+
+      const overscan = Number(root.dataset.uiOverscan ?? 4)
+      const itemSize = Number(root.dataset.uiItemSize ?? 44)
+
+      const update = (): void => {
+        const visibleCount = Math.ceil(root.clientHeight / itemSize) + overscan
+        const startIndex = Math.max(0, Math.floor(root.scrollTop / itemSize) - overscan)
+        const endIndex = startIndex + visibleCount
+
+        for (const [index, item] of items.entries()) {
+          item.hidden = index < startIndex || index > endIndex
+        }
+
+        root.dispatchEvent(new CustomEvent('ui:virtual-list-range', {
+          bubbles: true,
+          detail: {
+            endIndex: Math.min(items.length - 1, endIndex),
+            startIndex
+          }
+        }))
+      }
+
+      root.addEventListener('scroll', update, { passive: true })
+
+      update()
+    }
+  }
+
+  const initTagGroups = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('.ui-tag-group, [data-ui-tag-group]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      for (const button of root.querySelectorAll<HTMLElement>('[data-ui-tag-remove]')) {
+        button.addEventListener('click', () => {
+          const tag = button.closest<HTMLElement>('[data-ui-tag], [role="listitem"]')
+
+          tag?.remove()
+
+          root.dispatchEvent(new CustomEvent('ui:tag-remove', {
+            bubbles: true,
+            detail: {
+              value: tag?.dataset.value ?? tag?.textContent?.trim()
+            }
+          }))
+        })
+      }
+    }
+  }
+
+  const richTextEditorContentSelector = '[data-ui-rich-text-editable], [contenteditable="true"]'
+
+  const getRichTextCommandValue = (control: HTMLElement): string | undefined => {
+    if (control.dataset.uiEditorValue !== undefined) return control.dataset.uiEditorValue
+
+    if (
+      control instanceof HTMLInputElement
+      || control instanceof HTMLSelectElement
+      || control instanceof HTMLTextAreaElement
+    ) return control.value
+
+    return undefined
+  }
+
+  const syncRichTextCommandStates = (root: HTMLElement): void => {
+    const commandDocument = document as unknown as RichTextCommandDocument
+
+    for (const control of root.querySelectorAll<HTMLElement>('[data-ui-editor-command]')) {
+      const command = control.dataset.uiEditorCommand ?? ''
+      const value = getRichTextCommandValue(control)
+      let active = false
+
+      if (isLumenRichTextToggleCommand(command)) {
+        active = commandDocument.queryCommandState?.(command) ?? false
+
+        control.setAttribute('aria-pressed', String(active))
+      } else if (command === 'formatBlock' && value) {
+        const currentValue = commandDocument.queryCommandValue?.(command)
+          .replaceAll(/[<>]/g, '')
+          .toLowerCase()
+
+        active = currentValue === value.replaceAll(/[<>]/g, '').toLowerCase()
+      }
+
+      control.dataset.state = active ? 'on' : 'off'
+
+    }
+  }
+
+  const dispatchRichTextChange = (root: HTMLElement): void => {
+    const editable = root.querySelector<HTMLElement>(richTextEditorContentSelector)
+
+    if (!editable) return
+
+    const detail: LumenRichTextChangeDetail = {
+      html: editable.innerHTML,
+      text: editable.textContent ?? ''
+    }
+
+    root.dispatchEvent(new CustomEvent<LumenRichTextChangeDetail>('ui:editor-change', {
+      bubbles: true,
+      detail
+    }))
+  }
+
+  const executeRichTextCommand = (
+    root: HTMLElement,
+    command: string,
+    value?: string
+  ): boolean => {
+    if (!command) return false
+
+    const commandDocument = document as unknown as RichTextCommandDocument
+    let executed = false
+
+    if (typeof commandDocument.execCommand === 'function') {
+      executed = value === undefined
+        ? commandDocument.execCommand(command)
+        : commandDocument.execCommand(command, false, value)
+    }
+
+    const detail: LumenRichTextCommandDetail = {
+      command,
+      executed,
+      ...(value === undefined ? {} : { value })
+    }
+
+    root.dispatchEvent(new CustomEvent<LumenRichTextCommandDetail>('ui:editor-command', {
+      bubbles: true,
+      detail
+    }))
+
+    syncRichTextCommandStates(root)
+
+    dispatchRichTextChange(root)
+
+    return executed
+  }
+
+  const initRichTextEditors = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-rich-text-editor]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      for (const control of root.querySelectorAll<HTMLElement>('[data-ui-editor-command]')) {
+        const execute = () => {
+          executeRichTextCommand(
+            root,
+            control.dataset.uiEditorCommand ?? '',
+            getRichTextCommandValue(control)
+          )
+        }
+
+        if (control instanceof HTMLSelectElement) control.addEventListener('change', execute)
+        else control.addEventListener('click', execute)
+      }
+
+      root.addEventListener('keydown', event => {
+        if (!(event.target instanceof HTMLElement)
+          || !event.target.closest(richTextEditorContentSelector)) return
+
+        const command = getLumenRichTextShortcut(event)
+
+        if (!command) return
+
+        event.preventDefault()
+
+        executeRichTextCommand(root, command)
+      })
+
+      root.addEventListener('input', event => {
+        if (!(event.target instanceof HTMLElement)
+          || !event.target.closest(richTextEditorContentSelector)) return
+
+        syncRichTextCommandStates(root)
+
+        dispatchRichTextChange(root)
+      })
+
+      root.addEventListener('keyup', () => { syncRichTextCommandStates(root); })
+
+      root.addEventListener('mouseup', () => { syncRichTextCommandStates(root); })
+
+      syncRichTextCommandStates(root)
+    }
+  }
+
+  const themeBuilderExportButtonLabels: Record<ThemeBuilderExportFormat, string> = {
+    css: 'Copy CSS',
+    figma: 'Copy Figma JSON',
+    tokens: 'Copy token JSON'
+  }
+
+  const coerceThemeBuilderExportFormat = (value?: string | null): ThemeBuilderExportFormat => {
+    if (value === 'figma' || value === 'tokens') return value
+
+    return 'css'
+  }
+
+  const coerceThemeBuilderMode = (value?: string | null): ThemeBuilderMode =>
+    value === 'manual' ? 'manual' : 'generated'
+
+  const coerceThemeBuilderScheme = (value?: string | null): ThemeBuilderScheme =>
+    value === 'dark' ? 'dark' : 'light'
+
+  const getDefaultThemeBuilderScheme = (): ThemeBuilderScheme =>
+    document.documentElement.dataset.theme?.includes('dark') ? 'dark' : 'light'
+
+  const normalizeThemeBuilderHue = (
+    value: number | string | null | undefined,
+    fallback = 0
+  ): number => {
+    const parsed = Number(value)
+
+    if (!Number.isFinite(parsed)) return fallback
+
+    return ((Math.round(parsed) % 360) + 360) % 360
+  }
+
+  const normalizeThemeBuilderHex = (value: string): string | null => {
+    const hex = value.trim().replace(/^#/, '')
+
+    if (/^[\da-f]{3}$/i.test(hex)) {
+      return `#${[...hex].map(character => `${character}${character}`).join('').toLowerCase()}`
+    }
+
+    return /^[\da-f]{6}$/i.test(hex) ? `#${hex.toLowerCase()}` : null
+  }
+
+  const hexToThemeBuilderHsl = (value: string): { hue: number, value: string } | null => {
+    const normalized = normalizeThemeBuilderHex(value)
+
+    if (!normalized) return null
+
+    const red = Number.parseInt(normalized.slice(1, 3), 16) / 255
+    const green = Number.parseInt(normalized.slice(3, 5), 16) / 255
+    const blue = Number.parseInt(normalized.slice(5, 7), 16) / 255
+    const max = Math.max(red, green, blue)
+    const min = Math.min(red, green, blue)
+    const lightness = (max + min) / 2
+    const delta = max - min
+    let hue = 0
+    let saturation = 0
+
+    if (delta !== 0) {
+      saturation = delta / (1 - Math.abs(2 * lightness - 1))
+
+      if (max === red) {
+        hue = 60 * (((green - blue) / delta) % 6)
+      } else if (max === green) {
+        hue = 60 * ((blue - red) / delta + 2)
+      } else {
+        hue = 60 * ((red - green) / delta + 4)
+      }
+    }
+
+    const normalizedHue = normalizeThemeBuilderHue(hue)
+
+    return {
+      hue: normalizedHue,
+      value: `${normalizedHue} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`
+    }
+  }
+
+  const setThemeBuilderHexValidity = (input: HTMLInputElement, isValid: boolean): void => {
+    if (isValid) {
+      input.removeAttribute('aria-invalid')
+
+      return
+    }
+
+    input.setAttribute('aria-invalid', 'true')
+  }
+
+  const getThemeBuilderTarget = (root: HTMLElement): HTMLElement | null => {
+    const selector = root.dataset.uiThemeTarget
+
+    if (!selector) return document.documentElement
+
+    try {
+      return document.querySelector<HTMLElement>(selector)
+    } catch {
+      return null
+    }
+  }
+
+  const getThemeBuilderButtonValue = (
+    root: HTMLElement,
+    buttons: HTMLButtonElement[],
+    attribute: string,
+    fallback: string
+  ): string => {
+    const activeButton = buttons.find(button =>
+      button.getAttribute('aria-selected') === 'true' ||
+      button.getAttribute('aria-pressed') === 'true'
+    )
+
+    return activeButton?.getAttribute(attribute) ?? root.getAttribute(attribute) ?? fallback
+  }
+
+  const setThemeBuilderPressedState = (
+    buttons: HTMLButtonElement[],
+    attribute: string,
+    value: string
+  ): void => {
+    for (const button of buttons) {
+      const isPressed = button.getAttribute(attribute) === value
+
+      if (button.hasAttribute('aria-pressed')) {
+        button.setAttribute('aria-pressed', String(isPressed))
+      }
+
+      button.classList.toggle('ui-button--secondary', isPressed)
+
+      button.classList.toggle('ui-button--outline', !isPressed)
+    }
+  }
+
+  const bindSyncedThemeBuilderHueInputs = (
+    range: HTMLInputElement | null,
+    number: HTMLInputElement | null,
+    onChange: () => void
+  ): void => {
+    const sync = (source: HTMLInputElement, target: HTMLInputElement | null): void => {
+      source.value = String(normalizeThemeBuilderHue(source.value))
+
+      if (target) {
+        target.value = source.value
+      }
+
+      onChange()
+    }
+
+    range?.addEventListener('input', () => sync(range, number))
+
+    number?.addEventListener('input', () => sync(number, range))
+  }
+
+  const bindThemeBuilderHexInputs = (
+    color: HTMLInputElement | null,
+    text: HTMLInputElement | null,
+    onChange: () => void
+  ): void => {
+    color?.addEventListener('input', () => {
+      if (!text) {
+        onChange()
+
+        return
+      }
+
+      text.value = color.value
+
+      setThemeBuilderHexValidity(text, true)
+
+      onChange()
+    })
+
+    text?.addEventListener('change', () => {
+      const normalized = normalizeThemeBuilderHex(text.value)
+
+      setThemeBuilderHexValidity(text, Boolean(normalized))
+
+      if (normalized) {
+        if (color) color.value = normalized
+
+        text.value = normalized
+      }
+
+      onChange()
+    })
+
+    text?.addEventListener('input', () => {
+      const normalized = normalizeThemeBuilderHex(text.value)
+
+      setThemeBuilderHexValidity(text, Boolean(normalized))
+
+      if (normalized) {
+        if (color) color.value = normalized
+
+        onChange()
+      }
+    })
+  }
+
+  const getComputedThemeBuilderTokens = (target: HTMLElement): LumenThemeTokens => {
+    const styles = getComputedStyle(target)
+    const tokens: LumenThemeTokens = {}
+
+    for (const token of lumenTokenNames) {
+      const value = styles.getPropertyValue(`--${token}`).trim()
+
+      if (value) {
+        tokens[token] = value
+      }
+    }
+
+    return tokens
+  }
+
+  const applyThemeBuilderTokens = (
+    target: HTMLElement,
+    tokens: LumenThemeTokens,
+    scheme: ThemeBuilderScheme
+  ): void => {
+    target.style.colorScheme = scheme
+
+    for (const token of lumenTokenNames) {
+      target.style.setProperty(`--${token}`, tokens[token] ?? '')
+    }
+  }
+
+  const buildThemeBuilderCss = (
+    tokens: LumenThemeTokens,
+    scheme: ThemeBuilderScheme
+  ): string => exportThemeCss(tokens).replace('{', `{\n  color-scheme: ${scheme};`)
+
+  const buildThemeBuilderExport = (
+    tokens: LumenThemeTokens,
+    scheme: ThemeBuilderScheme,
+    format: ThemeBuilderExportFormat
+  ): string => {
+    if (format === 'figma') {
+      return JSON.stringify(exportThemeFigmaVariables(tokens, {
+        collectionName: 'Lumen',
+        modeName: scheme === 'dark' ? 'Dark' : 'Light'
+      }), null, 2)
+    }
+
+    if (format === 'tokens') {
+      return JSON.stringify(exportThemeDesignTokens(tokens), null, 2)
+    }
+
+    return buildThemeBuilderCss(tokens, scheme)
+  }
+
+  const initThemeBuilders = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-theme-builder]')) {
+      if (root.dataset.uiThemeBuilderBound === 'true') continue
+
+      root.dataset.uiThemeBuilderBound = 'true'
+
+      root.dataset.uiBound = 'true'
+
+      const exportButton = root.querySelector<HTMLElement>('[data-ui-theme-export]')
+      const output = root.querySelector<HTMLTextAreaElement | HTMLOutputElement>('[data-ui-theme-output]')
+      const brandHue = root.querySelector<HTMLInputElement>('[data-ui-theme-brand-hue], [data-ui-theme-hue]')
+      const brandHueNumber = root.querySelector<HTMLInputElement>('[data-ui-theme-brand-hue-number]')
+      const accentHue = root.querySelector<HTMLInputElement>('[data-ui-theme-accent-hue]')
+      const accentHueNumber = root.querySelector<HTMLInputElement>('[data-ui-theme-accent-hue-number]')
+      const primaryColor = root.querySelector<HTMLInputElement>('[data-ui-theme-primary-color]')
+      const primaryHex = root.querySelector<HTMLInputElement>('[data-ui-theme-primary-hex]')
+      const secondaryColor = root.querySelector<HTMLInputElement>('[data-ui-theme-secondary-color]')
+      const secondaryHex = root.querySelector<HTMLInputElement>('[data-ui-theme-secondary-hex]')
+      const exportFormatButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-ui-theme-export-format]')]
+      const modeButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-ui-theme-mode]')]
+      const schemeButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-ui-theme-scheme]')]
+
+      const hasTokenControls = Boolean(
+        brandHue ||
+        brandHueNumber ||
+        accentHue ||
+        accentHueNumber ||
+        primaryColor ||
+        primaryHex ||
+        secondaryColor ||
+        secondaryHex ||
+        root.hasAttribute('data-ui-theme-brand-hue') ||
+        root.hasAttribute('data-ui-theme-accent-hue') ||
+        root.hasAttribute('data-ui-theme-hue')
+      )
+
+      let currentExportValue = ''
+      let currentFormat = coerceThemeBuilderExportFormat(getThemeBuilderButtonValue(root, exportFormatButtons, 'data-ui-theme-export-format', 'css'))
+      let currentScheme = coerceThemeBuilderScheme(getThemeBuilderButtonValue(root, schemeButtons, 'data-ui-theme-scheme', getDefaultThemeBuilderScheme()))
+      let currentTokens: LumenThemeTokens | null = null
+
+      const updateExportButtonLabel = (): void => {
+        if (!exportButton || exportFormatButtons.length === 0) return
+
+        exportButton.replaceChildren(themeBuilderExportButtonLabels[currentFormat])
+      }
+
+      const writeExport = (tokens: LumenThemeTokens, scheme: ThemeBuilderScheme): void => {
+        currentExportValue = buildThemeBuilderExport(tokens, scheme, currentFormat)
+
+        if (output) {
+          output.value = currentExportValue
+        }
+
+        updateExportButtonLabel()
+      }
+
+      const writeComputedExport = (): void => {
+        const target = getThemeBuilderTarget(root) ?? document.documentElement
+
+        currentTokens = getComputedThemeBuilderTokens(target)
+
+        writeExport(currentTokens, currentScheme)
+      }
+
+      const update = (
+        options: { apply?: boolean, dispatch?: boolean } = {}
+      ): void => {
+        const hue = normalizeThemeBuilderHue(
+          brandHue?.value ??
+          brandHueNumber?.value ??
+          root.getAttribute('data-ui-theme-brand-hue') ??
+          root.getAttribute('data-ui-theme-hue')
+        )
+
+        const nextAccentHue = normalizeThemeBuilderHue(
+          accentHue?.value ?? accentHueNumber?.value ?? root.getAttribute('data-ui-theme-accent-hue'),
+          normalizeThemeBuilderHue(hue + 150)
+        )
+
+        const mode = coerceThemeBuilderMode(getThemeBuilderButtonValue(root, modeButtons, 'data-ui-theme-mode', 'generated'))
+        const primaryValue = primaryHex?.value ?? primaryColor?.value
+        const secondaryValue = secondaryHex?.value ?? secondaryColor?.value
+        const primary = primaryValue ? hexToThemeBuilderHsl(primaryValue) : null
+        const secondary = secondaryValue ? hexToThemeBuilderHsl(secondaryValue) : null
+        const baseHue = mode === 'manual' ? primary?.hue ?? hue : hue
+        const baseAccentHue = mode === 'manual' ? secondary?.hue ?? nextAccentHue : nextAccentHue
+
+        const tokens = createThemeFromHue(baseHue, {
+          accentHue: baseAccentHue,
+          scheme: currentScheme
+        })
+
+        if (mode === 'manual') {
+          if (primary) {
+            tokens.brand = primary.value
+
+            tokens['brand-solid'] = primary.value
+          }
+
+          if (secondary) {
+            tokens.accent = secondary.value
+          }
+        }
+
+        currentTokens = tokens
+
+        const target = getThemeBuilderTarget(root)
+
+        if (options.apply !== false && target) {
+          applyThemeBuilderTokens(target, tokens, currentScheme)
+        }
+
+        writeExport(tokens, currentScheme)
+
+        if (options.dispatch === false) return
+
+        root.dispatchEvent(new CustomEvent('ui:theme-change', {
+          bubbles: true,
+          detail: {
+            accentHue: baseAccentHue,
+            hue: baseHue,
+            mode,
+            scheme: currentScheme,
+            tokens
+          }
+        }))
+      }
+
+      bindSyncedThemeBuilderHueInputs(brandHue, brandHueNumber, update)
+
+      bindSyncedThemeBuilderHueInputs(accentHue, accentHueNumber, update)
+
+      bindThemeBuilderHexInputs(primaryColor, primaryHex, update)
+
+      bindThemeBuilderHexInputs(secondaryColor, secondaryHex, update)
+
+      for (const button of exportFormatButtons) {
+        button.addEventListener('click', () => {
+          currentFormat = coerceThemeBuilderExportFormat(button.getAttribute('data-ui-theme-export-format'))
+
+          setThemeBuilderPressedState(exportFormatButtons, 'data-ui-theme-export-format', currentFormat)
+
+          if (hasTokenControls) {
+            update({ apply: false, dispatch: false })
+          } else {
+            writeComputedExport()
+          }
+        })
+      }
+
+      for (const button of modeButtons) {
+        button.addEventListener('click', () => {
+          const mode = coerceThemeBuilderMode(button.getAttribute('data-ui-theme-mode'))
+
+          if (button.getAttribute('role') !== 'tab') {
+            setThemeBuilderPressedState(modeButtons, 'data-ui-theme-mode', mode)
+          }
+
+          update()
+        })
+
+        button.addEventListener('keydown', event => {
+          if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+
+          queueMicrotask(update)
+        })
+      }
+
+      for (const button of schemeButtons) {
+        button.addEventListener('click', () => {
+          currentScheme = coerceThemeBuilderScheme(button.getAttribute('data-ui-theme-scheme'))
+
+          setThemeBuilderPressedState(schemeButtons, 'data-ui-theme-scheme', currentScheme)
+
+          update()
+        })
+      }
+
+      exportButton?.addEventListener('click', async () => {
+        if (hasTokenControls && !currentTokens) {
+          update({ apply: false, dispatch: false })
+        } else if (!hasTokenControls) {
+          writeComputedExport()
+        }
+
+        const value = output?.value || currentExportValue
+
+        await navigator.clipboard?.writeText(value).catch(() => null)
+
+        root.dispatchEvent(new CustomEvent('ui:theme-export', {
+          bubbles: true,
+          detail: {
+            css: currentFormat === 'css' ? value : undefined,
+            format: currentFormat,
+            tokens: currentTokens,
+            value
+          }
+        }))
+      })
+
+      if (hasTokenControls) {
+        update({
+          apply: Boolean(root.dataset.uiThemeTarget || root.hasAttribute('data-ui-theme-apply-on-init')),
+          dispatch: false
+        })
+      } else if (output) {
+        writeComputedExport()
+      }
+    }
+  }
+
+  const closeContextMenu = (menu: HTMLElement): void => {
+    if (menu.dataset.state !== 'open') return
+
+    menu.dataset.state = 'closed'
+
+    menu.hidden = true
+  }
+
+  const openContextMenuAt = (menu: HTMLElement, x: number, y: number): void => {
+    for (const other of document.querySelectorAll<HTMLElement>('[data-ui-context-menu][data-state="open"]')) {
+      if (other !== menu) closeContextMenu(other)
+    }
+
+    menu.hidden = false
+
+    menu.style.position = 'fixed'
+
+    menu.style.zIndex = '60'
+
+    menu.dataset.state = 'open'
+
+    const rect = menu.getBoundingClientRect()
+    const left = Math.max(8, Math.min(x, window.innerWidth - rect.width - 8))
+    const top = Math.max(8, Math.min(y, window.innerHeight - rect.height - 8))
+
+    menu.style.left = `${left}px`
+
+    menu.style.top = `${top}px`
+
+    getFocusable(menu)[0]?.focus()
+  }
+
+  /**
+   * Context menus stay inert (statically visible) unless an element points at
+   * them with data-ui-context-menu-trigger="<menu id>". With a trigger bound,
+   * the menu hides until right-click / Shift+F10 opens it at the pointer.
+   */
+  const initContextMenus = (scope: ParentNode): void => {
+    for (const target of scope.querySelectorAll<HTMLElement>('[data-ui-context-menu-trigger]')) {
+      if (target.dataset.uiBound === 'true') continue
+
+      target.dataset.uiBound = 'true'
+
+      const menuId = target.getAttribute('data-ui-context-menu-trigger')
+      const menu = menuId ? document.getElementById(menuId) : null
+
+      if (!menu) continue
+
+      menu.hidden = true
+
+      menu.dataset.state = 'closed'
+
+      target.addEventListener('contextmenu', event => {
+        event.preventDefault()
+
+        openContextMenuAt(menu, event.clientX, event.clientY)
+      })
+
+      target.addEventListener('keydown', event => {
+        if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')) return
+
+        event.preventDefault()
+
+        const rect = target.getBoundingClientRect()
+
+        openContextMenuAt(menu, rect.left + 16, rect.top + 16)
+      })
+
+      menu.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          closeContextMenu(menu)
+
+          target.focus()
+
+          return
+        }
+
+        if (!['ArrowDown', 'ArrowUp', 'End', 'Home'].includes(event.key)) return
+
+        const items = getFocusable(menu)
+
+        if (items.length === 0) return
+
+        event.preventDefault()
+
+        const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+
+        items[getLoopedIndex(event.key, currentIndex, items.length, ['ArrowDown'])]?.focus()
+      })
+
+      menu.addEventListener('click', event => {
+        if (event.target instanceof HTMLElement && event.target.closest('[role="menuitem"]')) {
+          closeContextMenu(menu)
+        }
+      })
+    }
+  }
+
+  /**
+   * Date range pickers keep the two native date inputs consistent: the end
+   * input cannot go before the start, and vice versa.
+   */
+  const initDateRangePickers = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-date-range-picker]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      const inputs = root.querySelectorAll<HTMLInputElement>('input[type="date"]')
+      const start = inputs[0]
+      const end = inputs[inputs.length - 1]
+
+      if (!start || !end || start === end) continue
+
+      const syncRange = (): void => {
+        const datePickers = root.querySelectorAll<HTMLElement>('[data-ui-date-picker]')
+
+        datePickers[0]?.setAttribute('data-range-part', 'start')
+
+        datePickers[datePickers.length - 1]?.setAttribute('data-range-part', 'end')
+
+        if (start.value) {
+          end.min = start.value
+        } else {
+          end.removeAttribute('min')
+        }
+
+        if (end.value) {
+          start.max = end.value
+        } else {
+          start.removeAttribute('max')
+        }
+
+        if (start.value && end.value && end.value < start.value) {
+          end.value = start.value
+
+          end.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+
+        let rangeState = 'empty'
+
+        if (start.value && end.value) {
+          rangeState = 'complete'
+        } else if (start.value) {
+          rangeState = 'selecting-end'
+        }
+
+        root.dataset.rangeState = rangeState
+      }
+
+      start.addEventListener('change', syncRange)
+
+      end.addEventListener('change', syncRange)
+
+      syncRange()
+    }
+  }
+
+  const getToastVariantClass = (variant: string | undefined): string => {
+    if (variant === 'success') return 'ui-toast--success'
+
+    if (variant === 'warning') return 'ui-toast--warning'
+
+    if (variant === 'destructive') return 'ui-toast--destructive'
+
+    return ''
+  }
+
+  type ToastPlacement =
+    | 'bottom-center'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'top-center'
+    | 'top-left'
+    | 'top-right'
+
+  type ToastAction = {
+    event?: string
+    label?: string
+    onClick?: (event: MouseEvent, toast: HTMLElement) => void
+    value?: unknown
+  }
+
+  type ToastDetail = {
+    action?: ToastAction
+    description?: string
+    duration?: number
+    id?: string
+    max?: number
+    placement?: ToastPlacement
+    title?: string
+    variant?: string
+  }
+
+  type ToastApi = {
+    create: (detail: ToastDetail) => string
+    dismiss: (id?: string) => void
+    update: (id: string, detail: ToastDetail) => void
+  }
+
+  const defaultToastDuration = 5000
+  const defaultToastMax = 5
+  const noop = (): void => undefined
+
+  const toastTimers = new WeakMap<HTMLElement, {
+    cleanup: () => void
+    duration: number
+    remaining: number
+    startedAt: number
+    timer: number
+  }>()
+
+  const isToastPlacement = (placement: string | undefined): placement is ToastPlacement =>
+    placement === 'top-left' ||
+    placement === 'top-center' ||
+    placement === 'top-right' ||
+    placement === 'bottom-left' ||
+    placement === 'bottom-center' ||
+    placement === 'bottom-right'
+
+  const getToastPlacement = (placement: string | undefined): ToastPlacement =>
+    isToastPlacement(placement) ? placement : 'bottom-right'
+
+  const getToastViewport = (placement: string | undefined): HTMLElement => {
+    const resolvedPlacement = getToastPlacement(placement)
+    const shouldUseAnyViewport = placement === undefined
+
+    const existing = document.querySelector<HTMLElement>(`[data-ui-sonner][data-placement="${resolvedPlacement}"]`) ??
+      (shouldUseAnyViewport ? document.querySelector<HTMLElement>('[data-ui-sonner]') : null)
+
+    if (existing) {
+      existing.dataset.placement = existing.dataset.placement ?? resolvedPlacement
+
+      existing.setAttribute('aria-live', existing.getAttribute('aria-live') ?? 'polite')
+
+      existing.setAttribute('aria-atomic', existing.getAttribute('aria-atomic') ?? 'false')
+
+      return existing
+    }
+
+    const viewport = document.createElement('div')
+
+    viewport.className = 'ui-sonner'
+
+    viewport.dataset.uiSonner = ''
+
+    viewport.dataset.placement = resolvedPlacement
+
+    viewport.setAttribute('aria-live', 'polite')
+
+    viewport.setAttribute('aria-atomic', 'false')
+
+    viewport.setAttribute('aria-label', 'Notifications')
+
+    document.body.append(viewport)
+
+    return viewport
+  }
+
+  const clearToastTimer = (toast: HTMLElement): void => {
+    const timer = toastTimers.get(toast)
+
+    if (!timer) return
+
+    window.clearTimeout(timer.timer)
+
+    timer.cleanup()
+
+    toastTimers.delete(toast)
+  }
+
+  const dismissToast = (toast: HTMLElement): void => {
+    clearToastTimer(toast)
+
+    toast.dataset.state = 'closed'
+
+    window.setTimeout(() => toast.remove(), 240)
+  }
+
+  const scheduleToastDismiss = (toast: HTMLElement, duration: number): void => {
+    clearToastTimer(toast)
+
+    if (!Number.isFinite(duration) || duration <= 0) return
+
+    const timerState = {
+      cleanup: noop,
+      duration,
+      remaining: duration,
+      startedAt: Date.now(),
+      timer: 0
+    }
+
+    const start = (): void => {
+      timerState.startedAt = Date.now()
+
+      timerState.timer = window.setTimeout(() => dismissToast(toast), timerState.remaining)
+    }
+
+    const pause = (): void => {
+      window.clearTimeout(timerState.timer)
+
+      timerState.remaining = Math.max(0, timerState.remaining - (Date.now() - timerState.startedAt))
+    }
+
+    const resume = (): void => {
+      if (timerState.remaining > 0) start()
+    }
+
+    timerState.cleanup = () => {
+      toast.removeEventListener('mouseenter', pause)
+
+      toast.removeEventListener('mouseleave', resume)
+
+      toast.removeEventListener('focusin', pause)
+
+      toast.removeEventListener('focusout', resume)
+    }
+
+    toast.addEventListener('mouseenter', pause)
+
+    toast.addEventListener('mouseleave', resume)
+
+    toast.addEventListener('focusin', pause)
+
+    toast.addEventListener('focusout', resume)
+
+    toastTimers.set(toast, timerState)
+
+    start()
+  }
+
+  const setToastContent = (toast: HTMLElement, detail: ToastDetail): void => {
+    const title = detail.title ?? toast.dataset.title ?? 'Notification'
+    const description = detail.description ?? toast.dataset.description ?? ''
+    const variant = detail.variant ?? toast.dataset.variant ?? 'default'
+    const variantClass = getToastVariantClass(variant)
+
+    toast.className = variantClass ? `ui-toast ${variantClass}` : 'ui-toast'
+
+    toast.dataset.variant = variant
+
+    toast.dataset.title = title
+
+    toast.dataset.description = description
+
+    toast.setAttribute('role', variant === 'destructive' ? 'alert' : 'status')
+
+    toast.setAttribute('aria-live', variant === 'destructive' ? 'assertive' : 'polite')
+
+    toast.replaceChildren()
+
+    const body = document.createElement('div')
+    const heading = document.createElement('strong')
+
+    body.className = 'ui-toast__body'
+
+    heading.textContent = title
+
+    body.append(heading)
+
+    if (description) {
+      const text = document.createElement('p')
+
+      text.textContent = description
+
+      body.append(text)
+    }
+
+    toast.append(body)
+
+    if (detail.action?.label) {
+      const action = document.createElement('button')
+
+      action.className = 'ui-button ui-button--secondary ui-button--sm ui-toast__action'
+
+      action.type = 'button'
+
+      action.textContent = detail.action.label
+
+      action.addEventListener('click', event => {
+        detail.action?.onClick?.(event, toast)
+
+        toast.dispatchEvent(new CustomEvent(detail.action?.event ?? 'ui:toast-action', {
+          bubbles: true,
+          detail: { id: toast.id, value: detail.action?.value }
+        }))
+
+        dismissToast(toast)
+      })
+
+      toast.append(action)
+    }
+
+    const dismiss = document.createElement('button')
+
+    dismiss.className = 'ui-toast__dismiss'
+
+    dismiss.type = 'button'
+
+    dismiss.setAttribute('aria-label', 'Dismiss notification')
+
+    dismiss.textContent = 'Dismiss'
+
+    dismiss.addEventListener('click', () => dismissToast(toast))
+
+    toast.append(dismiss)
+  }
+
+  const initToasts = (): void => {
+    if (document.documentElement.dataset.uiToastsBound === 'true') return
+
+    document.documentElement.dataset.uiToastsBound = 'true'
+
+    const createToast = (detail: ToastDetail): string => {
+      const viewport = getToastViewport(detail.placement)
+      const id = detail.id ?? `ui-toast-${crypto.randomUUID()}`
+      const duration = detail.duration ?? defaultToastDuration
+      const max = detail.max ?? Number(viewport.dataset.uiToastMax ?? defaultToastMax)
+      const existingToast = document.getElementById(id)
+
+      if (existingToast instanceof HTMLElement && existingToast.hasAttribute('data-ui-toast')) {
+        existingToast.dataset.state = 'open'
+
+        setToastContent(existingToast, detail)
+
+        viewport.append(existingToast)
+
+        scheduleToastDismiss(existingToast, duration)
+
+        return id
+      }
+
+      const toast = document.createElement('aside')
+
+      toast.id = id
+
+      toast.dataset.uiToast = ''
+
+      toast.dataset.state = 'open'
+
+      toast.addEventListener('keydown', event => {
+        if (event.key !== 'Escape') return
+
+        event.preventDefault()
+
+        dismissToast(toast)
+      })
+
+      setToastContent(toast, detail)
+
+      viewport.append(toast)
+
+      scheduleToastDismiss(toast, duration)
+
+      const toasts = [...viewport.querySelectorAll<HTMLElement>('[data-ui-toast]')]
+
+      for (const staleToast of toasts.slice(0, Math.max(0, toasts.length - max))) {
+        dismissToast(staleToast)
+      }
+
+      return id
+    }
+
+    const updateToast = (id: string, detail: ToastDetail): void => {
+      const toast = document.getElementById(id)
+
+      if (!(toast instanceof HTMLElement) || !toast.hasAttribute('data-ui-toast')) return
+
+      setToastContent(toast, { ...detail, id })
+
+      if (detail.duration !== undefined) {
+        scheduleToastDismiss(toast, detail.duration)
+      }
+    }
+
+    const dismissToastById = (id?: string): void => {
+      const selector = id ? `#${CSS.escape(id)}` : '[data-ui-toast]'
+
+      for (const toast of document.querySelectorAll<HTMLElement>(selector)) {
+        if (toast.hasAttribute('data-ui-toast')) {
+          dismissToast(toast)
+        }
+      }
+    }
+
+    const api: ToastApi = {
+      create: createToast,
+      dismiss: dismissToastById,
+      update: updateToast
+    }
+
+    ;(window as Window & { LumenToast?: ToastApi }).LumenToast = api
+
+    for (const viewport of document.querySelectorAll<HTMLElement>('[data-ui-sonner]')) {
+      viewport.dataset.placement = getToastPlacement(viewport.dataset.placement)
+
+      viewport.setAttribute('aria-live', viewport.getAttribute('aria-live') ?? 'polite')
+
+      viewport.setAttribute('aria-atomic', viewport.getAttribute('aria-atomic') ?? 'false')
+    }
+
+    for (const toast of document.querySelectorAll<HTMLElement>('[data-ui-toast], .ui-toast')) {
+      toast.addEventListener('keydown', event => {
+        if (event.key !== 'Escape') return
+
+        event.preventDefault()
+
+        dismissToast(toast)
+      })
+    }
+
+    document.addEventListener('ui:toast', event => {
+      createToast(event instanceof CustomEvent ? event.detail as ToastDetail : {})
+    })
+
+    document.addEventListener('ui:toast-update', event => {
+      const detail = event instanceof CustomEvent ? event.detail as ToastDetail : {}
+
+      if (detail.id) updateToast(detail.id, detail)
+    })
+
+    document.addEventListener('ui:toast-dismiss', event => {
+      const detail = event instanceof CustomEvent ? event.detail as { id?: string } : {}
+
+      dismissToastById(detail.id)
+    })
+  }
+
+  const initFileUploads = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-file-upload]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLInputElement>('[data-ui-file-upload-input]')
+
+      if (!input) continue
+
+      root.dataset.uiBound = 'true'
+
+      const files = root.querySelector<HTMLElement>('[data-ui-file-upload-files]')
+
+      const renderFiles = (): void => {
+        const selectedFiles = input.files ? [...input.files] : []
+
+        root.dataset.state = selectedFiles.length > 0 ? 'selected' : 'idle'
+
+        if (!files) return
+
+        if (selectedFiles.length === 1) {
+          files.textContent = selectedFiles[0]?.name ?? ''
+        } else {
+          files.textContent = selectedFiles.length > 1
+            ? `${selectedFiles.length} files selected`
+            : ''
+        }
+      }
+
+      input.addEventListener('change', renderFiles)
+
+      root.addEventListener('dragover', event => {
+        if (input.disabled) return
+
+        event.preventDefault()
+
+        root.dataset.state = 'drag-over'
+      })
+
+      root.addEventListener('dragleave', event => {
+        if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return
+
+        root.dataset.state = input.files?.length ? 'selected' : 'idle'
+      })
+
+      root.addEventListener('drop', event => {
+        if (input.disabled) return
+
+        event.preventDefault()
+
+        if (event.dataTransfer) {
+          input.files = event.dataTransfer.files
+
+          input.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+      })
+
+      renderFiles()
+    }
+  }
+
+  const initAnchors = (scope: ParentNode): void => {
+    if (typeof IntersectionObserver === 'undefined') return
+
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-anchor]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      const links = [...root.querySelectorAll<HTMLAnchorElement>('a[href^="#"]')]
+      const byId = new Map<string, HTMLAnchorElement>()
+      const targets: HTMLElement[] = []
+
+      for (const link of links) {
+        const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '')
+        const target = id ? document.getElementById(id) : null
+
+        if (target) {
+          byId.set(id, link)
+
+          targets.push(target)
+        }
+      }
+
+      if (!targets.length) continue
+
+      const observer = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+
+          for (const link of links) {
+            link.dataset.active = 'false'
+          }
+
+          const active = byId.get(entry.target.id)
+
+          if (active) {
+            active.dataset.active = 'true'
+          }
+
+          break
+        }
+      }, { rootMargin: '0px 0px -70% 0px', threshold: 0 })
+
+      for (const target of targets) {
+        observer.observe(target)
+      }
+    }
+  }
+
+  const initTours = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-tour]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const popover = root.querySelector<HTMLElement>('[data-ui-tour-popover]')
+      const steps = [...root.querySelectorAll<HTMLElement>('[data-ui-tour-step]')]
+
+      if (!popover || !steps.length) continue
+
+      root.dataset.uiBound = 'true'
+
+      let index = 0
+
+      const positionStep = (): void => {
+        const step = steps[index]
+
+        if (!step) return
+
+        for (const [stepIndex, node] of steps.entries()) {
+          node.hidden = stepIndex !== index
+        }
+
+        const selector = step.dataset.target
+        const target = selector ? document.querySelector<HTMLElement>(selector) : null
+
+        if (target) {
+          const rect = target.getBoundingClientRect()
+
+          popover.style.top = `${rect.bottom + 8}px`
+
+          popover.style.left = `${rect.left}px`
+        }
+      }
+
+      const open = (): void => {
+        root.hidden = false
+
+        index = 0
+
+        positionStep()
+      }
+
+      const close = (): void => {
+        root.hidden = true
+      }
+
+      root.addEventListener('click', event => {
+        const target = event.target
+
+        if (!(target instanceof HTMLElement)) return
+
+        if (target.closest('[data-ui-tour-next]')) {
+          if (index < steps.length - 1) {
+            index += 1
+
+            positionStep()
+          } else {
+            close()
+          }
+        } else if (target.closest('[data-ui-tour-prev]')) {
+          if (index > 0) {
+            index -= 1
+
+            positionStep()
+          }
+        } else if (target.closest('[data-ui-tour-close]') || target.hasAttribute('data-ui-tour-backdrop')) {
+          close()
+        }
+      })
+
+      const opener = root.id ? document.querySelector<HTMLElement>(`[data-ui-tour-open="#${root.id}"]`) : null
+
+      if (opener) {
+        opener.addEventListener('click', open)
+      }
+
+      const lumenTourWindow = window as Window & { LumenTours?: Record<string, () => void> }
+
+      lumenTourWindow.LumenTours = lumenTourWindow.LumenTours ?? {}
+
+      if (root.id) {
+        lumenTourWindow.LumenTours[root.id] = open
+      }
+    }
+  }
+
+  const initTransfers = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-transfer]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      root.dataset.uiBound = 'true'
+
+      const lists = new Map<string, HTMLElement>()
+
+      for (const list of root.querySelectorAll<HTMLElement>('[data-ui-transfer-list]')) {
+        if (list.dataset.side) {
+          lists.set(list.dataset.side, list)
+        }
+      }
+
+      const move = (fromSide: string, toSide: string): void => {
+        const from = lists.get(fromSide)
+        const to = lists.get(toSide)
+
+        if (!from || !to) return
+
+        const moved: string[] = []
+
+        for (const checkbox of from.querySelectorAll<HTMLInputElement>('[data-ui-transfer-item]')) {
+          if (!checkbox.checked) continue
+
+          const item = checkbox.closest<HTMLElement>('.ui-transfer__item')
+
+          if (item) {
+            checkbox.checked = false
+
+            to.append(item)
+
+            moved.push(checkbox.value)
+          }
+        }
+
+        if (moved.length) {
+          root.dispatchEvent(new CustomEvent('ui:transfer-change', {
+            bubbles: true,
+            detail: { from: fromSide, to: toSide, values: moved }
+          }))
+        }
+      }
+
+      for (const button of root.querySelectorAll<HTMLButtonElement>('[data-ui-transfer-move]')) {
+        button.addEventListener('click', () => {
+          if (button.dataset.uiTransferMove === 'target') {
+            move('source', 'target')
+          } else if (button.dataset.uiTransferMove === 'source') {
+            move('target', 'source')
+          }
+        })
+      }
+    }
+  }
+
+  const initMentions = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-mentions]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const input = root.querySelector<HTMLTextAreaElement>('[data-ui-mentions-input]')
+      const list = root.querySelector<HTMLElement>('[data-ui-mentions-list]')
+
+      if (!input || !list) continue
+
+      root.dataset.uiBound = 'true'
+
+      const trigger = root.dataset.uiMentionsTrigger ?? '@'
+      const options = [...list.querySelectorAll<HTMLButtonElement>('[data-ui-mentions-option]')]
+
+      const close = (): void => {
+        list.hidden = true
+      }
+
+      const filter = (): void => {
+        const caret = input.selectionStart ?? input.value.length
+        const match = new RegExp(`\\${trigger}(\\w*)$`).exec(input.value.slice(0, caret))
+
+        if (!match) {
+          close()
+
+          return
+        }
+
+        const query = (match[1] ?? '').toLowerCase()
+        let visibleCount = 0
+
+        for (const option of options) {
+          const visible = (option.dataset.value ?? '').toLowerCase().startsWith(query)
+
+          option.hidden = !visible
+
+          if (visible) visibleCount += 1
+        }
+
+        list.hidden = visibleCount === 0
+      }
+
+      const insert = (value: string): void => {
+        const caret = input.selectionStart ?? input.value.length
+        const before = input.value.slice(0, caret).replace(new RegExp(`\\${trigger}\\w*$`), `${trigger}${value} `)
+
+        input.value = before + input.value.slice(caret)
+
+        input.focus()
+
+        input.setSelectionRange(before.length, before.length)
+
+        close()
+
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      }
+
+      input.addEventListener('input', filter)
+
+      input.addEventListener('keyup', filter)
+
+      input.addEventListener('blur', () => window.setTimeout(close, 120))
+
+      for (const option of options) {
+        option.addEventListener('mousedown', event => {
+          event.preventDefault()
+
+          insert(option.dataset.value ?? '')
+        })
+      }
+    }
+  }
+
+  const closeSpeedDial = (root: HTMLElement, restoreFocus = false): void => {
+    const trigger = root.querySelector<HTMLButtonElement>('[data-ui-speed-dial-trigger]')
+
+    root.dataset.state = 'closed'
+
+    trigger?.setAttribute('aria-expanded', 'false')
+
+    if (restoreFocus) trigger?.focus()
+  }
+
+  const speedDialNavigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']
+
+  const initSpeedDials = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-speed-dial]')) {
+      const trigger = root.querySelector<HTMLButtonElement>('[data-ui-speed-dial-trigger]')
+      const actions = root.querySelector<HTMLElement>('[data-ui-speed-dial-actions]')
+
+      if (!trigger || !actions || root.dataset.uiBound === 'true') continue
+
+      const items = [...actions.querySelectorAll<HTMLElement>('[role="menuitem"], button:not([disabled]), a[href]')]
+
+      root.dataset.uiBound = 'true'
+
+      root.dataset.state = root.dataset.state === 'open' ? 'open' : 'closed'
+
+      trigger.setAttribute('aria-expanded', String(root.dataset.state === 'open'))
+
+      const open = (focusPosition?: 'first' | 'last') => {
+        root.dataset.state = 'open'
+
+        trigger.setAttribute('aria-expanded', 'true')
+
+        if (focusPosition === 'first') items[0]?.focus()
+
+        if (focusPosition === 'last') items.at(-1)?.focus()
+      }
+
+      trigger.addEventListener('click', () => {
+        if (root.dataset.state === 'open') {
+          closeSpeedDial(root)
+        } else {
+          open()
+        }
+      })
+
+      trigger.addEventListener('keydown', event => {
+        if (event.key === 'Escape') closeSpeedDial(root)
+
+        if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+          event.preventDefault()
+
+          open('first')
+
+          return
+        }
+
+        if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
+          event.preventDefault()
+
+          open('last')
+        }
+      })
+
+      actions.addEventListener('click', event => {
+        if ((event.target as HTMLElement).closest('[role="menuitem"], button, a')) {
+          closeSpeedDial(root)
+        }
+      })
+
+      actions.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+
+          closeSpeedDial(root, true)
+
+          return
+        }
+
+        if (!speedDialNavigationKeys.includes(event.key)) return
+
+        const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+
+        const targetIndex = getLoopedIndex(
+          event.key,
+          currentIndex,
+          items.length,
+          ['ArrowDown', 'ArrowRight']
+        )
+
+        event.preventDefault()
+
+        items[targetIndex]?.focus()
+      })
+    }
+  }
+
+  // cspell:disable-next-line
+  const initCascaders = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-cascader]')) {
+      if (root.dataset.uiCascaderBound === 'true') continue
+
+      root.dataset.uiCascaderBound = 'true'
+
+      const valueLabel = root.querySelector<HTMLElement>('[data-ui-cascader-value]')
+      const input = root.querySelector<HTMLInputElement>('[data-ui-cascader-input]')
+      const trigger = root.querySelector<HTMLElement>('[data-ui-trigger]')
+      const panel = trigger ? getPanel(trigger) : null
+      const columns = [...root.querySelectorAll<HTMLElement>('.ui-cascader__column')]
+
+      for (const option of root.querySelectorAll<HTMLButtonElement>('[data-ui-cascader-option]')) {
+        option.addEventListener('click', () => {
+          const column = option.closest<HTMLElement>('.ui-cascader__column')
+
+          if (column) {
+            const columnIndex = columns.indexOf(column)
+
+            for (const descendant of columns.slice(columnIndex + 1)) {
+              descendant.hidden = true
+
+              for (const descendantOption of descendant.querySelectorAll<HTMLElement>('[data-ui-cascader-option]')) {
+                descendantOption.dataset.active = 'false'
+
+                descendantOption.setAttribute('aria-selected', 'false')
+              }
+            }
+
+            for (const sibling of column.querySelectorAll<HTMLElement>('[data-ui-cascader-option]')) {
+              sibling.dataset.active = 'false'
+
+              sibling.setAttribute('aria-selected', 'false')
+            }
+          }
+
+          option.dataset.active = 'true'
+
+          option.setAttribute('aria-selected', 'true')
+
+          const nextSelector = option.dataset.uiCascaderNext
+          const next = nextSelector ? root.querySelector<HTMLElement>(nextSelector) : null
+
+          if (next) {
+            next.hidden = false
+
+            return
+          }
+
+          const value = option.dataset.value ?? (option.textContent ?? '').trim()
+
+          if (valueLabel) {
+            valueLabel.textContent = option.dataset.label ?? (option.textContent ?? '').trim()
+          }
+
+          if (input) {
+            input.value = value
+          }
+
+          if (trigger && panel) {
+            setOpen(trigger, panel, false)
+          }
+
+          root.dispatchEvent(new CustomEvent('ui:cascader-change', { bubbles: true, detail: { value } }))
+        })
+      }
+
+      panel?.addEventListener('keydown', event => {
+        const target = event.target
+
+        if (!(target instanceof HTMLElement)) return
+
+        const option = target.closest<HTMLButtonElement>('[data-ui-cascader-option]')
+        const column = option?.closest<HTMLElement>('.ui-cascader__column')
+
+        if (!option || !column) return
+
+        const columnIndex = columns.indexOf(column)
+        const options = [...column.querySelectorAll<HTMLButtonElement>('[data-ui-cascader-option]')]
+
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') {
+          event.preventDefault()
+
+          const currentIndex = options.indexOf(option)
+          const nextIndex = getLoopedIndex(event.key, currentIndex, options.length, ['ArrowDown'])
+
+          options[nextIndex]?.focus()
+
+          return
+        }
+
+        if (event.key === 'ArrowRight') {
+          const nextSelector = option.dataset.uiCascaderNext
+          const next = nextSelector ? root.querySelector<HTMLElement>(nextSelector) : null
+
+          if (!next) return
+
+          event.preventDefault()
+
+          option.click()
+
+          next.querySelector<HTMLElement>('[data-ui-cascader-option]')?.focus()
+
+          return
+        }
+
+        if (event.key !== 'ArrowLeft' || columnIndex <= 0) return
+
+        event.preventDefault()
+
+        const previousColumn = columns.findLast((candidate, index) => index < columnIndex && !candidate.hidden)
+
+        for (const descendant of columns.slice(columnIndex)) {
+          descendant.hidden = true
+        }
+
+        previousColumn?.querySelector<HTMLElement>('[data-ui-cascader-option][data-active="true"]')?.focus()
+      })
+    }
+  }
+
+  const initTreeSelects = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-tree-select]')) {
+      if (root.dataset.uiTreeSelectBound === 'true') continue
+
+      root.dataset.uiTreeSelectBound = 'true'
+
+      const valueLabel = root.querySelector<HTMLElement>('[data-ui-tree-select-value]')
+      const input = root.querySelector<HTMLInputElement>('[data-ui-tree-select-input]')
+      const trigger = root.querySelector<HTMLElement>('[data-ui-trigger]')
+      const panel = root.querySelector<HTMLElement>('[data-ui-panel]')
+
+      for (const item of root.querySelectorAll<HTMLElement>('[data-ui-panel] [data-value]')) {
+        item.addEventListener('click', () => {
+          const value = item.dataset.value ?? ''
+
+          if (valueLabel) {
+            valueLabel.textContent = (item.textContent ?? '').trim()
+          }
+
+          if (input) {
+            input.value = value
+          }
+
+          if (trigger && panel) {
+            setOpen(trigger, panel, false)
+          }
+
+          root.dispatchEvent(new CustomEvent('ui:tree-select-change', { bubbles: true, detail: { value } }))
+        })
+      }
+    }
+  }
+
+  const initBackToTopButtons = (scope: ParentNode): void => {
+    for (const button of scope.querySelectorAll<HTMLButtonElement>('[data-ui-back-to-top]')) {
+      if (button.dataset.uiBound === 'true') continue
+
+      button.dataset.uiBound = 'true'
+
+      button.addEventListener('click', () => {
+        window.scrollTo({
+          behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+          top: 0
+        })
+      })
+    }
+  }
+
+  const initScrollReveals = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>(
+      '[data-ui-scroll-reveal], [data-ui-reveal-group]'
+    )) {
+      if (root.dataset.uiScrollRevealBound === 'true') continue
+
+      root.dataset.uiScrollRevealBound = 'true'
+
+      if (root.matches('[data-ui-reveal-group]')) {
+        for (const [index, child] of [...root.children].entries()) {
+          if (child instanceof HTMLElement) {
+            child.style.setProperty('--ui-reveal-index', String(index))
+          }
+        }
+      }
+
+      if (
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        || typeof IntersectionObserver === 'undefined'
+      ) {
+        root.classList.add('is-revealed')
+
+        continue
+      }
+
+      const once = root.dataset.uiRevealOnce !== 'false'
+
+      const threshold = Math.min(
+        1,
+        Math.max(0, Number(root.dataset.uiRevealThreshold) || 0)
+      )
+
+      const observer = new IntersectionObserver((entries) => {
+        const entry = entries[0]
+
+        if (!entry) return
+
+        root.classList.toggle('is-revealed', entry.isIntersecting)
+
+        if (entry.isIntersecting && once) observer.disconnect()
+      }, { threshold })
+
+      observer.observe(root)
+    }
+  }
+
+  const initAnimatedNumbers = (scope: ParentNode): void => {
+    for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-animated-number]')) {
+      if (root.dataset.uiBound === 'true') continue
+
+      const output = root.querySelector<HTMLElement>('[data-ui-animated-number-output]')
+      const from = Number(root.dataset.uiAnimatedNumberFrom)
+      const value = Number(root.dataset.uiAnimatedNumberValue)
+
+      if (!output || !Number.isFinite(from) || !Number.isFinite(value)) continue
+
+      root.dataset.uiBound = 'true'
+
+      const decimals = Math.max(
+        0,
+        Math.min(20, Number(root.dataset.uiAnimatedNumberDecimals) || 0)
+      )
+
+      const prefix = root.dataset.uiAnimatedNumberPrefix ?? ''
+      const suffix = root.dataset.uiAnimatedNumberSuffix ?? ''
+
+      const formatter = new Intl.NumberFormat(root.dataset.uiAnimatedNumberLocale || undefined, {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals
+      })
+
+      const format = (current: number): string =>
+        `${prefix}${formatter.format(current)}${suffix}`
+
+      if (
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        || typeof IntersectionObserver === 'undefined'
+      ) {
+        output.textContent = format(value)
+
+        continue
+      }
+
+      output.textContent = format(from)
+
+      const observer = new IntersectionObserver((entries) => {
+        if (!entries.some(entry => entry.isIntersecting)) return
+
+        observer.disconnect()
+
+        const durationValue = getComputedStyle(root)
+          .getPropertyValue('--ui-motion-duration')
+          .trim()
+
+        const parsedDuration = Number.parseFloat(durationValue)
+        let durationMs = 300
+
+        if (Number.isFinite(parsedDuration)) {
+          durationMs = durationValue.endsWith('ms')
+            ? parsedDuration
+            : parsedDuration * 1000
+        }
+
+        const startedAt = performance.now()
+
+        const update = (now: number): void => {
+          const progress = Math.min(1, (now - startedAt) / Math.max(1, durationMs))
+          const eased = 1 - Math.pow(1 - progress, 3)
+
+          output.textContent = format(from + ((value - from) * eased))
+
+          if (progress < 1) requestAnimationFrame(update)
+        }
+
+        requestAnimationFrame(update)
+      }, { threshold: 0.15 })
+
+      observer.observe(root)
+    }
+  }
+
+  const initUiPrimitives = (scope: ParentNode = document): void => {
+    initDialogs(scope)
+
+    initFields(scope)
+
+    initForms(scope)
+
+    initDisclosures(scope)
+
+    initTabs(scope)
+
+    initRovingGroups(scope)
+
+    initToggles(scope)
+
+    initCommand(scope)
+
+    initComboboxes(scope)
+
+    initSelects(scope)
+
+    initResizableGroups(scope)
+
+    initInputOtpFields(scope)
+
+    initDataTables(scope)
+
+    initCalendars(scope)
+
+    initDatePickers(scope)
+
+    initCodeCopy(scope)
+
+
+    initCarousel(scope)
+
+    initSchedules(scope)
+
+    initTreeCollections(scope)
+
+    initVirtualLists(scope)
+
+    initTagGroups(scope)
+
+    initRichTextEditors(scope)
+
+    initThemeBuilders(scope)
+
+    initTooltips(scope)
+
+    initContextMenus(scope)
+
+    initDateRangePickers(scope)
+
+    initGlassTracking(scope)
+
+    initFileUploads(scope)
+
+    initAnchors(scope)
+
+    initTours(scope)
+
+    initTransfers(scope)
+
+    initMentions(scope)
+
+    initSpeedDials(scope)
+
+    // cspell:disable-next-line
+    initCascaders(scope)
+
+    initTreeSelects(scope)
+
+    initBackToTopButtons(scope)
+
+    initScrollReveals(scope)
+
+    initAnimatedNumbers(scope)
+
+    initToasts()
+  }
+
+  const lumenWindow = window as Window & { LumenInitUiPrimitives?: (scope?: ParentNode) => void }
+
+  lumenWindow.LumenInitUiPrimitives = initUiPrimitives
+
+  if (document.documentElement.dataset.uiPrimitivesGlobalBound !== 'true') {
+    document.documentElement.dataset.uiPrimitivesGlobalBound = 'true'
+
+    document.addEventListener('click', event => {
+      const target = event.target
+
+      if (!(target instanceof Node)) return
+
+      for (const root of document.querySelectorAll<HTMLElement>(disclosureSelector)) {
+        if (!root.contains(target)) {
+          closeDisclosure(root)
+        }
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-combobox]')) {
+        if (!root.contains(target)) {
+          closeCombobox(root)
+        }
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-select]')) {
+        if (!root.contains(target)) {
+          closeSelect(root)
+        }
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-date-picker]')) {
+        if (!root.contains(target)) {
+          closeDatePicker(root)
+        }
+      }
+
+      for (const menu of document.querySelectorAll<HTMLElement>('[data-ui-context-menu][data-state="open"]')) {
+        if (!menu.contains(target)) {
+          closeContextMenu(menu)
+        }
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-speed-dial][data-state="open"]')) {
+        if (!root.contains(target)) {
+          closeSpeedDial(root)
+        }
+      }
+    })
+
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') return
+
+      for (const root of document.querySelectorAll<HTMLElement>(disclosureSelector)) {
+        closeDisclosure(root)
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-combobox]')) {
+        closeCombobox(root)
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-select]')) {
+        closeSelect(root)
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-date-picker]')) {
+        closeDatePicker(root, root.contains(document.activeElement))
+      }
+
+      for (const menu of document.querySelectorAll<HTMLElement>('[data-ui-context-menu][data-state="open"]')) {
+        closeContextMenu(menu)
+      }
+
+      for (const root of document.querySelectorAll<HTMLElement>('[data-ui-speed-dial][data-state="open"]')) {
+        closeSpeedDial(root, root.contains(document.activeElement))
+      }
+    })
+
+    document.addEventListener('astro:page-load', () => lumenWindow.LumenInitUiPrimitives?.())
+
+    document.addEventListener('astro:after-swap', () => lumenWindow.LumenInitUiPrimitives?.())
+  }
+
+  initUiPrimitives()
+</script>