@a4ui/core 0.16.0 → 0.18.0

package/dist/layout/ActionBar.d.ts

@@ -0,0 +1,53 @@
+import { JSX } from 'solid-js';
+/** Edge an {@link ActionBar} pins to when `sticky`. Defaults to `'top'`. */
+export type ActionBarPosition = 'top' | 'bottom';
+export interface ActionBarProps {
+    /**
+     * The prominent CTA. Rendered as `<a href>` when `href` is set (e.g.
+     * `tel:+15551234567`), otherwise as a `<button type="button">` driven by
+     * `onClick`.
+     */
+    action: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Optional left slot, e.g. a `<Badge pulse>24/7</Badge>`. */
+    status?: JSX.Element;
+    /** Optional short text between `status` and the action. Hidden below `sm` so the action stays reachable. */
+    message?: JSX.Element;
+    /** Pins the bar to the viewport edge (`position`) instead of scrolling with the page. Defaults to `true`. */
+    sticky?: boolean;
+    /** Edge to pin to when `sticky`. Defaults to `'top'`. */
+    position?: ActionBarPosition;
+    class?: string;
+}
+/**
+ * Sticky action / emergency bar: a full-width strip that pins a single
+ * prominent CTA to the viewport edge, with an optional status badge and
+ * short message beside it. Built for urgent-service verticals (towing, HVAC,
+ * locksmith, …) where the CTA — usually a `tel:` link — must stay reachable
+ * through the whole scroll. The action gets a click ripple like `<Button
+ * ripple>`; the message drops out on narrow viewports so the badge + action
+ * never wrap.
+ *
+ * @example
+ * ```tsx
+ * <ActionBar
+ *   status={<Badge pulse>24/7</Badge>}
+ *   message="Stuck on the road? We're on our way."
+ *   action={{ label: 'Call now', href: 'tel:+15551234567' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bottom-pinned, plain onClick action instead of a tel: link.
+ * <ActionBar
+ *   position="bottom"
+ *   message="Free quote in 2 minutes"
+ *   action={{ label: 'Get a quote', onClick: openQuoteForm }}
+ * />
+ * ```
+ */
+export declare function ActionBar(props: ActionBarProps): JSX.Element;

package/dist/layout/Section.d.ts

@@ -0,0 +1,31 @@
+import { JSX, ParentProps } from 'solid-js';
+/** Max content width of a {@link Section}. Defaults to `'6xl'`. */
+export type SectionWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full';
+/** Vertical padding of a {@link Section}. Defaults to `'lg'`. */
+export type SectionPad = 'none' | 'sm' | 'md' | 'lg';
+interface SectionProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
+    /** Max content width. Defaults to `'6xl'`. */
+    size?: SectionWidth;
+    /** Vertical padding rhythm. Defaults to `'lg'`. */
+    py?: SectionPad;
+    class?: string;
+}
+/**
+ * Centered content container with a max width and consistent vertical rhythm —
+ * the layout wrapper repeated on every marketing/company page. Pass an `id` for
+ * anchor-based in-page navigation. For a full-bleed colored band, wrap Section
+ * in a parent that carries the background.
+ *
+ * @example
+ * ```tsx
+ * <Section id="services">
+ *   <h2>Servicios</h2>
+ * </Section>
+ *
+ * <div class="bg-muted/30">
+ *   <Section size="4xl" py="md">…</Section>
+ * </div>
+ * ```
+ */
+export declare function Section(props: SectionProps): JSX.Element;
+export {};

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/BeforeAfter.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface BeforeAfterProps {
+    /** Image URL shown fully, underneath. */
+    before: string;
+    /** Image URL revealed by the handle, on top, clipped to the split. */
+    after: string;
+    /** Accessible description of the comparison, used as the slider's label. */
+    alt: string;
+    /** Corner labels as `[beforeLabel, afterLabel]`, e.g. `['Antes', 'Después']`. */
+    labels?: [string, string];
+    /** Initial split position, 0..100 (percent of width revealing `after`). @default 50 */
+    start?: number;
+    class?: string;
+}
+/**
+ * A before/after image comparison slider: drag the handle (pointer or
+ * Left/Right arrow keys once focused) to reveal more of `after` versus
+ * `before`. The `after` image is clipped with `clip-path: inset(...)` driven
+ * by a `0..100` split signal — no canvas, no animation engine. Clicking
+ * anywhere on the track jumps the split there with a short transition
+ * (skipped under `prefers-reduced-motion`); dragging itself is always instant.
+ *
+ * @example
+ * ```tsx
+ * <BeforeAfter
+ *   before="/room-before.jpg"
+ *   after="/room-after.jpg"
+ *   alt="Living room before and after renovation"
+ *   labels={['Antes', 'Después']}
+ *   class="aspect-video rounded-2xl border border-border"
+ * />
+ * ```
+ */
+export declare function BeforeAfter(props: BeforeAfterProps): JSX.Element;

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/PricingTable.d.ts

@@ -0,0 +1,60 @@
+import { JSX } from 'solid-js';
+/** Billing period a {@link PricingTable} can show. */
+export type PricingPeriod = 'monthly' | 'annual';
+/** One plan/tier rendered by {@link PricingTable}. */
+export interface PricingTier {
+    /** Plan name, e.g. `"Pro"`. */
+    name: string;
+    /** Pre-formatted price for the monthly period, e.g. `"$0"` or `"$99/mes"`. */
+    price: string;
+    /** Pre-formatted price for the annual period. When ANY tier sets this, the toggle renders. */
+    priceAnnual?: string;
+    /** Short one-line description under the plan name. */
+    description?: string;
+    /** Bullet list of included features, each rendered with a check icon. */
+    features: string[];
+    /** Renders this tier emphasized: `glass` surface, a ring, and a "Popular" {@link Badge}. */
+    highlighted?: boolean;
+    /** Call-to-action button. Rendered as an `<a>` when `href` is set, otherwise a `<button>`. */
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+}
+interface PricingTableProps {
+    /** Tiers to render, in order, as a responsive grid. */
+    tiers: PricingTier[];
+    /** Controlled billing period. Omit to let the toggle manage its own state. */
+    period?: PricingPeriod;
+    /** Fired when the toggle changes period, controlled or uncontrolled. */
+    onPeriodChange?: (period: PricingPeriod) => void;
+    class?: string;
+}
+/**
+ * Responsive pricing grid: one {@link Card} per tier, a feature checklist, and
+ * a CTA {@link Button}. The highlighted tier gets a frosted glass surface, a
+ * ring, and a "Popular" {@link Badge}. When any tier sets `priceAnnual`, a
+ * monthly/annual toggle renders above the grid — pass `period` +
+ * `onPeriodChange` to control it, or omit both to let it manage its own state.
+ *
+ * @example
+ * ```tsx
+ * <PricingTable
+ *   tiers={[
+ *     { name: 'Free', price: '$0', features: ['1 project', 'Community support'], cta: { label: 'Start' } },
+ *     {
+ *       name: 'Pro',
+ *       price: '$19/mo',
+ *       priceAnnual: '$190/yr',
+ *       description: 'For growing teams',
+ *       features: ['Unlimited projects', 'Priority support'],
+ *       highlighted: true,
+ *       cta: { label: 'Upgrade', href: '/upgrade' },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function PricingTable(props: PricingTableProps): JSX.Element;
+export {};

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.18.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}>
@@ -111,7 +127,15 @@ export function ProductCard(props: ProductCardProps): JSX.Element {
           locale={props.locale}
         />
         <Show when={props.onAddToCart}>
-          <Button class="mt-auto w-full" onClick={() => props.onAddToCart?.()}>
+          {/* stopPropagation so a card wrapped in a link/router-<A> adds to cart
+              without also navigating. */}
+          <Button
+            class="mt-auto w-full"
+            onClick={(e) => {
+              e.stopPropagation()
+              props.onAddToCart?.()
+            }}
+          >
             Add to cart
           </Button>
         </Show>

package/src/commerce/createCart.ts

@@ -0,0 +1,102 @@
+// A minimal signal-backed shopping cart store: add/remove/setQty/clear plus
+// derived count() and subtotal(). Generic over the product shape so it can
+// back CartLine/CartSummary (or any custom card) without re-implementing the
+// same bookkeeping in every commerce template.
+import type { Accessor } from 'solid-js'
+import { createMemo, createSignal } from 'solid-js'
+
+export interface CartProduct {
+  id: string | number
+  price: number
+}
+
+export interface CartEntry<T extends CartProduct> {
+  product: T
+  qty: number
+}
+
+export interface Cart<T extends CartProduct> {
+  /** Reactive list of cart entries. */
+  items: Accessor<CartEntry<T>[]>
+  /** Add a product, or increment its `qty` if it's already in the cart. */
+  add: (product: T, qty?: number) => void
+  /** Remove a product from the cart by id. */
+  remove: (id: T['id']) => void
+  /** Set a product's quantity. `qty <= 0` removes the entry. */
+  setQty: (id: T['id'], qty: number) => void
+  /** Empty the cart. */
+  clear: () => void
+  /** Total number of units across all entries. */
+  count: () => number
+  /** Sum of `price * qty` across all entries. */
+  subtotal: () => number
+  /** Whether a product with this id is currently in the cart. */
+  has: (id: T['id']) => boolean
+}
+
+/**
+ * Create a signal-backed shopping cart store, generic over the product type.
+ * `count()` and `subtotal()` are memoized and stay in sync with `items()`.
+ *
+ * @example
+ * ```ts
+ * interface Product extends CartProduct {
+ *   id: string
+ *   price: number
+ *   title: string
+ * }
+ *
+ * const cart = createCart<Product>()
+ *
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' })
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' }) // qty -> 2
+ * cart.setQty('sku-1', 3)
+ *
+ * cart.count()    // 3
+ * cart.subtotal() // 89.97
+ *
+ * cart.remove('sku-1')
+ * cart.has('sku-1') // false
+ * ```
+ */
+export function createCart<T extends CartProduct>(initial: CartEntry<T>[] = []): Cart<T> {
+  const [items, setItems] = createSignal<CartEntry<T>[]>(initial)
+
+  const add = (product: T, qty = 1): void => {
+    setItems((current) => {
+      const existing = current.find((entry) => entry.product.id === product.id)
+      if (existing) {
+        return current.map((entry) =>
+          entry.product.id === product.id ? { ...entry, qty: entry.qty + qty } : entry,
+        )
+      }
+      return [...current, { product, qty }]
+    })
+  }
+
+  const remove = (id: T['id']): void => {
+    setItems((current) => current.filter((entry) => entry.product.id !== id))
+  }
+
+  const setQty = (id: T['id'], qty: number): void => {
+    if (qty <= 0) {
+      remove(id)
+      return
+    }
+    setItems((current) => current.map((entry) => (entry.product.id === id ? { ...entry, qty } : entry)))
+  }
+
+  const clear = (): void => {
+    setItems([])
+  }
+
+  const count = createMemo(() => items().reduce((total, entry) => total + entry.qty, 0))
+
+  const subtotal = createMemo(() =>
+    items().reduce((total, entry) => total + entry.product.price * entry.qty, 0),
+  )
+
+  const has = (id: T['id']): boolean => items().some((entry) => entry.product.id === id)
+
+  return { items, add, remove, setQty, clear, count, subtotal, has }
+}

package/src/commerce/index.ts

@@ -8,3 +8,4 @@ export { ProductGrid, type ProductGridProps } from './ProductGrid'
 export { CartLine, type CartLineProps } from './CartLine'
 export { CartSummary, type CartSummaryProps, type CartSummaryItem } from './CartSummary'
 export { FilterGroup, type FilterGroupProps, type FacetOption } from './FilterGroup'
+export { createCart, type Cart, type CartProduct, type CartEntry } from './createCart'

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.18.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -86,6 +86,8 @@ export { Carousel, type CarouselProps } from './ui/Carousel'
 export { Stepper, type StepItem, type StepperProps } from './ui/Stepper'
 export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } from './ui/Timeline'
 export { Rating, type RatingProps } from './ui/Rating'
+export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable'
+export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter'
 export { Empty, type EmptyProps } from './ui/Empty'
 export { Calendar, type CalendarProps } from './ui/Calendar'
 export { Tree, type TreeNode, type TreeProps } from './ui/Tree'
@@ -168,6 +170,8 @@ export { ChristmasBackground } from './layout/ChristmasBackground'
 export { ThemeToggle } from './layout/ThemeToggle'
 export { EffectsToggle } from './layout/EffectsToggle'
 export { NavGroup } from './layout/NavGroup'
+export { Section, type SectionWidth, type SectionPad } from './layout/Section'
+export { ActionBar, type ActionBarProps, type ActionBarPosition } from './layout/ActionBar'
 
 // Themes (src/themes) — swappable color palettes (Space is the default). Pick one
 // with `selectTheme('dino')`, restore the saved one with `initTheme()`, or build

package/src/layout/ActionBar.tsx

@@ -0,0 +1,121 @@
+// ActionBar — sticky action / emergency bar: a full-width strip that pins one
+// prominent CTA to the viewport edge, with an optional status badge + short
+// message beside it. Built for urgent-service verticals (towing, HVAC,
+// locksmith, …) where the call-to-action — usually a `tel:` link — has to
+// stay reachable through the whole page scroll. On narrow viewports the
+// message drops out first so the badge + action never wrap or get pushed
+// off-screen.
+import { Show, splitProps, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { spawnRipple } from '../ui/Ripple'
+
+/** Edge an {@link ActionBar} pins to when `sticky`. Defaults to `'top'`. */
+export type ActionBarPosition = 'top' | 'bottom'
+
+export interface ActionBarProps {
+  /**
+   * The prominent CTA. Rendered as `<a href>` when `href` is set (e.g.
+   * `tel:+15551234567`), otherwise as a `<button type="button">` driven by
+   * `onClick`.
+   */
+  action: { label: string; href?: string; onClick?: () => void }
+  /** Optional left slot, e.g. a `<Badge pulse>24/7</Badge>`. */
+  status?: JSX.Element
+  /** Optional short text between `status` and the action. Hidden below `sm` so the action stays reachable. */
+  message?: JSX.Element
+  /** Pins the bar to the viewport edge (`position`) instead of scrolling with the page. Defaults to `true`. */
+  sticky?: boolean
+  /** Edge to pin to when `sticky`. Defaults to `'top'`. */
+  position?: ActionBarPosition
+  class?: string
+}
+
+const POSITION_CLASSES: Record<ActionBarPosition, string> = {
+  top: 'top-0',
+  bottom: 'bottom-0',
+}
+
+// Deliberately not the Button primitive: Button always renders a <button>,
+// and this CTA needs to be a real <a href="tel:…"> for click-to-call. The
+// classes mirror Button's shape/motion but use accent (not primary) so the
+// CTA still pops against the bar's own bg-primary surface.
+const ACTION_CLASSES =
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md bg-accent px-4 py-2 text-sm font-semibold whitespace-nowrap text-accent-foreground transition-[background-color,transform] duration-150 hover:bg-accent/90 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring'
+
+/**
+ * Sticky action / emergency bar: a full-width strip that pins a single
+ * prominent CTA to the viewport edge, with an optional status badge and
+ * short message beside it. Built for urgent-service verticals (towing, HVAC,
+ * locksmith, …) where the CTA — usually a `tel:` link — must stay reachable
+ * through the whole scroll. The action gets a click ripple like `<Button
+ * ripple>`; the message drops out on narrow viewports so the badge + action
+ * never wrap.
+ *
+ * @example
+ * ```tsx
+ * <ActionBar
+ *   status={<Badge pulse>24/7</Badge>}
+ *   message="Stuck on the road? We're on our way."
+ *   action={{ label: 'Call now', href: 'tel:+15551234567' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bottom-pinned, plain onClick action instead of a tel: link.
+ * <ActionBar
+ *   position="bottom"
+ *   message="Free quote in 2 minutes"
+ *   action={{ label: 'Get a quote', onClick: openQuoteForm }}
+ * />
+ * ```
+ */
+export function ActionBar(props: ActionBarProps): JSX.Element {
+  const [local] = splitProps(props, ['action', 'status', 'message', 'sticky', 'position', 'class'])
+
+  const handlePointerDown: JSX.EventHandler<HTMLElement, PointerEvent> = (event) => {
+    spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+  }
+
+  return (
+    <div
+      class={cn(
+        'z-40 flex w-full items-center justify-between gap-3 bg-primary px-4 py-3 text-primary-foreground',
+        (local.sticky ?? true) && cn('sticky', POSITION_CLASSES[local.position ?? 'top']),
+        local.class,
+      )}
+    >
+      <div class="flex min-w-0 items-center gap-2 sm:gap-3">
+        <Show when={local.status}>{local.status}</Show>
+        <Show when={local.message}>
+          <p class="hidden min-w-0 truncate text-sm sm:block sm:text-base">{local.message}</p>
+        </Show>
+      </div>
+      <Show
+        when={local.action.href}
+        fallback={
+          <button
+            type="button"
+            class={ACTION_CLASSES}
+            onPointerDown={handlePointerDown}
+            onClick={local.action.onClick}
+          >
+            {local.action.label}
+          </button>
+        }
+      >
+        {(href) => (
+          <a
+            href={href()}
+            class={ACTION_CLASSES}
+            onPointerDown={handlePointerDown}
+            onClick={local.action.onClick}
+          >
+            {local.action.label}
+          </a>
+        )}
+      </Show>
+    </div>
+  )
+}