@xaroth.nl/design 0.1.0

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

@@ -0,0 +1,35 @@
+export type FooterLayout = 'columns' | 'row';
+export type FooterLink = {
+    label: string;
+    href: string;
+};
+export type FooterGroup = {
+    title?: string;
+    links: FooterLink[];
+};
+export type FooterOptions = {
+    layout?: FooterLayout;
+    className?: string;
+};
+export declare const footerClass: ({ layout, className }?: FooterOptions) => string;
+export declare const footerClasses: {
+    readonly inner: string;
+    readonly brand: string;
+    readonly note: string;
+    readonly nav: string;
+    readonly group: string;
+    readonly title: string;
+    readonly links: string;
+    readonly link: string;
+};
+export declare const footerBrandTag: (href?: string) => "a" | "div";
+export declare const footerBrandState: (href?: string, label?: string) => {
+    tag: "div";
+    attrs: {};
+} | {
+    tag: "a";
+    attrs: {
+        'aria-label'?: string | undefined;
+        href: string;
+    };
+};

package/dist/components/footer/index.js

@@ -0,0 +1,18 @@
+import { bem } from "../../bem.js";
+const footer = bem('x-footer');
+export const footerClass = ({ layout = 'columns', className } = {}) => footer({ layout }, className);
+export const footerClasses = {
+    inner: footer.el('inner'),
+    brand: footer.el('brand'),
+    note: footer.el('note'),
+    nav: footer.el('nav'),
+    group: footer.el('group'),
+    title: footer.el('title'),
+    links: footer.el('links'),
+    link: footer.el('link'),
+};
+export const footerBrandTag = (href) => (href === undefined ? 'div' : 'a');
+// Only the link takes a name: an aria-label on a plain div is not announced.
+export const footerBrandState = (href, label) => href === undefined
+    ? { tag: 'div', attrs: {} }
+    : { tag: 'a', attrs: { href, ...(label !== undefined && { 'aria-label': label }) } };

package/dist/components/header/header.astro

@@ -0,0 +1,89 @@
+---
+import '../button/button.css'
+import './header.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  brandState,
+  headerClass,
+  headerClasses as c,
+  navLinkAttrs,
+  type HeaderNavItem,
+  type HeaderOptions,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'header'>, 'class'> &
+  Omit<HeaderOptions, 'className'> & {
+    class?: string
+    items?: HeaderNavItem[]
+    brandHref?: string
+    /** Accessible name for the brand link. Ignored without `brandHref`. */
+    brandLabel?: string
+    navLabel?: string
+    menuLabel?: string
+  }
+
+const {
+  layout,
+  sticky,
+  class: className,
+  items = [],
+  brandHref,
+  brandLabel,
+  navLabel = 'Main',
+  menuLabel = 'Menu',
+  slot: _slot,
+  ...rest
+} = Astro.props
+const { tag: Brand, attrs: brand } = brandState(brandHref, brandLabel)
+const actions = Astro.slots.has('actions') ? await Astro.slots.render('actions') : undefined
+---
+
+<header {...rest} class={headerClass({ layout, sticky, className })}>
+  <div class={c.inner}>
+    {
+      Astro.slots.has('brand') && (
+        <Brand {...brand} class={c.brand}>
+          <slot name="brand" />
+        </Brand>
+      )
+    }
+    {
+      items.length > 0 && (
+        <nav class={c.nav} aria-label={navLabel}>
+          <ul class={c.list}>
+            {items.map((item) => (
+              <li class={c.item}>
+                <a class={c.link} {...navLinkAttrs(item)}>
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )
+    }
+    {actions && <div class={c.actions} set:html={actions} />}
+    {
+      items.length > 0 && (
+        <details class={c.menu}>
+          <summary class={c.toggle}>
+            <span class="x-button__label">{menuLabel}</span>
+          </summary>
+          <div class={c.panel}>
+            <nav aria-label={navLabel}>
+              <ul class={c.list}>
+                {items.map((item) => (
+                  <li class={c.item}>
+                    <a class={c.link} {...navLinkAttrs(item)}>
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+        </details>
+      )
+    }
+  </div>
+</header>

package/dist/components/header/header.css

@@ -0,0 +1,163 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-header {
+    --x-header-height: 72px;
+    --x-header-bg: transparent;
+    position: relative;
+    z-index: 50;
+    background: var(--x-header-bg);
+  }
+  .x-header--sticky {
+    position: sticky;
+    top: 0;
+  }
+  .x-header__inner {
+    position: relative;
+    width: 100%;
+    max-width: calc(var(--x-page) + 2 * var(--x-gutter));
+    padding-inline: var(--x-gutter);
+    margin-inline: auto;
+  }
+  .x-header__brand {
+    display: inline-flex;
+    flex: 0 1 auto;
+    gap: var(--x-header-brand-gap, 10px);
+    align-items: center;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+  }
+  .x-header__brand > :not(svg) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .x-header__brand svg {
+    flex: none;
+    width: var(--x-header-mark, 28px);
+    height: var(--x-header-mark, 28px);
+  }
+  .x-header__list {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .x-header__item {
+    display: flex;
+    align-items: center;
+  }
+  .x-header__link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--x-control-md);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .x-header__actions {
+    display: flex;
+    flex: none;
+    gap: var(--x-space-2);
+    align-items: center;
+  }
+  .x-header__menu {
+    display: none;
+  }
+  .x-header__menu > summary {
+    list-style: none;
+  }
+  .x-header__menu > summary::-webkit-details-marker {
+    display: none;
+  }
+  .x-header__panel {
+    display: grid;
+    gap: var(--x-space-2);
+  }
+  .x-header__panel .x-header__list {
+    display: grid;
+    align-items: stretch;
+  }
+  .x-header--inline .x-header__inner {
+    display: flex;
+    gap: var(--x-space-5);
+    align-items: center;
+    height: var(--x-header-height);
+  }
+  .x-header--inline .x-header__nav {
+    margin-left: auto;
+  }
+  .x-header--inline .x-header__list {
+    gap: var(--x-space-1);
+  }
+  .x-header--inline .x-header__menu {
+    position: relative;
+  }
+  .x-header--inline .x-header__panel {
+    position: absolute;
+    top: calc(100% + (var(--x-header-height) - var(--x-control-sm)) / 2);
+    right: 0;
+    min-width: 220px;
+    padding: var(--x-space-2);
+  }
+  .x-header--stacked .x-header__inner {
+    display: grid;
+    grid-template-areas: ". brand actions" "nav nav nav";
+    grid-template-columns: 1fr auto 1fr;
+    row-gap: var(--x-space-4);
+    align-items: center;
+    padding-top: var(--x-space-6);
+  }
+  .x-header--stacked .x-header__brand {
+    grid-area: brand;
+    justify-self: center;
+  }
+  .x-header--stacked .x-header__actions {
+    grid-area: actions;
+    justify-self: end;
+  }
+  .x-header--stacked .x-header__nav {
+    grid-area: nav;
+  }
+  .x-header--stacked .x-header__list {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .x-header--stacked .x-header__menu {
+    grid-area: menu;
+  }
+  .x-header--stacked .x-header__panel {
+    justify-items: center;
+    padding-bottom: var(--x-space-4);
+  }
+  .x-header--stacked .x-header__panel .x-header__list {
+    justify-items: center;
+  }
+  @media (width < 860px) {
+    .x-header .x-header__nav {
+      display: none;
+    }
+    .x-header .x-header__menu {
+      display: block;
+    }
+    .x-header--inline .x-header__inner {
+      gap: var(--x-space-3);
+    }
+    .x-header--inline .x-header__brand {
+      margin-right: auto;
+    }
+    .x-header--stacked .x-header__inner {
+      grid-template-areas: ". brand actions" "menu menu menu";
+      padding-top: var(--x-space-5);
+    }
+    .x-header--stacked .x-header__menu {
+      justify-self: stretch;
+      text-align: center;
+    }
+    .x-header--stacked .x-header__menu > summary {
+      margin-bottom: var(--x-space-3);
+    }
+  }
+}

package/dist/components/header/header.d.ts

@@ -0,0 +1,18 @@
+import '../button/button.scss';
+import './header.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type HeaderNavItem, type HeaderOptions } from './index.ts';
+export type HeaderProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & Omit<HeaderOptions, '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, when the visible text is not enough. Ignored without `brandHref`. */
+    brandLabel?: string;
+    items?: HeaderNavItem[];
+    /** Shown at the end of the bar, for example a sign in button. Stays in the bar at every width. */
+    actions?: ReactNode;
+    navLabel?: string;
+    menuLabel?: string;
+};
+export declare function Header({ layout, sticky, className, brand, brandHref, brandLabel, items, actions, navLabel, menuLabel, ...rest }: HeaderProps): import("react").JSX.Element;

package/dist/components/header/header.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../button/button.css';
+import './header.css';
+import { brandState, headerClass, headerClasses as c, navLinkAttrs, } from "./index.js";
+export function Header({ layout, sticky, className, brand, brandHref, brandLabel, items = [], actions, navLabel = 'Main', menuLabel = 'Menu', ...rest }) {
+    const list = (_jsx("ul", { className: c.list, children: items.map((item) => (_jsx("li", { className: c.item, children: _jsx("a", { className: c.link, ...navLinkAttrs(item), children: item.label }) }, item.href))) }));
+    const { tag: Brand, attrs: brandAttrs } = brandState(brandHref, brandLabel);
+    return (_jsx("header", { ...rest, className: headerClass({ layout, sticky, className }), children: _jsxs("div", { className: c.inner, children: [brand != null && (_jsx(Brand, { ...brandAttrs, className: c.brand, children: brand })), items.length > 0 && (_jsx("nav", { className: c.nav, "aria-label": navLabel, children: list })), actions != null && _jsx("div", { className: c.actions, children: actions }), items.length > 0 && (_jsxs("details", { className: c.menu, children: [_jsx("summary", { className: c.toggle, children: _jsx("span", { className: "x-button__label", children: menuLabel }) }), _jsx("div", { className: c.panel, children: _jsx("nav", { "aria-label": navLabel, children: list }) })] }))] }) }));
+}

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

@@ -0,0 +1,39 @@
+export type HeaderLayout = 'inline' | 'stacked';
+export type HeaderNavItem = {
+    label: string;
+    href: string;
+    current?: boolean;
+};
+export type HeaderOptions = {
+    layout?: HeaderLayout;
+    sticky?: boolean;
+    className?: string;
+};
+export declare const headerClass: ({ layout, sticky, className }?: HeaderOptions) => string;
+export declare const headerClasses: {
+    readonly inner: string;
+    readonly brand: string;
+    readonly nav: string;
+    readonly list: string;
+    readonly item: string;
+    readonly link: string;
+    readonly actions: string;
+    readonly menu: string;
+    readonly toggle: string;
+    readonly panel: string;
+};
+export declare const navLinkAttrs: ({ href, current }: HeaderNavItem) => {
+    'aria-current'?: "page" | undefined;
+    href: string;
+};
+export declare const brandTag: (href?: string) => "a" | "div";
+export declare const brandState: (href?: string, label?: string) => {
+    tag: "div";
+    attrs: {};
+} | {
+    tag: "a";
+    attrs: {
+        'aria-label'?: string | undefined;
+        href: string;
+    };
+};

package/dist/components/header/index.js

@@ -0,0 +1,25 @@
+import { bem } from "../../bem.js";
+import { buttonClass } from "../button/index.js";
+const header = bem('x-header');
+export const headerClass = ({ layout = 'inline', sticky, className } = {}) => header({ layout, sticky }, className);
+export const headerClasses = {
+    inner: header.el('inner'),
+    brand: header.el('brand'),
+    nav: header.el('nav'),
+    list: header.el('list'),
+    item: header.el('item'),
+    link: header.el('link'),
+    actions: header.el('actions'),
+    menu: header.el('menu'),
+    toggle: header.el('toggle', {}, buttonClass({ variant: 'tertiary', size: 'sm' })),
+    panel: header.el('panel'),
+};
+export const navLinkAttrs = ({ href, current }) => ({
+    href,
+    ...(current && { 'aria-current': 'page' }),
+});
+export const brandTag = (href) => (href === undefined ? 'div' : 'a');
+// Only the link takes a name: an aria-label on a plain div is not announced.
+export const brandState = (href, label) => href === undefined
+    ? { tag: 'div', attrs: {} }
+    : { tag: 'a', attrs: { href, ...(label !== undefined && { 'aria-label': label }) } };

package/dist/components/icon/icon.astro

@@ -0,0 +1,21 @@
+---
+import './icon.css'
+import type { HTMLAttributes } from 'astro/types'
+import { iconClass, icons, iconState, type IconOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'svg'>, 'class' | 'name' | 'width' | 'height'> & Omit<IconOptions, 'className'> & { class?: string }
+
+const { name, size, label, class: className, slot: _slot, ...rest } = Astro.props
+const attrs = {
+  ...rest,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  'stroke-width': '1.5',
+  'stroke-linecap': 'round' as const,
+  'stroke-linejoin': 'round' as const,
+  ...iconState({ size, label }),
+}
+---
+
+<svg {...attrs} class={iconClass({ className })}>{icons[name].map((d) => <path d={d} />)}</svg>

package/dist/components/icon/icon.css

@@ -0,0 +1,15 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-icon {
+    display: inline-block;
+    flex: none;
+    vertical-align: -0.125em;
+    stroke-width: var(--x-icon-stroke, 1.5);
+    stroke-linecap: var(--x-icon-cap, round);
+    stroke-linejoin: var(--x-icon-join, round);
+  }
+  .x-icon:not([width]) {
+    width: 1em;
+    height: 1em;
+  }
+}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,5 @@
+import './icon.scss';
+import type { SVGAttributes } from 'react';
+import { type IconOptions } from './index.ts';
+export type IconProps = Omit<IconOptions, 'className'> & Omit<SVGAttributes<SVGSVGElement>, 'name' | 'width' | 'height'>;
+export declare function Icon({ name, size, label, className, ...rest }: IconProps): import("react").JSX.Element;

package/dist/components/icon/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './icon.css';
+import { iconClass, icons, iconState } from "./index.js";
+export function Icon({ name, size, label, className, ...rest }) {
+    return (_jsx("svg", { ...rest, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", ...iconState({ size, label }), className: iconClass({ className }), children: icons[name].map((d) => (_jsx("path", { d: d }, d))) }));
+}

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

@@ -0,0 +1,57 @@
+export declare const icons: {
+    readonly 'arrow-right': readonly ["M5 12l14 0", "M13 18l6 -6", "M13 6l6 6"];
+    readonly 'arrow-left': readonly ["M5 12l14 0", "M5 12l6 6", "M5 12l6 -6"];
+    readonly 'arrow-up': readonly ["M12 5l0 14", "M18 11l-6 -6", "M6 11l6 -6"];
+    readonly 'arrow-down': readonly ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"];
+    readonly 'arrow-up-right': readonly ["M17 7l-10 10", "M8 7l9 0l0 9"];
+    readonly external: readonly ["M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", "M11 13l9 -9", "M15 4h5v5"];
+    readonly 'chevron-down': readonly ["M6 9l6 6l6 -6"];
+    readonly 'chevron-up': readonly ["M6 15l6 -6l6 6"];
+    readonly 'chevron-left': readonly ["M15 6l-6 6l6 6"];
+    readonly 'chevron-right': readonly ["M9 6l6 6l-6 6"];
+    readonly check: readonly ["M5 12l5 5l10 -10"];
+    readonly close: readonly ["M18 6l-12 12", "M6 6l12 12"];
+    readonly menu: readonly ["M4 6l16 0", "M4 12l16 0", "M4 18l16 0"];
+    readonly search: readonly ["M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", "M21 21l-6 -6"];
+    readonly info: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "M12 9h.01", "M11 12h1v4h1"];
+    readonly success: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "M9 12l2 2l4 -4"];
+    readonly warning: readonly ["M12 9v4", "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "M12 16h.01"];
+    readonly danger: readonly ["M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z", "M12 8v4", "M12 16h.01"];
+    readonly copy: readonly ["M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"];
+    readonly plus: readonly ["M12 5l0 14", "M5 12l14 0"];
+    readonly minus: readonly ["M5 12l14 0"];
+    readonly sort: readonly ["M3 9l4 -4l4 4m-4 -4v14", "M21 15l-4 4l-4 -4m4 4v-14"];
+    readonly 'sort-asc': readonly ["M4 6l7 0", "M4 12l7 0", "M4 18l9 0", "M15 9l3 -3l3 3", "M18 6l0 12"];
+    readonly 'sort-desc': readonly ["M4 6l9 0", "M4 12l7 0", "M4 18l7 0", "M15 15l3 3l3 -3", "M18 6l0 12"];
+    readonly filter: readonly ["M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"];
+    readonly user: readonly ["M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"];
+    readonly mail: readonly ["M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z", "M3 7l9 6l9 -6"];
+    readonly github: readonly ["M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"];
+    readonly calendar: readonly ["M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "M16 3v4", "M8 3v4", "M4 11h16", "M11 15h1", "M12 15v3"];
+    readonly clock: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "M12 7v5l3 3"];
+    readonly link: readonly ["M9 15l6 -6", "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"];
+    readonly download: readonly ["M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "M7 11l5 5l5 -5", "M12 4l0 12"];
+    readonly rss: readonly ["M4 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "M4 4a16 16 0 0 1 16 16", "M4 11a9 9 0 0 1 9 9"];
+    readonly 'map-pin': readonly ["M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", "M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"];
+};
+export type IconName = keyof typeof icons;
+export declare const iconNames: IconName[];
+export type IconOptions = {
+    name: IconName;
+    /** CSS length or px number. Without it the icon is 1em and follows the text size. */
+    size?: string | number;
+    /** Accessible name. Without it the icon is decorative and hidden from assistive tech. */
+    label?: string;
+    className?: string;
+};
+export declare const iconClass: ({ className }?: Pick<IconOptions, "className">) => string;
+export declare const iconState: ({ size, label }: Pick<IconOptions, "size" | "label">) => {
+    role: "img";
+    'aria-label': string;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+} | {
+    'aria-hidden': "true";
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+};

package/dist/components/icon/index.js

@@ -0,0 +1,72 @@
+import { bem } from "../../bem.js";
+// Path data from Tabler Icons (MIT, https://tabler.io/icons), outline set on a 24px grid.
+export const icons = {
+    'arrow-right': ['M5 12l14 0', 'M13 18l6 -6', 'M13 6l6 6'],
+    'arrow-left': ['M5 12l14 0', 'M5 12l6 6', 'M5 12l6 -6'],
+    'arrow-up': ['M12 5l0 14', 'M18 11l-6 -6', 'M6 11l6 -6'],
+    'arrow-down': ['M12 5l0 14', 'M18 13l-6 6', 'M6 13l6 6'],
+    'arrow-up-right': ['M17 7l-10 10', 'M8 7l9 0l0 9'],
+    external: ['M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6', 'M11 13l9 -9', 'M15 4h5v5'],
+    'chevron-down': ['M6 9l6 6l6 -6'],
+    'chevron-up': ['M6 15l6 -6l6 6'],
+    'chevron-left': ['M15 6l-6 6l6 6'],
+    'chevron-right': ['M9 6l6 6l-6 6'],
+    check: ['M5 12l5 5l10 -10'],
+    close: ['M18 6l-12 12', 'M6 6l12 12'],
+    menu: ['M4 6l16 0', 'M4 12l16 0', 'M4 18l16 0'],
+    search: ['M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0', 'M21 21l-6 -6'],
+    info: ['M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0', 'M12 9h.01', 'M11 12h1v4h1'],
+    success: ['M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', 'M9 12l2 2l4 -4'],
+    warning: [
+        'M12 9v4',
+        'M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z',
+        'M12 16h.01',
+    ],
+    danger: [
+        'M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z',
+        'M12 8v4',
+        'M12 16h.01',
+    ],
+    copy: [
+        'M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z',
+        'M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1',
+    ],
+    plus: ['M12 5l0 14', 'M5 12l14 0'],
+    minus: ['M5 12l14 0'],
+    sort: ['M3 9l4 -4l4 4m-4 -4v14', 'M21 15l-4 4l-4 -4m4 4v-14'],
+    'sort-asc': ['M4 6l7 0', 'M4 12l7 0', 'M4 18l9 0', 'M15 9l3 -3l3 3', 'M18 6l0 12'],
+    'sort-desc': ['M4 6l9 0', 'M4 12l7 0', 'M4 18l7 0', 'M15 15l3 3l3 -3', 'M18 6l0 12'],
+    filter: ['M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z'],
+    user: ['M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0', 'M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'],
+    mail: ['M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z', 'M3 7l9 6l9 -6'],
+    github: [
+        'M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5',
+    ],
+    calendar: [
+        'M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z',
+        'M16 3v4',
+        'M8 3v4',
+        'M4 11h16',
+        'M11 15h1',
+        'M12 15v3',
+    ],
+    clock: ['M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0', 'M12 7v5l3 3'],
+    link: [
+        'M9 15l6 -6',
+        'M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464',
+        'M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463',
+    ],
+    download: ['M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2', 'M7 11l5 5l5 -5', 'M12 4l0 12'],
+    rss: ['M4 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0', 'M4 4a16 16 0 0 1 16 16', 'M4 11a9 9 0 0 1 9 9'],
+    'map-pin': [
+        'M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0',
+        'M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z',
+    ],
+};
+export const iconNames = Object.keys(icons);
+const icon = bem('x-icon');
+export const iconClass = ({ className } = {}) => icon({}, className);
+export const iconState = ({ size, label }) => ({
+    ...(size !== undefined && { width: size, height: size }),
+    ...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': 'true' }),
+});

package/dist/components/layout/container.astro

@@ -0,0 +1,15 @@
+---
+import './layout.css'
+import type { HTMLAttributes } from 'astro/types'
+import { containerClass, type ContainerOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> &
+  Omit<ContainerOptions, 'className'> & {
+    class?: string
+    as?: 'div' | 'main' | 'header' | 'footer' | 'article' | 'nav'
+  }
+
+const { width, as: Tag = 'div', class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<Tag {...rest} class={containerClass({ width, className })}><slot /></Tag>

package/dist/components/layout/grid.astro

@@ -0,0 +1,14 @@
+---
+import './layout.css'
+import type { HTMLAttributes } from 'astro/types'
+import { gridClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> & {
+  class?: string
+  as?: 'div' | 'main' | 'section' | 'article' | 'ul' | 'ol'
+}
+
+const { as: Tag = 'div', class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<Tag {...rest} class={gridClass({ className })}><slot /></Tag>

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

@@ -0,0 +1,33 @@
+export type ContainerWidth = 'page' | 'prose';
+export type ContainerOptions = {
+    width?: ContainerWidth;
+    className?: string;
+};
+export declare const containerClass: ({ width, className }?: ContainerOptions) => string;
+export type GridOptions = {
+    className?: string;
+};
+export declare const gridClass: ({ className }?: GridOptions) => string;
+export type ColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColStack = 'md' | 'sm' | 'never';
+export type ColOptions = {
+    span: ColSpan;
+    stack?: ColStack;
+    className?: string;
+};
+export declare const colClass: ({ span, stack, className }: ColOptions) => string;
+export type SectionOptions = {
+    tight?: boolean;
+    className?: string;
+};
+export declare const sectionClass: ({ tight, className }?: SectionOptions) => string;
+export type SectionHeadLink = {
+    label: string;
+    href: string;
+};
+export type SectionHeadOptions = {
+    className?: string;
+};
+export declare const sectionHeadClass: ({ className }?: SectionHeadOptions) => string;
+export type SectionHeadLevel = 2 | 3;
+export declare const sectionHeadTag: (level?: SectionHeadLevel) => "h2" | "h3";