@xaroth.nl/design 0.1.0

package/dist/components/table/table.d.ts

@@ -0,0 +1,11 @@
+import './table.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type TableColumn, type TableLabel, type TableOptions, type TableRow } from './index.ts';
+export type TableProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'aria-label' | 'aria-labelledby'> & Omit<TableOptions, 'className'> & TableLabel & {
+    columns: TableColumn[];
+    rows: TableRow<ReactNode>[];
+    caption?: ReactNode;
+    /** Header stays in view while the wrapper scrolls; the wrapper caps its height (--x-table-max-height). */
+    stickyHeader?: boolean;
+};
+export declare function Table({ columns, rows, caption, density, striped, hover, stickyHeader, label, className, ...rest }: TableProps): import("react").JSX.Element;

package/dist/components/table/table.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './table.css';
+import { tableCellClass, tableClass, tableWrapClass, } from "./index.js";
+export function Table({ columns, rows, caption, density, striped, hover, stickyHeader, label, className, ...rest }) {
+    return (_jsx("div", { ...rest, 
+        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
+        role: "region", 
+        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, "aria-label": label, className: tableWrapClass({ stickyHeader, className }), children: _jsxs("table", { className: tableClass({ density, striped, hover }), children: [caption != null && caption !== '' && _jsx("caption", { className: "x-table__caption", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { className: tableCellClass(column, 'head'), scope: "col", style: column.width ? { width: column.width } : undefined, children: column.label }, column.key))) }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { className: tableCellClass(column, 'body'), children: row[column.key] }, column.key))) }, i))) })] }) }));
+}

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

@@ -0,0 +1,21 @@
+export type TabItem = {
+    label: string;
+    href: string;
+    current?: boolean;
+    /** Shown after the label, for example the number of rows behind the tab. */
+    count?: number | string;
+};
+export type TabsOptions = {
+    className?: string;
+};
+export declare const tabsClass: ({ className }?: TabsOptions) => string;
+export declare const tabsClasses: {
+    readonly list: string;
+    readonly item: string;
+    readonly link: string;
+    readonly count: string;
+};
+export declare const tabLinkAttrs: ({ href, current }: TabItem) => {
+    'aria-current'?: "page" | undefined;
+    href: string;
+};

package/dist/components/tabs/index.js

@@ -0,0 +1,13 @@
+import { bem } from "../../bem.js";
+const tabs = bem('x-tabs');
+export const tabsClass = ({ className } = {}) => tabs({}, className);
+export const tabsClasses = {
+    list: tabs.el('list'),
+    item: tabs.el('item'),
+    link: tabs.el('link'),
+    count: tabs.el('count'),
+};
+export const tabLinkAttrs = ({ href, current }) => ({
+    href,
+    ...(current && { 'aria-current': 'page' }),
+});

package/dist/components/tabs/tabs.astro

@@ -0,0 +1,30 @@
+---
+import './tabs.css'
+import type { HTMLAttributes } from 'astro/types'
+import { tabLinkAttrs, tabsClass, tabsClasses as c, type TabItem } from './index.js'
+
+type Props = Omit<HTMLAttributes<'nav'>, 'class'> & {
+  class?: string
+  items: TabItem[]
+  /** Accessible name of the nav, for example "Tool sections". */
+  label: string
+}
+
+const { class: className, items, label, slot: _slot, ...rest } = Astro.props
+const attrs = { ...rest, 'aria-label': label }
+---
+
+<nav {...attrs} class={tabsClass({ className })}>
+  <ul class={c.list}>
+    {
+      items.map((item) => (
+        <li class={c.item}>
+          <a class={c.link} {...tabLinkAttrs(item)}>
+            {item.label}
+            {item.count !== undefined && <span class={c.count}>{item.count}</span>}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>

package/dist/components/tabs/tabs.css

@@ -0,0 +1,59 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-tabs {
+    --x-tabs-fade: var(--x-color-bg);
+    min-width: 0;
+  }
+  .x-tabs__list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    list-style: none;
+    border-bottom: 1px solid var(--x-color-line);
+    scrollbar-width: none;
+    scroll-padding-inline: var(--x-space-6);
+  }
+  @media (width < 1024px) {
+    .x-tabs__list::after {
+      content: "";
+      position: sticky;
+      right: 0;
+      flex: none;
+      width: var(--x-space-6);
+      pointer-events: none;
+      background: linear-gradient(to right, transparent, var(--x-tabs-fade) 85%);
+    }
+  }
+  .x-tabs__item {
+    display: flex;
+    flex: none;
+  }
+  .x-tabs__link {
+    position: relative;
+    display: flex;
+    gap: var(--x-space-2);
+    align-items: center;
+    min-height: var(--x-control-md);
+    color: var(--x-color-text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color var(--x-duration) var(--x-ease);
+  }
+  .x-tabs__link:focus-visible {
+    outline-offset: calc(-1 * var(--x-focus-width));
+  }
+  .x-tabs__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-color-text-muted);
+    border: 1px solid var(--x-color-line-strong);
+  }
+}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,9 @@
+import './tabs.scss';
+import type { HTMLAttributes } from 'react';
+import { type TabItem } from './index.ts';
+export type TabsProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    items: TabItem[];
+    /** Accessible name of the nav, for example "Tool sections". */
+    label: string;
+};
+export declare function Tabs({ className, items, label, ...rest }: TabsProps): import("react").JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './tabs.css';
+import { tabLinkAttrs, tabsClass, tabsClasses as c } from "./index.js";
+export function Tabs({ className, items, label, ...rest }) {
+    return (_jsx("nav", { ...rest, "aria-label": label, className: tabsClass({ className }), children: _jsx("ul", { className: c.list, children: items.map((item) => (_jsx("li", { className: c.item, children: _jsxs("a", { className: c.link, ...tabLinkAttrs(item), children: [item.label, item.count !== undefined && _jsx("span", { className: c.count, children: item.count })] }) }, item.href))) }) }));
+}

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

@@ -0,0 +1,19 @@
+export type TagOptions = {
+    active?: boolean;
+    className?: string;
+};
+export type TagStateInput = {
+    href?: string;
+    active?: boolean;
+};
+export declare const tagClass: ({ active, className }?: TagOptions) => string;
+export declare const tagState: ({ href, active }: TagStateInput) => {
+    tag: "a";
+    attrs: {
+        'aria-current'?: "true" | undefined;
+        href: string;
+    };
+} | {
+    tag: "span";
+    attrs: {};
+};

package/dist/components/tag/index.js

@@ -0,0 +1,7 @@
+import { bem } from "../../bem.js";
+const tag = bem('x-tag');
+export const tagClass = ({ active, className } = {}) => tag({ active }, className);
+// An active link tag is the current filter, so assistive tech hears it too; a span tag is only a label.
+export const tagState = ({ href, active }) => href !== undefined
+    ? { tag: 'a', attrs: { href, ...(active && { 'aria-current': 'true' }) } }
+    : { tag: 'span', attrs: {} };

package/dist/components/tag/tag.astro

@@ -0,0 +1,17 @@
+---
+import './tag.css'
+import type { HTMLAttributes } from 'astro/types'
+import { tagClass, tagState, type TagOptions } from './index.js'
+
+type Common = Omit<TagOptions, 'className'> & { class?: string }
+
+type Props =
+  | (Common & Omit<HTMLAttributes<'span'>, 'class'> & { href?: undefined })
+  | (Common & Omit<HTMLAttributes<'a'>, 'class'> & { href: string })
+
+const { active, href, class: className, slot: _slot, ...rest } = Astro.props
+const { tag: El, attrs: state } = tagState({ href, active })
+const attrs = { ...rest, ...state }
+---
+
+<El {...attrs} class={tagClass({ active, className })}><slot /></El>

package/dist/components/tag/tag.css

@@ -0,0 +1,30 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-tag {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    min-height: 26px;
+    padding: 0 var(--x-space-2);
+    font-family: var(--x-font-mono);
+    font-size: var(--x-fs-label);
+    line-height: 1.5;
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--x-color-text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+    background: var(--x-color-surface-2);
+    border: 1px solid var(--x-color-line-strong);
+    transition: color var(--x-duration) var(--x-ease), background var(--x-duration) var(--x-ease), border-color var(--x-duration) var(--x-ease);
+  }
+  .x-tag:where(a):hover {
+    color: var(--x-color-accent);
+    border-color: var(--x-color-accent-edge);
+  }
+  .x-tag--active, .x-tag--active:where(a):hover {
+    color: var(--x-color-on-accent);
+    background: var(--x-color-accent);
+    border-color: var(--x-color-accent);
+  }
+}

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,9 @@
+import './tag.scss';
+import type { AnchorHTMLAttributes, HTMLAttributes } from 'react';
+import { type TagOptions } from './index.ts';
+export type TagProps = (Omit<TagOptions, 'className'> & HTMLAttributes<HTMLSpanElement> & {
+    href?: undefined;
+}) | (Omit<TagOptions, 'className'> & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+});
+export declare function Tag(props: TagProps): import("react").JSX.Element;

package/dist/components/tag/tag.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './tag.css';
+import { tagClass, tagState } from "./index.js";
+export function Tag(props) {
+    const { active, className, children, href, ...rest } = props;
+    const classes = tagClass({ active, className });
+    const { tag, attrs } = tagState({ href, active });
+    if (tag === 'a') {
+        return (_jsx("a", { ...rest, ...attrs, className: classes, children: children }));
+    }
+    return (_jsx("span", { ...rest, className: classes, children: children }));
+}

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

@@ -0,0 +1,22 @@
+type TimelineWhen = {
+    date: string;
+    label?: string;
+} | {
+    date?: undefined;
+    label: string;
+};
+export type TimelineEntry<T = string> = TimelineWhen & {
+    title: T;
+    text?: T;
+    current?: boolean;
+};
+export type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type TimelineOptions = {
+    className?: string;
+};
+export declare const timelineClass: ({ className }?: TimelineOptions) => string;
+export declare const timelineItemClass: ({ current }?: {
+    current?: boolean;
+}) => string;
+export declare const timelineHeading: (level?: TimelineHeadingLevel) => "h2" | "h3" | "h4" | "h5" | "h6";
+export {};

package/dist/components/timeline/index.js

@@ -0,0 +1,5 @@
+import { bem } from "../../bem.js";
+const timeline = bem('x-timeline');
+export const timelineClass = ({ className } = {}) => timeline({}, className);
+export const timelineItemClass = ({ current } = {}) => timeline.el('item', { current });
+export const timelineHeading = (level = 3) => `h${level}`;

package/dist/components/timeline/timeline.astro

@@ -0,0 +1,40 @@
+---
+import './timeline.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  timelineClass,
+  timelineHeading,
+  timelineItemClass,
+  type TimelineEntry,
+  type TimelineHeadingLevel,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'ol'>, 'class'> & {
+  class?: string
+  items: TimelineEntry[]
+  headingLevel?: TimelineHeadingLevel
+}
+
+const { items, headingLevel, class: className, slot: _slot, ...rest } = Astro.props
+const Heading = timelineHeading(headingLevel)
+---
+
+<ol {...rest} class={timelineClass({ className })}>
+  {
+    items.map(({ date, label, title, text, current }) => (
+      <li class={timelineItemClass({ current })}>
+        {date ? (
+          <time class="x-timeline__date" datetime={date}>
+            {label ?? date}
+          </time>
+        ) : (
+          <span class="x-timeline__date">{label}</span>
+        )}
+        <div class="x-timeline__body">
+          <Heading class="x-timeline__title">{title}</Heading>
+          {text && <p class="x-timeline__text">{text}</p>}
+        </div>
+      </li>
+    ))
+  }
+</ol>

package/dist/components/timeline/timeline.css

@@ -0,0 +1,92 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-timeline {
+    --x-timeline-gap: var(--x-space-5);
+    --x-timeline-rail: 24px;
+    --x-timeline-node: 9px;
+    --x-timeline-date-fs: 1rem;
+    --x-timeline-date-lh: 1.3;
+    --x-timeline-mid: calc(var(--x-timeline-date-fs) * var(--x-timeline-date-lh) / 2);
+    --x-timeline-spine: var(--x-color-line-strong);
+    display: grid;
+    grid-template-columns: [rail-start] var(--x-timeline-rail) [rail-end date-start body-start] minmax(0, 1fr) [date-end body-end];
+    column-gap: var(--x-timeline-column-gap, var(--x-space-4));
+    row-gap: var(--x-timeline-gap);
+    padding: 0;
+    list-style: none;
+  }
+  @media (min-width: 640px) {
+    .x-timeline {
+      grid-template-columns: var(--x-timeline-columns, [rail-start] var(--x-timeline-rail) [rail-end date-start] max-content [date-end body-start] minmax(0, 1fr) [body-end]);
+    }
+  }
+  .x-timeline__item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1/-1;
+    row-gap: var(--x-space-1);
+  }
+  .x-timeline__item::before {
+    content: "";
+    grid-row: 1/span 2;
+    grid-column: rail;
+    justify-self: center;
+    width: 1px;
+    margin-bottom: calc(-1 * var(--x-timeline-gap));
+    background: var(--x-timeline-spine);
+  }
+  @media (min-width: 640px) {
+    .x-timeline__item::before {
+      grid-row: 1;
+    }
+  }
+  .x-timeline__item:first-child::before {
+    margin-top: var(--x-timeline-mid);
+  }
+  .x-timeline__item:last-child::before {
+    align-self: start;
+    height: var(--x-timeline-mid);
+    margin-bottom: 0;
+  }
+  .x-timeline__item:only-child::before {
+    display: none;
+  }
+  .x-timeline__item::after {
+    content: "";
+    grid-row: 1;
+    grid-column: rail;
+    align-self: start;
+    justify-self: center;
+    width: var(--x-timeline-node);
+    height: var(--x-timeline-node);
+    margin-top: calc(var(--x-timeline-mid) - var(--x-timeline-node) / 2);
+    background: var(--x-color-bg);
+    border: 1px solid var(--x-color-accent);
+    transform: rotate(45deg);
+  }
+  .x-timeline__date {
+    grid-row: 1;
+    grid-column: date;
+    font-size: var(--x-timeline-date-fs);
+    font-variant-numeric: lining-nums tabular-nums;
+    line-height: var(--x-timeline-date-lh);
+    white-space: nowrap;
+  }
+  .x-timeline__body {
+    grid-row: 2;
+    grid-column: body;
+  }
+  @media (min-width: 640px) {
+    .x-timeline__body {
+      grid-row: 1;
+    }
+  }
+  .x-timeline__title {
+    font-size: 1.125rem;
+    line-height: 1.3;
+  }
+  .x-timeline__text {
+    margin-top: var(--x-space-1);
+    color: var(--x-color-text-muted);
+  }
+}

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,9 @@
+import './timeline.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type TimelineEntry, type TimelineHeadingLevel } from './index.ts';
+export type TimelineProps = Omit<HTMLAttributes<HTMLOListElement>, 'children'> & {
+    items: TimelineEntry<ReactNode>[];
+    /** Heading level of each entry title. */
+    headingLevel?: TimelineHeadingLevel;
+};
+export declare function Timeline({ items, headingLevel, className, ...rest }: TimelineProps): import("react").JSX.Element;

package/dist/components/timeline/timeline.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './timeline.css';
+import { timelineClass, timelineHeading, timelineItemClass, } from "./index.js";
+export function Timeline({ items, headingLevel, className, ...rest }) {
+    const Heading = timelineHeading(headingLevel);
+    return (_jsx("ol", { ...rest, className: timelineClass({ className }), children: items.map(({ date, label, title, text, current }, i) => (_jsxs("li", { className: timelineItemClass({ current }), children: [date ? (_jsx("time", { className: "x-timeline__date", dateTime: date, children: label ?? date })) : (_jsx("span", { className: "x-timeline__date", children: label })), _jsxs("div", { className: "x-timeline__body", children: [_jsx(Heading, { className: "x-timeline__title", children: title }), text != null && text !== '' && _jsx("p", { className: "x-timeline__text", children: text })] })] }, i))) }));
+}

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

@@ -0,0 +1,15 @@
+export type TooltipPlacement = 'top' | 'bottom';
+export type TooltipOptions = {
+    placement?: TooltipPlacement;
+    /** Always shown, for docs and previews. */
+    open?: boolean;
+    className?: string;
+};
+export declare const tooltipClass: ({ placement, open, dismissed, className, }?: TooltipOptions & {
+    dismissed?: boolean;
+}) => string;
+export declare const tooltipId: (id: string) => string;
+export declare const describedBy: (existing: string | undefined, id: string) => string;
+export declare const describeTrigger: (html: string, id: string) => string;
+export declare const tooltipDismissedClass = "x-tooltip--dismissed";
+export declare const tooltipEscapeScript = "(()=>{if(window.__xTooltip)return;window.__xTooltip=1;const c='x-tooltip--dismissed';const clear=(e)=>{const t=e.target instanceof Element&&e.target.closest('.'+c);if(t)t.classList.remove(c)};document.addEventListener('keydown',(e)=>{if(e.key!=='Escape')return;document.querySelectorAll('.x-tooltip:not(.'+c+')').forEach((t)=>{if(!t.matches(':hover,:has(:focus-visible)'))return;t.classList.add(c);t.addEventListener('pointerleave',()=>t.classList.remove(c),{once:true})})});document.addEventListener('focusin',clear);document.addEventListener('focusout',clear)})()";

package/dist/components/tooltip/index.js

@@ -0,0 +1,41 @@
+import { bem } from "../../bem.js";
+import { findTag, getAttr, mergeTokens, replaceTag } from "../../html.js";
+const tooltip = bem('x-tooltip', { defaults: { placement: 'top' } });
+export const tooltipClass = ({ placement = 'top', open, dismissed, className, } = {}) => tooltip({ placement, open, dismissed }, className);
+export const tooltipId = (id) => `${id}-tip`;
+// Keeps any description the trigger already has and adds the tooltip after it.
+export const describedBy = (existing, id) => mergeTokens(existing, tooltipId(id));
+const focusableTags = new Set(['button', 'select', 'textarea', 'summary', 'iframe']);
+const wrapperTags = new Set(['astro-island', 'astro-slot', 'astro-static-slot']);
+const isFocusable = (tag) => {
+    const tabindex = getAttr(tag, 'tabindex');
+    if (tabindex !== undefined) {
+        return tabindex !== '-1';
+    }
+    if (focusableTags.has(tag.name)) {
+        return true;
+    }
+    if (tag.name === 'a' || tag.name === 'area') {
+        return getAttr(tag, 'href') !== undefined;
+    }
+    if (tag.name === 'input') {
+        return getAttr(tag, 'type') !== 'hidden';
+    }
+    const editable = getAttr(tag, 'contenteditable');
+    return editable !== undefined && editable !== 'false';
+};
+// The trigger is the first focusable element; without one, the first element that is not a framework wrapper.
+export const describeTrigger = (html, id) => {
+    const trigger = findTag(html, isFocusable) ?? findTag(html, (tag) => !wrapperTags.has(tag.name));
+    if (!trigger) {
+        return html;
+    }
+    const existing = getAttr(trigger, 'aria-describedby');
+    return replaceTag(html, trigger, {
+        'aria-describedby': describedBy(typeof existing === 'string' ? existing : undefined, id),
+    });
+};
+export const tooltipDismissedClass = 'x-tooltip--dismissed';
+// Escape hides the shown tooltip (WCAG 1.4.13) until the pointer leaves it or focus moves in or out of it.
+// Guarded so copies on one page register once.
+export const tooltipEscapeScript = `(()=>{if(window.__xTooltip)return;window.__xTooltip=1;const c='${tooltipDismissedClass}';const clear=(e)=>{const t=e.target instanceof Element&&e.target.closest('.'+c);if(t)t.classList.remove(c)};document.addEventListener('keydown',(e)=>{if(e.key!=='Escape')return;document.querySelectorAll('.x-tooltip:not(.'+c+')').forEach((t)=>{if(!t.matches(':hover,:has(:focus-visible)'))return;t.classList.add(c);t.addEventListener('pointerleave',()=>t.classList.remove(c),{once:true})})});document.addEventListener('focusin',clear);document.addEventListener('focusout',clear)})()`;

package/dist/components/tooltip/tooltip.astro

@@ -0,0 +1,25 @@
+---
+import './tooltip.css'
+import type { HTMLAttributes } from 'astro/types'
+import { firstOnPage } from '../../html.js'
+import { describeTrigger, tooltipClass, tooltipEscapeScript, tooltipId, type TooltipOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'span'>, 'class' | 'id'> &
+  Omit<TooltipOptions, 'className'> & {
+    class?: string
+    /** Base for the tooltip id that the trigger's aria-describedby points at. Unique per page. */
+    id: string
+    /** Short hint. Never the only place for information needed to use the page. */
+    text: string
+  }
+
+const { id, text, placement, open, class: className, slot: _slot, ...rest } = Astro.props
+const trigger = describeTrigger(await Astro.slots.render('default'), id)
+const withScript = firstOnPage(Astro.request, 'x-tooltip')
+---
+
+<span {...{ ...rest, class: tooltipClass({ placement, open, className }) }}>
+  <Fragment set:html={trigger} />
+  <span class="x-tooltip__bubble" role="tooltip" id={tooltipId(id)}>{text}</span>
+</span>
+{withScript && <script is:inline set:html={tooltipEscapeScript} />}

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1,84 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-tooltip {
+    --x-tooltip-gap: 10px;
+    --x-tooltip-arrow: 6px;
+    --x-tooltip-bg: var(--x-color-surface-3);
+    --x-tooltip-edge: transparent;
+    position: relative;
+    display: inline-block;
+  }
+  .x-tooltip__bubble {
+    position: absolute;
+    bottom: calc(100% + var(--x-tooltip-gap));
+    left: var(--x-tooltip-left, 50%);
+    z-index: 20;
+    width: max-content;
+    max-width: min(var(--x-tooltip-max, 16rem), 100vw - 2 * var(--x-gutter));
+    padding: var(--x-space-2) var(--x-space-3);
+    font-family: var(--x-tooltip-font, var(--x-font-ui));
+    font-size: var(--x-fs-small);
+    font-weight: 400;
+    line-height: 1.45;
+    letter-spacing: normal;
+    text-align: start;
+    text-transform: none;
+    white-space: normal;
+    color: var(--x-color-text);
+    background: var(--x-tooltip-bg);
+    border: 1px solid var(--x-tooltip-edge);
+    border-radius: var(--x-radius);
+    visibility: hidden;
+    opacity: 0;
+    translate: var(--x-tooltip-shift, -50%) 4px;
+    transition: opacity var(--x-duration) var(--x-ease), translate var(--x-duration) var(--x-ease), visibility 0s linear var(--x-duration);
+  }
+  .x-tooltip__bubble::before {
+    content: "";
+    position: absolute;
+    inset: 100% 0 auto;
+    height: calc(var(--x-tooltip-gap) + 2px);
+  }
+  .x-tooltip__bubble::after {
+    content: "";
+    position: absolute;
+    top: calc(100% - var(--x-tooltip-arrow) + 1px);
+    left: var(--x-tooltip-arrow-left, 50%);
+    width: calc(var(--x-tooltip-arrow) * 2);
+    height: calc(var(--x-tooltip-arrow) * 2);
+    margin-left: calc(var(--x-tooltip-arrow) * -1);
+    background: var(--x-tooltip-bg);
+    border: solid var(--x-tooltip-edge);
+    border-width: 0 1px 1px 0;
+    rotate: 45deg;
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  }
+  .x-tooltip:hover .x-tooltip__bubble, .x-tooltip:has(:focus-visible) .x-tooltip__bubble, .x-tooltip--open .x-tooltip__bubble {
+    visibility: visible;
+    opacity: 1;
+    translate: var(--x-tooltip-shift, -50%) 0;
+    transition-delay: 0s;
+  }
+  .x-tooltip.x-tooltip--dismissed .x-tooltip__bubble {
+    visibility: hidden;
+    opacity: 0;
+  }
+  .x-tooltip--bottom .x-tooltip__bubble {
+    top: calc(100% + var(--x-tooltip-gap));
+    bottom: auto;
+  }
+  .x-tooltip--bottom .x-tooltip__bubble::before {
+    inset: auto 0 100%;
+  }
+  .x-tooltip--bottom .x-tooltip__bubble::after {
+    top: auto;
+    bottom: calc(100% - var(--x-tooltip-arrow) + 1px);
+    border-width: 1px 0 0 1px;
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .x-tooltip .x-tooltip__bubble {
+      transition: none;
+    }
+  }
+}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,12 @@
+import './tooltip.scss';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type TooltipOptions } from './index.ts';
+export type TooltipProps = Omit<TooltipOptions, 'className'> & Omit<HTMLAttributes<HTMLSpanElement>, 'id'> & {
+    /** Base for the tooltip id that the trigger's aria-describedby points at. Unique per page. */
+    id: string;
+    /** Short hint. Never the only place for information needed to use the page. */
+    text: string;
+    /** The trigger: one focusable element. */
+    children: ReactNode;
+};
+export declare function Tooltip({ id, text, placement, open, className, children, onPointerLeave, onFocus, onBlur, ...rest }: TooltipProps): import("react").JSX.Element;