@pienter/ui 0.3.0 → 0.7.1

package/components/overlay/modal/Modal.astro

@@ -1,66 +0,0 @@
----
-import './modal.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  open?: boolean;
-  persistent?: boolean;
-  title: string;
-  subtitle?: string;
-}
-
-const {
-  id,
-  open = false,
-  persistent = false,
-  title,
-  subtitle,
-  ...rest
-} = Astro.props;
-
-const modalId = id ?? generateId('modal');
-const titleId = `${modalId}-title`;
----
-
-<dialog
-  id={modalId}
-  class="pui-modal"
-  data-state="closed"
-  data-pui-modal
-  data-persistent={persistent ? 'true' : undefined}
-  data-open-initially={open ? 'true' : undefined}
-  aria-labelledby={titleId}
-  {...rest}
->
-  <div class="pui-modal__head">
-    <h2 id={titleId} class="pui-modal__title">{title}</h2>
-    {subtitle && <p class="pui-modal__sub">{subtitle}</p>}
-  </div>
-  <div class="pui-modal__body"><slot /></div>
-  {
-    Astro.slots.has('footer') && (
-      <div class="pui-modal__foot">
-        <slot name="footer" />
-      </div>
-    )
-  }
-</dialog>
-
-<script>
-  import { mountDialog } from '@pienter/ui/utils/controllers/dialog.js';
-
-  document
-    .querySelectorAll<HTMLDialogElement>('dialog[data-pui-modal]')
-    .forEach((el) => {
-      const node = el as HTMLDialogElement & {
-        _dialog?: ReturnType<typeof mountDialog>;
-      };
-      if (node._dialog) return; // idempotent — guard against double-mounts (HMR, multiple <Modal> imports)
-      const persistent = el.dataset.persistent === 'true';
-      const openInitially = el.dataset.openInitially === 'true';
-      const control = mountDialog(el, { persistent });
-      node._dialog = control;
-      if (openInitially) control.open();
-    });
-</script>

package/utils/controllers/disclosure.ts

@@ -1,117 +0,0 @@
-/**
- * Disclosure controller — shared by Accordion and Collapsible per the
- * locked controller-sharing mapping in `CONVENTIONS.md`.
- *
- * The v1 disclosure family is built on top of the **native HTML
- * `<details>` / `<summary>` element pair** per the locked "Use native
- * APIs where applicable" rule. The browser already handles:
- *
- * - Expand / collapse on summary click
- * - The `[open]` attribute reflecting current state
- * - Enter / Space activation when the summary is focused
- * - Tab focus moves to the summary, not the panel content
- * - Initial closed state when the `open` attribute is absent
- *
- * What the browser does NOT provide and we layer on top:
- *
- * - **Single-open coordination** for Accordion mode — when one
- *   `<details>` opens, sibling `<details>` elements within the same
- *   mount root close. Native `<details>` has no built-in mutual
- *   exclusion (the obsolete `name` attribute exists in some browsers
- *   but is not reliable cross-browser in 2026).
- * - A **callback** so framework code can react to toggles without
- *   each `<details>` wiring its own `@toggle` listener.
- * - A consistent **teardown** lifecycle that matches the rest of the
- *   controller archetype.
- *
- * Mount on:
- * - A single `<details>` element for Collapsible (no `singleOpen`
- *   needed; the controller is essentially a callback bridge).
- * - A wrapper `<div>` containing multiple `<details>` for Accordion
- *   (`singleOpen: true` makes them mutually exclusive).
- */
-
-export interface DisclosureConfig {
-    /**
-     * When `true`, opening any **top-level** `<details>` within the
-     * mount root closes all sibling top-level `<details>` elements
-     * (Accordion single-open mode). A "top-level" `<details>` here
-     * means one whose nearest ancestor `<details>` lies outside the
-     * mount root — i.e., a disclosure that belongs to THIS mount, not
-     * a nested disclosure inside an item's panel content.
-     *
-     * When `false`, multiple disclosures can be open simultaneously
-     * (Collapsible / Accordion multi-open mode). Default: `false`.
-     */
-    singleOpen?: boolean;
-    /**
-     * Called whenever a `<details>` within the mount root toggles.
-     * Receives the toggled element and its new open state. Frameworks
-     * use this to reflect the change back into reactive state (e.g.,
-     * Vue `update:open`). The controller does NOT track open state
-     * itself — the DOM is the source of truth via `el.open`.
-     */
-    onToggle?: (target: HTMLDetailsElement, open: boolean) => void;
-}
-
-/**
- * Mount disclosure behavior on `el`. The mount root may be either a
- * single `<details>` (Collapsible) or a wrapper containing multiple
- * `<details>` children (Accordion). Returns a teardown function that
- * removes the listener; the controller owns no other resources.
- *
- * The `toggle` event is captured at the mount root because it bubbles
- * from the originating `<details>`. This means a single listener
- * covers any number of disclosures without per-element wiring.
- */
-export function mountDisclosure(
-    el: HTMLElement,
-    config: DisclosureConfig = {},
-): () => void {
-    const singleOpen = config.singleOpen ?? false;
-    const onToggle = config.onToggle;
-
-    /**
-     * A `<details>` is "top-level" relative to `el` when no other
-     * `<details>` lies between it and `el` in the ancestor chain. Only
-     * top-level disclosures participate in single-open coordination —
-     * nested disclosures are part of the consumer's panel content and
-     * must not be closed by the outer mount.
-     */
-    function isTopLevel(details: HTMLDetailsElement): boolean {
-        const parentDetails = details.parentElement?.closest('details') ?? null;
-        if (!parentDetails) return true;
-        // If the parent `<details>` is outside the mount root, treat
-        // `details` as top-level for THIS mount.
-        return !el.contains(parentDetails);
-    }
-
-    function handleToggle(event: Event): void {
-        const target = event.target;
-        if (!(target instanceof HTMLDetailsElement)) return;
-        if (!el.contains(target)) return;
-
-        if (singleOpen && target.open && isTopLevel(target)) {
-            // Close every other top-level `<details>` rooted in this mount.
-            const allDetails =
-                el.querySelectorAll<HTMLDetailsElement>('details');
-            allDetails.forEach((other) => {
-                if (other === target) return;
-                if (!isTopLevel(other)) return;
-                if (other.open) other.open = false;
-            });
-        }
-
-        onToggle?.(target, target.open);
-    }
-
-    // `toggle` does not bubble in the standards sense — but a capturing
-    // listener fires for any descendant `<details>` toggle. Use capture
-    // phase so a single mount-root listener covers every `<details>`
-    // within the scope.
-    el.addEventListener('toggle', handleToggle, true);
-
-    return function teardown(): void {
-        el.removeEventListener('toggle', handleToggle, true);
-    };
-}