@pienter/ui 0.3.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 */