@xaroth.nl/design 0.1.0

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,16 @@
+import { bem } from "../../bem.js";
+const breadcrumbs = bem('x-breadcrumbs');
+export const breadcrumbsClass = ({ className } = {}) => breadcrumbs({}, className);
+export const breadcrumbsClasses = {
+    list: breadcrumbs.el('list'),
+    item: breadcrumbs.el('item'),
+    link: breadcrumbs.el('link'),
+    text: breadcrumbs.el('text'),
+    current: breadcrumbs.el('current'),
+};
+// The last item is the page itself, so it is never a link even when it has an href.
+export const breadcrumbState = (item, index, count) => index === count - 1
+    ? { tag: 'span', attrs: { class: breadcrumbsClasses.current, 'aria-current': 'page' } }
+    : item.href !== undefined
+        ? { tag: 'a', attrs: { class: breadcrumbsClasses.link, href: item.href } }
+        : { tag: 'span', attrs: { class: breadcrumbsClasses.text } };

package/dist/components/button/button.astro

@@ -0,0 +1,36 @@
+---
+import './button.css'
+import type { HTMLAttributes } from 'astro/types'
+import { buttonClass, buttonState, type ButtonOptions } from './index.js'
+
+type Common = Omit<ButtonOptions, 'className'> & { class?: string }
+
+type Props =
+  | (Common & Omit<HTMLAttributes<'button'>, 'class'> & { href?: undefined })
+  | (Common & Omit<HTMLAttributes<'a'>, 'class' | 'type'> & { href: string; disabled?: boolean; type?: undefined })
+
+const { variant, tone, size, fullWidth, loading, disabled, class: className, href, type, slot: _slot, ...rest } =
+  Astro.props
+const classes = buttonClass({ variant, tone, size, fullWidth, loading, className })
+const { tag: Tag, attrs: state } = buttonState({ href, disabled: Boolean(disabled), loading, type: type ?? undefined })
+const attrs = { ...rest, ...state }
+---
+
+<Tag {...attrs} class={classes}>
+  {
+    Astro.slots.has('start') && (
+      <span class="x-button__start">
+        <slot name="start" />
+      </span>
+    )
+  }
+  <span class="x-button__label"><slot /></span>
+  {
+    Astro.slots.has('end') && (
+      <span class="x-button__end">
+        <slot name="end" />
+      </span>
+    )
+  }
+  {loading && <span class="x-button__spinner" aria-hidden="true" />}
+</Tag>

package/dist/components/button/button.css

@@ -0,0 +1,117 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-button {
+    --x-button-tone: var(--x-color-accent);
+    --x-button-on-tone: var(--x-color-on-accent);
+    --x-button-quiet-fg: var(--x-color-text);
+    position: relative;
+    display: inline-flex;
+    gap: var(--x-space-2);
+    align-items: center;
+    justify-content: center;
+    min-height: var(--x-control-md);
+    padding: 0 20px;
+    font-family: var(--x-button-font, var(--x-font-ui));
+    font-size: var(--x-button-fs, 0.875rem);
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: var(--x-button-tracking, 0.14em);
+    text-transform: var(--x-button-case, uppercase);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    color: var(--x-button-fg);
+    background: var(--x-button-bg);
+    border: 1px solid var(--x-button-border, transparent);
+    transition: background var(--x-duration) var(--x-ease), color var(--x-duration) var(--x-ease), border-color var(--x-duration) var(--x-ease), filter var(--x-duration) var(--x-ease);
+  }
+  .x-button:disabled, .x-button[aria-disabled=true] {
+    cursor: not-allowed;
+  }
+  .x-button:disabled, .x-button[aria-disabled=true]:not(.x-button--loading) {
+    opacity: 0.5;
+  }
+  .x-button--danger {
+    --x-button-tone: var(--x-color-danger);
+    --x-button-on-tone: var(--x-color-on-danger);
+    --x-button-quiet-fg: var(--x-color-danger);
+  }
+  .x-button--warning {
+    --x-button-tone: var(--x-color-warning);
+    --x-button-on-tone: var(--x-color-on-warning);
+    --x-button-quiet-fg: var(--x-color-warning);
+  }
+  .x-button--success {
+    --x-button-tone: var(--x-color-success);
+    --x-button-on-tone: var(--x-color-on-success);
+    --x-button-quiet-fg: var(--x-color-success);
+  }
+  .x-button--primary {
+    --x-button-fg: var(--x-button-on-tone);
+    --x-button-bg: var(--x-button-tone);
+  }
+  .x-button--primary:hover:not(:disabled, [aria-disabled=true]) {
+    filter: brightness(1.1);
+  }
+  .x-button--secondary {
+    --x-button-fg: var(--x-button-tone);
+    --x-button-bg: transparent;
+    --x-button-border: color-mix(in oklab, var(--x-button-tone) 60%, transparent);
+  }
+  .x-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
+    --x-button-bg: color-mix(in oklab, var(--x-button-tone) 12%, transparent);
+    --x-button-border: var(--x-button-tone);
+  }
+  .x-button--tertiary {
+    --x-button-fg: var(--x-button-quiet-fg);
+    --x-button-bg: transparent;
+  }
+  .x-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
+    --x-button-bg: color-mix(in oklab, var(--x-button-tone) 12%, transparent);
+  }
+  .x-button--sm {
+    --x-button-fs: var(--x-fs-label);
+    min-height: var(--x-control-sm);
+    padding: 0 var(--x-space-4);
+  }
+  .x-button--lg {
+    min-height: var(--x-control-lg);
+    padding: 0 var(--x-space-6);
+  }
+  .x-button--full {
+    display: flex;
+    width: 100%;
+  }
+  .x-button__start, .x-button__end {
+    display: inline-flex;
+    flex: none;
+  }
+  .x-button__start svg, .x-button__end svg {
+    width: 1.15em;
+    height: 1.15em;
+  }
+  .x-button--loading {
+    cursor: progress;
+  }
+  .x-button--loading .x-button__start,
+  .x-button--loading .x-button__label,
+  .x-button--loading .x-button__end {
+    opacity: 0;
+  }
+  .x-button__spinner {
+    position: absolute;
+    inset: 0;
+    width: 1.1em;
+    height: 1.1em;
+    margin: auto;
+    border: 2px solid currentcolor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: x-button-spin 0.8s linear infinite;
+  }
+  @keyframes x-button-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,18 @@
+import './button.scss';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { type ButtonOptions } from './index.ts';
+type Common = Omit<ButtonOptions, 'className'> & {
+    /** Shown before the label, usually an icon. */
+    start?: ReactNode;
+    /** Shown after the label, usually an icon. */
+    end?: ReactNode;
+};
+export type ButtonProps = (Common & ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+}) | (Common & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
+    href: string;
+    disabled?: boolean;
+    type?: undefined;
+});
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './button.css';
+import { buttonClass, buttonState } from "./index.js";
+export function Button(props) {
+    const { variant, tone, size, fullWidth, loading, disabled, className, start, end, children, onClick, href, type, ...rest } = props;
+    const classes = buttonClass({ variant, tone, size, fullWidth, loading, className });
+    const { tag, attrs } = buttonState({ href, disabled, loading, type });
+    // aria-disabled does not stop clicks or Enter, so inactive buttons swallow them here.
+    const handleClick = (event) => {
+        if (disabled || loading) {
+            event.preventDefault();
+            return;
+        }
+        ;
+        onClick?.(event);
+    };
+    const content = (_jsxs(_Fragment, { children: [start != null && _jsx("span", { className: "x-button__start", children: start }), _jsx("span", { className: "x-button__label", children: children }), end != null && _jsx("span", { className: "x-button__end", children: end }), loading && (_jsx("span", { className: "x-button__spinner", "aria-hidden": "true" }))] }));
+    if (tag === 'a') {
+        return (_jsx("a", { ...rest, ...attrs, className: classes, onClick: handleClick, children: content }));
+    }
+    return (_jsx("button", { ...rest, ...attrs, className: classes, onClick: handleClick, children: content }));
+}

package/dist/components/button/index.d.ts

@@ -0,0 +1,59 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonTone = 'default' | 'danger' | 'warning' | 'success';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonOptions = {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    className?: string;
+};
+export type ButtonStateInput = {
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+};
+export declare const buttonClass: ({ variant, tone, size, fullWidth, loading, className, }?: ButtonOptions) => string;
+export declare const buttonState: ({ href, disabled, loading, type }: ButtonStateInput) => {
+    tag: "a";
+    attrs: {
+        'aria-busy': "true";
+        'aria-disabled': "true";
+    } | {
+        'aria-busy'?: undefined;
+        'aria-disabled': "true";
+    } | {
+        'aria-busy': "true";
+        href: string;
+    } | {
+        'aria-busy'?: undefined;
+        href: string;
+    };
+} | {
+    tag: "button";
+    attrs: {
+        'aria-busy': "true";
+        disabled: boolean;
+        type: "button" | "submit" | "reset";
+    } | {
+        'aria-busy'?: undefined;
+        disabled: boolean;
+        type: "button" | "submit" | "reset";
+    } | {
+        'aria-busy': "true";
+        'aria-disabled': "true";
+        type: "button" | "submit" | "reset";
+    } | {
+        'aria-busy'?: undefined;
+        'aria-disabled': "true";
+        type: "button" | "submit" | "reset";
+    } | {
+        'aria-busy': "true";
+        type: "button" | "submit" | "reset";
+    } | {
+        'aria-busy'?: undefined;
+        type: "button" | "submit" | "reset";
+    };
+};

package/dist/components/button/index.js

@@ -0,0 +1,26 @@
+import { bem } from "../../bem.js";
+const button = bem('x-button', { defaults: { tone: 'default', size: 'md' } });
+export const buttonClass = ({ variant = 'primary', tone = 'default', size = 'md', fullWidth, loading, className, } = {}) => button({ variant, tone, size, full: fullWidth, loading }, className);
+// Links cannot be disabled natively, so an inactive link drops its href and is marked aria-disabled.
+// Loading keeps a plain button focusable (aria-disabled instead of disabled) so keyboard focus is not lost
+// mid-action. A loading submit or reset button is disabled, since without JS aria-disabled would not stop it.
+// Keys are only present when set, so they never erase a user attribute.
+export const buttonState = ({ href, disabled, loading, type = 'button' }) => {
+    const busy = loading ? { 'aria-busy': 'true' } : {};
+    if (href !== undefined) {
+        const inactive = Boolean(disabled || loading);
+        return {
+            tag: 'a',
+            attrs: inactive ? { 'aria-disabled': 'true', ...busy } : { href, ...busy },
+        };
+    }
+    const native = Boolean(disabled || (loading && type !== 'button'));
+    return {
+        tag: 'button',
+        attrs: {
+            type,
+            ...(native ? { disabled: true } : loading ? { 'aria-disabled': 'true' } : {}),
+            ...busy,
+        },
+    };
+};

package/dist/components/card/card.astro

@@ -0,0 +1,98 @@
+---
+import './card.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  cardClass,
+  cardIndexStyle,
+  type CardElement,
+  type CardHeadingLevel,
+  type CardOptions,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'article'>, 'class' | 'title'> &
+  Omit<CardOptions, 'className' | 'link'> & {
+    class?: string
+    /** Makes the whole card one link, through the title. Needs a title; keep other content non-interactive. */
+    href?: string
+    /** Plain-text title; the `title` slot takes markup. */
+    title?: string
+    index?: number
+    as?: CardElement
+    headingLevel?: CardHeadingLevel
+  }
+
+const {
+  featured,
+  href,
+  title,
+  index,
+  as: El = 'article',
+  headingLevel = 3,
+  class: className,
+  slot: _slot,
+  ...rest
+} = Astro.props
+const H = `h${headingLevel}` as const
+const hasTitle = title !== undefined || Astro.slots.has('title')
+const hasStatus = Astro.slots.has('status')
+const hasFootStart = Astro.slots.has('footStart')
+const hasFootEnd = Astro.slots.has('footEnd')
+---
+
+<El {...rest} class={cardClass({ featured, link: href !== undefined, className })}>
+  {
+    (index !== undefined || hasStatus) && (
+      <div class="x-card__head">
+        {index !== undefined && <span class="x-card__index" style={cardIndexStyle(index)} aria-hidden="true" />}
+        {hasStatus && (
+          <span class="x-card__status">
+            <slot name="status" />
+          </span>
+        )}
+      </div>
+    )
+  }
+  {
+    hasTitle && (
+      <H class="x-card__title">
+        {href !== undefined ? (
+          <a class="x-card__link" href={href}>
+            <slot name="title">{title}</slot>
+          </a>
+        ) : (
+          <slot name="title">{title}</slot>
+        )}
+      </H>
+    )
+  }
+  {
+    Astro.slots.has('default') && (
+      <div class="x-card__body">
+        <slot />
+      </div>
+    )
+  }
+  {
+    Astro.slots.has('tags') && (
+      <div class="x-card__tags">
+        <slot name="tags" />
+      </div>
+    )
+  }
+  {
+    (hasFootStart || hasFootEnd) && (
+      <div class="x-card__foot">
+        {hasFootStart && (
+          <div class="x-card__foot-start">
+            <slot name="footStart" />
+          </div>
+        )}
+        {hasFootEnd && (
+          <div class="x-card__foot-end">
+            <slot name="footEnd" />
+          </div>
+        )}
+      </div>
+    )
+  }
+</El>

package/dist/components/card/card.css

@@ -0,0 +1,91 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-card {
+    --x-card-pad: var(--x-space-4);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-card-gap, var(--x-space-3));
+    box-sizing: border-box;
+    min-width: 0;
+    height: 100%;
+    padding: var(--x-card-pad);
+    color: var(--x-color-text);
+  }
+  @media (min-width: 640px) {
+    .x-card {
+      --x-card-pad: var(--x-space-5);
+    }
+  }
+  .x-card__head {
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    justify-content: space-between;
+  }
+  .x-card__index {
+    counter-reset: x-card-index var(--x-card-index, 0);
+    font-size: var(--x-fs-label);
+    line-height: 1.3;
+    color: var(--x-color-text-faint);
+  }
+  .x-card__index::before {
+    content: var(--x-card-index-prefix, "") counter(x-card-index, var(--x-card-index-style, decimal));
+  }
+  .x-card__status {
+    display: inline-flex;
+    margin-left: auto;
+  }
+  .x-card__title {
+    font-size: var(--x-fs-h3);
+    line-height: 1.3;
+  }
+  .x-card__link {
+    color: inherit;
+    text-decoration: none;
+  }
+  .x-card__link:hover {
+    color: inherit;
+  }
+  .x-card__link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  .x-card--link:has(.x-card__link:focus-visible) {
+    outline: var(--x-focus-width) solid var(--x-color-focus);
+    outline-offset: var(--x-focus-offset);
+  }
+  .x-card--link:has(.x-card__link:focus-visible) .x-card__link:focus-visible {
+    outline: none;
+  }
+  .x-card__body {
+    flex: 1;
+    color: var(--x-color-text-muted);
+  }
+  .x-card__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .x-card__foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-3);
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--x-space-3);
+    margin-top: auto;
+    border-top: 1px var(--x-card-foot-style, solid) var(--x-color-line-strong);
+  }
+  .x-card__foot-start {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    min-width: 0;
+  }
+  .x-card__foot-end {
+    margin-left: auto;
+  }
+}

package/dist/components/card/card.d.ts

@@ -0,0 +1,19 @@
+import './card.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type CardElement, type CardHeadingLevel, type CardOptions } from './index.ts';
+export type CardProps = Omit<CardOptions, 'className' | 'link'> & Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    /** Makes the whole card one link, through the title. Needs a title; keep other content non-interactive. */
+    href?: string;
+    title?: ReactNode;
+    /** Number shown in the head; the theme formats it (T-01, IV). */
+    index?: number;
+    /** Head row, right side. Usually a Badge. */
+    status?: ReactNode;
+    /** Row of Tag chips under the body. */
+    tags?: ReactNode;
+    footStart?: ReactNode;
+    footEnd?: ReactNode;
+    as?: CardElement;
+    headingLevel?: CardHeadingLevel;
+};
+export declare function Card({ featured, href, title, index, status, tags, footStart, footEnd, as: El, headingLevel, className, children, ...rest }: CardProps): import("react").JSX.Element;

package/dist/components/card/card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './card.css';
+import { cardClass, cardIndexProperty, cardIndexValue, } from "./index.js";
+export function Card({ featured, href, title, index, status, tags, footStart, footEnd, as: El = 'article', headingLevel = 3, className, children, ...rest }) {
+    const H = `h${headingLevel}`;
+    return (_jsxs(El, { ...rest, className: cardClass({ featured, link: href !== undefined, className }), children: [(index !== undefined || status != null) && (_jsxs("div", { className: "x-card__head", children: [index !== undefined && (_jsx("span", { className: "x-card__index", style: { [cardIndexProperty]: cardIndexValue(index) }, "aria-hidden": "true" })), status != null && _jsx("span", { className: "x-card__status", children: status })] })), title != null && (_jsx(H, { className: "x-card__title", children: href !== undefined ? (_jsx("a", { className: "x-card__link", href: href, children: title })) : (title) })), children != null && _jsx("div", { className: "x-card__body", children: children }), tags != null && _jsx("div", { className: "x-card__tags", children: tags }), (footStart != null || footEnd != null) && (_jsxs("div", { className: "x-card__foot", children: [footStart != null && _jsx("div", { className: "x-card__foot-start", children: footStart }), footEnd != null && _jsx("div", { className: "x-card__foot-end", children: footEnd })] }))] }));
+}

package/dist/components/card/index.d.ts

@@ -0,0 +1,11 @@
+export type CardElement = 'article' | 'div' | 'li';
+export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type CardOptions = {
+    featured?: boolean;
+    link?: boolean;
+    className?: string;
+};
+export declare const cardClass: ({ featured, link, className }?: CardOptions) => string;
+export declare const cardIndexProperty = "--x-card-index";
+export declare const cardIndexValue: (index: number) => string;
+export declare const cardIndexStyle: (index: number) => string;

package/dist/components/card/index.js

@@ -0,0 +1,7 @@
+import { bem } from "../../bem.js";
+const card = bem('x-card');
+export const cardClass = ({ featured, link, className } = {}) => card({ link, featured }, className);
+// Passed as a number; each theme formats it with a CSS counter (T-01, IV).
+export const cardIndexProperty = '--x-card-index';
+export const cardIndexValue = (index) => String(Math.trunc(index));
+export const cardIndexStyle = (index) => `${cardIndexProperty}:${cardIndexValue(index)}`;

package/dist/components/description-list/description-list.astro

@@ -0,0 +1,39 @@
+---
+import './description-list.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  descriptionListClass,
+  descriptionListValueSlot,
+  type DescriptionListItem,
+  type DescriptionListOptions,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'dl'>, 'class'> &
+  Omit<DescriptionListOptions, 'className'> & {
+    class?: string
+    /** Plain values. For markup (links, times), fill the `value-<index>` slot. */
+    items: DescriptionListItem[]
+  }
+
+const { items, layout, dividers, class: className, slot: _slot, ...rest } = Astro.props
+const slotted = new Map<number, string>()
+for (const i of items.keys()) {
+  const name = descriptionListValueSlot(i)
+  if (Astro.slots.has(name)) {
+    slotted.set(i, await Astro.slots.render(name))
+  }
+}
+---
+
+<dl {...rest} class={descriptionListClass({ layout, dividers, className })}>
+  {
+    items.map((item, i) => (
+      <div class="x-description-list__item">
+        <dt class="x-description-list__term">{item.term}</dt>
+        <dd class="x-description-list__value">
+          {slotted.has(i) ? <Fragment set:html={slotted.get(i)} /> : item.value}
+        </dd>
+      </div>
+    ))
+  }
+</dl>

package/dist/components/description-list/description-list.css

@@ -0,0 +1,72 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-description-list {
+    --x-description-list-term-font: var(--x-font-ui);
+    --x-description-list-term-fs: var(--x-fs-ui);
+    --x-description-list-term-weight: 400;
+    --x-description-list-term-tracking: normal;
+    --x-description-list-term-case: none;
+    --x-description-list-term-color: var(--x-color-text-muted);
+    --x-description-list-value-font: var(--x-font-ui);
+    --x-description-list-value-fs: var(--x-fs-ui);
+    --x-description-list-value-color: var(--x-color-text);
+    --x-description-list-gap: var(--x-space-2);
+    --x-description-list-pad: 10px;
+    --x-description-list-line: var(--x-color-line);
+    --x-description-list-term-width: 7rem;
+    display: grid;
+    gap: var(--x-description-list-gap);
+    min-width: 0;
+    margin: 0;
+  }
+  .x-description-list__item {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+  .x-description-list__term {
+    font-family: var(--x-description-list-term-font);
+    font-size: var(--x-description-list-term-fs);
+    font-weight: var(--x-description-list-term-weight);
+    line-height: 1.4;
+    letter-spacing: var(--x-description-list-term-tracking);
+    text-transform: var(--x-description-list-term-case);
+    color: var(--x-description-list-term-color);
+  }
+  .x-description-list__value {
+    min-width: 0;
+    margin: 0;
+    font-family: var(--x-description-list-value-font);
+    font-size: var(--x-description-list-value-fs);
+    line-height: 1.4;
+    color: var(--x-description-list-value-color);
+    overflow-wrap: anywhere;
+  }
+  .x-description-list--inline .x-description-list__item {
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: baseline;
+    justify-content: space-between;
+  }
+  .x-description-list--inline .x-description-list__term {
+    flex: none;
+  }
+  .x-description-list--inline .x-description-list__value {
+    text-align: right;
+  }
+  @media (min-width: 640px) {
+    .x-description-list--columns .x-description-list__item {
+      grid-template-columns: var(--x-description-list-term-width) minmax(0, 1fr);
+      gap: var(--x-space-3);
+      align-items: baseline;
+    }
+  }
+  .x-description-list--dividers {
+    gap: 0;
+    border-top: 1px solid var(--x-description-list-line);
+  }
+  .x-description-list--dividers .x-description-list__item {
+    padding-block: var(--x-description-list-pad);
+    border-bottom: 1px solid var(--x-description-list-line);
+  }
+}

package/dist/components/description-list/description-list.d.ts

@@ -0,0 +1,7 @@
+import './description-list.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type DescriptionListItem, type DescriptionListOptions } from './index.ts';
+export type DescriptionListProps = Omit<HTMLAttributes<HTMLDListElement>, 'children'> & Omit<DescriptionListOptions, 'className'> & {
+    items: DescriptionListItem<ReactNode>[];
+};
+export declare function DescriptionList({ items, layout, dividers, className, ...rest }: DescriptionListProps): import("react").JSX.Element;

package/dist/components/description-list/description-list.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './description-list.css';
+import { descriptionListClass } from "./index.js";
+export function DescriptionList({ items, layout, dividers, className, ...rest }) {
+    return (_jsx("dl", { ...rest, className: descriptionListClass({ layout, dividers, className }), children: items.map((item, i) => (_jsxs("div", { className: "x-description-list__item", children: [_jsx("dt", { className: "x-description-list__term", children: item.term }), _jsx("dd", { className: "x-description-list__value", children: item.value })] }, i))) }));
+}