@xaroth.nl/design 0.1.0

package/dist/components/field/textarea.astro

@@ -0,0 +1,24 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { textareaClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'textarea'>, 'class' | 'value'> & {
+  /** Initial text. The default slot works too. */
+  value?: string
+  defaultValue?: string
+  class?: string
+}
+
+const { value, defaultValue, class: className, ...rest } = Astro.props
+const text = value ?? defaultValue
+const attrs = { ...rest, class: textareaClass({ className }) }
+---
+
+{
+  text === undefined ? (
+    <textarea {...attrs}><slot /></textarea>
+  ) : (
+    <textarea {...attrs}>{text}</textarea>
+  )
+}

package/dist/components/filters/filter-layout.astro

@@ -0,0 +1,72 @@
+---
+import './filters.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  filterClasses as c,
+  filterLayoutClass,
+  filterPositions,
+  filterSwitchButtonAttrs,
+  filterSwitchLabels,
+  filterSwitchScript,
+  type FilterLayoutOptions,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> &
+  Omit<FilterLayoutOptions, 'className'> & {
+    class?: string
+    /** Adds a Top / Side switch above the filters (hidden below 1024px). Uses a tiny inline script. */
+    switchable?: boolean
+    switchLabel?: string
+    /** Below 1024px the filters fold behind a closed disclosure. */
+    collapsible?: boolean
+    collapsibleLabel?: string
+    /** Number of active filters, shown on the disclosure. */
+    activeCount?: number
+    activeLabel?: string
+  }
+
+const {
+  position = 'top',
+  switchable,
+  switchLabel = 'Filter position',
+  collapsible,
+  collapsibleLabel = 'Filters',
+  activeCount,
+  activeLabel = 'active',
+  class: className,
+  ...rest
+} = Astro.props
+---
+
+<div class={filterLayoutClass({ position, className })} {...rest}>
+  {
+    switchable && (
+      <fieldset class={c.switch}>
+        <legend class={c.switchLabel}>{switchLabel}</legend>
+        <span class={c.switchOptions}>
+          {filterPositions.map((option) => (
+            <button type="button" {...filterSwitchButtonAttrs(option, position)}>{filterSwitchLabels[option]}</button>
+          ))}
+        </span>
+      </fieldset>
+    )
+  }
+  {
+    collapsible && (
+      <details class={c.disclosure}>
+        <summary class={c.toggle}>
+          {collapsibleLabel}
+          {activeCount !== undefined && activeCount > 0 && (
+            <span class={c.count}>
+              {activeCount}
+              <span class="x-visually-hidden">{` ${activeLabel}`}</span>
+            </span>
+          )}
+        </summary>
+      </details>
+    )
+  }
+  <div class={c.controls}><slot name="filters" /></div>
+  <div class={c.results}><slot /></div>
+</div>
+{switchable && <script is:inline set:html={filterSwitchScript} />}

package/dist/components/filters/filter-panel.astro

@@ -0,0 +1,13 @@
+---
+import './filters.css'
+import type { HTMLAttributes } from 'astro/types'
+import { filterPanelClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'form'>, 'class'> & {
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<form class={filterPanelClass({ className })} {...rest}><slot /></form>

package/dist/components/filters/filters.css

@@ -0,0 +1,230 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-filters,
+  .x-filter-panel {
+    --x-filters-field-gap: var(--x-space-5);
+  }
+  .x-filters {
+    --x-filters-switch-font: var(--x-font-ui);
+    --x-filters-switch-fs: var(--x-fs-label);
+    --x-filters-switch-weight: 600;
+    --x-filters-switch-tracking: var(--x-track-label);
+    --x-filters-switch-case: uppercase;
+    --x-filters-switch-color: var(--x-color-text-muted);
+    --x-filters-option-font: var(--x-font-ui);
+    --x-filters-option-weight: 700;
+    --x-filters-option-tracking: var(--x-track-label);
+    --x-filters-option-color: var(--x-color-text-muted);
+    --x-filters-option-bg: transparent;
+    --x-filters-option-hover: var(--x-color-text);
+    --x-filters-option-on-color: var(--x-color-on-accent);
+    --x-filters-option-on-bg: var(--x-color-accent);
+    --x-filters-option-on-shadow: none;
+    --x-filters-toggle-bg: transparent;
+    --x-filters-count-color: var(--x-color-accent);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--x-space-6) var(--x-gap);
+    align-items: start;
+  }
+  .x-filters__switch {
+    display: none;
+    grid-column: 1/-1;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    flex-wrap: wrap;
+    gap: var(--x-space-3);
+    align-items: center;
+    margin-bottom: calc(var(--x-space-4) - var(--x-space-6));
+  }
+  @media (min-width: 1024px) {
+    .x-filters__switch {
+      display: flex;
+    }
+  }
+  .x-filters__switch-label {
+    float: left;
+    padding: 0;
+    font-family: var(--x-filters-switch-font);
+    font-size: var(--x-filters-switch-fs);
+    font-weight: var(--x-filters-switch-weight);
+    line-height: 1.3;
+    letter-spacing: var(--x-filters-switch-tracking);
+    text-transform: var(--x-filters-switch-case);
+    color: var(--x-filters-switch-color);
+  }
+  .x-filters__switch-options {
+    display: inline-flex;
+    border: 1px solid var(--x-color-line-strong);
+    border-radius: var(--x-radius);
+  }
+  .x-filters__switch-option {
+    min-width: 64px;
+    height: var(--x-control-sm);
+    padding: 0 var(--x-space-4);
+    margin: 0;
+    font-family: var(--x-filters-option-font);
+    font-size: var(--x-fs-label);
+    font-weight: var(--x-filters-option-weight);
+    line-height: 1;
+    letter-spacing: var(--x-filters-option-tracking);
+    text-transform: uppercase;
+    color: var(--x-filters-option-color);
+    cursor: pointer;
+    background: var(--x-filters-option-bg);
+    border: 0;
+    transition: color var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease);
+  }
+  .x-filters__switch-option + .x-filters__switch-option {
+    border-left: 1px solid var(--x-color-line-strong);
+  }
+  .x-filters__switch-option:hover {
+    color: var(--x-filters-option-hover);
+  }
+  .x-filters__switch-option:focus-visible {
+    position: relative;
+    outline: var(--x-focus-width) solid var(--x-color-focus);
+    outline-offset: var(--x-focus-offset);
+  }
+  .x-filters__switch-option[aria-pressed=true] {
+    color: var(--x-filters-option-on-color);
+    background: var(--x-filters-option-on-bg);
+    box-shadow: var(--x-filters-option-on-shadow);
+  }
+  .x-filters__disclosure {
+    display: none;
+    min-width: 0;
+    margin-bottom: calc(var(--x-space-3) - var(--x-space-6));
+  }
+  @media (width < 1024px) {
+    .x-filters__disclosure {
+      display: block;
+    }
+    .x-filters__disclosure:not([open]) {
+      margin-bottom: 0;
+    }
+    .x-filters__disclosure:not([open]) + .x-filters__controls {
+      display: none;
+    }
+  }
+  .x-filters__toggle {
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    min-height: var(--x-control-md);
+    padding: 0 var(--x-space-4);
+    font-family: var(--x-filters-switch-font);
+    font-size: var(--x-filters-switch-fs);
+    font-weight: var(--x-filters-switch-weight);
+    line-height: 1;
+    letter-spacing: var(--x-filters-switch-tracking);
+    text-transform: var(--x-filters-switch-case);
+    color: var(--x-color-text);
+    list-style: none;
+    cursor: pointer;
+    background: var(--x-filters-toggle-bg);
+    border: 1px solid var(--x-color-line-strong);
+    border-radius: var(--x-radius);
+    transition: border-color var(--x-duration) var(--x-ease);
+  }
+  .x-filters__toggle::-webkit-details-marker {
+    display: none;
+  }
+  .x-filters__toggle::after {
+    content: "";
+    width: 7px;
+    height: 7px;
+    margin: -4px 2px 0 auto;
+    border-right: 1.5px solid currentcolor;
+    border-bottom: 1.5px solid currentcolor;
+    transform: rotate(45deg);
+  }
+  [open] > .x-filters__toggle::after {
+    margin-top: 4px;
+    transform: rotate(-135deg);
+  }
+  .x-filters__toggle:hover {
+    border-color: var(--x-color-accent-edge);
+  }
+  .x-filters__toggle:focus-visible {
+    outline: var(--x-focus-width) solid var(--x-color-focus);
+    outline-offset: var(--x-focus-offset);
+  }
+  .x-filters__count {
+    display: inline-grid;
+    place-items: center;
+    min-width: 1.5rem;
+    padding: 0 var(--x-space-1);
+    font-family: var(--x-font-mono);
+    font-size: var(--x-fs-label);
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--x-filters-count-color);
+    border: 1px solid var(--x-color-accent-edge);
+  }
+  .x-filters__controls, .x-filters__results {
+    min-width: 0;
+  }
+  @media (min-width: 1024px) {
+    .x-filters--side {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+    .x-filters--side .x-filters__controls {
+      grid-column: span 3;
+    }
+    .x-filters--side .x-filters__results {
+      grid-column: span 9;
+    }
+  }
+  .x-filter-panel {
+    display: grid;
+    gap: var(--x-filters-field-gap) var(--x-gap);
+    align-content: start;
+    min-width: 0;
+    margin: 0;
+  }
+  @media (min-width: 640px) {
+    .x-filter-panel {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .x-filter-panel > .x-checkbox,
+  .x-filter-panel > .x-switch {
+    align-self: end;
+    min-height: var(--x-control-md);
+  }
+  @media (min-width: 1024px) {
+    .x-filters--side .x-filter-panel {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .x-filters--side .x-filter-panel .x-choice-group__options {
+      flex-direction: column;
+    }
+    .x-filters--side .x-filter-panel > .x-checkbox,
+    .x-filters--side .x-filter-panel > .x-switch {
+      min-height: var(--x-control-sm);
+    }
+    .x-filters--top .x-filter-panel {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: end;
+    }
+    .x-filters--top .x-filter-panel > * {
+      flex: 1 1 14rem;
+    }
+    .x-filters--top .x-filter-panel > .x-choice-group {
+      flex: 1.6 1 auto;
+    }
+    .x-filters--top .x-filter-panel > .x-checkbox,
+    .x-filters--top .x-filter-panel > .x-switch {
+      flex: none;
+      margin-left: auto;
+    }
+    .x-filters--top .x-filter-panel .x-choice-group__options {
+      align-items: center;
+      min-height: var(--x-control-md);
+    }
+  }
+}

package/dist/components/filters/filters.d.ts

@@ -0,0 +1,20 @@
+import './filters.scss';
+import { type FormHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type FilterLayoutOptions, type FilterPosition } from './index.ts';
+export type FilterLayoutProps = HTMLAttributes<HTMLDivElement> & Omit<FilterLayoutOptions, 'className'> & {
+    /** The filter form, usually a FilterPanel. */
+    filters?: ReactNode;
+    /** Adds a Top / Side switch above the filters (hidden below 1024px). */
+    switchable?: boolean;
+    switchLabel?: string;
+    /** Below 1024px the filters fold behind a closed disclosure. */
+    collapsible?: boolean;
+    collapsibleLabel?: string;
+    /** Number of active filters, shown on the disclosure. */
+    activeCount?: number;
+    activeLabel?: string;
+    onPositionChange?: (position: FilterPosition) => void;
+};
+export declare function FilterLayout({ position, switchable, switchLabel, collapsible, collapsibleLabel, activeCount, activeLabel, onPositionChange, filters, className, children, ...rest }: FilterLayoutProps): import("react").JSX.Element;
+export type FilterPanelProps = FormHTMLAttributes<HTMLFormElement>;
+export declare function FilterPanel({ className, ...rest }: FilterPanelProps): import("react").JSX.Element;

package/dist/components/filters/filters.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './filters.css';
+import { useState } from 'react';
+import { filterClasses as c, filterLayoutClass, filterPanelClass, filterPositions, filterSwitchButtonAttrs, filterSwitchLabels, } from "./index.js";
+export function FilterLayout({ position = 'top', switchable, switchLabel = 'Filter position', collapsible, collapsibleLabel = 'Filters', activeCount, activeLabel = 'active', onPositionChange, filters, className, children, ...rest }) {
+    const [current, setCurrent] = useState(position);
+    // A new position prop resets the switch; clicks change it until then.
+    const [prop, setProp] = useState(position);
+    if (prop !== position) {
+        setProp(position);
+        setCurrent(position);
+    }
+    return (_jsxs("div", { ...rest, className: filterLayoutClass({ position: current, className }), children: [switchable && (_jsxs("fieldset", { className: c.switch, children: [_jsx("legend", { className: c.switchLabel, children: switchLabel }), _jsx("span", { className: c.switchOptions, children: filterPositions.map((option) => {
+                            const { class: optionClass, ...attrs } = filterSwitchButtonAttrs(option, current);
+                            return (_jsx("button", { ...attrs, type: "button", className: optionClass, onClick: () => {
+                                    setCurrent(option);
+                                    onPositionChange?.(option);
+                                }, children: filterSwitchLabels[option] }, option));
+                        }) })] })), collapsible && (_jsx("details", { className: c.disclosure, children: _jsxs("summary", { className: c.toggle, children: [collapsibleLabel, activeCount !== undefined && activeCount > 0 && (_jsxs("span", { className: c.count, children: [activeCount, _jsx("span", { className: "x-visually-hidden", children: ` ${activeLabel}` })] }))] }) })), _jsx("div", { className: c.controls, children: filters }), _jsx("div", { className: c.results, children: children })] }));
+}
+export function FilterPanel({ className, ...rest }) {
+    return (_jsx("form", { ...rest, className: filterPanelClass({ className }) }));
+}

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

@@ -0,0 +1,27 @@
+export type FilterPosition = 'top' | 'side';
+export declare const filterPositions: readonly FilterPosition[];
+export type FilterLayoutOptions = {
+    position?: FilterPosition;
+    className?: string;
+};
+export declare const filterLayoutClass: ({ position, className }?: FilterLayoutOptions) => string;
+export declare const filterPanelClass: ({ className }?: {
+    className?: string;
+}) => string;
+export declare const filterClasses: {
+    readonly switch: string;
+    readonly switchLabel: string;
+    readonly switchOptions: string;
+    readonly disclosure: string;
+    readonly toggle: string;
+    readonly count: string;
+    readonly controls: string;
+    readonly results: string;
+};
+export declare const filterSwitchLabels: Record<FilterPosition, string>;
+export declare const filterSwitchButtonAttrs: (option: FilterPosition, position?: FilterPosition) => {
+    class: string;
+    'data-x-filters-position': FilterPosition;
+    'aria-pressed': "true" | "false";
+};
+export declare const filterSwitchScript = "(()=>{if(window.__xFilters)return;window.__xFilters=1;document.addEventListener('click',(e)=>{const b=e.target instanceof Element&&e.target.closest('[data-x-filters-position]');const r=b&&b.closest('.x-filters');if(!r)return;const p=b.getAttribute('data-x-filters-position');r.classList.toggle('x-filters--top',p==='top');r.classList.toggle('x-filters--side',p==='side');r.querySelectorAll(':scope>.x-filters__switch [data-x-filters-position]').forEach((o)=>o.setAttribute('aria-pressed',String(o===b)))})})()";

package/dist/components/filters/index.js

@@ -0,0 +1,25 @@
+import { bem } from "../../bem.js";
+export const filterPositions = ['top', 'side'];
+const filters = bem('x-filters');
+const filterPanel = bem('x-filter-panel');
+export const filterLayoutClass = ({ position = 'top', className } = {}) => filters({ position }, className);
+export const filterPanelClass = ({ className } = {}) => filterPanel({}, className);
+export const filterClasses = {
+    switch: filters.el('switch'),
+    switchLabel: filters.el('switch-label'),
+    switchOptions: filters.el('switch-options'),
+    disclosure: filters.el('disclosure'),
+    toggle: filters.el('toggle'),
+    count: filters.el('count'),
+    controls: filters.el('controls'),
+    results: filters.el('results'),
+};
+export const filterSwitchLabels = { top: 'Top', side: 'Side' };
+export const filterSwitchButtonAttrs = (option, position = 'top') => ({
+    class: filters.el('switch-option'),
+    'data-x-filters-position': option,
+    'aria-pressed': option === position ? 'true' : 'false',
+});
+// Astro only: flips the modifier class and aria-pressed on click. One document listener serves every instance,
+// so repeated copies of the script return early.
+export const filterSwitchScript = `(()=>{if(window.__xFilters)return;window.__xFilters=1;document.addEventListener('click',(e)=>{const b=e.target instanceof Element&&e.target.closest('[data-x-filters-position]');const r=b&&b.closest('.x-filters');if(!r)return;const p=b.getAttribute('data-x-filters-position');r.classList.toggle('x-filters--top',p==='top');r.classList.toggle('x-filters--side',p==='side');r.querySelectorAll(':scope>.x-filters__switch [data-x-filters-position]').forEach((o)=>o.setAttribute('aria-pressed',String(o===b)))})})()`;

package/dist/components/footer/footer.astro

@@ -0,0 +1,70 @@
+---
+import './footer.css'
+import type { HTMLAttributes } from 'astro/types'
+import { footerBrandState, footerClass, footerClasses as c, type FooterGroup, type FooterOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'footer'>, 'class'> &
+  Omit<FooterOptions, 'className'> & {
+    class?: string
+    groups?: FooterGroup[]
+    brandHref?: string
+    /** Accessible name for the brand link. Ignored without `brandHref`. */
+    brandLabel?: string
+    /** Legal line. The `note` slot takes precedence. */
+    note?: string
+    navLabel?: string
+  }
+
+const {
+  layout,
+  class: className,
+  groups = [],
+  brandHref,
+  brandLabel,
+  note,
+  navLabel = 'Footer',
+  slot: _slot,
+  ...rest
+} = Astro.props
+const { tag: Brand, attrs: brand } = footerBrandState(brandHref, brandLabel)
+const hasNote = Astro.slots.has('note') || Boolean(note)
+---
+
+<footer {...rest} class={footerClass({ layout, className })}>
+  <div class={c.inner}>
+    {
+      Astro.slots.has('brand') && (
+        <Brand {...brand} class={c.brand}>
+          <slot name="brand" />
+        </Brand>
+      )
+    }
+    {
+      hasNote && (
+        <p class={c.note}>
+          <slot name="note">{note}</slot>
+        </p>
+      )
+    }
+    {
+      groups.length > 0 && (
+        <nav class={c.nav} aria-label={navLabel}>
+          {groups.map((group) => (
+            <div class={c.group}>
+              {group.title && <h2 class={c.title}>{group.title}</h2>}
+              <ul class={c.links}>
+                {group.links.map((link) => (
+                  <li>
+                    <a class={c.link} href={link.href}>
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      )
+    }
+  </div>
+</footer>

package/dist/components/footer/footer.css

@@ -0,0 +1,128 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-footer__inner {
+    display: grid;
+    width: 100%;
+    max-width: calc(var(--x-page) + 2 * var(--x-gutter));
+    padding-inline: var(--x-gutter);
+    margin-inline: auto;
+  }
+  .x-footer__brand {
+    display: inline-flex;
+    gap: 10px;
+    align-items: center;
+    justify-self: start;
+    color: inherit;
+    text-decoration: none;
+  }
+  .x-footer__brand svg {
+    flex: none;
+    width: var(--x-footer-mark, 28px);
+    height: var(--x-footer-mark, 28px);
+  }
+  .x-footer__note {
+    max-width: var(--x-prose);
+    margin: 0;
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+  }
+  .x-footer__group {
+    display: grid;
+    gap: var(--x-space-3);
+    align-content: start;
+    min-width: 0;
+  }
+  .x-footer__title {
+    margin: 0;
+    font-size: var(--x-fs-label);
+    line-height: 1.3;
+  }
+  .x-footer__links {
+    display: grid;
+    gap: var(--x-space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .x-footer__link {
+    text-decoration: none;
+  }
+  .x-footer__link:hover {
+    text-decoration: underline;
+  }
+  .x-footer--columns .x-footer__inner {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--x-space-3) var(--x-gap);
+  }
+  .x-footer--columns .x-footer__note {
+    max-width: 30rem;
+  }
+  .x-footer--columns .x-footer__nav {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--x-space-6) var(--x-gap);
+    margin-top: var(--x-space-5);
+  }
+  @media (width >= 1024px) {
+    .x-footer--columns .x-footer__inner {
+      grid-template-rows: auto 1fr;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .x-footer--columns .x-footer__brand,
+    .x-footer--columns .x-footer__note {
+      grid-column: 1;
+    }
+    .x-footer--columns .x-footer__note {
+      align-self: start;
+    }
+    .x-footer--columns .x-footer__nav {
+      grid-auto-columns: minmax(0, 1fr);
+      grid-auto-flow: column;
+      grid-row: 1/span 2;
+      grid-column: 2;
+      grid-template-columns: none;
+      margin-top: 0;
+    }
+  }
+  .x-footer--row .x-footer__inner {
+    grid-template-columns: 1fr auto;
+    gap: var(--x-space-5);
+    align-items: center;
+  }
+  .x-footer--row .x-footer__brand {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  .x-footer--row .x-footer__nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2) var(--x-space-5);
+    grid-row: 1;
+    grid-column: 2;
+  }
+  .x-footer--row .x-footer__note {
+    grid-column: 1/-1;
+  }
+  .x-footer--row .x-footer__title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .x-footer--row .x-footer__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2) var(--x-space-5);
+  }
+  @media (width < 640px) {
+    .x-footer--row .x-footer__inner {
+      grid-template-columns: 1fr;
+    }
+    .x-footer--row .x-footer__nav {
+      grid-row: 2;
+      grid-column: 1;
+    }
+  }
+}

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,16 @@
+import './footer.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type FooterGroup, type FooterOptions } from './index.ts';
+export type FooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & Omit<FooterOptions, 'className'> & {
+    /** Logo and site name. */
+    brand?: ReactNode;
+    /** Makes the brand a link, usually to the home page. */
+    brandHref?: string;
+    /** Accessible name for the brand link. Ignored without `brandHref`. */
+    brandLabel?: string;
+    /** Legal line. */
+    note?: ReactNode;
+    groups?: FooterGroup[];
+    navLabel?: string;
+};
+export declare function Footer({ layout, className, brand, brandHref, brandLabel, note, groups, navLabel, ...rest }: FooterProps): import("react").JSX.Element;

package/dist/components/footer/footer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './footer.css';
+import { footerBrandState, footerClass, footerClasses as c } from "./index.js";
+export function Footer({ layout, className, brand, brandHref, brandLabel, note, groups = [], navLabel = 'Footer', ...rest }) {
+    const { tag: Brand, attrs: brandAttrs } = footerBrandState(brandHref, brandLabel);
+    return (_jsx("footer", { ...rest, className: footerClass({ layout, className }), children: _jsxs("div", { className: c.inner, children: [brand != null && (_jsx(Brand, { ...brandAttrs, className: c.brand, children: brand })), note != null && note !== '' && _jsx("p", { className: c.note, children: note }), groups.length > 0 && (_jsx("nav", { className: c.nav, "aria-label": navLabel, children: groups.map((group, i) => (_jsxs("div", { className: c.group, children: [group.title && _jsx("h2", { className: c.title, children: group.title }), _jsx("ul", { className: c.links, children: group.links.map((link) => (_jsx("li", { children: _jsx("a", { className: c.link, href: link.href, children: link.label }) }, link.href + link.label))) })] }, group.title ?? i))) }))] }) }));
+}