@pienter/ui 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 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)       |

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.22.0",
+  "version": "0.23.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",