@a4ui/core 0.16.0 → 0.17.0

package/dist/styles.css

@@ -162,6 +162,72 @@ body {
   animation: toast-out 0.18s ease-in;
 }
 
+/* Skeleton shimmer — a light band sweeping across the placeholder (opt-in
+   alternative to the default pulse). The band color is token-driven so it reads
+   on every theme; the sweep is a pure CSS animation (no engine). */
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Accordion open/close — animate the panel height using Kobalte's measured
+   `--kb-accordion-content-height` var (presence keyed off data-expanded/closed,
+   animationend-driven like Modal). Engine-free. */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.accordion-content {
+  overflow: hidden;
+}
+.accordion-content[data-expanded] {
+  animation: accordion-down 0.2s ease-out;
+}
+.accordion-content[data-closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+
+/* List stagger — rows fade/slide in on mount, delayed per index (set inline as
+   `animation-delay`). Opt-in via <List stagger>. */
+@keyframes list-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.list-row-stagger {
+  animation: list-row-in 0.35s both ease-out;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {

package/dist/ui/Badge.d.ts

@@ -4,6 +4,12 @@ export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 interface BadgeProps extends ParentProps {
     /** Visual/semantic tone. Defaults to `'neutral'`. */
     tone?: BadgeTone;
+    /**
+     * Show a pinging dot before the label for "live"/"recording"/"online"
+     * states. Tinted with the tone's color (`currentColor`); pure CSS
+     * (`animate-ping`), reduced-motion aware.
+     */
+    pulse?: boolean;
     class?: string;
 }
 /**

package/dist/ui/Carousel.d.ts

@@ -4,6 +4,12 @@ export interface CarouselProps {
     slides: JSX.Element[];
     /** Auto-advance interval in ms. Omit to disable autoplay (also skipped under reduced motion / hover). */
     autoplayMs?: number;
+    /**
+     * Drag/touch to swipe between slides (in addition to arrows, dots, and arrow
+     * keys). The track follows the pointer and snaps on release — pure CSS, no
+     * engine. @default true
+     */
+    swipe?: boolean;
     class?: string;
 }
 /**

package/dist/ui/FloatingActionButton.d.ts

@@ -9,6 +9,12 @@ export interface FloatingActionButtonProps {
     onClick?: () => void;
     /** Screen corner to anchor to. Defaults to `'bottom-right'`. */
     position?: FloatingActionButtonPosition;
+    /**
+     * Material-style click ripple from the press position. Engine-free (Web
+     * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+     * costs nothing when off.
+     */
+    ripple?: boolean;
     class?: string;
 }
 /**

package/dist/ui/Image.d.ts

@@ -5,6 +5,12 @@ export interface ImageProps {
     class?: string;
     /** When true, clicking the image opens a zoomable lightbox. @default true */
     preview?: boolean;
+    /**
+     * Reveal the thumbnail with a blur-up: it starts blurred and slightly scaled,
+     * then eases to sharp once the image finishes loading. Pure CSS transition,
+     * no-op under reduced motion. @default false
+     */
+    blurUp?: boolean;
 }
 /**
  * Lazy-loaded content image. Unless `preview` is disabled, the thumbnail is a

package/dist/ui/List.d.ts

@@ -9,6 +9,11 @@ export interface ListItem {
 }
 interface ListProps {
     items: ListItem[];
+    /**
+     * Cascade the rows in on mount — each row fades/slides up staggered by its
+     * index. Pure CSS (`list-row-stagger`), reduced-motion aware. @default false
+     */
+    stagger?: boolean;
     class?: string;
 }
 export type { ListProps };

package/dist/ui/Skeleton.d.ts

@@ -2,15 +2,22 @@ import { JSX } from 'solid-js';
 interface SkeletonProps {
     /** Size/shape the placeholder to match the content it stands in for, e.g. `"h-4 w-32 rounded-full"`. */
     class?: string;
+    /**
+     * Use a light band sweeping across the placeholder instead of the default
+     * pulse. Pure CSS (`.skeleton-shimmer`), token-tinted, reduced-motion aware.
+     */
+    shimmer?: boolean;
 }
 /**
- * Pulsing placeholder block for content that is still loading. Plain `div`,
- * no Kobalte primitive — size it via `class` to match the shape of the real
- * content (text line, avatar, card, etc.).
+ * Placeholder block for content that is still loading. Plain `div`, no Kobalte
+ * primitive — size it via `class` to match the shape of the real content (text
+ * line, avatar, card, etc.). Pulses by default; pass `shimmer` for a sweeping
+ * light band instead.
  *
  * @example
  * ```tsx
  * <Skeleton class="h-4 w-48" />
+ * <Skeleton shimmer class="h-4 w-48" /> // sweeping band instead of pulse
  * ```
  */
 export declare function Skeleton(props: SkeletonProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/commerce/ProductCard.tsx

@@ -37,6 +37,16 @@ export interface ProductCardProps {
   currency?: string
   locale?: string
   onAddToCart?: () => void
+  /**
+   * 3D hover tilt toward the cursor — forwarded to the underlying {@link Card}
+   * ({@link attachTilt}). Engine-free and reduced-motion aware.
+   */
+  tilt?: boolean
+  /**
+   * Cursor-following radial glow inside the card — forwarded to the underlying
+   * {@link Card} ({@link attachSpotlight}). Engine-free and reduced-motion aware.
+   */
+  spotlight?: boolean
   class?: string
 }
 
@@ -72,7 +82,13 @@ function inferTone(badge: string | undefined, tone: ProductBadgeTone | undefined
  */
 export function ProductCard(props: ProductCardProps): JSX.Element {
   return (
-    <Card glass glow class={cn('flex h-full flex-col overflow-hidden p-4', props.class)}>
+    <Card
+      glass
+      glow
+      tilt={props.tilt}
+      spotlight={props.spotlight}
+      class={cn('flex h-full flex-col overflow-hidden p-4', props.class)}
+    >
       <div class="relative aspect-square overflow-hidden rounded-lg bg-muted">
         <img src={props.image} alt={props.title} loading="lazy" class="h-full w-full object-cover" />
         <Show when={props.badge}>

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.16.0'
+export const A4UI_VERSION = '0.17.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/Accordion.tsx

@@ -56,7 +56,9 @@ export function Accordion(props: AccordionProps): JSX.Element {
                 </svg>
               </KAccordion.Trigger>
             </KAccordion.Header>
-            <KAccordion.Content class="pb-3 text-sm text-muted-foreground">{item.content}</KAccordion.Content>
+            <KAccordion.Content class="accordion-content text-sm text-muted-foreground">
+              <div class="pb-3">{item.content}</div>
+            </KAccordion.Content>
           </KAccordion.Item>
         )}
       </For>

package/src/ui/Badge.tsx

@@ -2,7 +2,7 @@
 // (flowBadgeProps, statusBadgeTone, priorityBadgeTone, …) stay in the consuming
 // app: they encode business vocabulary (income/expense, project priority, user
 // roles), not design-system concerns.
-import { type JSX, type ParentProps, splitProps } from 'solid-js'
+import { type JSX, type ParentProps, Show, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
@@ -23,6 +23,12 @@ const BADGE_BASE =
 interface BadgeProps extends ParentProps {
   /** Visual/semantic tone. Defaults to `'neutral'`. */
   tone?: BadgeTone
+  /**
+   * Show a pinging dot before the label for "live"/"recording"/"online"
+   * states. Tinted with the tone's color (`currentColor`); pure CSS
+   * (`animate-ping`), reduced-motion aware.
+   */
+  pulse?: boolean
   class?: string
 }
 
@@ -37,9 +43,15 @@ interface BadgeProps extends ParentProps {
  * ```
  */
 export function Badge(props: BadgeProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['tone', 'class', 'children'])
+  const [local, rest] = splitProps(props, ['tone', 'class', 'children', 'pulse'])
   return (
     <span class={cn(BADGE_BASE, TONE_CLASSES[local.tone ?? 'neutral'], local.class)} {...rest}>
+      <Show when={local.pulse}>
+        <span class="relative flex h-1.5 w-1.5" aria-hidden="true">
+          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
+          <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+        </span>
+      </Show>
       {local.children}
     </span>
   )

package/src/ui/Carousel.tsx

@@ -13,6 +13,12 @@ export interface CarouselProps {
   slides: JSX.Element[]
   /** Auto-advance interval in ms. Omit to disable autoplay (also skipped under reduced motion / hover). */
   autoplayMs?: number
+  /**
+   * Drag/touch to swipe between slides (in addition to arrows, dots, and arrow
+   * keys). The track follows the pointer and snaps on release — pure CSS, no
+   * engine. @default true
+   */
+  swipe?: boolean
   class?: string
 }
 
@@ -52,6 +58,34 @@ export function Carousel(props: CarouselProps): JSX.Element {
     }
   }
 
+  // --- drag/touch swipe (engine-free; the track follows the pointer, then the
+  // CSS transition snaps to the resolved slide on release) -------------------
+  const swipeOn = (): boolean => props.swipe !== false
+  let viewport: HTMLDivElement | undefined
+  const [dragging, setDragging] = createSignal(false)
+  const [dragPx, setDragPx] = createSignal(0)
+  let startX = 0
+
+  const onPointerDown = (e: PointerEvent): void => {
+    if (!swipeOn() || count() < 2) return
+    startX = e.clientX
+    setDragging(true)
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  const onPointerMove = (e: PointerEvent): void => {
+    if (dragging()) setDragPx(e.clientX - startX)
+  }
+  const endDrag = (): void => {
+    if (!dragging()) return
+    const width = viewport?.clientWidth ?? 1
+    const dx = dragPx()
+    const threshold = Math.max(48, width * 0.2)
+    if (dx <= -threshold) next()
+    else if (dx >= threshold) prev()
+    setDragPx(0)
+    setDragging(false)
+  }
+
   // --- autoplay (paused on hover, skipped under reduced motion) --------------
   const [paused, setPaused] = createSignal(false)
   onMount(() => {
@@ -75,10 +109,21 @@ export function Carousel(props: CarouselProps): JSX.Element {
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}
     >
-      <div class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground">
+      <div
+        ref={viewport}
+        class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground"
+      >
         <div
-          class="flex transition-transform duration-500 ease-out"
-          style={{ transform: `translateX(-${index() * 100}%)` }}
+          class={cn(
+            'flex',
+            swipeOn() && count() > 1 && 'touch-pan-y cursor-grab active:cursor-grabbing',
+            !dragging() && 'transition-transform duration-500 ease-out',
+          )}
+          style={{ transform: `translateX(calc(-${index() * 100}% + ${dragPx()}px))` }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
         >
           <For each={props.slides}>{(slide) => <div class="w-full shrink-0">{slide}</div>}</For>
         </div>

package/src/ui/Collapse.tsx

@@ -1,7 +1,6 @@
 // Single controlled collapsible region with a toggle header.
 import { ChevronDown } from 'lucide-solid'
 import type { JSX, ParentProps } from 'solid-js'
-import { Show } from 'solid-js'
 import { cn } from '../lib/cn'
 
 interface CollapseProps extends ParentProps {
@@ -40,9 +39,19 @@ export function Collapse(props: CollapseProps): JSX.Element {
           class={cn('h-4 w-4 shrink-0 transition-transform duration-200', props.open && 'rotate-180')}
         />
       </button>
-      <Show when={props.open}>
-        <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
-      </Show>
+      {/* grid-rows 0fr->1fr animates the panel height with pure CSS (no measuring,
+          no engine); the inner div is `overflow-hidden` so the collapsed content
+          is clipped, not just transparent. */}
+      <div
+        class={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+          props.open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div class="overflow-hidden">
+          <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
+        </div>
+      </div>
     </div>
   )
 }

package/src/ui/FloatingActionButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { spawnRipple } from './Ripple'
 
 /** Screen corner a {@link FloatingActionButton} anchors to. Defaults to `'bottom-right'`. */
 export type FloatingActionButtonPosition = 'bottom-right' | 'bottom-left'
@@ -23,6 +24,12 @@ export interface FloatingActionButtonProps {
   onClick?: () => void
   /** Screen corner to anchor to. Defaults to `'bottom-right'`. */
   position?: FloatingActionButtonPosition
+  /**
+   * Material-style click ripple from the press position. Engine-free (Web
+   * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+   * costs nothing when off.
+   */
+  ripple?: boolean
   class?: string
 }
 
@@ -40,7 +47,15 @@ export function FloatingActionButton(props: FloatingActionButtonProps): JSX.Elem
       type="button"
       aria-label={props.label}
       onClick={() => props.onClick?.()}
-      class={cn(FAB_BASE, POSITION_CLASSES[props.position ?? 'bottom-right'], props.class)}
+      onPointerDown={(event) => {
+        if (props.ripple) spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+      }}
+      class={cn(
+        FAB_BASE,
+        POSITION_CLASSES[props.position ?? 'bottom-right'],
+        props.ripple && 'relative overflow-hidden',
+        props.class,
+      )}
     >
       {props.icon}
     </button>

package/src/ui/Image.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { createSignal, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
 
 export interface ImageProps {
   src: string
@@ -15,6 +16,12 @@ export interface ImageProps {
   class?: string
   /** When true, clicking the image opens a zoomable lightbox. @default true */
   preview?: boolean
+  /**
+   * Reveal the thumbnail with a blur-up: it starts blurred and slightly scaled,
+   * then eases to sharp once the image finishes loading. Pure CSS transition,
+   * no-op under reduced motion. @default false
+   */
+  blurUp?: boolean
 }
 
 /**
@@ -32,8 +39,29 @@ export function Image(props: ImageProps): JSX.Element {
   const [open, setOpen] = createSignal(false)
   const preview = () => props.preview !== false
 
+  // blur-up: hidden behind the blur until `load` fires (or immediately, if the
+  // image is already cached or reduced motion is on).
+  const [loaded, setLoaded] = createSignal(false)
+  const blurUp = () => props.blurUp === true && !motionReduced()
+  const revealed = () => !blurUp() || loaded()
+
   const img = (
-    <img src={props.src} alt={props.alt} loading="lazy" class={cn('rounded-lg object-cover', props.class)} />
+    <img
+      src={props.src}
+      alt={props.alt}
+      loading="lazy"
+      onLoad={() => setLoaded(true)}
+      ref={(el) => {
+        // A cached image can be complete before `onLoad` binds — reveal it now.
+        if (el.complete) setLoaded(true)
+      }}
+      class={cn(
+        'rounded-lg object-cover',
+        blurUp() && 'transition-[filter,transform] duration-500 ease-out',
+        blurUp() && !revealed() && 'scale-[1.03] blur-lg',
+        props.class,
+      )}
+    />
   )
 
   return (

package/src/ui/List.tsx

@@ -16,6 +16,11 @@ export interface ListItem {
 
 interface ListProps {
   items: ListItem[]
+  /**
+   * Cascade the rows in on mount — each row fades/slides up staggered by its
+   * index. Pure CSS (`list-row-stagger`), reduced-motion aware. @default false
+   */
+  stagger?: boolean
   class?: string
 }
 
@@ -46,8 +51,11 @@ export function List(props: ListProps): JSX.Element {
   return (
     <ul class={cn('divide-y divide-border rounded-lg border border-border', props.class)}>
       <For each={props.items}>
-        {(item) => (
-          <li class="flex items-center gap-3 px-4 py-3">
+        {(item, i) => (
+          <li
+            class={cn('flex items-center gap-3 px-4 py-3', props.stagger && 'list-row-stagger')}
+            style={props.stagger ? { 'animation-delay': `${i() * 60}ms` } : undefined}
+          >
             <Show when={item.avatar}>
               <div class="shrink-0">{item.avatar}</div>
             </Show>

package/src/ui/Skeleton.tsx

@@ -1,4 +1,5 @@
-// Pulsing placeholder for loading content — plain div, no primitive.
+// Placeholder for loading content — plain div, no primitive. Pulses by default;
+// opt into a sweeping shimmer band with `shimmer`.
 import type { JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
@@ -6,18 +7,29 @@ import { cn } from '../lib/cn'
 interface SkeletonProps {
   /** Size/shape the placeholder to match the content it stands in for, e.g. `"h-4 w-32 rounded-full"`. */
   class?: string
+  /**
+   * Use a light band sweeping across the placeholder instead of the default
+   * pulse. Pure CSS (`.skeleton-shimmer`), token-tinted, reduced-motion aware.
+   */
+  shimmer?: boolean
 }
 
 /**
- * Pulsing placeholder block for content that is still loading. Plain `div`,
- * no Kobalte primitive — size it via `class` to match the shape of the real
- * content (text line, avatar, card, etc.).
+ * Placeholder block for content that is still loading. Plain `div`, no Kobalte
+ * primitive — size it via `class` to match the shape of the real content (text
+ * line, avatar, card, etc.). Pulses by default; pass `shimmer` for a sweeping
+ * light band instead.
  *
  * @example
  * ```tsx
  * <Skeleton class="h-4 w-48" />
+ * <Skeleton shimmer class="h-4 w-48" /> // sweeping band instead of pulse
  * ```
  */
 export function Skeleton(props: SkeletonProps): JSX.Element {
-  return <div class={cn('animate-pulse rounded-md bg-muted', props.class)} />
+  return (
+    <div
+      class={cn('rounded-md bg-muted', props.shimmer ? 'skeleton-shimmer' : 'animate-pulse', props.class)}
+    />
+  )
 }

package/src/ui/SpeedDial.tsx

@@ -5,6 +5,7 @@ import { createSignal, For, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
 import { animate, motionReduced } from '../lib/motion'
+import { spawnRipple } from './Ripple'
 
 /** A single action in a {@link SpeedDial} — an icon button with an accessible label. */
 export interface SpeedDialAction {
@@ -74,7 +75,8 @@ export function SpeedDial(props: SpeedDialProps): JSX.Element {
         aria-label={open() ? 'Close actions' : 'Open actions'}
         aria-expanded={open()}
         onClick={() => setOpen((v) => !v)}
-        class="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring"
+        onPointerDown={(event) => spawnRipple(event.currentTarget, event, { opacity: 0.35 })}
+        class="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground shadow-lg transition-transform duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring"
       >
         <span class={cn('inline-flex transition-transform duration-150', open() && 'rotate-45')}>
           {props.icon ?? <Plus class="h-6 w-6" />}