@pienter/ui 0.2.0 → 0.5.0

package/components/layout/card/Card.astro

@@ -1,13 +0,0 @@
----
-import './card.css';
-
-interface Props {
-  variant?: 'bordered' | 'brand' | 'muted';
-}
-
-const { variant, ...rest } = Astro.props;
----
-
-<div class="pui-card" data-variant={variant} {...rest}>
-  <slot />
-</div>

package/components/layout/separator/Separator.astro

@@ -1,31 +0,0 @@
----
-import './separator.css';
-
-interface Props {
-  orientation?: 'horizontal' | 'vertical';
-  decorative?: boolean;
-}
-
-const { orientation = 'horizontal', decorative = false, ...rest } = Astro.props;
----
-
-{
-  decorative ? (
-    <div
-      class="pui-separator"
-      data-orientation={orientation}
-      role="none"
-      {...rest}
-    />
-  ) : orientation === 'vertical' ? (
-    <div
-      class="pui-separator"
-      data-orientation="vertical"
-      role="separator"
-      aria-orientation="vertical"
-      {...rest}
-    />
-  ) : (
-    <hr class="pui-separator" data-orientation="horizontal" {...rest} />
-  )
-}

package/components/layout/table/Table.astro

@@ -1,116 +0,0 @@
----
-// Table (Astro) — the static primitive; the consumer authors the body in the default slot with
-// the BEM classes. Sortable headers are <a>s, not events: sorting a static table is a navigation.
-import './table.css';
-import Icon from '../../display/icon/Icon.astro';
-import Spinner from '../../feedback/spinner/Spinner.astro';
-import type { IconName } from '../../../icons/index.js';
-import {
-  formatSort,
-  toggleSort,
-  type SortDirection,
-  type SortState,
-} from '../../../utils/sort/index.js';
-import type { Column } from './types.js';
-
-interface Props {
-  columns: Column[];
-  /** Which column is sorted, and how. Rendered here; the page orders the rows itself (ADR 0005). */
-  sort?: SortState;
-  /** Query parameter the header links read and write. */
-  sortParam?: string;
-  /** Frosts and disables the body while the rows are stale, leaving the header usable. */
-  loading?: boolean;
-}
-
-const {
-  columns,
-  sort = null,
-  sortParam = 'sort',
-  loading = false,
-  ...rest
-} = Astro.props;
-const cols = columns.map((c) => c.width ?? 'auto').join(' ');
-
-/** Header glyph per sort state — the shape carries the direction. */
-const SORT_ICONS: Record<SortDirection | 'none', IconName> = {
-  asc: 'chevron-up',
-  desc: 'chevron-down',
-  none: 'chevron-up-down',
-};
-
-function sortState(key: string): SortDirection | 'none' {
-  return sort?.key === key ? sort.direction : 'none';
-}
-
-/** `aria-sort` token for the header cell; only the sorted column carries one. */
-function ariaSort(key: string): 'ascending' | 'descending' | undefined {
-  if (sort?.key !== key) return undefined;
-  return sort.direction === 'asc' ? 'ascending' : 'descending';
-}
-
-/** Where this column's header links: the asc → desc → unsorted cycle, other query params preserved. */
-function sortHref(key: string): string {
-  const url = new URL(Astro.url);
-  const value = formatSort(toggleSort(sort, key));
-  if (value) url.searchParams.set(sortParam, value);
-  else url.searchParams.delete(sortParam);
-  return url.pathname + url.search;
-}
----
-
-<div class="pui-table-wrap" {...rest}>
-  <table
-    class="pui-table"
-    style={`--pui-table-cols: ${cols}`}
-    aria-busy={loading ? 'true' : undefined}
-  >
-    <thead class="pui-table__head">
-      <tr class="pui-table__row" data-head>
-        {
-          columns.map((col) => (
-            <th
-              scope="col"
-              class="pui-table__cell"
-              data-head
-              data-align={col.align}
-              aria-sort={col.sortable ? ariaSort(col.key) : undefined}
-            >
-              {col.sortable ? (
-                <a class="pui-table__sort" href={sortHref(col.key)}>
-                  {col.label}
-                  <span
-                    class="pui-table__sort-arrow"
-                    data-sort={sortState(col.key)}
-                  >
-                    <Icon name={SORT_ICONS[sortState(col.key)]} size="sm" />
-                  </span>
-                </a>
-              ) : (
-                col.label
-              )}
-            </th>
-          ))
-        }
-      </tr>
-    </thead>
-    {
-      /* `inert`, not CSS: `pointer-events` only stops the mouse and leaves the stale rows tabbable. */
-    }
-    <tbody class="pui-table__body" inert={loading ? true : undefined}>
-      <slot />
-      {
-        /* Must be a real <tr>/<td> inside the body, or the HTML parser hoists it out — see AUDIT.md. */
-      }
-      {
-        loading && (
-          <tr class="pui-table__loading" aria-hidden="true">
-            <td>
-              <Spinner size="xl" />
-            </td>
-          </tr>
-        )
-      }
-    </tbody>
-  </table>
-</div>

package/components/navigation/breadcrumb/Breadcrumb.astro

@@ -1,36 +0,0 @@
----
-import './breadcrumb.css';
-
-interface Props {
-  items: { label: string; href?: string }[];
-}
-
-const { items, ...rest } = Astro.props;
----
-
-<nav aria-label="Breadcrumb" {...rest}>
-  <ol class="pui-breadcrumb">
-    {
-      items.map((item, index) => (
-        <>
-          {index > 0 && (
-            <li class="pui-breadcrumb__sep" aria-hidden="true">
-              /
-            </li>
-          )}
-          {index < items.length - 1 ? (
-            <li class="pui-breadcrumb__item">
-              <a href={item.href} class="pui-breadcrumb__link">
-                {item.label}
-              </a>
-            </li>
-          ) : (
-            <li class="pui-breadcrumb__item" aria-current="page">
-              {item.label}
-            </li>
-          )}
-        </>
-      ))
-    }
-  </ol>
-</nav>

package/components/navigation/navbar/Navbar.astro

@@ -1,62 +0,0 @@
----
-import './navbar.css';
-
-interface Props {
-  brandMark?: string;
-  brandName?: string;
-  brandHref?: string;
-  links?: { label: string; href: string; current?: boolean }[];
-  ariaLabel?: string;
-}
-
-const {
-  brandMark,
-  brandName,
-  brandHref = '/',
-  links,
-  ariaLabel = 'Main navigation',
-  ...rest
-} = Astro.props;
-
-const hasBrandSlot = Astro.slots.has('brand');
----
-
-<header
-  class="pui-navbar container"
-  data-container-size="xl"
-  aria-label={ariaLabel}
-  {...rest}
->
-  <nav class="pui-navbar__content container-content">
-    {
-      hasBrandSlot ? (
-        <slot name="brand" />
-      ) : (
-        <a href={brandHref} class="pui-navbar__brand">
-          {brandMark && <span class="pui-navbar__mark">{brandMark}</span>}
-          {brandName && <span class="pui-navbar__wordmark">{brandName}</span>}
-        </a>
-      )
-    }
-    {
-      links?.length && (
-        <ul class="pui-navbar__list">
-          {links.map((link) => (
-            <li>
-              <a
-                class="pui-navbar__link"
-                href={link.href}
-                aria-current={link.current ? 'page' : undefined}
-              >
-                {link.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      )
-    }
-    <div class="pui-navbar__actions">
-      <slot name="actions" />
-    </div>
-  </nav>
-</header>

package/components/navigation/sidebar/Sidebar.astro

@@ -1,132 +0,0 @@
----
-import './sidebar.css';
-import { generateId } from '../../../utils/a11y/id.js';
-import { deriveGroupKey } from '../../../utils/controllers/sidebar.js';
-import SidebarItemRender from './SidebarItemRender.astro';
-import type { SidebarItem } from './types.js';
-
-interface Props {
-  id?: string;
-  items: SidebarItem[];
-  activeHref?: string | null;
-  collapsed?: boolean;
-  drawerOpen?: boolean;
-  expandedGroups?: string[];
-  ariaLabel?: string;
-  drawerBreakpoint?: number;
-}
-
-const {
-  id,
-  items,
-  activeHref = null,
-  collapsed = false,
-  drawerOpen = false,
-  expandedGroups,
-  ariaLabel = 'Main navigation',
-  drawerBreakpoint = 768,
-  ...rest
-} = Astro.props;
-
-const sidebarId = id ?? generateId('pui-sidebar');
-
-// Pre-compute the initial expanded-groups set as a JSON string so the
-// mount script can hydrate `mountSidebar` with it.
-const initialExpanded = expandedGroups
-  ? JSON.stringify(expandedGroups)
-  : JSON.stringify(
-      // Fall back to defaultOpen=true groups derived from item shape.
-      collectDefaultOpenKeys(items),
-    );
-
-function collectDefaultOpenKeys(arr: SidebarItem[]): string[] {
-  const keys: string[] = [];
-  arr.forEach((it) => {
-    if (it.type === 'group') {
-      if (it.defaultOpen) keys.push(it.key ?? deriveGroupKey(it.label));
-      keys.push(...collectDefaultOpenKeys(it.items));
-    }
-  });
-  return keys;
-}
----
-
-<nav
-  id={sidebarId}
-  class="pui-sidebar"
-  data-pui-sidebar
-  data-state={collapsed ? 'collapsed' : 'expanded'}
-  data-drawer-state="closed"
-  aria-label={ariaLabel}
-  data-collapsed-initially={collapsed ? 'true' : undefined}
-  data-drawer-open-initially={drawerOpen ? 'true' : undefined}
-  data-active-href={activeHref ?? undefined}
-  data-drawer-breakpoint={String(drawerBreakpoint)}
-  data-expanded-groups={initialExpanded}
-  {...rest}
->
-  <div class="pui-sidebar__backdrop" data-sidebar-backdrop aria-hidden="true">
-  </div>
-  <div class="pui-sidebar__panel" data-sidebar-panel>
-    {
-      Astro.slots.has('brand') && (
-        <div class="pui-sidebar__brand">
-          <slot name="brand" />
-        </div>
-      )
-    }
-
-    <ul class="pui-sidebar__menu" data-sidebar-menu>
-      {items.map((item) => <SidebarItemRender item={item} />)}
-    </ul>
-
-    {
-      Astro.slots.has('footer') && (
-        <div class="pui-sidebar__footer">
-          <slot name="footer" />
-        </div>
-      )
-    }
-  </div>
-</nav>
-
-<script>
-  import { mountSidebar } from '@pienter/ui/utils/controllers/sidebar.js';
-
-  document.querySelectorAll<HTMLElement>('[data-pui-sidebar]').forEach((el) => {
-    const node = el as HTMLElement & {
-      _sidebar?: ReturnType<typeof mountSidebar>;
-    };
-    if (node._sidebar) return; // idempotent — guard against double-mounts
-
-    const collapsed = el.dataset.collapsedInitially === 'true';
-    const drawerOpenInitially = el.dataset.drawerOpenInitially === 'true';
-    const activeHref = el.dataset.activeHref ?? null;
-    const drawerBreakpoint = Number(el.dataset.drawerBreakpoint ?? '768');
-    let expandedGroups: string[];
-    try {
-      expandedGroups = JSON.parse(el.dataset.expandedGroups ?? '[]');
-    } catch {
-      expandedGroups = [];
-    }
-
-    const control = mountSidebar(el, {
-      collapsed,
-      drawerBreakpoint,
-      expandedGroups,
-      activeHref,
-      // Vue mirrors `onDrawerOpenChange` into a reactive prop whose
-      // watcher then calls openDrawer()/closeDrawer(). Astro has no
-      // reactivity, so the mount script wires the callback directly to
-      // the imperative API. Without this, backdrop click and Escape —
-      // both of which emit `onDrawerOpenChange(false)` from the
-      // controller — are no-ops in Astro.
-      onDrawerOpenChange: (open) => {
-        if (open) control.openDrawer();
-        else control.closeDrawer();
-      },
-    });
-    node._sidebar = control;
-    if (drawerOpenInitially) control.openDrawer();
-  });
-</script>

package/components/navigation/sidebar/SidebarItemRender.astro

@@ -1,83 +0,0 @@
----
-import Icon from '../../display/icon/Icon.astro';
-import type { IconName } from '../../../icons/index.js';
-import { generateId } from '../../../utils/a11y/id.js';
-import { deriveGroupKey } from '../../../utils/controllers/sidebar.js';
-import type { SidebarItem } from './types.js';
-
-interface Props {
-  item: SidebarItem;
-}
-
-const { item } = Astro.props;
-const itemsId = generateId('pui-sidebar-group');
-const resolvedKey =
-  item.type === 'group' ? (item.key ?? deriveGroupKey(item.label)) : '';
----
-
-{
-  item.type === 'link' && (
-    <li class="pui-sidebar__item">
-      <a
-        class="pui-sidebar__link"
-        data-sidebar-menu-item
-        data-sidebar-link
-        href={item.href}
-        data-disabled={item.disabled ? 'true' : undefined}
-        aria-disabled={item.disabled ? 'true' : undefined}
-        tabindex="-1"
-      >
-        {item.icon && <Icon name={item.icon as IconName} size="sm" />}
-        <span class="pui-sidebar__link-label">{item.label}</span>
-        {item.badge !== undefined && (
-          <span class="pui-sidebar__badge">{item.badge}</span>
-        )}
-      </a>
-    </li>
-  )
-}
-
-{
-  item.type === 'group' && (
-    <li
-      class="pui-sidebar__group"
-      data-sidebar-group
-      data-group-key={resolvedKey}
-      data-default-open={item.defaultOpen ? 'true' : undefined}
-      data-state="collapsed"
-    >
-      <button
-        type="button"
-        class="pui-sidebar__group-toggle"
-        data-sidebar-menu-item
-        data-sidebar-group-toggle
-        aria-expanded="false"
-        aria-controls={itemsId}
-        tabindex="-1"
-      >
-        {item.icon && <Icon name={item.icon as IconName} size="sm" />}
-        <span class="pui-sidebar__link-label">{item.label}</span>
-        <Icon name="chevron-down" size="sm" class="pui-sidebar__group-caret" />
-      </button>
-      <ul
-        id={itemsId}
-        class="pui-sidebar__group-items"
-        data-sidebar-group-items
-        role="group"
-        hidden
-      >
-        {item.items.map((child) => (
-          <Astro.self item={child} />
-        ))}
-      </ul>
-    </li>
-  )
-}
-
-{
-  item.type === 'section' && (
-    <li class="pui-sidebar__section" role="presentation">
-      <span class="pui-sidebar__section-label">{item.label}</span>
-    </li>
-  )
-}

package/components/navigation/sidebar/SidebarItemRender.vue

@@ -1,98 +0,0 @@
-<template>
-    <!-- link -->
-    <li v-if="item.type === 'link'" class="pui-sidebar__item">
-        <a
-            class="pui-sidebar__link"
-            data-sidebar-menu-item
-            data-sidebar-link
-            :href="item.href"
-            :data-disabled="item.disabled ? 'true' : undefined"
-            :aria-disabled="item.disabled ? 'true' : undefined"
-            tabindex="-1"
-        >
-            <Icon v-if="item.icon" :name="item.icon as IconName" size="sm" />
-            <span class="pui-sidebar__link-label">{{ item.label }}</span>
-            <span v-if="item.badge !== undefined" class="pui-sidebar__badge">{{
-                item.badge
-            }}</span>
-        </a>
-    </li>
-
-    <!-- group -->
-    <li
-        v-else-if="item.type === 'group'"
-        class="pui-sidebar__group"
-        data-sidebar-group
-        :data-group-key="resolvedKey"
-        :data-default-open="item.defaultOpen ? 'true' : undefined"
-        data-state="collapsed"
-    >
-        <button
-            type="button"
-            class="pui-sidebar__group-toggle"
-            data-sidebar-menu-item
-            data-sidebar-group-toggle
-            :aria-expanded="'false'"
-            :aria-controls="itemsId"
-            tabindex="-1"
-        >
-            <Icon v-if="item.icon" :name="item.icon as IconName" size="sm" />
-            <span class="pui-sidebar__link-label">{{ item.label }}</span>
-            <Icon
-                name="chevron-down"
-                size="sm"
-                class="pui-sidebar__group-caret"
-            />
-        </button>
-        <ul
-            :id="itemsId"
-            class="pui-sidebar__group-items"
-            data-sidebar-group-items
-            role="group"
-            hidden
-        >
-            <SidebarItemRender
-                v-for="(child, idx) in item.items"
-                :key="childKey(child, idx)"
-                :item="child"
-            />
-        </ul>
-    </li>
-
-    <!-- section -->
-    <li
-        v-else-if="item.type === 'section'"
-        class="pui-sidebar__section"
-        role="presentation"
-    >
-        <span class="pui-sidebar__section-label">{{ item.label }}</span>
-    </li>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../../display/icon/Icon.vue';
-import type { IconName } from '../../../icons/index.js';
-import { generateId } from '../../../utils/a11y/id.js';
-import { deriveGroupKey } from '../../../utils/controllers/sidebar.js';
-import type { SidebarItem } from './types.js';
-
-const props = defineProps<{ item: SidebarItem }>();
-
-// Stable id for the group's child list (linked from `aria-controls` on
-// the toggle). Generated once per render of this component instance.
-const itemsId = generateId('pui-sidebar-group');
-
-const resolvedKey = computed(() =>
-    props.item.type === 'group'
-        ? (props.item.key ?? deriveGroupKey(props.item.label))
-        : '',
-);
-
-function childKey(child: SidebarItem, idx: number): string {
-    if (child.type === 'link') return `link:${child.href}`;
-    if (child.type === 'group')
-        return `group:${child.key ?? deriveGroupKey(child.label)}`;
-    return `section:${child.label}:${idx}`;
-}
-</script>

package/components/overlay/alert-dialog/AlertDialog.astro

@@ -1,112 +0,0 @@
----
-import './alert-dialog.css';
-import { generateId } from '../../../utils/a11y/id.js';
-
-interface Props {
-  id?: string;
-  open?: boolean;
-  title: string;
-  description: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  destructive?: boolean;
-}
-
-const {
-  id,
-  open = false,
-  title,
-  description,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  destructive = false,
-  ...rest
-} = Astro.props;
-
-const dialogId = id ?? generateId('alertdialog');
-const titleId = `${dialogId}-title`;
-const descriptionId = `${dialogId}-desc`;
----
-
-<dialog
-  id={dialogId}
-  class="pui-alert-dialog"
-  data-state="closed"
-  data-pui-alert-dialog
-  data-open-initially={open ? 'true' : undefined}
-  aria-labelledby={titleId}
-  aria-describedby={descriptionId}
-  {...rest}
->
-  <div class="pui-alert-dialog__head">
-    <h2 id={titleId} class="pui-alert-dialog__title">{title}</h2>
-    <p id={descriptionId} class="pui-alert-dialog__description">
-      {description}
-    </p>
-  </div>
-  <div class="pui-alert-dialog__actions">
-    <button
-      type="button"
-      class="pui-btn"
-      data-size="md"
-      data-dialog-cancel
-      data-alert-dialog-action="cancel">{cancelLabel}</button
-    >
-    <button
-      type="button"
-      class="pui-btn"
-      data-variant={destructive ? 'danger' : 'primary'}
-      data-size="md"
-      data-alert-dialog-action="confirm">{confirmLabel}</button
-    >
-  </div>
-</dialog>
-
-<script>
-  import { mountDialog } from '@pienter/ui/utils/controllers/dialog.js';
-
-  // AlertDialog uses its own selector marker (`data-pui-alert-dialog`) so the
-  // mount block can hard-code the locked alertdialog config (role,
-  // persistent, initialFocus: 'cancel') without branching on data-attrs.
-  document
-    .querySelectorAll<HTMLDialogElement>('dialog[data-pui-alert-dialog]')
-    .forEach((el) => {
-      // Idempotent — guard against double-mounts (HMR, multiple <AlertDialog> imports).
-      if ((el as unknown as { _dialog?: unknown })._dialog) return;
-      const control = mountDialog(el, {
-        role: 'alertdialog',
-        persistent: true,
-        initialFocus: 'cancel',
-      });
-      (el as unknown as { _dialog: typeof control })._dialog = control;
-      if (el.dataset.openInitially === 'true') control.open();
-    });
-
-  // Event-delegated confirm/cancel button handlers. Dispatching custom
-  // `confirm` / `cancel` events on the dialog lets Astro consumers wire
-  // callbacks via `myDialog.addEventListener('confirm', ...)` without
-  // touching the controller. The controller's close() is invoked here so
-  // consumers don't have to repeat the boilerplate at every call-site.
-  document.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement | null;
-    if (!target) return;
-    const action = target.closest<HTMLElement>('[data-alert-dialog-action]');
-    if (!action) return;
-    const dialog = action.closest<HTMLDialogElement>(
-      'dialog[data-pui-alert-dialog]',
-    );
-    if (!dialog) return;
-    const actionName = action.getAttribute('data-alert-dialog-action');
-    const detail = { dialogId: dialog.id };
-    if (actionName === 'confirm') {
-      dialog.dispatchEvent(
-        new CustomEvent('confirm', { bubbles: true, detail }),
-      );
-    } else if (actionName === 'cancel') {
-      dialog.dispatchEvent(
-        new CustomEvent('cancel', { bubbles: true, detail }),
-      );
-    }
-    (dialog as unknown as { _dialog?: { close(): void } })._dialog?.close();
-  });
-</script>