@santi020k/lumen-astro 0.1.0 → 0.2.0

package/runtime/UIPrimitives.astro

@@ -92,6 +92,7 @@
     CSS.supports('position-area: block-end')
 
   let uiAnchorCount = 0
+  let uiTabsCount = 0
   const nextAnchorName = (): string => `--ui-anchor-${++uiAnchorCount}`
 
   const isElementVisible = (element: HTMLElement): boolean =>
@@ -612,15 +613,47 @@
       root.dataset.uiBound = 'true'
 
       const tabs = [...root.querySelectorAll<HTMLElement>('[role="tab"]')]
+        .filter(tab => tab.closest('[data-ui-tabs]') === root)
+
       const panels = [...root.querySelectorAll<HTMLElement>('[role="tabpanel"]')]
+        .filter(panel => panel.closest('[data-ui-tabs]') === root)
 
       if (!tabs.length || !panels.length) continue
 
-      const activate = (tab: HTMLElement): void => {
-        for (const item of tabs) {
+      const rootId = root.id || `ui-tabs-${++uiTabsCount}`
+
+      root.id = rootId
+
+      for (const [index, tab] of tabs.entries()) {
+        const panel = panels.find(candidate => (
+          candidate.dataset.value && candidate.dataset.value === tab.dataset.value
+        )) ?? panels[index]
+
+        const value = tab.dataset.value ?? panel?.dataset.value ?? String(index)
+
+        tab.dataset.value = value
+
+        if (panel) {
+          panel.dataset.value = value
+
+          tab.id ||= `${rootId}-tab-${index + 1}`
+
+          panel.id ||= `${rootId}-panel-${index + 1}`
+
+          tab.setAttribute('aria-controls', panel.id)
+
+          panel.setAttribute('aria-labelledby', tab.id)
+        }
+      }
+
+      const activate = (tab: HTMLElement, emit = true): void => {
+        const value = tab.dataset.value ?? ''
+        const wasSelected = tab.getAttribute('aria-selected') === 'true'
+
+        for (const [index, item] of tabs.entries()) {
           const selected = item === tab
           const panelId = item.getAttribute('aria-controls')
-          const panel = panelId ? document.getElementById(panelId) : null
+          const panel = panelId ? document.getElementById(panelId) : panels[index]
 
           item.setAttribute('aria-selected', String(selected))
 
@@ -630,11 +663,57 @@
             panel.hidden = !selected
           }
         }
+
+        root.dataset.value = value
+
+        if (!emit || wasSelected) return
+
+        const storageKey = root.dataset.storageKey
+
+        if (storageKey) {
+          try {
+            localStorage.setItem(storageKey, value)
+          } catch {
+            // Storage can be unavailable in privacy modes; tab selection should still work.
+          }
+
+          for (const otherRoot of document.querySelectorAll<HTMLElement>('[data-ui-tabs][data-storage-key]')) {
+            if (otherRoot === root || otherRoot.dataset.storageKey !== storageKey || otherRoot.dataset.value === value) {
+              continue
+            }
+
+            const matchingTab = [...otherRoot.querySelectorAll<HTMLElement>('[role="tab"]')]
+              .find(candidate => candidate.closest('[data-ui-tabs]') === otherRoot && candidate.dataset.value === value)
+
+            matchingTab?.click()
+          }
+        }
+
+        root.dispatchEvent(new CustomEvent('ui:tabs-change', {
+          bubbles: true,
+          detail: { storageKey, value }
+        }))
       }
 
-      const initiallySelected = tabs.find(tab => tab.getAttribute('aria-selected') === 'true') ?? tabs[0]
+      let storedValue: string | null = null
 
-      if (initiallySelected) activate(initiallySelected)
+      if (root.dataset.storageKey) {
+        try {
+          storedValue = localStorage.getItem(root.dataset.storageKey)
+        } catch {
+          // Storage can be unavailable in privacy modes.
+        }
+      }
+
+      const initialValue = storedValue ?? root.dataset.initialValue
+
+      const initiallySelected = (
+        initialValue
+          ? tabs.find(tab => tab.dataset.value === initialValue)
+          : undefined
+      ) ?? tabs.find(tab => tab.getAttribute('aria-selected') === 'true') ?? tabs[0]
+
+      if (initiallySelected) activate(initiallySelected, false)
 
       for (const [index, tab] of tabs.entries()) {
         tab.addEventListener('click', () => activate(tab))
@@ -719,9 +798,161 @@
       toggle.addEventListener('click', () => {
         const pressed = toggle.getAttribute('aria-pressed') !== 'true'
 
+        const intent = new CustomEvent('ui:toggle-intent', {
+          bubbles: true,
+          cancelable: true,
+          detail: { pressed }
+        })
+
+        toggle.dispatchEvent(intent)
+
+        if (intent.defaultPrevented || toggle.hasAttribute('data-ui-controlled')) return
+
         toggle.setAttribute('aria-pressed', String(pressed))
+      })
+    }
+  }
+
+  const initThemeToggles = (scope: ParentNode): void => {
+    const root = document.documentElement
+    const selector = '[data-ui-theme-toggle]'
+    const transitionDurationMs = 580
+    const transitionFallbackDelayMs = 750
+    const transitionZIndex = 99999
+    const animatingControls = new WeakSet<HTMLButtonElement>()
+
+    const sync = (theme: string): void => {
+      for (const control of document.querySelectorAll<HTMLButtonElement>(selector)) {
+        const darkTheme = control.dataset.darkTheme ?? 'dark'
+        const isDark = theme === darkTheme
+
+        control.setAttribute('aria-pressed', String(isDark))
+
+        control.dataset.uiTheme = theme
+      }
+    }
+
+    const apply = (theme: string, control?: HTMLButtonElement): void => {
+      const previousTheme = root.dataset.theme
+      const darkTheme = control?.dataset.darkTheme ?? 'dark'
+
+      root.dataset.theme = theme
+
+      root.classList.toggle('dark', theme === darkTheme || theme.endsWith('-dark'))
+
+      sync(theme)
+
+      if (!control || previousTheme === theme) return
+
+      const storageKey = control.dataset.storageKey ?? 'lumen-theme'
+
+      try {
+        localStorage.setItem(storageKey, theme)
+      } catch {
+        // Storage can be unavailable in privacy modes; theme switching should still work.
+      }
+
+      control.dispatchEvent(new CustomEvent('ui:theme-change', {
+        bubbles: true,
+        detail: { previousTheme, storageKey, theme }
+      }))
+    }
+
+    const transition = (control: HTMLButtonElement, theme: string): void => {
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      const isTouchDevice = window.matchMedia('(hover: none) and (pointer: coarse)').matches
+
+      if (prefersReducedMotion || isTouchDevice) {
+        apply(theme, control)
+
+        return
+      }
+
+      animatingControls.add(control)
+
+      control.dataset.uiThemeAnimating = 'true'
+
+      const rect = control.getBoundingClientRect()
+      const originX = Math.round(rect.left + (rect.width / 2))
+      const originY = Math.round(rect.top + (rect.height / 2))
+
+      const maximumRadius = Math.hypot(
+        Math.max(originX, window.innerWidth - originX),
+        Math.max(originY, window.innerHeight - originY)
+      )
+
+      const overlay = document.createElement('div')
+      const backgroundColor = getComputedStyle(document.body).backgroundColor
+
+      overlay.dataset.uiThemeTransition = ''
+
+      overlay.setAttribute('aria-hidden', 'true')
+
+      Object.assign(overlay.style, {
+        position: 'fixed',
+        inset: '0',
+        zIndex: String(transitionZIndex),
+        pointerEvents: 'none',
+        backgroundColor,
+        clipPath: `circle(${maximumRadius}px at ${originX}px ${originY}px)`,
+        willChange: 'clip-path'
+      })
+
+      document.body.appendChild(overlay)
+
+      apply(theme, control)
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          overlay.style.transition = `clip-path ${transitionDurationMs}ms cubic-bezier(0.4, 0, 0.2, 1)`
+
+          overlay.style.clipPath = `circle(0 at ${originX}px ${originY}px)`
+
+          const complete = (): void => {
+            overlay.remove()
 
-        toggle.classList.toggle('ui-toggle--pressed', pressed)
+            animatingControls.delete(control)
+
+            delete control.dataset.uiThemeAnimating
+          }
+
+          overlay.addEventListener('transitionend', complete, { once: true })
+
+          window.setTimeout(complete, transitionFallbackDelayMs)
+        })
+      })
+    }
+
+    for (const control of scope.querySelectorAll<HTMLButtonElement>(selector)) {
+      if (control.dataset.uiBound === 'true') continue
+
+      control.dataset.uiBound = 'true'
+
+      const storageKey = control.dataset.storageKey ?? 'lumen-theme'
+      let storedTheme: string | null = null
+
+      try {
+        storedTheme = localStorage.getItem(storageKey)
+      } catch {
+        // Storage can be unavailable in privacy modes.
+      }
+
+      const currentTheme = storedTheme ?? root.dataset.theme
+
+      if (currentTheme) {
+        apply(currentTheme)
+      } else {
+        sync(control.dataset.lightTheme ?? 'light')
+      }
+
+      control.addEventListener('click', () => {
+        if (control.hasAttribute('data-ui-controlled') || animatingControls.has(control)) return
+
+        const lightTheme = control.dataset.lightTheme ?? 'light'
+        const darkTheme = control.dataset.darkTheme ?? 'dark'
+        const current = root.dataset.theme
+
+        transition(control, current === darkTheme ? lightTheme : darkTheme)
       })
     }
   }
@@ -1785,10 +2016,12 @@
     }
 
     if (dispatch) {
-      root.dispatchEvent(new CustomEvent('ui:datatable-selection-change', {
-        bubbles: true,
-        detail: { values: selectedValues }
-      }))
+      const detail = { values: selectedValues }
+
+      root.dispatchEvent(new CustomEvent('ui:data-table-selection-change', { bubbles: true, detail }))
+
+      // Deprecated compatibility event. Remove in Lumen 1.0.
+      root.dispatchEvent(new CustomEvent('ui:datatable-selection-change', { bubbles: true, detail }))
     }
   }
 
@@ -4345,140 +4578,18 @@
     }
   }
 
-  const initBackToTopButtons = (scope: ParentNode): void => {
-    for (const button of scope.querySelectorAll<HTMLButtonElement>('[data-ui-back-to-top]')) {
-      if (button.dataset.uiBound === 'true') continue
+  const initOptionalControllers = (scope: ParentNode): void => {
+    if (!scope.querySelector(
+      '[data-ui-back-to-top], [data-ui-scroll-reveal], [data-ui-reveal-group], [data-ui-animated-number]'
+    )) return
 
-      button.dataset.uiBound = 'true'
-
-      button.addEventListener('click', () => {
-        window.scrollTo({
-          behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
-          top: 0
+    import('./controllers/motion.js')
+      .then(({ initMotionControllers }) => initMotionControllers(scope))
+      .catch(error => {
+        window.setTimeout(() => {
+          throw error
         })
       })
-    }
-  }
-
-  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 => {
@@ -4496,6 +4607,8 @@
 
     initToggles(scope)
 
+    initThemeToggles(scope)
+
     initCommand(scope)
 
     initComboboxes(scope)
@@ -4554,11 +4667,7 @@
 
     initTreeSelects(scope)
 
-    initBackToTopButtons(scope)
-
-    initScrollReveals(scope)
-
-    initAnimatedNumbers(scope)
+    initOptionalControllers(scope)
 
     initToasts()
   }

package/runtime/controllers/motion.ts

@@ -0,0 +1,145 @@
+/* eslint-disable complexity, unicorn/consistent-function-scoping -- Optional motion controllers keep their state and formatting behavior local to the matching primitives. */
+
+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)
+  }
+}
+
+export const initMotionControllers = (scope: ParentNode): void => {
+  initBackToTopButtons(scope)
+
+  initScrollReveals(scope)
+
+  initAnimatedNumbers(scope)
+}

package/styles/layers.css

@@ -0,0 +1 @@
+@import "@santi020k/lumen/layers.css";