@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/content/badge/badge.scss

@@ -0,0 +1,198 @@
+/// Badge component styles
+/// Premium inline status indicator with filled, outline, and subtle variants.
+/// Uses semantic color tokens and design-system a11y mixins.
+///
+/// @group atoms/content
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '../../../shared/tokens' as shared;
+@use '@pithyjs/design-system/layout/styles/glass' as glass;
+
+// ============================================
+// Pulse keyframe (dot "live" indicator)
+// ============================================
+
+@keyframes pithy-badge-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.6;
+    transform: scale(0.85);
+  }
+}
+
+// ============================================
+// Color scheme custom properties
+// ============================================
+
+.ui-badge {
+  // Default to primary
+  --_badge-color: var(--color-primary);
+  --_badge-on-color: var(--color-on-primary);
+}
+
+@each $scheme in shared.$semantic-colors {
+  .ui-badge[data-color='#{$scheme}'] {
+    --_badge-color: var(--color-#{$scheme});
+    --_badge-on-color: var(--color-on-#{$scheme});
+  }
+}
+
+// ============================================
+// Base
+// ============================================
+
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-pill);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  white-space: nowrap;
+  // Superscript positioning — notification-count style when inline with text.
+  // Ignored in flex containers (where align-items handles alignment).
+  vertical-align: super;
+  flex-shrink: 0;
+  user-select: none;
+  // Crisp text on dark backgrounds (filled variant)
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  // Circle guarantee — single-char badges (counts like "3") render as circles.
+  // Height = 1em (line-height:1) + 2×padding-block; match min-width to height.
+  min-inline-size: calc(1em + 2 * var(--space-xs));
+  // Inline gap — small optical space between badge and preceding text.
+  // In flex containers gap handles spacing; this is additive but negligible.
+  margin-inline-start: calc(var(--space-xs) * 0.5);
+  // Truncation safety — ~20 chars at body font-size; prevents runaway
+  // user-generated labels from breaking inline layout.
+  max-inline-size: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background), var(--motion-transition-color);
+  }
+}
+
+// ============================================
+// Sizes
+// ============================================
+
+// Font sizes derived from shared control-font-sizes (same scale as Button)
+@each $size in shared.$control-sizes {
+  .ui-badge[data-size='#{$size}'] {
+    font-size: map.get(shared.$control-font-sizes, $size);
+  }
+}
+
+.ui-badge[data-size='sm'] {
+  padding-block: var(--space-xs);
+  padding-inline: var(--space-xs);
+  gap: var(--space-xs);
+  letter-spacing: shared.$label-letter-spacing;
+}
+
+.ui-badge[data-size='md'] {
+  padding-block: var(--space-xs);
+  padding-inline: var(--space-sm);
+  gap: var(--space-xs);
+}
+
+.ui-badge[data-size='lg'] {
+  padding-block: var(--space-xs);
+  padding-inline: var(--space-md);
+  gap: var(--space-sm);
+}
+
+// ============================================
+// Variants
+// ============================================
+
+// --- Filled ---
+.ui-badge[data-variant='filled'] {
+  background-color: var(--_badge-color);
+  color: var(--_badge-on-color);
+  // Depth + inner glass highlight (same technique as Button solid)
+  @include glass.glass-highlight(var(--_badge-on-color), 15%, var(--shadow-xs));
+}
+
+// --- Outline ---
+.ui-badge[data-variant='outline'] {
+  background-color: transparent;
+  color: var(--_badge-color);
+  // Visible border — thin width with partial opacity for subtlety
+  box-shadow: inset 0 0 0 var(--border-width-thin)
+    color-mix(in oklch, var(--_badge-color) 40%, transparent);
+}
+
+// --- Subtle ---
+.ui-badge[data-variant='subtle'] {
+  // 18% tint (bumped from 12% for better contrast on light backgrounds)
+  background-color: color-mix(in oklch, var(--_badge-color) 18%, transparent);
+  color: var(--_badge-color);
+}
+
+// ============================================
+// Dot mode
+// ============================================
+
+.ui-badge.ui-badge-dot {
+  // Fixed small circle — no text content, size prop ignored
+  padding: 0;
+  border-radius: 50%;
+  min-inline-size: auto;
+  max-inline-size: none;
+  margin-inline-start: 0;
+  overflow: visible;
+  inline-size: var(--space-sm);
+  block-size: var(--space-sm);
+  // Dots align center with adjacent text, not superscript.
+  vertical-align: middle;
+
+  // Dot is always filled — override outline/subtle to solid
+  background-color: var(--_badge-color);
+  color: var(--_badge-on-color);
+  box-shadow: none;
+}
+
+// Pulsing dot — "live" indicator animation
+.ui-badge.ui-badge-pulse {
+  @include a11y.motion-safe {
+    animation: pithy-badge-pulse var(--motion-duration-deliberate)
+      var(--motion-easing-standard) infinite;
+  }
+
+  // Static fallback for reduced-motion — dimmed opacity hints "live" status
+  // without animation (component-specific; no global token for this)
+  @include a11y.motion-reduced {
+    opacity: 0.7;
+  }
+}
+
+// ============================================
+// High Contrast (forced-colors)
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-badge {
+    border: var(--border-width-hairline) solid ButtonText;
+  }
+
+  .ui-badge[data-variant='filled'] {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .ui-badge.ui-badge-dot {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+}

package/dist/atoms/content/heading/Heading.d.ts

@@ -0,0 +1,53 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.heading",
+  "title": "<Heading> 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 } from '../../../shared/text';
+/** @codexApi {"parent":"pithy.ui-kit.heading","name":"HeadingProps","stability":"stable","signature":"interface HeadingProps"} */
+export interface HeadingProps {
+    /** Heading level — determines the HTML tag <h1>–<h6> (default: 2). All numeric values are rounded to the nearest integer and clamped to 1–6; non-numeric values fall back to 2. */
+    level?: number;
+    /** Font size override — maps to u-text-* utilities. When omitted, uses native heading level size. */
+    size?: FontSize;
+    /** Font weight override — sets data-weight attribute, styled via SCSS weight-scheme mixin. When omitted, uses native heading weight (semibold). */
+    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;
+    /** Inline style string — forwarded to the rendered element */
+    style?: string;
+    /** Additional CSS class(es) — appended to the rendered element */
+    class?: string;
+    /** Visible heading text — static string or signal/computed accessor. When set,
+     *  the text is used as the heading content and slot children are ignored.
+     *  Omit to fall back to slot content. */
+    text?: ReactiveText;
+}
+/**
+ * Semantic heading component for page titles and section headers.
+ *
+ * Renders the correct <h1>–<h6> tag based on the `level` prop.
+ * Uses fluid typography tokens from the design system by default.
+ * Size and weight can be overridden independently of the heading level.
+ *
+ * @example
+ * ```html
+ * <Heading level="1">Page Title</Heading>
+ * <Heading level="3" size="'xl'" color="'primary'">Section</Heading>
+ * <Heading level="2" weight="'bold'" align="'center'">Centered</Heading>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.heading","name":"Heading","stability":"stable","signature":"(props?: HeadingProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Heading({ level: rawLevel, size: rawSize, weight: rawWeight, color: rawColor, align: rawAlign, truncate, style, class: className, text, }?: HeadingProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Heading.d.ts.map

package/dist/atoms/content/heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/heading/Heading.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,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAE9B,kIAAkI;AAClI,MAAM,WAAW,YAAY;IAC3B,mLAAmL;IACnL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qGAAqG;IACrG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mJAAmJ;IACnJ,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,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;6CAEyC;IACzC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,4LAA4L;AAC5L,wBAAgB,OAAO,CAAC,EACtB,KAAK,EAAE,QAAY,EACnB,IAAI,EAAE,OAAmB,EACzB,MAAM,EAAE,SAAqB,EAC7B,KAAK,EAAE,QAAiB,EACxB,KAAK,EAAE,QAAoB,EAC3B,QAAgB,EAChB,KAAiB,EACjB,KAAK,EAAE,SAAqB,EAC5B,IAAgB,GACjB,GAAE,YAAiB,GAAG;IACrB,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAyIA"}

package/dist/atoms/content/heading/Heading.js

@@ -0,0 +1,142 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.heading",
+  "title": "<Heading> 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, SIZE_CLASS, } from '../../../shared/text';
+/**
+ * Semantic heading component for page titles and section headers.
+ *
+ * Renders the correct <h1>–<h6> tag based on the `level` prop.
+ * Uses fluid typography tokens from the design system by default.
+ * Size and weight can be overridden independently of the heading level.
+ *
+ * @example
+ * ```html
+ * <Heading level="1">Page Title</Heading>
+ * <Heading level="3" size="'xl'" color="'primary'">Section</Heading>
+ * <Heading level="2" weight="'bold'" align="'center'">Centered</Heading>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.heading","name":"Heading","stability":"stable","signature":"(props?: HeadingProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function Heading({ level: rawLevel = 2, size: rawSize = undefined, weight: rawWeight = undefined, color: rawColor = 'text', align: rawAlign = undefined, truncate = false, style = undefined, class: className = undefined, text = undefined, } = {}) {
+    const validLevel = typeof rawLevel === 'number' &&
+        Number.isInteger(rawLevel) &&
+        rawLevel >= 1 &&
+        rawLevel <= 6;
+    const validSize = rawSize === undefined ||
+        FONT_SIZES.includes(rawSize);
+    const validWeight = rawWeight === undefined ||
+        FONT_WEIGHTS.includes(rawWeight);
+    const validColor = TEXT_COLORS.includes(rawColor);
+    const validAlign = rawAlign === undefined ||
+        TEXT_ALIGNS.includes(rawAlign);
+    if (import.meta.env?.DEV) {
+        if (!validLevel) {
+            console.warn(`[<Heading>] Invalid level: "${rawLevel}". Expected an integer between 1 and 6. ${typeof rawLevel === 'number' ? 'Rounding and clamping to nearest valid level.' : 'Falling back to 2.'}`);
+        }
+        if (!validSize) {
+            const valid = FONT_SIZES.join(', ');
+            console.warn(`[<Heading>] Invalid size: "${rawSize}". Expected one of: ${valid}. Ignoring.`);
+        }
+        if (!validWeight) {
+            const valid = FONT_WEIGHTS.join(', ');
+            console.warn(`[<Heading>] Invalid weight: "${rawWeight}". Expected one of: ${valid}. Ignoring.`);
+        }
+        if (!validColor) {
+            const valid = TEXT_COLORS.join(', ');
+            console.warn(`[<Heading>] Invalid color: "${rawColor}". Expected one of: ${valid}. Falling back to "text".`);
+        }
+        if (!validAlign) {
+            const valid = TEXT_ALIGNS.join(', ');
+            console.warn(`[<Heading>] Invalid align: "${rawAlign}". Expected one of: ${valid}. Ignoring.`);
+        }
+    }
+    // Clamp level to 1–6, falling back to a safe default when non-numeric
+    const numericRawLevel = Number(rawLevel);
+    const clampedLevel = Number.isNaN(numericRawLevel)
+        ? 2
+        : Math.min(Math.max(Math.round(numericRawLevel), 1), 6);
+    const level = validLevel ? rawLevel : clampedLevel;
+    const size = validSize ? rawSize : undefined;
+    const weight = validWeight ? rawWeight : undefined;
+    const color = validColor ? rawColor : 'text';
+    const align = validAlign ? rawAlign : undefined;
+    // Create element
+    const tag = `h${level}`;
+    const el = document.createElement(tag);
+    // Base class
+    el.classList.add('ui-heading');
+    // Size override — when provided, overrides native heading level size
+    if (size) {
+        el.classList.add(SIZE_CLASS[size]);
+    }
+    // Weight override — when provided, overrides native heading weight (semibold)
+    if (weight) {
+        el.setAttribute('data-weight', weight);
+    }
+    // Color via data attribute (styled in heading.scss)
+    el.setAttribute('data-color', color);
+    // Alignment via data attribute (styled in heading.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}`);
+    }
+    // Pass-through HTML attributes
+    if (style) {
+        el.setAttribute('style', style);
+    }
+    if (className) {
+        el.classList.add(...className.split(/\s+/).filter(Boolean));
+    }
+    // `text` prop wins over slot content — they're alternate ways to set the
+    // heading, not concatenated. Skip renderChildren() when text is set.
+    const isTextFn = typeof text === 'function';
+    const readText = () => isTextFn
+        ? text()
+        : text;
+    let textNode;
+    let destroyChildren;
+    const staticText = isTextFn ? undefined : readText();
+    if (isTextFn) {
+        textNode = document.createTextNode('');
+        el.appendChild(textNode);
+    }
+    else if (typeof staticText === 'string') {
+        textNode = document.createTextNode(staticText);
+        el.appendChild(textNode);
+    }
+    else {
+        const { el: childFragment, destroy } = renderChildren();
+        destroyChildren = destroy;
+        el.appendChild(childFragment);
+    }
+    const cleanupTextEffect = isTextFn
+        ? effect(() => {
+            const v = readText();
+            if (textNode)
+                textNode.nodeValue = typeof v === 'string' ? v : '';
+        })
+        : undefined;
+    return {
+        el,
+        destroy: () => {
+            cleanupTextEffect?.();
+            destroyChildren?.();
+            el.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Heading.js.map

package/dist/atoms/content/heading/Heading.js.map

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

package/dist/atoms/content/heading/heading.scss

@@ -0,0 +1,43 @@
+/// Heading component styles
+/// Uses design system color tokens — zero raw values.
+/// Color is driven by data-color attribute, alignment by data-align with logical properties.
+///
+/// @group atoms/content
+
+@use '../mixins' as content;
+
+// ============================================
+// Base styles
+// ============================================
+
+.ui-heading {
+  // Default: use the "text" design token (matches HeadingProps color default)
+  color: var(--color-text);
+  // Reset margins -- external spacing controlled by parent layout
+  margin: 0;
+  // Prevent long words/URLs from overflowing on small screens.
+  // Use break-word (not anywhere) — anywhere affects min-content sizing
+  // in flex/grid containers, potentially collapsing layout.
+  overflow-wrap: break-word;
+  // Suppress browser default focus outline — headings are not interactive.
+  // They may receive programmatic focus via aria-labelledby or skip-links,
+  // but the thick default outline is visually disruptive and unnecessary.
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+// ============================================
+// Color scheme + Alignment (shared)
+// ============================================
+
+@include content.color-scheme('.ui-heading');
+@include content.weight-scheme('.ui-heading');
+@include content.alignment('.ui-heading');
+
+// ============================================
+// Accessibility (shared)
+// ============================================
+
+@include content.forced-colors('.ui-heading');
+@include content.high-contrast('.ui-heading');

package/dist/atoms/content/icon/Icon.d.ts

@@ -0,0 +1,68 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.icon",
+  "title": "<Icon> Content Component",
+  "category": "feature"
+}
+*/
+import type { ReactiveText } from '../../../shared/clickable';
+import { type IconSizeLevel } from '@pithyjs/design-system/iconography';
+import { type TextColor } from '../../../shared/text';
+interface IconPropsBase {
+    /**
+     * Icon identifier — sets `data-icon` attribute for styling/registry lookup.
+     * Pass a function (e.g. `() => signal()`) to make the icon swap reactively.
+     */
+    name?: ReactiveText;
+    /** Icon size — maps to --icon-size-* design tokens (default: "md") */
+    size?: IconSizeLevel;
+    /**
+     * Icon color — maps to --color-* design tokens.
+     *
+     * Defaults to `undefined` (inherits via `currentColor` from the parent element).
+     * This differs from Text/Heading which default to `"text"` because icons are
+     * most commonly used inline alongside text and should match the surrounding
+     * text color automatically without an explicit token.
+     */
+    color?: TextColor;
+}
+/**
+ * Props for the Icon component.
+ *
+ * TypeScript enforces `label` when `decorative` is false (default).
+ */
+/** @codexApi {"parent":"pithy.ui-kit.icon","name":"IconProps","stability":"stable","signature":"type IconProps = (SemanticIconProps | DecorativeIconProps)"} */
+export type IconProps = (IconPropsBase & {
+    /** Whether the icon is purely decorative (default: false) */
+    decorative?: false;
+    /** Accessible label — required for semantic icons */
+    label: string;
+}) | (IconPropsBase & {
+    /** Whether the icon is purely decorative */
+    decorative: true;
+    /** Accessible label — optional for decorative icons */
+    label?: string;
+});
+/**
+ * Inline icon wrapper with accessible sizing and labelling.
+ *
+ * Renders children (inline SVG or icon markup) inside a `<span>` with
+ * design-system icon size tokens and proper ARIA attributes.
+ *
+ * @example
+ * ```html
+ * <Icon label="'Search'" size="'lg'">
+ *   <svg>...</svg>
+ * </Icon>
+ * <Icon decorative="true" size="'sm'">
+ *   <svg>...</svg>
+ * </Icon>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.icon","name":"Icon","stability":"stable","signature":"(props: IconProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Icon({ name, size: rawSize, color: rawColor, decorative, label, }: IconProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/atoms/content/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/icon/Icon.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAKF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAInE,UAAU,aAAa;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sEAAsE;IACtE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,gKAAgK;AAChK,MAAM,MAAM,SAAS,GACjB,CAAC,aAAa,GAAG;IACf,6DAA6D;IAC7D,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,GACF,CAAC,aAAa,GAAG;IACf,4CAA4C;IAC5C,UAAU,EAAE,IAAI,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEP;;;;;;;;;;;;;;;GAeG;AACH,kLAAkL;AAClL,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EAAE,OAAc,EACpB,KAAK,EAAE,QAAQ,EACf,UAAkB,EAClB,KAAK,GACN,EAAE,SAAS,GAAG;IACb,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAyHA"}

package/dist/atoms/content/icon/Icon.js

@@ -0,0 +1,137 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.icon",
+  "title": "<Icon> Content Component",
+  "category": "feature"
+}
+*/
+import { renderChildren } from '@pithyjs/core';
+import { captureSlot } from '../../../shared/slots';
+import { effect } from '@pithyjs/signals';
+import { ICON_SIZE_LEVELS, } from '@pithyjs/design-system/iconography';
+import { TEXT_COLORS } from '../../../shared/text';
+import { ICON_SIZE_CLASS } from '../../../shared/icon';
+import { resolveIconSvg } from './resolveIconSvg';
+/**
+ * Inline icon wrapper with accessible sizing and labelling.
+ *
+ * Renders children (inline SVG or icon markup) inside a `<span>` with
+ * design-system icon size tokens and proper ARIA attributes.
+ *
+ * @example
+ * ```html
+ * <Icon label="'Search'" size="'lg'">
+ *   <svg>...</svg>
+ * </Icon>
+ * <Icon decorative="true" size="'sm'">
+ *   <svg>...</svg>
+ * </Icon>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.icon","name":"Icon","stability":"stable","signature":"(props: IconProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function Icon({ name, size: rawSize = 'md', color: rawColor, decorative = false, label, }) {
+    const validSize = ICON_SIZE_LEVELS.includes(rawSize);
+    const validColor = rawColor === undefined ||
+        TEXT_COLORS.includes(rawColor);
+    if (import.meta.env?.DEV) {
+        if (!validSize) {
+            const valid = ICON_SIZE_LEVELS.join(', ');
+            console.warn(`[<Icon>] Invalid size: "${rawSize}". Expected one of: ${valid}. Falling back to "md".`);
+        }
+        if (!validColor) {
+            const valid = TEXT_COLORS.join(', ');
+            console.warn(`[<Icon>] Invalid color: "${rawColor}". Expected one of: ${valid}. Ignoring.`);
+        }
+        if (!decorative && !label?.trim()) {
+            console.warn(`[<Icon>] Semantic icon (decorative=false) requires a label for accessibility. Pass label="..." or set decorative="true".`);
+        }
+        if (decorative && label) {
+            console.warn(`[<Icon>] Decorative icon has a label="${label}". The label will be ignored because aria-hidden="true" takes precedence.`);
+        }
+    }
+    const size = validSize ? rawSize : 'md';
+    const color = validColor ? rawColor : undefined;
+    // Create element
+    const el = document.createElement('span');
+    el.classList.add('ui-icon', ICON_SIZE_CLASS[size]);
+    // Color via data attribute (styled in icon.scss)
+    if (color) {
+        el.setAttribute('data-color', color);
+    }
+    // Accessibility
+    if (decorative) {
+        el.setAttribute('aria-hidden', 'true');
+        el.setAttribute('role', 'none');
+    }
+    else {
+        const trimmedLabel = label?.trim();
+        if (trimmedLabel) {
+            // Valid semantic icon: role="img" with aria-label
+            el.setAttribute('role', 'img');
+            el.setAttribute('aria-label', trimmedLabel);
+        }
+        // If label is empty/whitespace, we intentionally skip role="img"
+        // to avoid a broken ARIA state (role="img" without aria-label).
+        // The DEV warning above already alerts developers to provide a label.
+    }
+    // Content projection (inline SVG or icon markup)
+    // Children always take precedence over registry resolution.
+    const { el: childFragment, destroy } = renderChildren();
+    const hasChildren = childFragment.children.length > 0 || !!childFragment.textContent?.trim();
+    // Resolve `name` once for static strings, or reactively for getter functions.
+    // Reactive name only drives sprite resolution — children, when present, win.
+    const readName = () => (typeof name === 'function' ? name() : name)?.trim() || undefined;
+    const mountSprite = (next, previousSvg) => {
+        if (next)
+            el.setAttribute('data-icon', next);
+        else
+            el.removeAttribute('data-icon');
+        const resolved = resolveIconSvg(next);
+        if (previousSvg)
+            previousSvg.remove();
+        el.removeAttribute('data-icon-missing');
+        if (!resolved)
+            return null;
+        el.appendChild(resolved.svg);
+        if (resolved.missing && next)
+            el.setAttribute('data-icon-missing', next);
+        return resolved.svg;
+    };
+    let disposeNameEffect;
+    captureSlot(el, 'default');
+    if (hasChildren) {
+        // Children win — sprite resolution skipped; data-icon set from raw value.
+        el.appendChild(childFragment);
+        const initial = readName();
+        if (initial)
+            el.setAttribute('data-icon', initial);
+    }
+    else if (typeof name === 'function') {
+        // Reactive: track the getter, diff against previous name to avoid
+        // tearing down and rebuilding the SVG on no-op effect runs.
+        let currentSvg = null;
+        let lastName;
+        let initialized = false;
+        disposeNameEffect = effect(() => {
+            const next = readName();
+            if (initialized && next === lastName)
+                return;
+            initialized = true;
+            lastName = next;
+            currentSvg = mountSprite(next, currentSvg);
+        });
+    }
+    else {
+        // Static string — single sync mount, no effect overhead.
+        mountSprite(readName(), null);
+    }
+    return {
+        el,
+        destroy: () => {
+            disposeNameEffect?.();
+            destroy();
+            el.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Icon.js.map

package/dist/atoms/content/icon/Icon.js.map

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