@a4ui/core 0.11.1 → 0.13.0

package/src/commerce/CartLine.tsx

@@ -0,0 +1,84 @@
+// A single cart row: thumbnail, title + unit price, quantity stepper, line
+// total, and an optional remove button.
+import { Trash2 } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { PriceTag } from './PriceTag'
+import { QuantityStepper } from './QuantityStepper'
+
+export interface CartLineProps {
+  title: string
+  /** Unit price. */
+  price: number
+  quantity: number
+  image?: string
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  onQuantityChange?: (quantity: number) => void
+  onRemove?: () => void
+  class?: string
+}
+
+/**
+ * One line item in a shopping cart: thumbnail, title with unit price, a
+ * {@link QuantityStepper}, the line total, and an optional remove action.
+ *
+ * @example
+ * ```tsx
+ * <CartLine
+ *   title="Wireless Mouse"
+ *   price={29.99}
+ *   quantity={2}
+ *   image="/mouse.jpg"
+ *   onQuantityChange={setQty}
+ *   onRemove={() => removeLine(id)}
+ * />
+ * ```
+ */
+export function CartLine(props: CartLineProps): JSX.Element {
+  const lineTotal = () => props.price * props.quantity
+
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  return (
+    <div class={cn('flex flex-wrap items-center gap-4', props.class)}>
+      <Show when={props.image}>
+        <img
+          src={props.image}
+          alt={props.title}
+          class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover"
+        />
+      </Show>
+      <div class="min-w-[8rem] flex-1">
+        <p class="line-clamp-1 font-medium text-foreground">{props.title}</p>
+        <PriceTag amount={props.price} currency={props.currency} locale={props.locale} size="sm" />
+      </div>
+      <QuantityStepper
+        value={props.quantity}
+        onChange={(quantity) => props.onQuantityChange?.(quantity)}
+        min={1}
+      />
+      <span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">
+        {format(lineTotal())}
+      </span>
+      <Show when={props.onRemove}>
+        <button
+          type="button"
+          aria-label="Remove item"
+          class="text-muted-foreground hover:text-foreground"
+          onClick={() => props.onRemove?.()}
+        >
+          <Trash2 class="h-4 w-4" />
+        </button>
+      </Show>
+    </div>
+  )
+}

package/src/commerce/CartSummary.tsx

@@ -0,0 +1,70 @@
+// Order summary panel: itemized lines (subtotal, shipping, tax, ...), a
+// divider, a bold total row, and an optional checkout button.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from '../ui/Button'
+
+export interface CartSummaryItem {
+  label: string
+  amount: number
+}
+
+export interface CartSummaryProps {
+  /** Itemized rows, e.g. Subtotal, Shipping, Tax. */
+  lines: CartSummaryItem[]
+  total: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Label for the checkout button. Defaults to `'Checkout'`. */
+  checkoutLabel?: string
+  onCheckout?: () => void
+  class?: string
+}
+
+/**
+ * Order summary panel listing itemized amounts (subtotal, shipping, tax,
+ * ...), a bold total, and an optional full-width checkout button.
+ *
+ * @example
+ * ```tsx
+ * <CartSummary
+ *   lines={[{ label: 'Subtotal', amount: 59.98 }, { label: 'Shipping', amount: 4.99 }]}
+ *   total={64.97}
+ *   onCheckout={() => goToCheckout()}
+ * />
+ * ```
+ */
+export function CartSummary(props: CartSummaryProps): JSX.Element {
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  return (
+    <div class={cn('card glow-edge rounded-xl p-5 text-card-foreground', props.class)}>
+      <For each={props.lines}>
+        {(line) => (
+          <div class="flex items-center justify-between py-1 text-sm">
+            <span class="text-muted-foreground">{line.label}</span>
+            <span class="tabular-nums text-foreground">{format(line.amount)}</span>
+          </div>
+        )}
+      </For>
+      <div class="my-3 border-t border-border" />
+      <div class="flex items-center justify-between text-base font-bold text-foreground">
+        <span>Total</span>
+        <span class="tabular-nums">{format(props.total)}</span>
+      </div>
+      <Show when={props.onCheckout}>
+        <Button class="mt-4 w-full" onClick={() => props.onCheckout?.()}>
+          {props.checkoutLabel ?? 'Checkout'}
+        </Button>
+      </Show>
+    </div>
+  )
+}

package/src/commerce/FilterGroup.tsx

@@ -0,0 +1,70 @@
+// Titled group of checkbox facet options (e.g. size, color, brand) with
+// optional result counts, for faceted search/filter sidebars.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Checkbox } from '../ui/Checkbox'
+
+export interface FacetOption {
+  value: string
+  label: string
+  count?: number
+}
+
+export interface FilterGroupProps {
+  title: string
+  options: FacetOption[]
+  selected: string[]
+  onChange: (selected: string[]) => void
+  class?: string
+}
+
+/**
+ * Titled group of checkbox facet options (e.g. size, color, brand), each with
+ * an optional result count, for faceted search/filter sidebars.
+ *
+ * @example
+ * ```tsx
+ * <FilterGroup
+ *   title="Size"
+ *   options={[{ value: 'sm', label: 'Small', count: 12 }, { value: 'md', label: 'Medium', count: 8 }]}
+ *   selected={selected()}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export function FilterGroup(props: FilterGroupProps): JSX.Element {
+  const toggle = (value: string, checked: boolean) => {
+    const next = props.selected.slice()
+    const index = next.indexOf(value)
+    if (checked) {
+      if (index === -1) next.push(value)
+    } else if (index !== -1) {
+      next.splice(index, 1)
+    }
+    props.onChange(next)
+  }
+
+  return (
+    <div class={cn('space-y-2', props.class)}>
+      <p class="text-sm font-semibold text-foreground">{props.title}</p>
+      <div class="space-y-1.5">
+        <For each={props.options}>
+          {(option) => (
+            <div class="flex items-center justify-between gap-2">
+              <Checkbox
+                checked={props.selected.includes(option.value)}
+                onChange={(checked) => toggle(option.value, checked)}
+                label={option.label}
+              />
+              <Show when={option.count != null}>
+                <span class="text-xs text-muted-foreground">{option.count}</span>
+              </Show>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/commerce/PriceTag.tsx

@@ -0,0 +1,62 @@
+// Price display: current amount, optional struck-through compare-at price, and
+// a danger Badge showing the discount percent when the item is on sale.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from '../ui/Badge'
+
+/** Text size of a {@link PriceTag}'s main amount. Defaults to `'md'`. */
+export type PriceTagSize = 'sm' | 'md' | 'lg'
+
+const SIZE_CLASSES: Record<PriceTagSize, string> = {
+  sm: 'text-sm',
+  md: 'text-lg',
+  lg: 'text-2xl',
+}
+
+export interface PriceTagProps {
+  amount: number
+  /** Original price; shown struck-through when greater than `amount`. */
+  compareAt?: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Text size of the main price. Defaults to `'md'`. */
+  size?: PriceTagSize
+  class?: string
+}
+
+/**
+ * Formatted price display with an optional struck-through compare-at price
+ * and a discount-percent badge when the item is on sale.
+ *
+ * @example
+ * ```tsx
+ * <PriceTag amount={29.99} compareAt={39.99} currency="USD" />
+ * ```
+ */
+export function PriceTag(props: PriceTagProps): JSX.Element {
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  const onSale = () => (props.compareAt ?? 0) > props.amount
+
+  const discountPercent = () => Math.round((1 - props.amount / (props.compareAt as number)) * 100)
+
+  return (
+    <div class={cn('inline-flex items-center gap-2', props.class)}>
+      <span class={cn('font-bold text-foreground', SIZE_CLASSES[props.size ?? 'md'])}>
+        {format(props.amount)}
+      </span>
+      <Show when={onSale()}>
+        <span class="text-muted-foreground line-through">{format(props.compareAt as number)}</span>
+        <Badge tone="danger">-{discountPercent()}%</Badge>
+      </Show>
+    </div>
+  )
+}

package/src/commerce/ProductCard.tsx

@@ -0,0 +1,121 @@
+// Product summary card: square image with a corner ribbon (Sale/New/…), brand
+// eyebrow, title, category tag, optional rating, price, and an "Add to cart"
+// action. Frosted glass surface with the cursor-following edge glow.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from '../ui/Button'
+import { Card } from '../ui/Card'
+import { Rating } from '../ui/Rating'
+import { PriceTag } from './PriceTag'
+
+/** Corner-ribbon colour intent. */
+export type ProductBadgeTone = 'sale' | 'new' | 'featured'
+
+const RIBBON_TONE: Record<ProductBadgeTone, string> = {
+  sale: 'bg-destructive text-destructive-foreground',
+  new: 'bg-primary text-primary-foreground',
+  featured: 'bg-accent text-accent-foreground',
+}
+
+export interface ProductCardProps {
+  title: string
+  price: number
+  compareAt?: number
+  image: string
+  /** Brand name — shown as a small eyebrow above the title. */
+  brand?: string
+  /** Category — shown as a small tag under the title. */
+  category?: string
+  /** Rating from 0-5; renders a readonly {@link Rating} when present. */
+  rating?: number
+  /** Corner-ribbon label over the image top-right corner, e.g. `'Sale'`, `'New'`. */
+  badge?: string
+  /** Ribbon colour. Inferred from `badge` text when omitted (sale/new → featured). */
+  badgeTone?: ProductBadgeTone
+  currency?: string
+  locale?: string
+  onAddToCart?: () => void
+  class?: string
+}
+
+/** Guess a ribbon tone from the badge text when one isn't given. */
+function inferTone(badge: string | undefined, tone: ProductBadgeTone | undefined): ProductBadgeTone {
+  if (tone) return tone
+  const b = (badge ?? '').toLowerCase()
+  if (/sale|off|%|deal/.test(b)) return 'sale'
+  if (/new/.test(b)) return 'new'
+  return 'featured'
+}
+
+/**
+ * Card summarizing a single product: image with a corner ribbon, brand, title,
+ * category, optional rating, price (with compare-at/discount), and an optional
+ * "Add to cart" button. Frosted glass with edge glow.
+ *
+ * @example
+ * ```tsx
+ * <ProductCard
+ *   title="Wireless Headphones"
+ *   brand="Acme"
+ *   category="Audio"
+ *   price={79.99}
+ *   compareAt={99.99}
+ *   image="/headphones.jpg"
+ *   rating={4}
+ *   badge="Sale"
+ *   badgeTone="sale"
+ *   onAddToCart={() => addToCart(sku)}
+ * />
+ * ```
+ */
+export function ProductCard(props: ProductCardProps): JSX.Element {
+  return (
+    <Card glass glow 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}>
+          {/* Diagonal corner ribbon (clipped by the overflow-hidden image box). */}
+          <span
+            class={cn(
+              'absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md',
+              RIBBON_TONE[inferTone(props.badge, props.badgeTone)],
+            )}
+          >
+            {props.badge}
+          </span>
+        </Show>
+      </div>
+      {/* flex-1 + mt-auto on the button pins "Add to cart" to the bottom, so
+          cards of differing content height still line up in a grid row. */}
+      <div class="mt-3 flex flex-1 flex-col gap-1.5">
+        <Show when={props.brand}>
+          <span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            {props.brand}
+          </span>
+        </Show>
+        <p class="line-clamp-1 font-medium text-foreground">{props.title}</p>
+        <Show when={props.category}>
+          <span class="w-fit rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
+            {props.category}
+          </span>
+        </Show>
+        <Show when={props.rating !== undefined}>
+          <Rating value={props.rating as number} readonly max={5} />
+        </Show>
+        <PriceTag
+          amount={props.price}
+          compareAt={props.compareAt}
+          currency={props.currency}
+          locale={props.locale}
+        />
+        <Show when={props.onAddToCart}>
+          <Button class="mt-auto w-full" onClick={() => props.onAddToCart?.()}>
+            Add to cart
+          </Button>
+        </Show>
+      </div>
+    </Card>
+  )
+}

package/src/commerce/ProductGrid.tsx

@@ -0,0 +1,27 @@
+// Responsive grid wrapper for arranging ProductCards (or any children).
+import type { JSX, ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface ProductGridProps extends ParentProps {
+  class?: string
+}
+
+/**
+ * Responsive grid wrapper: 2 columns by default, 3 at `sm`, 4 at `lg`.
+ * Typically used to lay out a list of {@link ProductCard}s.
+ *
+ * @example
+ * ```tsx
+ * <ProductGrid>
+ *   <For each={products()}>{(p) => <ProductCard {...p} />}</For>
+ * </ProductGrid>
+ * ```
+ */
+export function ProductGrid(props: ProductGridProps): JSX.Element {
+  return (
+    <div class={cn('grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4', props.class)}>
+      {props.children}
+    </div>
+  )
+}

package/src/commerce/QuantityStepper.tsx

@@ -0,0 +1,59 @@
+// Inline quantity stepper: a bordered "−"/value/"+" group, clamped to [min, max].
+import { Minus, Plus } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface QuantityStepperProps {
+  value: number
+  onChange: (value: number) => void
+  /** Minimum allowed value. Defaults to `0`. */
+  min?: number
+  /** Maximum allowed value. Defaults to `Number.MAX_SAFE_INTEGER`. */
+  max?: number
+  disabled?: boolean
+  class?: string
+}
+
+/**
+ * Bordered "−"/value/"+" control for adjusting an integer quantity, clamped to
+ * `[min, max]`.
+ *
+ * @example
+ * ```tsx
+ * <QuantityStepper value={qty()} onChange={setQty} min={1} max={10} />
+ * ```
+ */
+export function QuantityStepper(props: QuantityStepperProps): JSX.Element {
+  const min = () => props.min ?? 0
+  const max = () => props.max ?? Number.MAX_SAFE_INTEGER
+
+  const clamp = (n: number) => Math.min(max(), Math.max(min(), n))
+
+  const decrement = () => props.onChange(clamp(props.value - 1))
+  const increment = () => props.onChange(clamp(props.value + 1))
+
+  return (
+    <div class={cn('inline-flex items-stretch rounded-md border border-input', props.class)}>
+      <button
+        type="button"
+        aria-label="Decrease quantity"
+        class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40"
+        disabled={props.disabled || props.value <= min()}
+        onClick={decrement}
+      >
+        <Minus class="h-4 w-4" />
+      </button>
+      <span class="grid min-w-[2.5rem] place-items-center tabular-nums">{props.value}</span>
+      <button
+        type="button"
+        aria-label="Increase quantity"
+        class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40"
+        disabled={props.disabled || props.value >= max()}
+        onClick={increment}
+      >
+        <Plus class="h-4 w-4" />
+      </button>
+    </div>
+  )
+}

package/src/commerce/index.ts

@@ -0,0 +1,10 @@
+// A4ui commerce components — storefront/cart building blocks, kept in their own
+// entry (`@a4ui/core/commerce`) so the base package stays lean. Import styles the
+// same way as the core (`@a4ui/core/styles.css` or the Tailwind preset).
+export { PriceTag, type PriceTagProps } from './PriceTag'
+export { QuantityStepper, type QuantityStepperProps } from './QuantityStepper'
+export { ProductCard, type ProductCardProps, type ProductBadgeTone } from './ProductCard'
+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'

package/src/elements.tsx

@@ -0,0 +1,167 @@
+// Web Components entry (`@a4ui/core/elements`) — a curated subset of A4ui's
+// presentational components registered as framework-agnostic custom elements so
+// they can be used from React/Next.js, Vue, Svelte, or plain HTML.
+//
+// Design notes:
+// - Each element renders in LIGHT DOM (noShadowDOM) so the global stylesheet
+//   (`@a4ui/core/elements.css`) and CSS theme variables apply normally — Shadow
+//   DOM would isolate the Tailwind utility classes the components rely on.
+// - Props map to attributes/properties (solid-element coerces by the declared
+//   default's type: number/boolean/string). Text content is taken from a `label`
+//   or `text` attribute, falling back to the element's initial text.
+// - Only leaf, primitive-prop components are wrapped. Rich/interactive/portalled
+//   components (Modal, Combobox, DataGrid, …) remain SolidJS-only — see the docs.
+//
+// This bundle is self-contained (solid-js is bundled in), so non-Solid apps need
+// no Solid toolchain: `import '@a4ui/core/elements'` once, then use the tags.
+import { customElement, noShadowDOM } from 'solid-element'
+import type { JSX } from 'solid-js'
+
+import { Alert, type AlertTone } from './ui/Alert'
+import { Avatar } from './ui/Avatar'
+import { Badge, type BadgeTone } from './ui/Badge'
+import { Button, type ButtonVariant } from './ui/Button'
+import { Clock } from './ui/Clock'
+import { Countdown } from './ui/Countdown'
+import { Kbd } from './ui/Kbd'
+import { Meter } from './ui/Meter'
+import { Progress } from './ui/Progress'
+import { Rating } from './ui/Rating'
+import { RingProgress } from './ui/RingProgress'
+import { Separator } from './ui/Separator'
+import { Spinner } from './ui/Spinner'
+import { Stat, type StatTone } from './ui/Stat'
+
+/** The initial text an author put between the tags, before Solid renders over it. */
+function initialText(element: unknown): string {
+  return ((element as HTMLElement).textContent ?? '').trim()
+}
+
+/** Register every A4ui custom element. Import for its side effect. */
+export function defineA4uiElements(): void {
+  customElement(
+    'a4-button',
+    { variant: 'primary', disabled: false, type: 'button', label: '' },
+    (props, { element }): JSX.Element => {
+      noShadowDOM()
+      const text = props.label || initialText(element)
+      return (
+        <Button
+          variant={props.variant as ButtonVariant}
+          disabled={props.disabled}
+          type={props.type as 'button' | 'submit' | 'reset'}
+        >
+          {text}
+        </Button>
+      )
+    },
+  )
+
+  customElement('a4-badge', { tone: 'neutral', label: '' }, (props, { element }): JSX.Element => {
+    noShadowDOM()
+    return <Badge tone={props.tone as BadgeTone}>{props.label || initialText(element)}</Badge>
+  })
+
+  customElement(
+    // `heading`, not `title` — the latter is a global HTML attribute and would
+    // clash with the element's native `title` (tooltip) property.
+    'a4-alert',
+    { tone: 'info', heading: '', text: '' },
+    (props, { element }): JSX.Element => {
+      noShadowDOM()
+      return (
+        <Alert tone={props.tone as AlertTone} title={props.heading || undefined}>
+          {props.text || initialText(element)}
+        </Alert>
+      )
+    },
+  )
+
+  customElement('a4-spinner', { label: 'Loading' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Spinner label={props.label} />
+  })
+
+  customElement('a4-avatar', { src: '', alt: '', fallback: '' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Avatar src={props.src || undefined} alt={props.alt} fallback={props.fallback || ''} />
+  })
+
+  customElement('a4-progress', { value: 0, max: 100, label: '' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Progress value={props.value} max={props.max} label={props.label || undefined} />
+  })
+
+  customElement('a4-meter', { value: 0, max: 100, label: '' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Meter value={props.value} max={props.max} label={props.label || undefined} />
+  })
+
+  customElement('a4-ring-progress', { value: 0, size: 96, thickness: 8, label: '' }, (props): JSX.Element => {
+    noShadowDOM()
+    return (
+      <RingProgress
+        value={props.value}
+        size={props.size}
+        thickness={props.thickness}
+        label={props.label || undefined}
+      />
+    )
+  })
+
+  customElement('a4-stat', { label: '', value: 0, tone: 'neutral' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Stat label={props.label} value={props.value} tone={props.tone as StatTone} />
+  })
+
+  customElement('a4-kbd', { label: '' }, (props, { element }): JSX.Element => {
+    noShadowDOM()
+    return <Kbd>{props.label || initialText(element)}</Kbd>
+  })
+
+  customElement('a4-separator', { orientation: 'horizontal' }, (props): JSX.Element => {
+    noShadowDOM()
+    return <Separator orientation={props.orientation as 'horizontal' | 'vertical'} />
+  })
+
+  customElement('a4-rating', { value: 0, max: 5, readonly: false }, (props, { element }): JSX.Element => {
+    noShadowDOM()
+    return (
+      <Rating
+        value={props.value}
+        max={props.max}
+        readonly={props.readonly}
+        onChange={(v) =>
+          (element as unknown as HTMLElement).dispatchEvent(new CustomEvent('change', { detail: v }))
+        }
+      />
+    )
+  })
+
+  customElement('a4-countdown', { to: '' }, (props): JSX.Element => {
+    noShadowDOM()
+    // eslint-disable-next-line solid/reactivity -- read the `to` attribute once to fix the target
+    const target = props.to ? new Date(props.to) : new Date(Date.now() + 86_400_000)
+    return <Countdown to={target} />
+  })
+
+  customElement(
+    'a4-clock',
+    { variant: 'digital', seconds: true, hour12: false, timezone: '', size: 160 },
+    (props): JSX.Element => {
+      noShadowDOM()
+      return (
+        <Clock
+          variant={props.variant as 'digital' | 'analog'}
+          seconds={props.seconds}
+          hour12={props.hour12}
+          timeZone={props.timezone || undefined}
+          size={props.size}
+        />
+      )
+    },
+  )
+}
+
+// Registering on import is the ergonomic default for `import '@a4ui/core/elements'`.
+defineA4uiElements()