@pithyjs/ui-kit 0.1.0-beta.0

package/dist/organisms/content/_card-root.scss

@@ -0,0 +1,99 @@
+/// Card root article + layout wrapper
+/// @group organisms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '../../shared/tokens' as shared;
+
+// ============================================
+// Root (the <article>) — carries chrome + acts as the query container
+// ============================================
+
+.ui-card {
+  // Component-scoped tokens — every variant mutates these, never the global
+  // design-system primitives. Defaults match variant="default".
+  --_card-bg: var(--color-surface);
+  --_card-border-color: var(--color-border);
+  --_card-shadow: var(--shadow-xs);
+  --_card-radius: var(--radius-md);
+  --_card-padding: var(--space-md);
+
+  // Every card is a query container. `.ui-card-layout` (a descendant) uses
+  // @container to switch between vertical and horizontal layouts based on
+  // the card's own inline-size. An element cannot query itself — hence the
+  // nested layout wrapper.
+  container-type: inline-size;
+  // container-type: inline-size implies contain: inline-size layout style.
+  // We add paint containment explicitly for repaint isolation.
+  contain: layout paint;
+
+  position: relative;
+  isolation: isolate;
+
+  display: block;
+  inline-size: 100%;
+  min-inline-size: 0;
+
+  background-color: var(--_card-bg);
+  border: var(--border-width-hairline) solid var(--_card-border-color);
+  border-radius: var(--_card-radius);
+  box-shadow: var(--_card-shadow);
+  // Padding lives on `.ui-card-layout`, not on the article — both the
+  // layout's padding AND the media's negative-inset margin must resolve
+  // against the SAME container-query context. Since `--space-*` tokens
+  // use `cqw`, and the card is a query container (`container-type:
+  // inline-size`), the article's own `cqw` queries the OUTER container
+  // while descendants query the card. Keeping padding on the layout keeps
+  // both values in sync so media bleed aligns pixel-perfect.
+
+  color: var(--color-text);
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background),
+      var(--motion-transition-border),
+      var(--motion-transition-shadow),
+      translate var(--motion-duration-normal) var(--motion-easing-standard);
+  }
+}
+
+// ============================================
+// Layout wrapper — the flex/grid root
+// ============================================
+
+.ui-card-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  min-inline-size: 0;
+  // Pass through the card's radius so nested slots that use
+  // `border-radius: inherit` (media, caption) resolve correctly.
+  border-radius: inherit;
+  // Padding belongs here (not on the article) so the value resolves against
+  // the same container-query context the media's negative-inset margin uses.
+  // Both read the card's inline-size, not the outer container's.
+  padding: var(--_card-padding);
+  // No `z-index` here on purpose — that would create a stacking context and
+  // trap interactive descendants' z-index below the pseudo-link overlay.
+  // Tree-order keeps layout below .ui-card-link (which comes after it in
+  // the DOM) and layout's descendants can freely raise above the link.
+}
+
+// ============================================
+// Padding + Radius — mirror shared control sizes
+// ============================================
+
+@each $size in shared.$control-sizes {
+  .ui-card[data-padding='#{$size}'] {
+    --_card-padding: var(--space-#{$size});
+  }
+  .ui-card[data-radius='#{$size}'] {
+    --_card-radius: var(--radius-#{$size});
+  }
+}
+
+.ui-card[data-padding='none'] {
+  --_card-padding: 0;
+}
+.ui-card[data-radius='none'] {
+  --_card-radius: 0;
+}

package/dist/organisms/content/_card-slots.scss

@@ -0,0 +1,143 @@
+/// Card slot styles — media, header, body, footer, eyebrow
+/// @group organisms/content
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '@pithyjs/design-system/typography/_generated/tokens' as typo;
+@use '../../shared/tokens' as shared;
+
+// ============================================
+// Slots — media / header / body / footer
+// ============================================
+
+.ui-card-media {
+  overflow: hidden;
+  border-radius: inherit;
+  inline-size: 100%;
+  max-block-size: shared.$card-media-max-block;
+
+  > * {
+    display: block;
+    inline-size: 100%;
+  }
+
+  :where(img, video, picture, iframe, canvas) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    max-block-size: shared.$card-media-max-block;
+    object-fit: contain;
+  }
+}
+
+// An explicit aspect ratio locks the media box and crops to fill it.
+.ui-card-media[data-aspect] {
+  > * {
+    block-size: 100%;
+  }
+
+  :where(img, video, picture, iframe, canvas) {
+    block-size: 100%;
+    object-fit: cover;
+  }
+}
+
+// Vertical mode media bleed — negative-inset so media kisses the card's
+// inline + top edges while body padding below remains. The `data-orientation`
+// default is "vertical"; horizontal is handled inside the @container block.
+.ui-card[data-orientation='vertical']:not([data-padding='none'])
+  .ui-card-media {
+  margin-block-start: calc(-1 * var(--_card-padding));
+  margin-inline: calc(-1 * var(--_card-padding));
+  inline-size: calc(100% + 2 * var(--_card-padding));
+  max-inline-size: none;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+// Media → header/body gap boost — the layout's flex `gap: --space-sm` is
+// Close Friends spacing (great for header↔body), but a full-bleed image is a
+// distinct content cluster from the text block below it: Friends spacing
+// (--space-md). We supplement the flex gap so the total visual gap equals
+// --space-md without disturbing header↔body.
+.ui-card[data-orientation='vertical'] .ui-card-media + .ui-card-header,
+.ui-card[data-orientation='vertical'] .ui-card-media + .ui-card-body {
+  margin-block-start: calc(var(--space-md) - var(--space-sm));
+}
+
+// Aspect ratios
+.ui-card-media[data-aspect='1/1'] {
+  aspect-ratio: 1 / 1;
+}
+.ui-card-media[data-aspect='4/3'] {
+  aspect-ratio: 4 / 3;
+}
+.ui-card-media[data-aspect='16/9'] {
+  aspect-ratio: 16 / 9;
+}
+.ui-card-media[data-aspect='3/2'] {
+  aspect-ratio: 3 / 2;
+}
+.ui-card-media[data-aspect='21/9'] {
+  aspect-ratio: 21 / 9;
+}
+
+.ui-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs); // eyebrow ↔ title ↔ meta: Lovers / Close Friends
+}
+
+// Eyebrow — primary-colored, uppercase, letter-spaced kicker above the
+// heading. Mirrors the .ui-section-eyebrow pattern from section templates
+// so card-in-section consumers read as one editorial voice.
+.ui-card-eyebrow {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: map.get(typo.$letter-spacings, 'widest');
+  text-transform: uppercase;
+  color: var(--color-primary);
+  // Tight rhythm: the eyebrow hugs the heading (Lovers spacing).
+  line-height: 1;
+}
+
+// Slide-in title underline for clickable cards — telegraphs "this card
+// navigates" on hover/focus-within. Parent-triggered: the card's hover
+// activates the heading's underline, not the heading's own :hover.
+// Only the FIRST heading lights up so multi-heading layouts stay clean.
+.ui-card[data-clickable='true']:not([data-disabled='true'])
+  .ui-card-header
+  :is(h1, h2, h3, h4, h5, h6):first-of-type {
+  display: inline-block;
+  max-inline-size: fit-content;
+  @include a11y.slide-underline($offset: -0.1em, $self-activate: false);
+}
+
+.ui-card[data-clickable='true']:not([data-disabled='true']):hover
+  .ui-card-header
+  :is(h1, h2, h3, h4, h5, h6):first-of-type,
+.ui-card[data-clickable='true']:not([data-disabled='true']):focus-within
+  .ui-card-header
+  :is(h1, h2, h3, h4, h5, h6):first-of-type {
+  @include a11y.slide-underline-active;
+}
+
+.ui-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm); // paragraph rhythm: Close Friends
+  min-inline-size: 0;
+}
+
+.ui-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-sm);
+  // Pin footer to the block-end of the layout column so grid-arranged cards
+  // line up at the base.
+  margin-block-start: auto;
+  padding-block-start: var(--space-sm);
+}

package/dist/organisms/content/_card-states.scss

@@ -0,0 +1,166 @@
+/// Card interactive states — hover, selected, disabled, forced-colors, selection
+/// @group organisms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+// ============================================
+// Clickable hover / focus-within matrix
+// ============================================
+
+.ui-card[data-clickable='true']:not([data-disabled='true']) {
+  cursor: pointer;
+
+  &:hover,
+  &:focus-within {
+    --_card-border-color: color-mix(
+      in oklch,
+      var(--color-primary) 25%,
+      var(--color-border)
+    );
+
+    @include a11y.motion-safe {
+      translate: 0 calc(-1 * var(--motion-distance-subtle));
+    }
+  }
+}
+
+// Interactive-by-content: cards tagged `data-interactive="true"` at mount
+// because they contain a focusable descendant (button, anchor, form
+// control). The inner control makes the whole card an interaction zone,
+// so hover / focus-within lift the card the same way `data-clickable`
+// does. Static cards (pure content, no focusable children) stay flat —
+// lifting every card on hover cheapens the motion. Selected-state rules
+// below compound `[data-selected="true"]` to win on specificity when a
+// selected card is also hovered.
+.ui-card[data-interactive='true']:not([data-disabled='true']):hover,
+.ui-card[data-interactive='true']:not([data-disabled='true']):focus-within {
+  --_card-border-color: color-mix(
+    in oklch,
+    var(--color-primary) 25%,
+    var(--color-border)
+  );
+  --_card-shadow: var(--shadow-md);
+
+  @include a11y.motion-safe {
+    translate: 0 calc(-1 * var(--motion-distance-subtle));
+  }
+}
+
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='default']:hover,
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='default']:focus-within {
+  --_card-shadow: var(--shadow-md);
+}
+
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='outlined']:hover,
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='outlined']:focus-within {
+  --_card-shadow: var(--shadow-sm);
+}
+
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='elevated']:hover,
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='elevated']:focus-within {
+  --_card-shadow: var(--shadow-xl);
+}
+
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='subtle']:hover,
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='subtle']:focus-within {
+  --_card-shadow: var(--shadow-sm);
+  // Subtle stays flat — prevents list jitter.
+  translate: none;
+}
+
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='ghost']:hover,
+.ui-card[data-clickable='true']:not(
+    [data-disabled='true']
+  )[data-variant='ghost']:focus-within {
+  --_card-bg: var(--color-surface-variant);
+  --_card-border-color: var(--color-border);
+}
+
+// ============================================
+// Selected
+// ============================================
+
+.ui-card[data-selected='true'] {
+  --_card-selected-ring-width: var(--border-width-thin);
+  --_card-border-color: var(--color-primary);
+  // Inner ring (belt-and-suspenders emphasis alongside the colored border).
+  box-shadow:
+    inset 0 0 0 var(--_card-selected-ring-width) var(--color-primary),
+    var(--_card-shadow);
+}
+
+// Selected cards respond to hover/focus-within even when not `data-clickable` —
+// the inner action button makes every selected card interactive, so the card
+// should telegraph that on pointer/focus: thicker primary ring, richer shadow,
+// subtle lift. `:not([data-disabled="true"])` both guards the disabled case
+// AND raises specificity to match the `[data-interactive="true"]` hover rule
+// above, so the selected treatment wins by rule order when both apply.
+.ui-card[data-selected='true']:not([data-disabled='true']):hover,
+.ui-card[data-selected='true']:not([data-disabled='true']):focus-within {
+  --_card-selected-ring-width: var(--border-width-medium);
+  --_card-shadow: var(--shadow-lg);
+
+  @include a11y.motion-safe {
+    translate: 0 calc(-1 * var(--motion-distance-subtle));
+  }
+}
+
+// ============================================
+// Disabled
+// ============================================
+
+.ui-card[data-disabled='true'] {
+  opacity: var(--state-disabled-opacity);
+  cursor: not-allowed;
+  // Kill hover motion — inert already blocks interaction, but motion-safe
+  // transitions would still fire without this override.
+  translate: none;
+}
+
+// ============================================
+// Forced colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-card {
+    border: 1px solid ButtonText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+    box-shadow: none;
+  }
+
+  .ui-card[data-selected='true'] {
+    border: 2px solid Highlight; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+    box-shadow: none;
+  }
+
+  .ui-card-link:focus-visible {
+    @include a11y.focus-outline(Highlight);
+  }
+}
+
+// ============================================
+// Selection tint
+// ============================================
+
+.ui-card::selection,
+.ui-card *::selection {
+  background-color: color-mix(in oklch, var(--color-primary) 20%, transparent);
+  color: var(--color-text);
+}

package/dist/organisms/content/_card-tokens.scss

@@ -0,0 +1,22 @@
+/// Card internal sizing tokens
+/// Shared by partials that need the horizontal breakpoint and media column values.
+///
+/// @group organisms/content
+
+@use 'sass:map';
+@use '@pithyjs/design-system/layout/_generated/tokens' as layout;
+
+// Horizontal orientation activates above this container width.
+// Mobile-first: the layout is vertical everywhere until it has room to
+// breathe; at >= $card-horizontal-min it switches to a 2-column grid.
+$card-horizontal-min: map.get(layout.$container-breakpoints, 'sm');
+
+// Horizontal-orientation media column — clamp(min, preferred, max).
+// $card-media-min keeps the thumbnail legible on the narrow side of the
+// horizontal range; $card-media-max prevents oversized media in wide
+// cards; $card-media-preferred lets the column scale fluidly between them.
+// Named here (rather than inlined) so sizing stays auditable and the
+// component contract exposes a single source of truth.
+$card-media-min: 8rem;
+$card-media-preferred: 32%;
+$card-media-max: 14rem;

package/dist/organisms/content/_card-variants.scss

@@ -0,0 +1,31 @@
+/// Card variant token overrides
+/// @group organisms/content
+
+// ============================================
+// Variants — mutate the --_card-* tokens only
+// ============================================
+
+.ui-card[data-variant='outlined'] {
+  --_card-bg: var(--color-surface);
+  --_card-border-color: var(--color-border);
+  --_card-shadow: 0 0 transparent;
+}
+
+.ui-card[data-variant='elevated'] {
+  --_card-bg: var(--color-surface);
+  // Always carry a hairline — shadow is presence, border is edge.
+  --_card-border-color: var(--color-border);
+  --_card-shadow: var(--shadow-md);
+}
+
+.ui-card[data-variant='subtle'] {
+  --_card-bg: var(--color-surface-variant);
+  --_card-border-color: var(--color-border);
+  --_card-shadow: 0 0 transparent;
+}
+
+.ui-card[data-variant='ghost'] {
+  --_card-bg: transparent;
+  --_card-border-color: transparent;
+  --_card-shadow: 0 0 transparent;
+}

package/dist/organisms/content/card.scss

@@ -0,0 +1,15 @@
+/// Card organism styles
+/// Content container with named slots (media, header, body, footer),
+/// five variants, two orientations, and a pseudo-link overlay for
+/// full-card navigation.
+///
+/// @group organisms/content
+
+@forward 'card-tokens';
+@forward 'card-root';
+@forward 'card-variants';
+@forward 'card-slots';
+@forward 'card-horizontal';
+@forward 'card-overlay';
+@forward 'card-link';
+@forward 'card-states';

package/dist/organisms/feedback/Modal.d.ts

@@ -0,0 +1,39 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.modal",
+  "title": "<Modal> Dialog Component",
+  "category": "feature",
+  "risk": "high"
+}
+*/
+import { type Reactive } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.modal","name":"ModalProps","stability":"stable","signature":"interface ModalProps"} */
+export interface ModalProps {
+    open: Reactive<boolean>;
+    onClose: () => void;
+    /** Accessible name. Used as `aria-label` unless `titleId` is provided. Required. */
+    title: string;
+    /** Id of a visible title inside the content — wired as `aria-labelledby`. */
+    titleId?: string;
+    /** Sets `id` on the dialog element — enables `aria-controls` on the trigger. */
+    dialogId?: string;
+    /** Pick the element that receives initial focus. Defaults to the first focusable. */
+    initialFocus?: (dialogEl: HTMLElement) => HTMLElement | null;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    backdropClass?: string;
+    /**
+     * Content factory, re-invoked on every open so the dialog reflects fresh
+     * state. When omitted, the template slot (`renderChildren`) is used once.
+     */
+    content?: () => {
+        el: Node;
+        destroy: () => void;
+    };
+}
+/** @codexApi {"parent":"pithy.ui-kit.modal","name":"Modal","stability":"stable","signature":"(props: ModalProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function Modal(props: ModalProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/organisms/feedback/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/organisms/feedback/Modal.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAIF,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAErE,4HAA4H;AAC5H,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM;QAAE,EAAE,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACnD;AAED,kKAAkK;AAClK,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG;IACxC,EAAE,EAAE,WAAW,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CA0HA"}

package/dist/organisms/feedback/Modal.js

@@ -0,0 +1,120 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.modal",
+  "title": "<Modal> Dialog Component",
+  "category": "feature",
+  "risk": "high"
+}
+*/
+import { renderChildren, FocusTrap } from '@pithyjs/core';
+import { effect } from '@pithyjs/signals';
+import { readReactive } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.modal","name":"Modal","stability":"stable","signature":"(props: ModalProps) => { el: HTMLElement; destroy: () => void }"} */
+export function Modal(props) {
+    const { open, onClose, title, titleId, dialogId, initialFocus, closeOnBackdrop = true, closeOnEscape = true, backdropClass, content, } = props;
+    const name = title?.trim() ?? '';
+    if (import.meta.env?.DEV && !name && !titleId) {
+        console.warn('[<Modal>] `title` is required for an accessible name.');
+    }
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-modal-backdrop';
+    if (backdropClass)
+        backdrop.classList.add(backdropClass);
+    backdrop.hidden = true;
+    const dialog = document.createElement('div');
+    dialog.className = 'ui-modal';
+    dialog.setAttribute('role', 'dialog');
+    dialog.setAttribute('aria-modal', 'true');
+    if (titleId)
+        dialog.setAttribute('aria-labelledby', titleId);
+    else if (name)
+        dialog.setAttribute('aria-label', name);
+    if (dialogId)
+        dialog.id = dialogId;
+    backdrop.appendChild(dialog);
+    const staticContent = content ? null : renderChildren();
+    if (staticContent)
+        dialog.appendChild(staticContent.el);
+    let activeContent = null;
+    let trap = null;
+    let onKey = null;
+    let onBackdrop = null;
+    let mounted = false;
+    const mount = () => {
+        if (content) {
+            activeContent = content();
+            dialog.appendChild(activeContent.el);
+        }
+        onBackdrop = (e) => {
+            if (closeOnBackdrop && e.target === backdrop)
+                onClose?.();
+        };
+        backdrop.addEventListener('pointerdown', onBackdrop);
+        // Listen on window in capture with stopImmediatePropagation so the modal
+        // wins Escape over other document-capture handlers (e.g. the Doctor
+        // panel) — stopPropagation alone wouldn't stop same-target listeners.
+        onKey = (e) => {
+            if (closeOnEscape && e.key === 'Escape') {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                onClose?.();
+            }
+        };
+        window.addEventListener('keydown', onKey, true);
+        backdrop.hidden = false;
+        document.body.appendChild(backdrop);
+        trap = new FocusTrap(dialog, {
+            initialFocus: initialFocus?.(dialog) ?? undefined,
+            escapeDeactivates: false,
+            clickOutsideDeactivates: false,
+        });
+        trap.activate();
+        mounted = true;
+    };
+    const unmount = () => {
+        if (onKey) {
+            window.removeEventListener('keydown', onKey, true);
+            onKey = null;
+        }
+        trap?.deactivate();
+        trap = null;
+        if (onBackdrop) {
+            backdrop.removeEventListener('pointerdown', onBackdrop);
+            onBackdrop = null;
+        }
+        backdrop.hidden = true;
+        backdrop.remove();
+        if (activeContent) {
+            activeContent.destroy();
+            activeContent = null;
+            dialog.replaceChildren();
+        }
+        mounted = false;
+    };
+    let disposed = false;
+    // Defer mount/unmount to a microtask so the content factory's signal reads
+    // (e.g. the publish gate) run outside this effect's tracking scope —
+    // otherwise the effect would subscribe to them and re-run on unrelated
+    // edits. Only open() is tracked here.
+    const disposeEffect = effect(() => {
+        const isOpen = readReactive(open);
+        queueMicrotask(() => {
+            if (disposed)
+                return;
+            if (isOpen && !mounted)
+                mount();
+            else if (!isOpen && mounted)
+                unmount();
+        });
+    });
+    return {
+        el: backdrop,
+        destroy: () => {
+            disposed = true;
+            disposeEffect();
+            unmount();
+            staticContent?.destroy();
+        },
+    };
+}
+//# sourceMappingURL=Modal.js.map

package/dist/organisms/feedback/Modal.js.map

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

package/dist/organisms/feedback/Popover.d.ts

@@ -0,0 +1,30 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.popover",
+  "title": "<Popover> Anchored Overlay Component",
+  "category": "feature",
+  "risk": "high"
+}
+*/
+import { type Reactive } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.popover","name":"PopoverProps","stability":"stable","signature":"interface PopoverProps"} */
+export interface PopoverProps {
+    open: Reactive<boolean>;
+    anchorRef: () => HTMLElement | null | undefined;
+    onClose: () => void;
+    content: () => {
+        el: HTMLElement;
+        destroy: () => void;
+    };
+    align?: 'right' | 'center' | 'start';
+    gap?: number;
+    menuId?: string;
+    zIndex?: string;
+    backdropClass?: string;
+    initialFocus?: (menuEl: HTMLElement) => HTMLElement | null;
+}
+/** @codexApi {"parent":"pithy.ui-kit.popover","name":"Popover","stability":"stable","signature":"(props: PopoverProps) => { destroy: () => void }"} */
+export declare function Popover(props: PopoverProps): {
+    destroy: () => void;
+};
+//# sourceMappingURL=Popover.d.ts.map