@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/content/action-tile/ActionTile.js

@@ -0,0 +1,98 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.action-tile",
+  "title": "<ActionTile> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { renderChildren } from '@pithyjs/core';
+import { bindReactive, guardClick, hasReactive, readReactive, } from '../../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.action-tile","name":"ActionTile","stability":"stable","signature":"(props: ActionTileProps) => { el: HTMLButtonElement; destroy: () => void }"} */
+export function ActionTile(props) {
+    const { title: rawTitle, description: rawDescription, loading = false, disabled = false, onClick, ariaLabel: rawAriaLabel, } = props;
+    const title = rawTitle?.trim() ?? '';
+    const description = rawDescription?.trim() ?? '';
+    const ariaLabel = rawAriaLabel?.trim() ||
+        [title, description].filter(Boolean).join('. ') ||
+        undefined;
+    if (import.meta.env?.DEV && !title) {
+        console.warn('[<ActionTile>] `title` is required and must be a non-empty string.');
+    }
+    const disposers = [];
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add('ui-action-tile');
+    if (ariaLabel)
+        button.setAttribute('aria-label', ariaLabel);
+    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-action-tile-media');
+        media.setAttribute('aria-hidden', 'true');
+        media.appendChild(childFragment);
+        button.appendChild(media);
+    }
+    const body = document.createElement('span');
+    body.classList.add('ui-action-tile-body');
+    const titleEl = document.createElement('span');
+    titleEl.classList.add('ui-action-tile-title');
+    titleEl.textContent = title;
+    body.appendChild(titleEl);
+    if (description) {
+        const descEl = document.createElement('span');
+        descEl.classList.add('ui-action-tile-desc');
+        descEl.textContent = description;
+        body.appendChild(descEl);
+    }
+    button.appendChild(body);
+    const readLoading = () => readReactive(loading);
+    const readDisabled = () => readReactive(disabled);
+    const isBlocked = () => readLoading() || readDisabled();
+    disposers.push(bindReactive(hasReactive(loading, disabled), () => {
+        const isLoading = readLoading();
+        const isDisabled = readDisabled();
+        if (isLoading) {
+            button.dataset.loading = 'true';
+            button.setAttribute('aria-busy', 'true');
+        }
+        else {
+            delete button.dataset.loading;
+            button.removeAttribute('aria-busy');
+        }
+        if (isDisabled) {
+            button.dataset.disabled = 'true';
+            button.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            delete button.dataset.disabled;
+            button.removeAttribute('aria-disabled');
+        }
+    }));
+    if (onClick) {
+        const handler = guardClick(onClick, isBlocked);
+        button.addEventListener('click', handler);
+        disposers.push(() => button.removeEventListener('click', handler));
+    }
+    return {
+        el: button,
+        destroy: () => {
+            for (const dispose of disposers) {
+                try {
+                    dispose();
+                }
+                catch (err) {
+                    if (import.meta.env?.DEV) {
+                        console.error('[<ActionTile>] disposer threw:', err);
+                    }
+                }
+            }
+            disposers.length = 0;
+            button.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=ActionTile.js.map

package/dist/atoms/content/action-tile/ActionTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionTile.js","sourceRoot":"","sources":["../../../../src/atoms/content/action-tile/ActionTile.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,GAEb,MAAM,2BAA2B,CAAC;AAenC,wLAAwL;AACxL,MAAM,UAAU,UAAU,CAAC,KAAsB;IAI/C,MAAM,EACJ,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,EAAE,YAAY,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACjD,MAAM,SAAS,GACb,YAAY,EAAE,IAAI,EAAE;QACpB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/C,SAAS,CAAC;IAEZ,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,OAAO,CAAC,IAAI,CACV,oEAAoE,CACrE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAsB,EAAE,CAAC;IAExC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,IAAI,SAAS;QAAE,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAE5D,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,cAAc,EAAE,CAAC;IACzE,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAEhC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,IAAI,CAC1D,CAAC,CAAC,EAAE,CACF,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;QAChC,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAClE,CAAC;IACF,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;QAC5C,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC1C,KAAK,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QACjC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE1B,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAC5C,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC;QACjC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC;IACD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,YAAY,EAAE,CAAC;IAExD,SAAS,CAAC,IAAI,CACZ,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE;QAChD,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,YAAY,EAAE,CAAC;QAElC,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;YAChC,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;YAC9B,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;YACjC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC/B,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC,CACH,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC/C,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1C,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,OAAO;QACL,EAAE,EAAE,MAAM;QACV,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,MAAM,OAAO,IAAI,SAAS,EAAE,CAAC;gBAChC,IAAI,CAAC;oBACH,OAAO,EAAE,CAAC;gBACZ,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC;oBACb,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;wBACzB,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,GAAG,CAAC,CAAC;oBACvD,CAAC;gBACH,CAAC;YACH,CAAC;YACD,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YACrB,MAAM,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC;KACF,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,150 @@
+/// ActionTile component styles
+/// Full-width actionable row — leading glyph beside a bold title and muted
+/// description. Used for choice lists (publish tiers, export options).
+///
+/// @group atoms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+.ui-action-tile {
+  --_action-tile-color: var(--color-primary);
+
+  appearance: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--control-min-touch);
+  padding-block: var(--space-sm);
+  padding-inline: var(--space-md);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: var(--border-width-hairline) var(--border-style-solid)
+    var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+  -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([aria-disabled='true']) {
+    border-color: color-mix(
+      in oklch,
+      var(--_action-tile-color) 50%,
+      var(--color-border)
+    );
+    @include a11y.state-background(hover, var(--_action-tile-color));
+  }
+
+  &:focus-visible {
+    @include a11y.focus-ring;
+  }
+
+  @include a11y.state-disabled;
+
+  &[data-loading='true'] {
+    cursor: progress;
+  }
+
+  @include a11y.forced-colors {
+    border: var(--border-width-thin) var(--border-style-solid) ButtonText;
+
+    &[aria-disabled='true'] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}
+
+.ui-action-tile-media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+  color: var(--_action-tile-color);
+  background-color: color-mix(
+    in oklch,
+    var(--_action-tile-color) 12%,
+    transparent
+  );
+  border-radius: var(--radius-sm);
+  line-height: 1;
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background), var(--motion-transition-color);
+  }
+}
+
+.ui-action-tile:hover:not([aria-disabled='true']):not([data-loading='true'])
+  .ui-action-tile-media,
+.ui-action-tile:focus-visible:not([data-loading='true']) .ui-action-tile-media {
+  color: var(--color-on-primary);
+  background-color: var(--_action-tile-color);
+}
+
+.ui-action-tile[data-loading='true'] .ui-action-tile-media {
+  color: var(--_action-tile-color);
+  background-color: color-mix(
+    in oklch,
+    var(--_action-tile-color) 12%,
+    transparent
+  );
+}
+
+.ui-action-tile[data-loading='true'] .ui-action-tile-media > * {
+  display: none;
+}
+
+.ui-action-tile[data-loading='true'] .ui-action-tile-media::after {
+  content: '';
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  border: var(--border-width-thin) var(--border-style-solid)
+    color-mix(in oklch, var(--_action-tile-color) 30%, transparent);
+  border-block-start-color: var(--_action-tile-color);
+  border-radius: var(--radius-pill);
+
+  @include a11y.motion-safe {
+    animation: ui-action-tile-spin var(--motion-duration-slow) linear infinite;
+  }
+}
+
+.ui-action-tile-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  min-inline-size: 0;
+}
+
+.ui-action-tile-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-sm);
+  overflow-wrap: anywhere;
+}
+
+.ui-action-tile-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: var(--line-height-sm);
+  overflow-wrap: anywhere;
+}
+
+@keyframes ui-action-tile-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/atoms/content/badge/Badge.d.ts

@@ -0,0 +1,57 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.badge",
+  "title": "<Badge> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import type { ReactiveText } from '../../../shared/clickable';
+import type { ControlSize } from '@pithyjs/design-system';
+import { type SemanticColor } from '../../../shared/types';
+import { type BadgeVariant } from '../../../shared/badge';
+/** @codexApi {"parent":"pithy.ui-kit.badge","name":"BadgeProps","stability":"stable","signature":"interface BadgeProps"} */
+export interface BadgeProps {
+    /** Semantic color — static or signal/computed accessor (default: "primary") */
+    color?: SemanticColor | (() => SemanticColor);
+    /** Size variant (default: "md") */
+    size?: ControlSize;
+    /** Display variant (default: "filled") */
+    variant?: BadgeVariant;
+    /** Dot-only mode — renders a small colored dot with no text content */
+    dot?: boolean;
+    /** Pulsing animation — "live" indicator for dot mode (motion-safe) */
+    pulse?: boolean;
+    /**
+     * Accessible label.
+     * Required when `dot` is true (no visible text).
+     * Optional otherwise (visible text content serves as the accessible name).
+     */
+    label?: string;
+    /** Visible badge text — static string or signal/computed accessor. When set,
+     *  the text is used as the badge content and slot children are ignored.
+     *  Ignored in dot mode. Omit to fall back to slot content. */
+    text?: ReactiveText;
+    /** Icon name (from the registered sprite) rendered before the badge text —
+     *  static or signal. Ignored in dot mode. */
+    iconStart?: ReactiveText;
+}
+/**
+ * Inline status badge for counts, labels, and dot indicators.
+ *
+ * Renders a `<span>` with semantic color, size, and variant styling.
+ * In dot mode, renders a compact colored circle with `role="status"`.
+ *
+ * @example
+ * ```html
+ * <Badge color="'success'">Active</Badge>
+ * <Badge variant="'outline'" color="'warning'" size="'sm'">Pending</Badge>
+ * <Badge dot="true" color="'danger'" label="'3 unread'" />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.badge","name":"Badge","stability":"stable","signature":"(props: BadgeProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Badge({ color: rawColor, size: rawSize, variant: rawVariant, dot, pulse, label, text, iconStart, }: BadgeProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/atoms/content/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/badge/Badge.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAIF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1E,4HAA4H;AAC5H,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,aAAa,GAAG,CAAC,MAAM,aAAa,CAAC,CAAC;IAC9C,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uEAAuE;IACvE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;kEAE8D;IAC9D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;iDAC6C;IAC7C,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B;AAED;;;;;;;;;;;;GAYG;AACH,qLAAqL;AACrL,wBAAgB,KAAK,CAAC,EACpB,KAAK,EAAE,QAAoB,EAC3B,IAAI,EAAE,OAAc,EACpB,OAAO,EAAE,UAAqB,EAC9B,GAAW,EACX,KAAa,EACb,KAAK,EACL,IAAgB,EAChB,SAAqB,GACtB,EAAE,UAAU,GAAG;IACd,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAiLA"}

package/dist/atoms/content/badge/Badge.js

@@ -0,0 +1,177 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.badge",
+  "title": "<Badge> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { renderChildren } from '@pithyjs/core';
+import { effect } from '@pithyjs/signals';
+import { Icon } from '../icon/Icon';
+import { SEMANTIC_COLORS, CONTROL_SIZES, } from '../../../shared/types';
+import { BADGE_VARIANTS } from '../../../shared/badge';
+/**
+ * Inline status badge for counts, labels, and dot indicators.
+ *
+ * Renders a `<span>` with semantic color, size, and variant styling.
+ * In dot mode, renders a compact colored circle with `role="status"`.
+ *
+ * @example
+ * ```html
+ * <Badge color="'success'">Active</Badge>
+ * <Badge variant="'outline'" color="'warning'" size="'sm'">Pending</Badge>
+ * <Badge dot="true" color="'danger'" label="'3 unread'" />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.badge","name":"Badge","stability":"stable","signature":"(props: BadgeProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function Badge({ color: rawColor = 'primary', size: rawSize = 'md', variant: rawVariant = 'filled', dot = false, pulse = false, label, text = undefined, iconStart = undefined, }) {
+    // -- Validation -------------------------------------------------------------
+    const isColorFn = typeof rawColor === 'function';
+    const validSize = CONTROL_SIZES.includes(rawSize);
+    const validVariant = BADGE_VARIANTS.includes(rawVariant);
+    let didWarnColor = false;
+    const readColor = () => {
+        const c = isColorFn
+            ? rawColor()
+            : rawColor;
+        if (SEMANTIC_COLORS.includes(c))
+            return c;
+        if (import.meta.env?.DEV && !didWarnColor) {
+            didWarnColor = true;
+            console.warn(`[<Badge>] Invalid color: "${c}". Expected one of: ${SEMANTIC_COLORS.join(', ')}. Falling back to "primary".`);
+        }
+        return 'primary';
+    };
+    if (import.meta.env?.DEV) {
+        if (!validSize) {
+            console.warn(`[<Badge>] Invalid size: "${rawSize}". Expected one of: ${CONTROL_SIZES.join(', ')}. Falling back to "md".`);
+        }
+        if (!validVariant) {
+            console.warn(`[<Badge>] Invalid variant: "${rawVariant}". Expected one of: ${BADGE_VARIANTS.join(', ')}. Falling back to "filled".`);
+        }
+        if (dot && label !== '' && !label?.trim()) {
+            console.warn(`[<Badge>] Dot mode needs a label for accessibility, or label="" to mark it decorative when an ancestor already names the control.`);
+        }
+        if (pulse && !dot) {
+            console.warn(`[<Badge>] pulse has no effect without dot mode. Set dot="true" for a pulsing indicator.`);
+        }
+        if (dot && validSize && rawSize !== 'md') {
+            console.warn(`[<Badge>] size has no effect in dot mode. Dots are always a fixed --space-sm circle.`);
+        }
+    }
+    const size = validSize ? rawSize : 'md';
+    const variant = validVariant ? rawVariant : 'filled';
+    // -- DOM --------------------------------------------------------------------
+    const el = document.createElement('span');
+    el.classList.add('ui-badge');
+    if (dot) {
+        el.classList.add('ui-badge-dot');
+    }
+    if (dot && pulse) {
+        el.classList.add('ui-badge-pulse');
+    }
+    let cleanupColorEffect;
+    if (isColorFn) {
+        cleanupColorEffect = effect(() => el.setAttribute('data-color', readColor()));
+    }
+    else {
+        el.setAttribute('data-color', readColor());
+    }
+    el.setAttribute('data-size', size);
+    el.setAttribute('data-variant', variant);
+    // -- Accessibility ----------------------------------------------------------
+    const trimmedLabel = label?.trim();
+    if (dot) {
+        // Dot badges have no visible text. Only expose live-region semantics
+        // when a valid label is present; otherwise treat as decorative.
+        if (trimmedLabel) {
+            el.setAttribute('role', 'status');
+            el.setAttribute('aria-label', trimmedLabel);
+        }
+        else {
+            el.setAttribute('aria-hidden', 'true');
+        }
+    }
+    else if (trimmedLabel) {
+        // Text badges with an explicit label — use it as aria-label
+        // (overrides visible text when they differ).
+        el.setAttribute('aria-label', trimmedLabel);
+    }
+    // Text badges without explicit label: visible text content is the
+    // accessible name — no extra ARIA needed.
+    // -- Content projection (skipped for dot mode) ------------------------------
+    // Badge icons render one step smaller than the badge itself — badges are
+    // already a compact chip, so xs/sm/md keeps the icon proportional to text.
+    const BADGE_ICON_SIZE = { sm: 'xs', md: 'sm', lg: 'md' };
+    let destroyChildren;
+    let iconHandle;
+    let textNode;
+    let cleanupTextEffect;
+    let cleanupIconEffect;
+    if (!dot) {
+        const isTextFn = typeof text === 'function';
+        const isIconStartFn = typeof iconStart === 'function';
+        const readText = () => isTextFn
+            ? text()
+            : text;
+        const readIconStart = () => isIconStartFn
+            ? iconStart()
+            : iconStart;
+        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();
+            el.appendChild(childFragment);
+            destroyChildren = destroy;
+        }
+        const remountIcon = (name) => {
+            if (iconHandle) {
+                iconHandle.destroy();
+                iconHandle.el.parentNode?.removeChild(iconHandle.el);
+                iconHandle = undefined;
+            }
+            if (typeof name === 'string' && name.length > 0) {
+                const handle = Icon({
+                    name,
+                    size: BADGE_ICON_SIZE[size],
+                    decorative: true,
+                });
+                iconHandle = handle;
+                el.insertBefore(handle.el, el.firstChild);
+            }
+        };
+        if (isTextFn) {
+            cleanupTextEffect = effect(() => {
+                const v = readText();
+                if (textNode)
+                    textNode.nodeValue = typeof v === 'string' ? v : '';
+            });
+        }
+        if (isIconStartFn) {
+            cleanupIconEffect = effect(() => remountIcon(readIconStart()));
+        }
+        else {
+            remountIcon(readIconStart());
+        }
+    }
+    return {
+        el,
+        destroy: () => {
+            cleanupColorEffect?.();
+            cleanupTextEffect?.();
+            cleanupIconEffect?.();
+            iconHandle?.destroy();
+            destroyChildren?.();
+            el.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Badge.js.map

package/dist/atoms/content/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/atoms/content/badge/Badge.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EACL,eAAe,EAEf,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAqB,MAAM,uBAAuB,CAAC;AA+B1E;;;;;;;;;;;;GAYG;AACH,qLAAqL;AACrL,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EAAE,QAAQ,GAAG,SAAS,EAC3B,IAAI,EAAE,OAAO,GAAG,IAAI,EACpB,OAAO,EAAE,UAAU,GAAG,QAAQ,EAC9B,GAAG,GAAG,KAAK,EACX,KAAK,GAAG,KAAK,EACb,KAAK,EACL,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,SAAS,GACV;IAIX,8EAA8E;IAC9E,MAAM,SAAS,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC;IACjD,MAAM,SAAS,GAAI,aAAmC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACzE,MAAM,YAAY,GAAI,cAAoC,CAAC,QAAQ,CACjE,UAAU,CACX,CAAC;IAEF,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,MAAM,SAAS,GAAG,GAAkB,EAAE;QACpC,MAAM,CAAC,GAAG,SAAS;YACjB,CAAC,CAAE,QAAgC,EAAE;YACrC,CAAC,CAAE,QAA0B,CAAC;QAChC,IAAK,eAAqC,CAAC,QAAQ,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC;QACjE,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1C,YAAY,GAAG,IAAI,CAAC;YACpB,OAAO,CAAC,IAAI,CACV,6BAA6B,CAAC,uBAAuB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAC9G,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CACV,4BAA4B,OAAO,uBAAuB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAC5G,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,CAAC,IAAI,CACV,+BAA+B,UAAU,uBAAuB,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,CACvH,CAAC;QACJ,CAAC;QACD,IAAI,GAAG,IAAI,KAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,mIAAmI,CACpI,CAAC;QACJ,CAAC;QACD,IAAI,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;YAClB,OAAO,CAAC,IAAI,CACV,yFAAyF,CAC1F,CAAC;QACJ,CAAC;QACD,IAAI,GAAG,IAAI,SAAS,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACzC,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACxC,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IAErD,8EAA8E;IAC9E,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC1C,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B,IAAI,GAAG,EAAE,CAAC;QACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;QACjB,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,kBAA4C,CAAC;IACjD,IAAI,SAAS,EAAE,CAAC;QACd,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE,CAC/B,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,CAC3C,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;IAC7C,CAAC;IACD,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IACnC,EAAE,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAEzC,8EAA8E;IAC9E,MAAM,YAAY,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;IAEnC,IAAI,GAAG,EAAE,CAAC;QACR,qEAAqE;QACrE,gEAAgE;QAChE,IAAI,YAAY,EAAE,CAAC;YACjB,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YAClC,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;SAAM,IAAI,YAAY,EAAE,CAAC;QACxB,4DAA4D;QAC5D,6CAA6C;QAC7C,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAC9C,CAAC;IACD,kEAAkE;IAClE,0CAA0C;IAE1C,8EAA8E;IAC9E,yEAAyE;IACzE,2EAA2E;IAC3E,MAAM,eAAe,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAW,CAAC;IAClE,IAAI,eAAyC,CAAC;IAC9C,IAAI,UAES,CAAC;IACd,IAAI,QAA0B,CAAC;IAC/B,IAAI,iBAA2C,CAAC;IAChD,IAAI,iBAA2C,CAAC;IAEhD,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,UAAU,CAAC;QAC5C,MAAM,aAAa,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC;QACtD,MAAM,QAAQ,GAAG,GAAuB,EAAE,CACxC,QAAQ;YACN,CAAC,CAAE,IAAiC,EAAE;YACtC,CAAC,CAAE,IAA2B,CAAC;QACnC,MAAM,aAAa,GAAG,GAAuB,EAAE,CAC7C,aAAa;YACX,CAAC,CAAE,SAAsC,EAAE;YAC3C,CAAC,CAAE,SAAgC,CAAC;QAExC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QACrD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;YACvC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC;aAAM,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC1C,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;YAC/C,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;YACxD,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YAC9B,eAAe,GAAG,OAAO,CAAC;QAC5B,CAAC;QAED,MAAM,WAAW,GAAG,CAAC,IAAwB,EAAE,EAAE;YAC/C,IAAI,UAAU,EAAE,CAAC;gBACf,UAAU,CAAC,OAAO,EAAE,CAAC;gBACpB,UAAU,CAAC,EAAkB,CAAC,UAAU,EAAE,WAAW,CACpD,UAAU,CAAC,EAAiB,CAC7B,CAAC;gBACF,UAAU,GAAG,SAAS,CAAC;YACzB,CAAC;YACD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAChD,MAAM,MAAM,GAAG,IAAI,CAAC;oBAClB,IAAI;oBACJ,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC;oBAC3B,UAAU,EAAE,IAAI;iBACjB,CAAC,CAAC;gBACH,UAAU,GAAG,MAAM,CAAC;gBACpB,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,QAAQ,EAAE,CAAC;YACb,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE;gBAC9B,MAAM,CAAC,GAAG,QAAQ,EAAE,CAAC;gBACrB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,SAAS,GAAG,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpE,CAAC,CAAC,CAAC;QACL,CAAC;QACD,IAAI,aAAa,EAAE,CAAC;YAClB,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACjE,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,OAAO;QACL,EAAE;QACF,OAAO,EAAE,GAAG,EAAE;YACZ,kBAAkB,EAAE,EAAE,CAAC;YACvB,iBAAiB,EAAE,EAAE,CAAC;YACtB,iBAAiB,EAAE,EAAE,CAAC;YACtB,UAAU,EAAE,OAAO,EAAE,CAAC;YACtB,eAAe,EAAE,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC;KACF,CAAC;AACJ,CAAC"}