@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/Pill.astro

@@ -1,13 +1,14 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'span'> {
   class?: string | null
   className?: string
   count?: number | string
   href?: string
+  variant?: 'brand' | 'neutral' | 'outline'
 }
 
 const {
@@ -15,21 +16,26 @@ const {
   className = '',
   count,
   href,
+  variant = 'neutral',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-  'ui-pill'
+  'ui-pill',
+  variant !== 'neutral' && `ui-pill--${variant}`
 ], classProp, className)
 ---
 
-{href
-  ? <a class:list={classList} href={href} {...passthrough}>
+{href ?
+  (
+    <a class:list={classList} data-variant={variant} href={href} {...passthrough}>
       <slot />
-      {count != null && <span class="ui-pill__count">{count}</span>}
+      {count !== undefined && <span class="ui-pill__count">{count}</span>}
     </a>
-  : <span class:list={classList} {...passthrough}>
+  ) :
+  (
+    <span class:list={classList} data-variant={variant} {...passthrough}>
       <slot />
-      {count != null && <span class="ui-pill__count">{count}</span>}
+      {count !== undefined && <span class="ui-pill__count">{count}</span>}
     </span>
-}
+  )}

package/components/Popconfirm.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   cancelLabel?: string
   class?: string | null
@@ -27,7 +27,12 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ---
 
 <div class:list={classList} data-surface="default" data-ui-popconfirm data-ui-popover {...passthrough}>
-  <span aria-expanded="false" aria-haspopup="dialog" class="ui-popconfirm__trigger" data-ui-trigger>
+  <span
+    aria-expanded="false"
+    aria-haspopup="dialog"
+    class="ui-popconfirm__trigger"
+    data-ui-trigger
+  >
     <slot />
   </span>
   <div class="ui-popover__panel ui-popconfirm__panel" data-ui-panel hidden role="dialog">

package/components/Popover.astro

@@ -1,37 +1,31 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
-  /**
-   * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
-   */
-  surface?: 'default' | 'glass'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
-  surface = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-popover',
-    resolvedGlass && 'ui-popover--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-popover',
+  glass && 'ui-popover--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <div
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-surface={glass ? 'glass' : 'default'}
   data-ui-popover
   class:list={classList}
   {...passthrough}

package/components/Progress.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -14,7 +14,9 @@ const { class: classProp = '', className = '', max = 100, value = 0, ...rest } =
 const safeMax = max > 0 ? max : 100
 const safeValue = Math.min(safeMax, Math.max(0, value))
 const percentage = (safeValue / safeMax) * 100
-const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-progress'
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-progress'
 ], classProp, className)
 ---
 
@@ -23,8 +25,14 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-progress'
   aria-valuemin="0"
   aria-valuenow={safeValue}
   class:list={classList}
+  data-ui-progress
   role="progressbar"
   {...passthrough}
 >
-  <span class="ui-progress__bar" style={`width: ${percentage}%`}></span>
+  <span
+    class="ui-progress__bar"
+    data-slot="progress-indicator"
+    style={`width: ${percentage}%`}
+  >
+  </span>
 </div>

package/components/Prose.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string

package/components/QRCode.astro

@@ -1,9 +1,9 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import { renderSVG } from 'uqr'
 
-import type { HTMLAttributes } from 'astro/types'
-
 interface Props extends HTMLAttributes<'figure'> {
   class?: string | null
   className?: string
@@ -36,9 +36,17 @@ const qrSrc = qrSvg ? `data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}` : s
   {...passthrough}
 >
   <div class="ui-qr-code__frame">
-    {qrSrc
-      ? <img alt={value ? `QR code for ${value}` : 'QR code'} class="ui-qr-code__image" height={size} src={qrSrc} width={size} />
-      : <slot />}
+    {qrSrc ?
+      (
+        <img
+          alt={value ? `QR code for ${value}` : 'QR code'}
+          class="ui-qr-code__image"
+          height={size}
+          src={qrSrc}
+          width={size}
+        />
+      ) :
+      <slot />}
   </div>
   {value && <figcaption class="ui-qr-code__value">{value}</figcaption>}
 </figure>

package/components/RadioGroup.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'fieldset'> {
   class?: string | null
   className?: string
@@ -15,7 +15,7 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-radio-group'
+  'ui-radio-group'
 ], classProp, className)
 ---
 

package/components/Rating.astro

@@ -1,6 +1,8 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+
 import { composeClassName } from '@santi020k/lumen-core'
+
 import Icon from './Icon.astro'
 
 export interface Props extends HTMLAttributes<'div'> {
@@ -28,7 +30,7 @@ const stars = Array.from({ length: max }, (_, i) => i + 1)
   data-readonly={readonly ? 'true' : 'false'}
   {...props}
 >
-  {stars.map((star) => (
+  {stars.map(star => (
     <button
       type="button"
       class="ui-rating__star"

package/components/Resizable.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -25,11 +25,11 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-resizable',
-    direction === 'vertical' && 'ui-resizable--vertical'
+  'ui-resizable',
+  direction === 'vertical' && 'ui-resizable--vertical'
 ], classProp, className)
-const serializeSize = (value: number | number[] | undefined) =>
-  Array.isArray(value) ? value.join(',') : value
+
+const serializeSize = (value: number | number[] | undefined) => Array.isArray(value) ? value.join(',') : value
 ---
 
 <div
@@ -50,6 +50,7 @@ const serializeSize = (value: number | number[] | undefined) =>
       role="separator"
       tabindex="0"
       type="button"
-    ></button>
+    >
+    </button>
   </template>
 </div>

package/components/RevealGroup.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   animation?: 'fade' | 'slide-up' | 'scale'
   class?: string | null
@@ -30,11 +30,13 @@ const {
 const safeDelay = Math.max(0, delay)
 const safeStagger = Math.max(0, stagger)
 const safeThreshold = Math.min(1, Math.max(0, threshold))
+
 const motionStyle = [
   typeof style === 'string' ? style : '',
   `--ui-reveal-delay:${safeDelay}ms`,
   `--ui-reveal-stagger:${safeStagger}ms`
 ].filter(Boolean).join(';')
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-reveal-group',
   `ui-reveal-group-${animation}`,

package/components/RichTextEditor.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'section'> {
   class?: string | null
   className?: string
@@ -10,6 +10,7 @@ interface Props extends HTMLAttributes<'section'> {
 }
 
 const { class: classProp = '', className = '', glass = false, ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-rich-text-editor', glass && 'ui-rich-text-editor--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---

package/components/Schedule.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'section'> {
   class?: string | null
   className?: string
@@ -10,6 +10,7 @@ interface Props extends HTMLAttributes<'section'> {
 }
 
 const { class: classProp = '', className = '', glass = false, ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-schedule', glass && 'ui-schedule--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---

package/components/ScrollArea.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -17,10 +17,10 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-scroll-area',
-    glass && 'ui-scroll-area--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-scroll-area',
+  glass && 'ui-scroll-area--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

package/components/ScrollProgress.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  position?: 'bottom' | 'top'
+}
+
+const {
+  'aria-label': ariaLabel = 'Reading progress',
+  class: classProp = '',
+  className = '',
+  position = 'top',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-scroll-progress',
+  position === 'bottom' && 'ui-scroll-progress--bottom'
+], classProp, className)
+---
+
+<div
+  aria-label={ariaLabel}
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="0"
+  class:list={classList}
+  data-position={position}
+  data-ui-scroll-progress
+  role="progressbar"
+  {...passthrough}
+>
+  <span class="ui-scroll-progress__bar"></span>
+</div>

package/components/ScrollReveal.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   animation?: 'fade' | 'slide-up' | 'scale'
   class?: string | null
@@ -27,10 +27,12 @@ const {
 
 const safeDelay = Math.max(0, delay)
 const safeThreshold = Math.min(1, Math.max(0, threshold))
+
 const motionStyle = [
   typeof style === 'string' ? style : '',
   `--ui-reveal-delay:${safeDelay}ms`
 ].filter(Boolean).join(';')
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-scroll-reveal',
   `ui-scroll-reveal-${animation}`,

package/components/SearchField.astro

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

package/components/Segmented.astro

@@ -1,9 +1,9 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
-type SegmentedOption = string | { disabled?: boolean; label: string; value: string }
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+type SegmentedOption = string | { disabled?: boolean, label: string, value: string }
 
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
@@ -27,9 +27,7 @@ const {
   ...rest
 } = Astro.props
 
-const normalized = options.map(option =>
-  typeof option === 'string' ? { disabled: false, label: option, value: option } : option
-)
+const normalized = options.map(option => typeof option === 'string' ? { disabled: false, label: option, value: option } : option)
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-segmented',

package/components/Select.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Option {
   disabled?: boolean
   label: string
@@ -35,22 +35,21 @@ const {
   ...rest
 } = Astro.props
 
-const normalizedOptions = options.map(option =>
-  typeof option === 'string' ? { label: option, value: option } : option
-)
-const selectedValue = value === undefined || value === null ? undefined : String(value)
+const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option)
+const selectedValue = value ?? undefined
 const hasSelectedValue = selectedValue !== undefined && selectedValue !== ''
-const selectedOption = normalizedOptions.find(option => String(option.value) === selectedValue)
+const selectedOption = normalizedOptions.find(option => option.value === selectedValue)
 const selectId = id ?? `ui-select-${Math.random().toString(36).slice(2)}`
 const triggerId = `${selectId}-trigger`
 const listId = `${selectId}-listbox`
 const placeholderText = placeholder ?? 'Select an option'
 const triggerText = hasSelectedValue ? selectedOption?.label ?? placeholderText : placeholderText
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-select-field',
-    glass && 'ui-select-field--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-select-field',
+  glass && 'ui-select-field--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
@@ -74,10 +73,20 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     required={required}
     {...passthrough}
   >
-    {placeholder && <option data-ui-select-placeholder disabled selected={!hasSelectedValue} value="">{placeholder}</option>}
+    {placeholder && (
+      <option data-ui-select-placeholder disabled selected={!hasSelectedValue} value="">
+        {placeholder}
+      </option>
+    )}
     <slot />
     {normalizedOptions.map(option => (
-      <option disabled={option.disabled} selected={selectedValue === String(option.value)} value={option.value}>{option.label}</option>
+      <option
+        disabled={option.disabled}
+        selected={selectedValue === option.value}
+        value={option.value}
+      >
+        {option.label}
+      </option>
     ))}
   </select>
 
@@ -105,7 +114,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
       {normalizedOptions.map(option => (
         <button
           aria-disabled={option.disabled ? 'true' : undefined}
-          aria-selected={selectedValue === String(option.value) ? 'true' : 'false'}
+          aria-selected={selectedValue === option.value ? 'true' : 'false'}
           data-ui-select-option
           data-value={option.value}
           disabled={option.disabled}

package/components/Separator.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'hr'> {
   class?: string | null
   className?: string
@@ -17,9 +17,9 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-separator',
-    orientation === 'horizontal' && 'ui-separator--horizontal',
-    orientation === 'vertical' && 'ui-separator--vertical'
+  'ui-separator',
+  orientation === 'horizontal' && 'ui-separator--horizontal',
+  orientation === 'vertical' && 'ui-separator--vertical'
 ], classProp, className)
 ---
 

package/components/Sheet.astro

@@ -1,37 +1,31 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'dialog'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
-  /**
-   * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
-   */
-  surface?: 'default' | 'glass'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
-  surface = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-sheet',
-    resolvedGlass && 'ui-sheet--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-sheet',
+  glass && 'ui-sheet--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <dialog
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-surface={glass ? 'glass' : 'default'}
   data-ui-sheet
   class:list={classList}
   {...passthrough}

package/components/Sidebar.astro

@@ -1,40 +1,35 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'aside'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   variant?: 'default' | 'unstyled'
-  /**
-   * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
-   */
-  surface?: 'default' | 'glass'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
-  surface = 'default',
   variant = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-sidebar',
-    variant === 'unstyled' && 'ui-sidebar--unstyled',
-    resolvedGlass && 'ui-sidebar--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-sidebar',
+  variant === 'unstyled' && 'ui-sidebar--unstyled',
+  glass && 'ui-sidebar--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <aside
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-slot="sidebar"
+  data-surface={glass ? 'glass' : 'default'}
   data-variant={variant}
   class:list={classList}
   {...passthrough}