@pienter/ui 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 ## Unreleased
 
+## 0.24.0 - 2026-09-16
+### Added
+
+- `RecordForm` and `RecordFields` gain two built-in field types, so a price
+  or a sale window no longer needs a `#field:name` slot repeating label,
+  hint, error and id wiring by hand. `{ type: 'number', min?, max?, step?,
+  placeholder?, steppers? }` renders `NumberField`; only finite numbers
+  display, and clearing the input writes `null` into the record rather than
+  `NaN`, since the payload is JSON. `{ type: 'date' | 'datetime-local' |
+  'time', min?, max?, step? }` renders `DateInput` with the ISO string shapes
+  it documents. Both honour `busy`, `disabled`, `required` and `readonly`
+  like every other built-in and can still be replaced through their slot.
+- `shopping-cart` icon, so a commerce module or webshop entry no longer has
+  to borrow `layers`.
+
+## 0.23.0 - 2026-09-16
+### Added
+
+- `SelectButton` (`@pienter/ui/components/SelectButton.vue`), a native
+  `<select>` dressed as a Button for chrome such as a header toolbar: `label`
+  (required, becomes the `aria-label` and is never rendered, as on
+  `IconButton`), `options`, `modelValue` with `update:modelValue`, `name`,
+  `disabled`, and Button's own `variant` and `size` unions and defaults, so
+  a `sm` `ghost` picker sits beside a `sm` `ghost` Button at the same height,
+  padding, colours and focus ring. The root is a `.pui-btn` mix and the
+  select lies invisibly over it, so the whole button opens the native picker
+  and keyboard and screen-reader behaviour stay the browser's. The form
+  `Select` is deliberately unchanged: it keeps no `size` prop and no hidden
+  label, so forms stay one consistent scaffold.
+
 ## 0.22.0 - 2026-09-16
 ### Added
 

package/CONVENTIONS.md

@@ -1305,6 +1305,7 @@ follow the shape of an existing one.
 | RadioGroup        | [`components/form/radio-group/AUDIT.md`](./components/form/radio-group/AUDIT.md)           |
 | Segmented         | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
 | Select            | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
+| SelectButton      | [`components/action/select-button/AUDIT.md`](./components/action/select-button/AUDIT.md)   |
 | Separator         | [`components/layout/separator/AUDIT.md`](./components/layout/separator/AUDIT.md)           |
 | Sheet             | [`components/overlay/sheet/AUDIT.md`](./components/overlay/sheet/AUDIT.md)                 |
 | Sidebar           | [`components/navigation/sidebar/AUDIT.md`](./components/navigation/sidebar/AUDIT.md)       |
@@ -1544,7 +1545,10 @@ and request state. Index's compact row spacing uses
 RecordForm emits detached JSON snapshots, preserving every supplied property.
 Consumers construct an explicit writable object from backend records. Typed path
 segments identify nested fields and array indices; fields display issues for
-their path and descendants. The form summary retains unmatched issues.
+their path and descendants. The form summary retains unmatched issues. Built-in
+field types map one to one onto the form primitives: text, email, textarea,
+select, checkbox, image, number (NumberField, cleared writes `null`) and
+date, datetime-local and time (DateInput, ISO strings).
 `--pui-record-form-columns` customizes the field grid, defaulting to one column.
 
 RecordForm's `fields` slot replaces its default RecordFields rendering for

package/components/action/select-button/SelectButton.vue

@@ -0,0 +1,71 @@
+<template>
+    <span
+        class="pui-btn pui-select-btn"
+        :data-variant="variant"
+        :data-size="size"
+    >
+        <span class="pui-select-btn__label" aria-hidden="true">
+            <span
+                v-for="opt in options"
+                :key="opt.value"
+                class="pui-select-btn__option"
+                :data-state="opt.value === modelValue ? 'selected' : undefined"
+                >{{ opt.label }}</span
+            >
+        </span>
+        <span class="pui-btn__icon" aria-hidden="true">
+            <Icon name="chevron-down" size="sm" />
+        </span>
+        <select
+            v-bind="$attrs"
+            class="pui-select-btn__control"
+            :name="name"
+            :disabled="disabled"
+            :value="modelValue"
+            :aria-label="label"
+            @change="onChange"
+        >
+            <option v-for="opt in options" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+            </option>
+        </select>
+    </span>
+</template>
+
+<script setup lang="ts">
+import Icon from '../../display/icon/Icon.vue';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+    defineProps<{
+        /** Accessible name for the control (required — the label is never rendered). */
+        label: string;
+        modelValue?: string;
+        options: { value: string; label: string }[];
+        name?: string;
+        disabled?: boolean;
+        variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+        size?: 'sm' | 'md';
+    }>(),
+    {
+        modelValue: undefined,
+        name: undefined,
+        disabled: false,
+        variant: 'secondary',
+        size: 'md',
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+
+function onChange(event: Event): void {
+    emit('update:modelValue', (event.target as HTMLSelectElement).value);
+}
+</script>
+
+<style>
+@import './select-button.css';
+</style>

package/components/action/select-button/select-button.css

@@ -0,0 +1,45 @@
+@layer components {
+    /* The block is a `.pui-btn` mix: button.css draws the box, this file only
+       lays the native select over it as the hit area and focus target. */
+    .pui-select-btn {
+        /* the select is transparent, so the wrapper wears its ring */
+        &:has(.pui-select-btn__control:focus-visible) {
+            outline: var(--outline-width) solid
+                var(--btn-ring, var(--border-clr-strong));
+            outline-offset: var(--outline-offset);
+        }
+
+        /* a span never matches :disabled; no pointer events keeps the shared hover and active rules off */
+        &:has(.pui-select-btn__control:disabled) {
+            opacity: var(--opacity-disabled);
+            pointer-events: none;
+        }
+
+        /* every option label stacked in one cell holds the widest width, as a native select does */
+        .pui-select-btn__label {
+            display: inline-grid;
+        }
+
+        .pui-select-btn__option {
+            grid-area: 1 / 1;
+            visibility: hidden;
+
+            &[data-state='selected'] {
+                visibility: visible;
+            }
+        }
+
+        .pui-select-btn__control {
+            position: absolute;
+            inset: 0;
+            inline-size: 100%;
+            block-size: 100%;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            appearance: none;
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+}

package/components/form/record-form/RecordFields.vue

@@ -8,6 +8,8 @@ import TextInput from '../text-input/TextInput.vue';
 import PuiTextarea from '../textarea/Textarea.vue';
 import PuiSelect from '../select/Select.vue';
 import Checkbox from '../checkbox/Checkbox.vue';
+import NumberField from '../number-field/NumberField.vue';
+import DateInput from '../date-input/DateInput.vue';
 import {
     readPath,
     updatePath,
@@ -46,6 +48,21 @@ function textFor(field: RecordFormField): string {
     const value = valueFor(field);
     return typeof value === 'string' ? value : '';
 }
+function numberFor(field: RecordFormField): number | undefined {
+    const value = valueFor(field);
+    return typeof value === 'number' && Number.isFinite(value)
+        ? value
+        : undefined;
+}
+function isDateType(
+    field: RecordFormField,
+): field is RecordFormField & { type: 'date' | 'datetime-local' | 'time' } {
+    return (
+        field.type === 'date' ||
+        field.type === 'datetime-local' ||
+        field.type === 'time'
+    );
+}
 function altFor(field: RecordFormField): string {
     const name = field.type === 'image' ? field.altName : undefined;
     if (!name) return '';
@@ -116,6 +133,41 @@ function update(field: RecordFormField, value: unknown): void {
                     :errors="errors"
                     @update:model-value="update(field, $event)"
                 />
+                <NumberField
+                    v-else-if="field.type === 'number'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="numberFor(field)"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="field.step"
+                    :steppers="field.steppers"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :readonly="readonly"
+                    :placeholder="field.placeholder"
+                    :errors="errors"
+                    @update:model-value="
+                        update(field, Number.isNaN($event) ? null : $event)
+                    "
+                />
+                <DateInput
+                    v-else-if="isDateType(field)"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :type="field.type"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="field.step"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :readonly="readonly"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
                 <template v-else-if="field.type === 'image'">
                     <div v-if="readonly" class="pui-field" data-readonly="true">
                         <span class="pui-field__label">{{ field.label }}</span>

package/components/form/record-form/types.ts

@@ -30,5 +30,21 @@ export type RecordFormField = RecordFieldBase &
               altName?: string;
           }
         | { type: 'checkbox' }
+        | {
+              type: 'number';
+              min?: number;
+              max?: number;
+              step?: number | string;
+              placeholder?: string;
+              /** NumberField's +/− buttons; on unless set to `false`. */
+              steppers?: boolean;
+          }
+        | {
+              type: 'date' | 'datetime-local' | 'time';
+              /** Bounds in the ISO shape of the value, as on DateInput. */
+              min?: string;
+              max?: string;
+              step?: number | string;
+          }
         | { type: 'custom' }
     );

package/icons/index.ts

@@ -43,6 +43,7 @@ import tool from './tool.js';
 import trash from './trash.js';
 import sidebarLeft from './sidebar-left.js';
 import sidebarRight from './sidebar-right.js';
+import shoppingCart from './shopping-cart.js';
 
 export const icons = {
     info: info,
@@ -90,6 +91,7 @@ export const icons = {
     trash: trash,
     'sidebar-left': sidebarLeft,
     'sidebar-right': sidebarRight,
+    'shopping-cart': shoppingCart,
 } as const;
 
 export type IconName = keyof typeof icons;

package/icons/shopping-cart.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "./styles/*": "./styles/*",
     "./components/Button.vue": "./components/action/button/Button.vue",
     "./components/IconButton.vue": "./components/action/button/IconButton.vue",
+    "./components/SelectButton.vue": "./components/action/select-button/SelectButton.vue",
     "./components/Toggle.vue": "./components/action/toggle/Toggle.vue",
     "./components/ToggleGroup.vue": "./components/action/toggle-group/ToggleGroup.vue",
     "./components/Avatar.vue": "./components/display/avatar/Avatar.vue",