@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/content/text/Text.d.ts

@@ -0,0 +1,58 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.text",
+  "title": "<Text> Content Component",
+  "category": "feature"
+}
+*/
+import type { ReactiveText } from '../../../shared/clickable';
+import { type FontSize, type FontWeight } from '@pithyjs/design-system/typography';
+import { type TextColor, type TextAlign, type TextTag } from '../../../shared/text';
+/** @codexApi {"parent":"pithy.ui-kit.text","name":"TextProps","stability":"stable","signature":"interface TextProps"} */
+export interface TextProps {
+    /** Font size — maps to u-text-* typography utilities (default: "base") */
+    size?: FontSize;
+    /** Font weight — sets data-weight attribute, styled via SCSS weight-scheme mixin (default: "normal") */
+    weight?: FontWeight;
+    /** Text color — maps to --color-* design tokens (default: "text") */
+    color?: TextColor;
+    /** Text alignment — uses logical values for RTL support (default: none) */
+    align?: TextAlign;
+    /** Truncation: true = single-line ellipsis, number = line-clamp (default: false) */
+    truncate?: boolean | number;
+    /** HTML element tag (default: "p") */
+    as?: TextTag;
+    /** Expansion text for <abbr> — sets the title attribute (only used when as="abbr") */
+    title?: string;
+    /** Machine-readable date/time for <time> — sets the datetime attribute (only used when as="time") */
+    datetime?: string;
+    /** Inline style string — forwarded to the rendered element */
+    style?: string;
+    /** Additional CSS class(es) — appended to the rendered element */
+    class?: string;
+    /** Visible body text — static string or signal/computed accessor. When set,
+     *  the text is used as the content and slot children are ignored. Newlines
+     *  (`\n`) are rendered as `<br>` elements so multi-line input preserves its
+     *  line breaks regardless of `white-space` styling. Omit to fall back to
+     *  slot content. */
+    text?: ReactiveText;
+}
+/**
+ * Typography wrapper for body text content.
+ *
+ * Maps props to design-system typography tokens and utility classes.
+ * Uses logical properties for RTL/LTR support.
+ *
+ * @example
+ * ```html
+ * <Text size="'lg'" weight="'bold'" color="'primary'">Hello</Text>
+ * <Text truncate="true" as="'span'">Long text that truncates...</Text>
+ * <Text truncate="3">Multi-line clamped text...</Text>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.text","name":"Text","stability":"stable","signature":"(props?: TextProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Text({ size: rawSize, weight: rawWeight, color: rawColor, align: rawAlign, truncate, as: rawTag, title, datetime, style, class: extraClassName, text, }?: TextProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Text.d.ts.map

package/dist/atoms/content/text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/text/Text.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAIF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,OAAO,EACb,MAAM,sBAAsB,CAAC;AAQ9B,yHAAyH;AACzH,MAAM,WAAW,SAAS;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wGAAwG;IACxG,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,sCAAsC;IACtC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;wBAIoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,mLAAmL;AACnL,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,OAAgB,EACtB,MAAM,EAAE,SAAoB,EAC5B,KAAK,EAAE,QAAiB,EACxB,KAAK,EAAE,QAAoB,EAC3B,QAAgB,EAChB,EAAE,EAAE,MAAY,EAChB,KAAiB,EACjB,QAAoB,EACpB,KAAiB,EACjB,KAAK,EAAE,cAA0B,EACjC,IAAgB,GACjB,GAAE,SAAc,GAAG;IAClB,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CA2JA"}

package/dist/atoms/content/text/Text.js

@@ -0,0 +1,158 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.text",
+  "title": "<Text> Content Component",
+  "category": "feature"
+}
+*/
+import { renderChildren } from '@pithyjs/core';
+import { effect } from '@pithyjs/signals';
+import { FONT_SIZES, FONT_WEIGHTS, } from '@pithyjs/design-system/typography';
+import { TEXT_COLORS, TEXT_ALIGNS, TEXT_TAGS, SIZE_CLASS, } from '../../../shared/text';
+// Tags whose native browser styles convey semantic meaning.
+// Defined at module scope to avoid re-allocating on every Text() call.
+const BOLD_TAGS = ['strong'];
+const ITALIC_TAGS = ['em', 'cite'];
+const SMALL_TAGS = ['small'];
+/**
+ * Typography wrapper for body text content.
+ *
+ * Maps props to design-system typography tokens and utility classes.
+ * Uses logical properties for RTL/LTR support.
+ *
+ * @example
+ * ```html
+ * <Text size="'lg'" weight="'bold'" color="'primary'">Hello</Text>
+ * <Text truncate="true" as="'span'">Long text that truncates...</Text>
+ * <Text truncate="3">Multi-line clamped text...</Text>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.text","name":"Text","stability":"stable","signature":"(props?: TextProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function Text({ size: rawSize = 'base', weight: rawWeight = 'normal', color: rawColor = 'text', align: rawAlign = undefined, truncate = false, as: rawTag = 'p', title = undefined, datetime = undefined, style = undefined, class: extraClassName = undefined, text = undefined, } = {}) {
+    const validSize = FONT_SIZES.includes(rawSize);
+    const validWeight = FONT_WEIGHTS.includes(rawWeight);
+    const validColor = TEXT_COLORS.includes(rawColor);
+    const validAlign = rawAlign === undefined ||
+        TEXT_ALIGNS.includes(rawAlign);
+    const validTag = TEXT_TAGS.includes(rawTag);
+    if (import.meta.env?.DEV) {
+        if (!validSize) {
+            const valid = FONT_SIZES.join(', ');
+            console.warn(`[<Text>] Invalid size: "${rawSize}". Expected one of: ${valid}. Falling back to "base".`);
+        }
+        if (!validWeight) {
+            const valid = FONT_WEIGHTS.join(', ');
+            console.warn(`[<Text>] Invalid weight: "${rawWeight}". Expected one of: ${valid}. Falling back to "normal".`);
+        }
+        if (!validColor) {
+            const valid = TEXT_COLORS.join(', ');
+            console.warn(`[<Text>] Invalid color: "${rawColor}". Expected one of: ${valid}. Falling back to "text".`);
+        }
+        if (!validAlign) {
+            const valid = TEXT_ALIGNS.join(', ');
+            console.warn(`[<Text>] Invalid align: "${rawAlign}". Expected one of: ${valid}. Ignoring.`);
+        }
+        if (!validTag) {
+            const valid = TEXT_TAGS.join(', ');
+            console.warn(`[<Text>] Invalid as: "${rawTag}". Expected one of: ${valid}. Falling back to "p".`);
+        }
+        if (rawTag === 'abbr' && !title) {
+            console.warn(`[<Text>] <abbr> without a title attribute is inaccessible. Pass title="..." to provide the abbreviation expansion.`);
+        }
+        if (rawTag === 'time' && !datetime) {
+            console.warn(`[<Text>] <time> without a datetime attribute has no machine-readable value. Pass datetime="..." (e.g. "2026-03-06").`);
+        }
+    }
+    const size = validSize ? rawSize : 'base';
+    const weight = validWeight ? rawWeight : 'normal';
+    const color = validColor ? rawColor : 'text';
+    const align = validAlign ? rawAlign : undefined;
+    const tag = validTag ? rawTag : 'p';
+    // Tags whose native browser styles convey semantic meaning.
+    // When using defaults, skip the utility class so the tag's native style is preserved.
+    // e.g. <strong> stays bold, <em> stays italic, <small> stays smaller.
+    // Create element
+    const el = document.createElement(tag);
+    // Classes — skip default utility when tag already conveys that style natively
+    el.classList.add('ui-text');
+    const skipSize = size === 'base' && SMALL_TAGS.includes(tag);
+    if (!skipSize) {
+        el.classList.add(SIZE_CLASS[size]);
+    }
+    const skipWeight = weight === 'normal' &&
+        (BOLD_TAGS.includes(tag) || ITALIC_TAGS.includes(tag));
+    if (!skipWeight) {
+        el.setAttribute('data-weight', weight);
+    }
+    // Color via data attribute (styled in text.scss)
+    el.setAttribute('data-color', color);
+    // Alignment via data attribute (styled in text.scss with logical properties)
+    if (align) {
+        el.setAttribute('data-align', align);
+    }
+    // Truncation
+    if (truncate === true) {
+        el.classList.add('u-truncate');
+    }
+    else if (typeof truncate === 'number' && truncate > 0) {
+        const clampValue = Math.min(Math.max(Math.round(truncate), 1), 4);
+        el.classList.add(`u-line-clamp-${clampValue}`);
+    }
+    // Semantic attributes — only applied on matching tags
+    if (title && tag === 'abbr') {
+        el.setAttribute('title', title);
+    }
+    if (datetime && tag === 'time') {
+        el.dateTime = datetime;
+    }
+    // Pass-through HTML attributes
+    if (style) {
+        el.setAttribute('style', style);
+    }
+    if (extraClassName) {
+        el.classList.add(...extraClassName.split(/\s+/).filter(Boolean));
+    }
+    // `text` prop wins over slot content — they're alternate ways to set the
+    // body text, not concatenated. Skip renderChildren() when text is set.
+    const isTextFn = typeof text === 'function';
+    const readText = () => isTextFn
+        ? text()
+        : text;
+    const renderText = (value) => {
+        el.replaceChildren();
+        const parts = value.split(/\r?\n/);
+        parts.forEach((part, i) => {
+            if (i > 0)
+                el.appendChild(document.createElement('br'));
+            if (part.length > 0)
+                el.appendChild(document.createTextNode(part));
+        });
+    };
+    let destroyChildren;
+    const staticText = isTextFn ? undefined : readText();
+    if (!isTextFn) {
+        if (typeof staticText === 'string') {
+            renderText(staticText);
+        }
+        else {
+            const { el: childFragment, destroy } = renderChildren();
+            destroyChildren = destroy;
+            el.appendChild(childFragment);
+        }
+    }
+    const cleanupTextEffect = isTextFn
+        ? effect(() => {
+            const v = readText();
+            renderText(typeof v === 'string' ? v : '');
+        })
+        : undefined;
+    return {
+        el,
+        destroy: () => {
+            cleanupTextEffect?.();
+            destroyChildren?.();
+            el.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Text.js.map

package/dist/atoms/content/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/atoms/content/text/Text.ts"],"names":[],"mappings":"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"}

package/dist/atoms/content/text/text.scss

@@ -0,0 +1,98 @@
+/// Text component styles
+/// Uses design system tokens. Color is driven by data-color attribute,
+/// alignment by data-align with logical properties. Inline <code>/<kbd>
+/// drive from the em-based --inline-code-* tokens (typography/tokens.json)
+/// so code scales with parent text in headings, body, and prose contexts.
+///
+/// @group atoms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '../mixins' as content;
+
+// ============================================
+// Base styles
+// ============================================
+
+.ui-text {
+  // Default: inherit from parent (natural cascade)
+  color: var(--color-text);
+  // Reset margins — external spacing controlled by parent layout
+  margin: 0;
+  // Prevent long words/URLs from overflowing on small screens.
+  // Using break-word (not anywhere) to avoid shrinking min-content in flex/grid.
+  overflow-wrap: break-word;
+}
+
+// Preformatted text preserves whitespace — don't wrap by default
+pre.ui-text {
+  overflow-wrap: normal;
+}
+
+// ============================================
+// Color scheme + Alignment (shared)
+// ============================================
+
+@include content.color-scheme('.ui-text');
+@include content.weight-scheme('.ui-text');
+@include content.alignment('.ui-text');
+
+// ============================================
+// Semantic element styles
+// Visual styling for tags whose meaning requires visual distinction.
+// ============================================
+
+code.ui-text,
+kbd.ui-text {
+  font-family: var(--font-family-mono);
+  font-size: var(--inline-code-font-size);
+  padding-block: var(--inline-code-padding-block);
+  padding-inline: var(--inline-code-padding-inline);
+  margin-inline: var(--inline-code-margin-inline);
+  background-color: var(--color-surface-variant);
+  border-radius: var(--radius-xs);
+}
+
+kbd.ui-text {
+  border: var(--border-width-thin) solid var(--color-border);
+}
+
+blockquote.ui-text {
+  border-inline-start: var(--border-width-medium) solid var(--color-border);
+  padding-inline-start: var(--space-md);
+  font-style: italic;
+}
+
+// ============================================
+// Screen reader announcements for non-announced tags
+// <mark> and <s> have visual meaning that screen readers skip by default.
+// Visually-hidden pseudo-elements provide equivalent text cues.
+// ============================================
+
+mark.ui-text {
+  &::before {
+    content: '[highlight start]';
+    @include a11y.visually-hidden;
+  }
+  &::after {
+    content: '[highlight end]';
+    @include a11y.visually-hidden;
+  }
+}
+
+s.ui-text {
+  &::before {
+    content: '[strikethrough start]';
+    @include a11y.visually-hidden;
+  }
+  &::after {
+    content: '[strikethrough end]';
+    @include a11y.visually-hidden;
+  }
+}
+
+// ============================================
+// Accessibility (shared)
+// ============================================
+
+@include content.forced-colors('.ui-text');
+@include content.high-contrast('.ui-text');

package/dist/atoms/content/tile/Tile.d.ts

@@ -0,0 +1,66 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.tile",
+  "title": "<Tile> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { type Reactive } from '../../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.tile","name":"TileProps","stability":"stable","signature":"interface TileProps"} */
+export interface TileProps {
+    /** Visible label rendered below the media slot. Required. */
+    label: string;
+    /**
+     * Selected state. Adds `aria-pressed` + primary-tinted chrome.
+     * Static boolean or `() => boolean` accessor.
+     */
+    selected?: Reactive<boolean>;
+    /**
+     * Disabled state. Sets `disabled` and the design-system disabled appearance.
+     * Static boolean or `() => boolean` accessor.
+     */
+    disabled?: Reactive<boolean>;
+    /** Click handler. Guarded against `disabled`. */
+    onClick?: (e: MouseEvent) => void;
+    /** Accessible label override — defaults to `label`. */
+    ariaLabel?: string;
+    /** Marks the root button as a drag source via the native `draggable` attribute. */
+    draggable?: boolean;
+    /**
+     * Map of `data-*` attributes to set on the root button. Keys use camelCase
+     * (the `dataset` convention) and emit kebab-case attrs:
+     * `{ componentId: "card" }` → `data-component-id="card"`.
+     */
+    data?: Record<string, string>;
+    /** Native `dragstart` listener — forwarded as-is. */
+    onDragStart?: (e: DragEvent) => void;
+    /** Native `dragend` listener — forwarded as-is. */
+    onDragEnd?: (e: DragEvent) => void;
+    /** Native `animationend` listener — useful for one-shot CSS flash effects. */
+    onAnimationEnd?: (e: AnimationEvent) => void;
+    /**
+     * Callback invoked once with the rendered label `<span>`. Use it to wire
+     * effects against the label DOM (search-match highlighting, animated counts)
+     * without querying Tile internals.
+     */
+    labelRef?: (el: HTMLSpanElement) => void;
+}
+/**
+ * Compact clickable tile with an icon/glyph slot above a visible label.
+ * Used for launchers, recents rails, template pickers — any small surface
+ * that reads as "pick this".
+ *
+ * @example
+ * ```html
+ * <Tile label="'Card'" selected="isSelected" @click="handleSelect">
+ *   <Icon name="'card'" decorative="true" size="'sm'" />
+ * </Tile>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.tile","name":"Tile","stability":"stable","signature":"(props: TileProps) => { el: HTMLButtonElement; destroy: () => void }"} */
+export declare function Tile(props: TileProps): {
+    el: HTMLButtonElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=Tile.d.ts.map

package/dist/atoms/content/tile/Tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/tile/Tile.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAGF,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAInC,yHAAyH;AACzH,MAAM,WAAW,SAAS;IACxB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;;;;;;;GAWG;AACH,qKAAqK;AACrK,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG;IACtC,EAAE,EAAE,iBAAiB,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAoIA"}

package/dist/atoms/content/tile/Tile.js

@@ -0,0 +1,125 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.tile",
+  "title": "<Tile> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { renderChildren } from '@pithyjs/core';
+import { bindReactive, guardClick, hasReactive, readReactive, } from '../../../shared/clickable';
+/**
+ * Compact clickable tile with an icon/glyph slot above a visible label.
+ * Used for launchers, recents rails, template pickers — any small surface
+ * that reads as "pick this".
+ *
+ * @example
+ * ```html
+ * <Tile label="'Card'" selected="isSelected" @click="handleSelect">
+ *   <Icon name="'card'" decorative="true" size="'sm'" />
+ * </Tile>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.tile","name":"Tile","stability":"stable","signature":"(props: TileProps) => { el: HTMLButtonElement; destroy: () => void }"} */
+export function Tile(props) {
+    const { label: rawLabel, selected, disabled = false, onClick, ariaLabel: rawAriaLabel, draggable = false, data, onDragStart, onDragEnd, onAnimationEnd, labelRef, } = props;
+    const isToggle = selected !== undefined;
+    const label = rawLabel?.trim() ?? '';
+    const ariaLabel = rawAriaLabel?.trim() || label || undefined;
+    if (import.meta.env?.DEV && !label) {
+        console.warn('[<Tile>] `label` is required and must be a non-empty string.');
+    }
+    const disposers = [];
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add('ui-tile');
+    if (ariaLabel)
+        button.setAttribute('aria-label', ariaLabel);
+    if (draggable)
+        button.setAttribute('draggable', 'true');
+    if (data) {
+        const RESERVED = ['selected', 'disabled'];
+        for (const [key, value] of Object.entries(data)) {
+            if (RESERVED.includes(key)) {
+                if (import.meta.env?.DEV) {
+                    console.warn(`[<Tile>] data key "${key}" is reserved — use the \`${key}\` prop instead.`);
+                }
+                continue;
+            }
+            button.dataset[key] = value;
+        }
+    }
+    // -- Media slot ------------------------------------------------------------
+    const { el: childFragment, destroy: destroyChildren } = renderChildren();
+    disposers.push(destroyChildren);
+    const hasContent = Array.from(childFragment.childNodes).some(n => n.nodeType === Node.ELEMENT_NODE ||
+        (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''));
+    if (hasContent) {
+        const media = document.createElement('span');
+        media.classList.add('ui-tile-media');
+        media.setAttribute('aria-hidden', 'true');
+        media.appendChild(childFragment);
+        button.appendChild(media);
+    }
+    // -- Label -----------------------------------------------------------------
+    const labelEl = document.createElement('span');
+    labelEl.classList.add('ui-tile-label');
+    labelEl.textContent = label;
+    button.appendChild(labelEl);
+    labelRef?.(labelEl);
+    // -- Reactive state --------------------------------------------------------
+    const readSelected = () => isToggle && selected !== undefined ? readReactive(selected) : false;
+    const readDisabled = () => readReactive(disabled);
+    disposers.push(bindReactive(hasReactive(selected, disabled), () => {
+        const isDisabled = readDisabled();
+        if (isToggle) {
+            const isSelected = readSelected();
+            if (isSelected) {
+                button.dataset.selected = 'true';
+                button.setAttribute('aria-pressed', 'true');
+            }
+            else {
+                delete button.dataset.selected;
+                button.setAttribute('aria-pressed', 'false');
+            }
+        }
+        button.disabled = isDisabled;
+        if (isDisabled) {
+            button.dataset.disabled = 'true';
+        }
+        else {
+            delete button.dataset.disabled;
+        }
+    }));
+    // -- Listeners -------------------------------------------------------------
+    const addListener = (type, handler) => {
+        button.addEventListener(type, handler);
+        disposers.push(() => button.removeEventListener(type, handler));
+    };
+    if (onClick)
+        addListener('click', guardClick(onClick, readDisabled));
+    if (onDragStart)
+        addListener('dragstart', onDragStart);
+    if (onDragEnd)
+        addListener('dragend', onDragEnd);
+    if (onAnimationEnd)
+        addListener('animationend', onAnimationEnd);
+    return {
+        el: button,
+        destroy: () => {
+            for (const dispose of disposers) {
+                try {
+                    dispose();
+                }
+                catch (err) {
+                    if (import.meta.env?.DEV) {
+                        console.error('[<Tile>] disposer threw:', err);
+                    }
+                }
+            }
+            disposers.length = 0;
+            button.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Tile.js.map

package/dist/atoms/content/tile/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../../src/atoms/content/tile/Tile.ts"],"names":[],"mappings":"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"}

package/dist/atoms/content/tile/tile.scss

@@ -0,0 +1,122 @@
+/// Tile component styles
+/// Compact clickable surface — icon/glyph slot above a visible label.
+/// Used for launchers, recents rails, template pickers.
+///
+/// @group atoms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+// ============================================
+// Tile (root <button>)
+// ============================================
+
+.ui-tile {
+  --_tile-color: var(--color-primary);
+  --_tile-on-color: var(--color-on-primary);
+
+  appearance: none;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: calc(var(--control-min-touch) * 2 + var(--space-md));
+  padding-block: var(--space-md);
+  padding-inline: var(--space-sm);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: var(--border-width-hairline) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background),
+      var(--motion-transition-color),
+      border-color var(--motion-duration-normal) var(--motion-easing-standard);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: color-mix(
+      in oklch,
+      var(--_tile-color) 50%,
+      var(--color-border)
+    );
+    @include a11y.state-background(hover, var(--_tile-color));
+  }
+
+  &:focus-visible {
+    @include a11y.focus-ring;
+  }
+
+  &[data-selected='true'] {
+    border-color: var(--_tile-color);
+    @include a11y.state-background(selected, var(--_tile-color));
+  }
+
+  @include a11y.state-disabled;
+
+  @include a11y.forced-colors {
+    border: var(--border-width-thin) solid ButtonText;
+
+    &[data-selected='true'] {
+      border-color: Highlight;
+    }
+
+    &:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}
+
+// ============================================
+// Media slot (icon / glyph container)
+// ============================================
+
+.ui-tile-media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--icon-size-xl);
+  block-size: var(--icon-size-xl);
+  color: var(--_tile-color);
+  background-color: color-mix(in oklch, var(--_tile-color) 12%, transparent);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background), var(--motion-transition-color);
+  }
+}
+
+.ui-tile:hover:not(:disabled) .ui-tile-media,
+.ui-tile:focus-visible .ui-tile-media,
+.ui-tile[data-selected='true'] .ui-tile-media {
+  color: var(--_tile-on-color);
+  background-color: var(--_tile-color);
+}
+
+// ============================================
+// Label
+// ============================================
+
+.ui-tile-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-sm);
+  text-align: center;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+}