@pienter/ui 0.2.0 → 0.5.0

package/README.md

@@ -1,20 +1,13 @@
 # @pienter/ui
 
-Shared Pienter UI package with framework-specific components, CSS, icons, and browser utilities.
+Shared Pienter UI package with Vue components, CSS, icons, and browser utilities.
 
-This package publishes raw source files. Consuming projects compile the Vue, Astro, TypeScript, and CSS files with their own toolchain.
+This package publishes raw source files. Consuming projects compile the Vue, TypeScript, and CSS files with their own toolchain.
 
 ## Install
 
 ```sh
-npm install @pienter/ui
-```
-
-Install the framework peer you use:
-
-```sh
-npm install vue
-npm install astro
+npm install @pienter/ui vue
 ```
 
 ## Usage
@@ -24,14 +17,6 @@ import Button from '@pienter/ui/components/Button.vue';
 import '@pienter/ui/styles';
 ```
 
-Astro components are available beside Vue components:
-
-```astro
----
-import Button from '@pienter/ui/components/Button.astro';
----
-```
-
 Components use explicit flat public entrypoints. Intentional shared types are
 available through module type entrypoints:
 

package/components/feedback/toast/toast.css

@@ -9,7 +9,7 @@
         display: flex;
         flex-direction: column;
         gap: var(--space-2xs);
-        z-index: 1000;
+        z-index: var(--layer-top);
         pointer-events: none;
         max-width: calc(100vw - var(--space-s) * 2);
     }

package/components/form/combobox/Combobox.vue

@@ -85,12 +85,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountPopover,
-    type PopoverControl,
-    type Placement,
-} from '../../../utils/controllers/popover.js';
+import { computed, ref, watch } from 'vue';
+import { usePopover, type Placement } from '../../../composables/usePopover.js';
 import { generateId } from '../../../utils/a11y/id.js';
 
 defineOptions({ inheritAttrs: false });
@@ -218,7 +214,25 @@ const activeIndex = ref<number | null>(null);
 // label of the currently-selected option.
 const isTyping = ref(false);
 
-let control: PopoverControl | null = null;
+// Anchor the listbox to the input itself so positioning tracks the
+// input's box (the input is the visual reference, not the wrapper).
+// `modal: false` → `popover="auto"` so the browser handles
+// outside-click / focus-out / Escape light-dismiss. The listbox
+// closes naturally when the user tabs or clicks away.
+const control = usePopover(listboxRef, {
+    anchor: inputRef,
+    placement: () => props.placement,
+    offset: () => props.offset,
+    onOpen: () => {
+        isOpen.value = true;
+        emit('open-change', true);
+    },
+    onClose: () => {
+        isOpen.value = false;
+        activeIndex.value = null;
+        emit('open-change', false);
+    },
+});
 
 const hasErrors = computed(() => props.errors.length > 0);
 
@@ -271,12 +285,10 @@ const activeOptionDomId = computed(() => {
 
 function open(): void {
     if (props.disabled) return;
-    if (!control) return;
     control.show();
 }
 
 function close(): void {
-    if (!control) return;
     control.hide();
 }
 
@@ -463,30 +475,6 @@ function onKeydown(event: KeyboardEvent): void {
     }
 }
 
-onMounted(() => {
-    if (!listboxRef.value || !inputRef.value) return;
-    control = mountPopover(listboxRef.value, {
-        // Anchor the listbox to the input itself so positioning
-        // tracks the input's box (the input is the visual reference,
-        // not the wrapper).
-        anchor: inputRef.value,
-        placement: props.placement,
-        offset: props.offset,
-        // `modal: false` → `popover="auto"` so the browser handles
-        // outside-click / focus-out / Escape light-dismiss. The
-        // listbox closes naturally when the user tabs or clicks away.
-        onOpen: () => {
-            isOpen.value = true;
-            emit('open-change', true);
-        },
-        onClose: () => {
-            isOpen.value = false;
-            activeIndex.value = null;
-            emit('open-change', false);
-        },
-    });
-});
-
 // Watch model changes from the consumer and reset typing state so
 // the input mirrors the new selection's label cleanly.
 watch(
@@ -496,11 +484,6 @@ watch(
         query.value = '';
     },
 );
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
-});
 </script>
 
 <style>

package/components/form/combobox/combobox.css

@@ -8,7 +8,7 @@
    * disabled state match TextInput / Textarea exactly.
    *
    * The listbox is a separate element (a `<ul popover="auto">`) the
-   * controller positions via `mountPopover`. CSS resets the
+   * composable positions via `usePopover`. CSS resets the
    * user-agent popover defaults (`margin: 0; border: 0; inset: auto`)
    * and supplies the surface look — the Popover API places the
    * element in the top layer; inline `left`/`top` from the controller

package/components/form/form/Form.vue

@@ -131,8 +131,7 @@ function handleSubmit(): void {
 
     // Validation passed. Clear any lingering client-side errors from a
     // prior failed submit so child form-primitives don't keep displaying
-    // them while the consumer's async submit runs (mirrors the Astro
-    // controller's `clearAllErrors(el)` between client-pass and onSubmit).
+    // them while the consumer's async submit runs.
     clientFieldErrors.value = {};
 
     // Surface FormData to the consumer's submit handler; consumer manages

package/components/form/label/label.css

@@ -5,7 +5,7 @@
  * use cases where the form-primitive components' built-in label is not
  * suitable (e.g., labels associated with custom groups or with multiple
  * controls). Importing this file re-imports the scaffold so a
- * standalone Label dragged into an Astro page that does not also use
+ * standalone Label on a page that does not also use
  * TextInput / Textarea / Select still gets the typography rules.
  */
 @import '../text-input/text-input.css';

package/components/form/number-field/NumberField.vue

@@ -143,7 +143,7 @@ function handleStep(direction: 'decrement' | 'increment'): void {
         input.stepDown();
     }
     // Dispatch native input/change events so consumer-attached DOM
-    // listeners observe the same behavior as the Astro controller path.
+    // listeners observe stepper clicks the same as typed edits.
     input.dispatchEvent(new Event('input', { bubbles: true }));
     input.dispatchEvent(new Event('change', { bubbles: true }));
     emit('update:modelValue', input.valueAsNumber);

package/components/form/number-field/number-field.css

@@ -90,7 +90,7 @@
         /* Lift the focused button above its neighbours so the outline
      * isn't clipped by the adjacent button's edge. */
         position: relative;
-        z-index: 1;
+        z-index: var(--layer-1);
     }
 
     .pui-number-field__step:disabled {

package/components/form/radio-group/RadioGroup.vue

@@ -8,11 +8,8 @@
         :aria-describedby="describedBy"
         :aria-invalid="hasErrors ? 'true' : undefined"
     >
-        <!-- aria-invalid lives on the <fieldset> (group-level signal) AND, when the
-       Astro mountForm controller is wired, on the first radio. The redundancy
-       is intentional — see ./AUDIT.md "ARIA
-       expectations" for the rationale. Do NOT remove either binding without
-       coordinating with the form controller. -->
+        <!-- aria-invalid lives on the <fieldset>: a group-level signal — see
+       ./AUDIT.md "ARIA expectations" for the rationale. -->
         <legend class="pui-field__label">{{ label }}</legend>
         <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
         <div class="pui-radio-group" :data-orientation="orientation">

package/components/form/slider/slider.css

@@ -5,9 +5,8 @@
    * horizontal track that hosts a faint background rail, a coloured
    * fill segment representing the current value (or range), and one
    * or two `<button role="slider">` thumbs. Each thumb is absolutely
-   * positioned via `inset-inline-start: <pct>%`; the controller
-   * (Astro) and Vue's reactive computed both write the same
-   * percentage so the visual is identical across both tiers.
+   * positioned via `inset-inline-start: <pct>%`, written by Vue's
+   * reactive computed.
    *
    * Layout rationale: rejected the native `<input type="range">`
    * baseline for two reasons — (a) cross-browser thumb / track

package/components/form/tags-input/tags-input.css

@@ -6,8 +6,7 @@
    * row that hosts existing tag pills followed by a text input where
    * the user types the next tag. The whole row reads as one
    * integrated control: clicking anywhere lands focus on the entry
-   * input (handled by Vue / via the click handler in
-   * `mountTagsInput`).
+   * input (a click handler in `TagsInput.vue`).
    *
    * Layout rationale: rejected the "fixed-height pills + horizontally-
    * scrolling row" alternative because vertical wrapping reads better

package/components/form/textarea/textarea.css

@@ -13,7 +13,7 @@
 
     /* Auto-resize variant — opt-in via the `autoResize` prop, which sets
    * `style="field-sizing: content"` inline on the <textarea>. The
-   * inline style is the only documented Vue/Astro path, so the
+   * inline style is the only documented path, so the
    * selector matches it directly. Browsers without `field-sizing`
    * support fall back gracefully to the default fixed-rows/min-height
    * box. */

package/components/layout/accordion/Accordion.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+import { ref } from 'vue';
+import { useDisclosure } from '../../../composables/useDisclosure.js';
 
 const props = withDefaults(
     defineProps<{
@@ -25,32 +25,11 @@ const props = withDefaults(
 );
 
 const rootRef = ref<HTMLDivElement | null>(null);
-let teardown: (() => void) | null = null;
 
-function mount(): void {
-    if (!rootRef.value) return;
-    teardown = mountDisclosure(rootRef.value, {
-        singleOpen: props.singleOpen,
-    });
-}
-
-onMounted(mount);
-
-// `singleOpen` is read once at mount time. If a consumer toggles it
-// at runtime we re-mount so the new policy takes effect immediately.
-// This is rare (the prop is typically static per surface) but cheap.
-watch(
-    () => props.singleOpen,
-    () => {
-        teardown?.();
-        teardown = null;
-        mount();
-    },
-);
-
-onBeforeUnmount(() => {
-    teardown?.();
-    teardown = null;
+// `singleOpen` is read per toggle, so a runtime change takes effect on
+// the next interaction without re-wiring.
+useDisclosure(rootRef, {
+    singleOpen: () => props.singleOpen,
 });
 </script>
 

package/components/layout/collapsible/Collapsible.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+import { ref } from 'vue';
+import { useDisclosure } from '../../../composables/useDisclosure.js';
 import Icon from '../../display/icon/Icon.vue';
 
 withDefaults(
@@ -51,24 +51,14 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLDetailsElement | null>(null);
-let teardown: (() => void) | null = null;
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    // Collapsible is single-disclosure: no `singleOpen` coordination
-    // needed. The controller's only role here is to provide the
-    // standard mount/teardown lifecycle and a normalized callback —
-    // the native `<details>` element does the open/close work itself.
-    teardown = mountDisclosure(rootRef.value, {
-        onToggle: (_target, open) => {
-            emit('update:open', open);
-        },
-    });
-});
-
-onBeforeUnmount(() => {
-    teardown?.();
-    teardown = null;
+// Collapsible is single-disclosure: no `singleOpen` coordination
+// needed. The composable's only role here is a normalized callback —
+// the native `<details>` element does the open/close work itself.
+useDisclosure(rootRef, {
+    onToggle: (_target, open) => {
+        emit('update:open', open);
+    },
 });
 </script>
 

package/components/layout/table/table.css

@@ -93,8 +93,8 @@
 
     /* ===== sort affordance ===== */
 
-    /* One rule for both tiers — a <button> in Vue, an <a> in Astro — so the resets below
-       deliberately cover both elements. */
+    /* Rendered as a <button>; the resets below also cover <a> so a
+       consumer-supplied link header behaves identically. */
     .pui-table__sort {
         display: inline-flex;
         align-items: center;
@@ -167,7 +167,7 @@
     .pui-table__loading {
         position: absolute;
         inset: 0;
-        z-index: 1;
+        z-index: var(--layer-1);
 
         /* the tint gives the blur a surface to sit in; without it the frosting
            reads as a smudge rather than a pane */

package/components/navigation/pagination/Pagination.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav aria-label="Pagination">
+    <nav class="pui-pagination-nav" aria-label="Pagination">
         <ul class="pui-pagination">
             <li>
                 <button

package/components/navigation/pagination/PaginationFooter.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="pui-pagination-footer">
+        <div v-if="$slots.summary" class="pui-pagination-footer__summary">
+            <slot name="summary" />
+        </div>
+        <div class="pui-pagination-footer__control">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Pure markup with slots — no props, no state, no ARIA of its own. The
+// landmark lives on the `<nav>` that `Pagination` renders inside the default
+// slot; a second landmark here would be noise.
+//
+// A plain `<div>`, not `<footer>`: dropped at body level a `<footer>` becomes
+// the `contentinfo` landmark, which this is not.
+</script>
+
+<style>
+@import './pagination.css';
+</style>

package/components/navigation/pagination/pagination.css

@@ -1,53 +1,152 @@
+/* `.pui-pagination` is the bare control, `.pui-pagination-footer` the bar that
+   seats it opposite a result summary — one visual family, one file. Rationale
+   for the less obvious rules lives in AUDIT.md. */
 @layer components {
+    /* ===== bare control ===== */
+
     .pui-pagination {
+        /* The STRIP owns the control height, not the cells: `box-sizing` is
+           border-box, so this matches a `sm` Button's 30px outer box instead of
+           standing 2px taller once the strip's own border is added. Cells then
+           stretch to fill whatever is left inside it.
+           No `overflow: hidden` to clip the cell corners — it clips the focus
+           ring too, so the end cells carry the radius instead. */
         display: inline-flex;
-        align-items: center;
-        gap: var(--space-3xs);
-        list-style: none;
-        padding: 0;
+        align-items: stretch;
+        height: var(--control-height-sm);
         margin: 0;
+        padding: 0;
+        list-style: none;
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-sm);
+        background: var(--bg-clr-surface);
+
+        & > li {
+            display: flex;
+        }
+
+        & > li + li :is(.pui-pagination__item, .pui-pagination__ellipsis) {
+            border-inline-start: var(--stroke-sm) solid var(--border-clr-base);
+        }
+
+        /* First and last are always the prev / next buttons. */
+        & > li:first-child .pui-pagination__item {
+            border-start-start-radius: var(--radius-sm);
+            border-end-start-radius: var(--radius-sm);
+        }
+
+        & > li:last-child .pui-pagination__item {
+            border-start-end-radius: var(--radius-sm);
+            border-end-end-radius: var(--radius-sm);
+        }
     }
 
     .pui-pagination__item {
+        /* box → typography → colour → transition */
+        display: inline-grid;
+        place-items: center;
+        min-width: var(--control-height-sm);
+        height: 100%;
+        padding-inline: var(--space-2xs);
         appearance: none;
-        border: var(--stroke-sm) solid var(--border-clr-base);
-        background: var(--bg-clr-surface);
+        border: 0;
+        background: transparent;
         font: inherit;
         font-size: var(--step--1);
-        font-weight: var(--fw-semibold);
-        min-width: 2.2rem;
-        height: 2.2rem;
-        display: inline-grid;
-        place-items: center;
-        cursor: pointer;
-        border-radius: var(--radius-sm);
-        text-decoration: none;
+        font-weight: var(--fw-control);
+        font-variant-numeric: tabular-nums;
         color: var(--text-clr-base);
+        text-decoration: none;
+        cursor: pointer;
+        transition: background-color var(--duration-base) var(--ease-base);
+
+        &:hover:not(:disabled, [aria-disabled='true']) {
+            background: var(--bg-clr-surface-2);
+        }
+
+        &:focus-visible {
+            /* Inset and lifted, or the neighbouring cell overdraws the ring. */
+            position: relative;
+            z-index: 1;
+            outline: var(--outline-width) solid var(--outline-clr-base);
+            outline-offset: calc(var(--outline-offset) * -1);
+        }
+
+        /* Never `--text-clr-inverse` here: it is near-white in both themes and
+           only pairs with a fill or an inverted bar. See AUDIT.md. */
+        &[aria-current='page'] {
+            background: var(--bg-clr-selected);
+            color: var(--text-clr-base);
+        }
+
+        &:disabled,
+        &[aria-disabled='true'] {
+            opacity: var(--opacity-disabled);
+            cursor: not-allowed;
+        }
     }
 
-    .pui-pagination__item:hover {
-        background: var(--bg-clr-surface-2);
+    .pui-pagination__ellipsis {
+        display: inline-grid;
+        place-items: center;
+        min-width: var(--control-height-sm);
+        height: 100%;
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
     }
 
-    .pui-pagination__item:focus-visible {
-        outline: 3px solid var(--outline-clr-base);
-        outline-offset: 2px;
+    /* ===== narrow reduction ===== */
+
+    /* The `<nav>` is the query container, not the `<ul>` — the `<ul>` is
+       inline-flex, so `inline-size` containment would collapse it. */
+    .pui-pagination-nav {
+        container-type: inline-size;
     }
 
-    .pui-pagination__item[aria-current='page'] {
-        background: var(--bg-clr-dark);
-        color: var(--text-clr-inverse);
-        border-color: var(--border-clr-strong);
+    /* Keep the arrows and the current page, drop the rest of the run. */
+    @container (max-width: 18rem) {
+        .pui-pagination
+            > li:not(:first-child, :last-child, :has(> [aria-current='page'])) {
+            display: none;
+        }
     }
 
-    .pui-pagination__item:disabled,
-    .pui-pagination__item[aria-disabled='true'] {
-        opacity: 0.4;
-        cursor: not-allowed;
+    /* ===== footer bar ===== */
+
+    .pui-pagination-footer {
+        container-type: inline-size;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-xs) var(--space-s);
+        padding: var(--space-xs) var(--space-s);
+        border-block-start: var(--stroke-sm) solid var(--border-clr-base);
+        background: var(--bg-clr-surface);
     }
 
-    .pui-pagination__ellipsis {
+    .pui-pagination-footer__summary {
+        font-size: var(--step--1);
         color: var(--text-clr-muted);
-        padding-inline: var(--space-2xs);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .pui-pagination-footer__control {
+        /* Block, so the `<nav>` inside inherits a width to query; `flex: 1`
+           holds it at the trailing edge with or without a summary. */
+        flex: 1;
+        text-align: end;
+    }
+
+    @container (max-width: 30rem) {
+        .pui-pagination-footer__summary,
+        .pui-pagination-footer__control {
+            flex: 1 0 100%;
+            text-align: center;
+        }
+
+        /* Stacked, the summary reads as a caption under the control. */
+        .pui-pagination-footer__summary {
+            order: 1;
+        }
     }
 }