orio-ui 1.28.0 → 1.29.0

package/README.md

@@ -18,12 +18,12 @@ orio-ui's shipped, version-pinned agent docs. Details in
 
 ## Features
 
-✨ **58 Components** - Beautiful, accessible components ready to use
+✨ **59 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
 🎯 **TypeScript** - Fully typed for great developer experience
-🧪 **Tested** - 36 test suites for reliability
+🧪 **Tested** - 38 test suites for reliability
 📱 **Responsive** - Mobile-first design approach
 ♿ **Accessible** - ARIA-compliant components
 🌐 **i18n** - Built-in vue-i18n support with English defaults
@@ -77,7 +77,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (58)
+### Components (59)
 
 #### Form Controls
 
@@ -269,7 +269,7 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 58 Vue components
+│   │   ├── components/   # 59 Vue components
 │   │   ├── composables/  # 15 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry

package/dist/agents/ROUTING.md

@@ -82,6 +82,7 @@ installed version.
 - `NumberInput/Horizontal.vue` — number input variant with minus/plus buttons flanking the field and press-and-hold repeat. **Read USAGE.md first.**
 - `NumberInput/Vertical.vue` — number input variant with chevron up/down stacked on the right and press-and-hold repeat. **Read USAGE.md first.**
 - `RadioButton.vue` — single radio option wrapping ControlElement; group by sharing the same v-model. **Read USAGE.md first.**
+- `SegmentedInput.vue` — fixed-length code input split into auto-advancing per-character segments for OTP / PIN entry. **Read USAGE.md first.**
 - `Selector.vue` — button-triggered listbox in a popover; supports single and multi-select with string or object options. **Read USAGE.md first.**
 - `SwitchButton.vue` — boolean on/off pill button (not a sliding switch) wrapping ControlElement; click/Enter/Space toggle. **Read USAGE.md first.**
 - `TaggableSelector.vue` — multi-select Selector that renders chosen options as tag chips in the trigger. **Read USAGE.md first.**
@@ -116,7 +117,7 @@ installed version.
 
 ### Composables
 - `useApi` — thin typed wrapper around ofetch's `$fetch` for GET/POST/PUT/DELETE/PATCH requests.
-- `useControlSize` — provide/inject `ControlSize` (sm/md/lg/xl) and read a CSS-var token bag for the active size. **Read USAGE.md first.**
+- `useControlSize` — provide/inject `ControlSize` (xs/sm/md/lg/xl) and read a CSS-var token bag for the active size. **Read USAGE.md first.**
 - `useDecimalFormatter` — parse numeric strings (US or EU separator) and format via Intl.NumberFormat with locale defaults. **Read USAGE.md first.**
 - `useFilter` — named filter group with v-bind bags, $-helpers, $active chips, $clearAll, optional URL sync via lazy import. **Read USAGE.md first.**
 - `useFuzzySearch` — typed Fuse.js wrapper that returns a computed list of matched items (strings or objects).

package/dist/agents/component-finder.md

@@ -55,6 +55,7 @@ not edit by hand.
 - **number input horizontal, minus-plus stepper, quantity stepper** → `NumberInput/Horizontal.vue` (read USAGE.md first)
 - **number input vertical, chevron stepper, stacked-arrow numeric input** → `NumberInput/Vertical.vue` (read USAGE.md first)
 - **radio, radio button, single-choice from group** → `RadioButton.vue` (read USAGE.md first)
+- **OTP input, one-time password, verification code, PIN code, segmented code boxes** → `SegmentedInput.vue` (read USAGE.md first)
 - **select, dropdown, combobox, listbox picker, single or multi-select** → `Selector.vue` (read USAGE.md first)
 - **toggle, on/off switch, pill toggle, boolean button** → `SwitchButton.vue` (read USAGE.md first)
 - **multi-select with tag chips, taggable selector, chip picker** → `TaggableSelector.vue` (read USAGE.md first)

package/dist/agents/component-worker.md

@@ -50,6 +50,7 @@ not edit by hand.
 - **number input horizontal, minus-plus stepper, quantity stepper** → `NumberInput/Horizontal.vue` (read USAGE.md first)
 - **number input vertical, chevron stepper, stacked-arrow numeric input** → `NumberInput/Vertical.vue` (read USAGE.md first)
 - **radio, radio button, single-choice from group** → `RadioButton.vue` (read USAGE.md first)
+- **OTP input, one-time password, verification code, PIN code, segmented code boxes** → `SegmentedInput.vue` (read USAGE.md first)
 - **select, dropdown, combobox, listbox picker, single or multi-select** → `Selector.vue` (read USAGE.md first)
 - **toggle, on/off switch, pill toggle, boolean button** → `SwitchButton.vue` (read USAGE.md first)
 - **multi-select with tag chips, taggable selector, chip picker** → `TaggableSelector.vue` (read USAGE.md first)

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.28.0",
+  "version": "1.29.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Button.USAGE.md

@@ -27,6 +27,9 @@ often used standalone.
 - **Icon-only mode is auto-detected.** When an icon is present and the
   default slot is empty, `.icon-only` is applied → `aspect-ratio: 1`,
   `line-height: 0`. No need to pass a prop.
+- **`pill` prop**: `false` by default. When `true`, swaps the button's
+  `border-radius` to `var(--border-radius-pill)` (fully rounded),
+  overriding the size-driven `--control-radius`. No effect when omitted.
 - **`disabled` blocks `click` and `mousedown` emits.** `mouseup` and
   `mouseleave` always fire (so press-and-hold callers can release
   state).
@@ -67,6 +70,8 @@ often used standalone.
   </orio-button>
 
   <orio-button variant="subdued" icon="close" aria-label="Close" />
+
+  <orio-button pill icon="plus" aria-label="Add" />
 </template>
 ```
 

package/dist/runtime/components/Button.d.vue.ts

@@ -3,6 +3,7 @@ interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;
+    pill?: boolean;
 }
 declare var __VLS_13: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/Button.vue

@@ -4,6 +4,7 @@ const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
   icon: { type: String, required: false },
   loading: { type: Boolean, required: false },
+  pill: { type: Boolean, required: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
@@ -47,7 +48,7 @@ function onMouseleave(event) {
   <orio-control-element v-slot="{ control }" v-bind="props">
     <button
       v-bind="{ ...$attrs, ...control }"
-      :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
+      :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly, pill }]"
       @click="click"
       @mousedown="onMousedown"
       @mouseup="onMouseup"
@@ -85,6 +86,9 @@ button.icon-only {
   line-height: 0;
   aspect-ratio: 1;
 }
+button.pill {
+  border-radius: var(--border-radius-pill);
+}
 button:disabled, button:disabled:hover {
   background-color: var(--color-accent-soft-base);
   color: var(--color-muted);

package/dist/runtime/components/Button.vue.d.ts

@@ -3,6 +3,7 @@ interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;
+    pill?: boolean;
 }
 declare var __VLS_13: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ControlElement.d.vue.ts

@@ -1,5 +1,5 @@
 export type ControlLayout = "vertical" | "horizontal";
-export type ControlSize = "sm" | "md" | "lg" | "xl";
+export type ControlSize = "xs" | "sm" | "md" | "lg" | "xl";
 /**
  * A11y + form attrs that flow from the caller through ControlElement to the
  * actual interactive element via the `control` slot prop. Never rendered on

package/dist/runtime/components/ControlElement.vue.d.ts

@@ -1,5 +1,5 @@
 export type ControlLayout = "vertical" | "horizontal";
-export type ControlSize = "sm" | "md" | "lg" | "xl";
+export type ControlSize = "xs" | "sm" | "md" | "lg" | "xl";
 /**
  * A11y + form attrs that flow from the caller through ControlElement to the
  * actual interactive element via the `control` slot prop. Never rendered on

package/dist/runtime/components/Input.USAGE.md

@@ -26,6 +26,10 @@ invariants: true
   on the underlying `<input>`.
 - **v-model is `string`** (default `""`). For numeric input use
   `<orio-number-input>` instead.
+- **`defineExpose({ input, focused })`** — `input` is the template ref to the
+  native `<input>`; `focused` is the **writable** `Ref<boolean>` from
+  `useFocus`. Reading reflects focus state; assigning `true`/`false` focuses or
+  blurs the element. Drive programmatic focus via `focused`, not `input.focus()`.
 
 ## Gotchas
 

package/dist/runtime/components/Input.d.vue.ts

@@ -14,7 +14,10 @@ type __VLS_Slots = {} & {
 } & {
     after?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>>;
+    focused: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;

package/dist/runtime/components/Input.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useTemplateRef } from "vue";
+import { useFocus } from "@vueuse/core";
 const props = defineProps({
   layout: { type: String, required: false, default: "vertical" },
   appearance: { type: String, required: false },
@@ -15,7 +17,10 @@ const props = defineProps({
   name: { type: String, required: false },
   ariaLabel: { type: String, required: false }
 });
+const input = useTemplateRef("input");
+const { focused } = useFocus(input);
 const modelValue = defineModel({ type: String, ...{ default: "" } });
+defineExpose({ input, focused });
 </script>
 
 <template>
@@ -27,6 +32,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
   >
     <slot name="before" />
     <input
+      ref="input"
       v-model="modelValue"
       type="text"
       v-bind="{ ...$attrs, ...control }"

package/dist/runtime/components/Input.vue.d.ts

@@ -14,7 +14,10 @@ type __VLS_Slots = {} & {
 } & {
     after?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>>;
+    focused: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;

package/dist/runtime/components/NumberInput/Horizontal.vue

@@ -31,6 +31,7 @@ const { pressAndHold, stop } = usePressAndHold();
         appearance="minimal"
         icon="minus"
         variant="subdued"
+        size="sm"
         :disabled="isAtMin || disabled"
         @mousedown="pressAndHold(decrease)"
         @mouseup="stop"
@@ -40,6 +41,7 @@ const { pressAndHold, stop } = usePressAndHold();
         appearance="minimal"
         icon="plus"
         variant="subdued"
+        size="sm"
         :disabled="isAtMax || disabled"
         @mousedown="pressAndHold(increase)"
         @mouseup="stop"
@@ -65,4 +67,7 @@ const { pressAndHold, stop } = usePressAndHold();
   right: 0;
   text-align: center;
 }
+.horizontal :deep(.control-group) {
+  z-index: 2;
+}
 </style>

package/dist/runtime/components/NumberInput/USAGE.md

@@ -40,6 +40,10 @@ invariants: true
   prop bag.
 - **`$attrs` is spread before `control`** on the inner `<input>`, same as
   Input.
+- **`defineExpose({ input, focused })`** — `input` is the template ref to the
+  native `<input>`; `focused` is the **writable** `Ref<boolean>` from
+  `useFocus`. Reading reflects focus state; assigning `true`/`false` focuses or
+  blurs the element. Drive programmatic focus via `focused`, not `input.focus()`.
 
 ## Gotchas
 

package/dist/runtime/components/NumberInput/Vertical.vue

@@ -31,6 +31,8 @@ const { pressAndHold, stop } = usePressAndHold();
         appearance="minimal"
         icon="chevron-up"
         variant="subdued"
+        size="xs"
+        pill
         :disabled="isAtMax || disabled"
         @mousedown="pressAndHold(increase)"
         @mouseup="stop"
@@ -40,6 +42,8 @@ const { pressAndHold, stop } = usePressAndHold();
         appearance="minimal"
         icon="chevron-down"
         variant="subdued"
+        size="xs"
+        pill
         :disabled="isAtMin || disabled"
         @mousedown="pressAndHold(decrease)"
         @mouseup="stop"
@@ -52,10 +56,14 @@ const { pressAndHold, stop } = usePressAndHold();
 <style scoped>
 .vertical :deep(.controls) {
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
+  gap: 0;
   right: 3px;
   left: auto;
 }
+.vertical :deep(.controls button) {
+  padding-block: 0;
+}
 .vertical :deep(.slot-wrapper) {
   line-height: 0;
 }

package/dist/runtime/components/NumberInput/index.d.vue.ts

@@ -11,7 +11,7 @@ type __VLS_Props = NumberInputProps;
 declare function increase(): void;
 declare function decrease(): void;
 type __VLS_ModelProps = {
-    modelValue?: number;
+    modelValue?: number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_8: {
@@ -23,10 +23,13 @@ declare var __VLS_8: {
 type __VLS_Slots = {} & {
     controls?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>>;
+    focused: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     layout: InputLayout;
     step: number;

package/dist/runtime/components/NumberInput/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, toRefs } from "vue";
+import { computed, toRefs, useTemplateRef } from "vue";
+import { useFocus } from "@vueuse/core";
 const props = defineProps({
   layout: { type: String, required: false, default: "vertical" },
   min: { type: Number, required: false, default: void 0 },
@@ -21,9 +22,11 @@ const props = defineProps({
   ariaLabel: { type: String, required: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
-const modelValue = defineModel({ type: Number, ...{ default: 0 } });
+const modelValue = defineModel({ type: [Number, null], ...{ default: 0 } });
+const input = useTemplateRef("input");
+const { focused } = useFocus(input);
 function setValidatedValue(value) {
-  let finalValue = value;
+  let finalValue = value ?? 0;
   if (Number.isFinite(max.value) && finalValue > max.value) {
     finalValue = max.value;
   }
@@ -37,16 +40,16 @@ function onBlur() {
   setValidatedValue(modelValue.value);
 }
 function increase() {
-  setValidatedValue(modelValue.value + step.value);
+  setValidatedValue((modelValue.value ?? 0) + step.value);
 }
 function decrease() {
-  setValidatedValue(modelValue.value - step.value);
+  setValidatedValue((modelValue.value ?? 0) - step.value);
 }
 const isAtMax = computed(
-  () => Number.isFinite(max.value) && modelValue.value >= max.value
+  () => Number.isFinite(max.value) && (modelValue.value ?? 0) >= max.value
 );
 const isAtMin = computed(
-  () => Number.isFinite(min.value) && modelValue.value <= min.value
+  () => Number.isFinite(min.value) && (modelValue.value ?? 0) <= min.value
 );
 const controlProps = computed(() => {
   const {
@@ -64,6 +67,7 @@ const slotExpose = computed(() => ({
   isAtMax: isAtMax.value,
   isAtMin: isAtMin.value
 }));
+defineExpose({ input, focused });
 </script>
 
 <template>
@@ -76,6 +80,7 @@ const slotExpose = computed(() => ({
     <div class="wrapper">
       <input
         v-bind="{ ...$attrs, ...control }"
+        ref="input"
         v-model="modelValue"
         type="number"
         class="number-input"

package/dist/runtime/components/NumberInput/index.vue.d.ts

@@ -11,7 +11,7 @@ type __VLS_Props = NumberInputProps;
 declare function increase(): void;
 declare function decrease(): void;
 type __VLS_ModelProps = {
-    modelValue?: number;
+    modelValue?: number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_8: {
@@ -23,10 +23,13 @@ declare var __VLS_8: {
 type __VLS_Slots = {} & {
     controls?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>>;
+    focused: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     layout: InputLayout;
     step: number;

package/dist/runtime/components/SegmentedInput.USAGE.md

@@ -0,0 +1,67 @@
+---
+kind: component
+category: Form inputs
+purpose: OTP input, one-time password, verification code, PIN code, segmented code boxes
+short: fixed-length code input split into auto-advancing per-character segments for OTP / PIN entry
+invariants: true
+---
+
+# SegmentedInput — agent-only invariants
+
+`<orio-segmented-input>` renders `segments` × `<orio-input>` boxes and joins
+them into a single v-model string. Built for OTP / verification-code entry.
+
+## Invariants
+
+- **Does NOT extend `ControlProps`** — unlike other form inputs there is no
+  `label`, `layout`, `disabled`, or ControlElement wrapper. Add your own
+  label / a11y wrapper in the consumer.
+- **v-model is the plain concatenation** of all segment values
+  (`string | number`, default `""`). External model writes re-split across
+  segments (`segmentSize` characters each).
+- **Sparse fills collapse.** Segments `["1", "", "3"]` join to `"13"`, which
+  immediately re-splits as `["1", "3", ""]` — characters shift left past
+  empty segments. The model can never hold positional gaps.
+- **Keyboard handling is a window-level `onKeyDown`** that bails unless one
+  of its own segments is focused. Auto-advance happens on keydown when the
+  focused segment is already full (the key lands in the next segment);
+  Backspace on an empty segment moves focus back.
+- **`type="number"`** (default) `preventDefault`s non-digit printable keys
+  and sets `inputmode="numeric"` on every segment. Modifier shortcuts
+  (Cmd/Ctrl/Alt) and navigation keys pass through. `type="string"` accepts
+  anything.
+- **`start` / `end` events** fire when focus would step before the first
+  segment (Backspace) or past the last one (typed into the final full
+  segment). Use `end` for auto-submit.
+- The first segment has `autocomplete="one-time-code"`; the rest are
+  `autocomplete="off"`.
+- **Paste is intercepted** (`@paste.prevent` on the wrapper): the pasted
+  text replaces `modelValue` wholesale — digits-only filtered for
+  `type="number"`, trimmed for `type="string"`, truncated to
+  `segments × segmentSize`. A paste that fills every segment emits `end`.
+
+## Gotchas
+
+- **Paste replaces the whole value**, regardless of which segment is
+  focused — it does not insert at the focused position.
+- **SMS autofill** (`one-time-code`) inserts via the input value setter, not
+  a paste event — it still lands in segment 0 and is truncated by
+  `maxlength`.
+- `segments` / `segmentSize` accept `number | string` (loose HTML-attr
+  usage) and are `Number()`-coerced internally.
+- Programmatic focus of a segment goes through the exposed `focused` ref of
+  `Input.vue` (`inputComponent.focused = true`), not `element.focus()`.
+- Multiple instances on one page are safe — each window listener no-ops
+  unless one of its own segments is focused.
+
+## Quick reference
+
+```vue
+<orio-segmented-input
+  v-model="code"
+  :segments="6"
+  :segment-size="1"
+  type="number"
+  @end="submitCode()"
+/>
+```

package/dist/runtime/components/SegmentedInput.d.vue.ts

@@ -0,0 +1,22 @@
+interface Props {
+    segments?: number | string;
+    segmentSize?: number | string;
+    type?: "number" | "string";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+} & {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SegmentedInput.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { ref, computed, watch, watchEffect } from "vue";
+import Input from "./Input.vue";
+import { useTemplateRef } from "vue";
+import { onKeyDown } from "@vueuse/core";
+const { segments = 6, segmentSize = 1, type = "number" } = defineProps({
+  segments: { type: [Number, String], required: false },
+  segmentSize: { type: [Number, String], required: false },
+  type: { type: String, required: false }
+});
+const emit = defineEmits(["start", "end"]);
+const modelValue = defineModel({ type: [String, Number], ...{ default: "" } });
+function applyModel(index) {
+  return String(modelValue.value).slice(
+    index * Number(segmentSize),
+    index * Number(segmentSize) + Number(segmentSize)
+  );
+}
+function setupValue() {
+  return Array.from(
+    { length: Number(segments) },
+    (_, index) => applyModel(index)
+  );
+}
+const inputComponents = useTemplateRef("inputComponents");
+const inputComponentsModel = ref(setupValue());
+function focusSegment(index) {
+  const target = inputComponents.value?.[index];
+  if (target) target.focused = true;
+}
+const focusState = computed(() => {
+  const currentIndex = inputComponents.value?.findIndex(
+    (inputComponent) => inputComponent?.focused
+  );
+  if (currentIndex === void 0 || currentIndex === -1)
+    return { currentIndex: void 0, focusedElement: null };
+  const focusedElement = inputComponents.value?.[currentIndex];
+  return { currentIndex, focusedElement };
+});
+function focusMove(delta) {
+  if (focusState.value.currentIndex === void 0) return;
+  let newIndex = focusState.value.currentIndex + delta;
+  const maxIndex = inputComponents.value?.length ?? 0;
+  if (newIndex >= maxIndex - 1) {
+    emit("end");
+    newIndex = maxIndex - 1;
+  }
+  if (newIndex <= 0) {
+    emit("start");
+    newIndex = 0;
+  }
+  focusSegment(newIndex);
+}
+onKeyDown(true, (event) => {
+  const { currentIndex } = focusState.value;
+  if (currentIndex === void 0) return;
+  if (event.key === "Backspace") {
+    if (inputComponentsModel.value[currentIndex]?.length === 0) focusMove(-1);
+    return;
+  }
+  if (event.metaKey || event.ctrlKey || event.altKey) return;
+  if (event.key.length > 1) return;
+  if (type === "number" && !/^\d$/.test(event.key)) {
+    event.preventDefault();
+    return;
+  }
+  const currentValue = inputComponentsModel.value[currentIndex] ?? "";
+  if (currentValue.length >= Number(segmentSize)) focusMove(1);
+});
+function handlePaste(event) {
+  const pastedText = event.clipboardData?.getData("text") ?? "";
+  const sanitizedText = type === "number" ? pastedText.replace(/\D/g, "") : pastedText.trim();
+  if (!sanitizedText) return;
+  const capacity = Number(segments) * Number(segmentSize);
+  modelValue.value = sanitizedText.slice(0, capacity);
+  if (sanitizedText.length >= capacity) emit("end");
+}
+watch(
+  () => inputComponentsModel.value.join(""),
+  (joinedValue) => {
+    modelValue.value = joinedValue;
+  }
+);
+watchEffect(() => {
+  inputComponentsModel.value = setupValue();
+});
+</script>
+
+<template>
+  <div class="segmented-input" @paste.prevent="handlePaste">
+    <Input
+      v-for="(segment, index) in inputComponentsModel"
+      :key="index"
+      ref="inputComponents"
+      v-model="inputComponentsModel[index]"
+      :maxlength="segmentSize"
+      :inputmode="type === 'number' ? 'numeric' : void 0"
+      :autocomplete="index === 0 ? 'one-time-code' : 'off'"
+    />
+  </div>
+</template>
+
+<style scoped>
+.segmented-input {
+  display: flex;
+}
+.segmented-input > div {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.segmented-input :deep(input) {
+  text-align: center;
+}
+</style>

package/dist/runtime/components/SegmentedInput.vue.d.ts

@@ -0,0 +1,22 @@
+interface Props {
+    segments?: number | string;
+    segmentSize?: number | string;
+    type?: "number" | "string";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+} & {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useControlSize.USAGE.md

@@ -2,14 +2,14 @@
 kind: composable
 category: Composables
 purpose: control size tokens, sizing tokens for form controls, control variant sizing
-short: provide/inject `ControlSize` (sm/md/lg/xl) and read a CSS-var token bag for the active size
+short: provide/inject `ControlSize` (xs/sm/md/lg/xl) and read a CSS-var token bag for the active size
 invariants: true
 ---
 
 # useControlSize — agent-only invariants
 
 This composable owns the **CSS variable bag** that maps a `ControlSize`
-(`sm` / `md` / `lg` / `xl`) to concrete padding, font, gap, radius, and
+(`xs` / `sm` / `md` / `lg` / `xl`) to concrete padding, font, gap, radius, and
 icon-size tokens. Used internally by ControlElement and friends.
 
 ## Invariants

package/dist/runtime/composables/useControlSize.js

@@ -6,6 +6,18 @@ import {
 } from "vue";
 const CONTROL_SIZE_KEY = Symbol("control-size");
 const sizeTokens = {
+  xs: {
+    "--control-font-size": "var(--font-sm)",
+    "--control-label-font-size": "var(--font-xs)",
+    "--control-py": "0.125rem",
+    "--control-px": "0.25rem",
+    "--control-gap": "0.125rem",
+    "--control-radius": "var(--border-radius-sm)",
+    "--control-icon-size": "0.625rem",
+    "--control-inner-block-start": "0.85rem",
+    "--control-inner-block-end": "0.1rem",
+    "--control-label-block-start": "0.15rem"
+  },
   sm: {
     "--control-font-size": "var(--font-sm)",
     "--control-label-font-size": "var(--font-xs)",

package/dist/runtime/composables/useUrlSync.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "vue";
+import { type Ref } from "vue";
 /**
  * Syncs a reactive object's keys to/from URL query params.
  *

package/dist/runtime/index.d.ts

@@ -3,6 +3,7 @@ export { default as Button } from "./components/Button.vue.js";
 export { default as Form, type FormProps } from "./components/Form.vue.js";
 export { default as NavButton } from "./components/NavButton.vue.js";
 export { default as Input } from "./components/Input.vue.js";
+export { default as SegmentedInput } from "./components/SegmentedInput.vue.js";
 export { default as NumberInput } from "./components/NumberInput/index.vue.js";
 export { default as NumberInputVertical } from "./components/NumberInput/Vertical.vue.js";
 export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue.js";

package/dist/runtime/index.js

@@ -3,6 +3,7 @@ export { default as Button } from "./components/Button.vue";
 export { default as Form } from "./components/Form.vue";
 export { default as NavButton } from "./components/NavButton.vue";
 export { default as Input } from "./components/Input.vue";
+export { default as SegmentedInput } from "./components/SegmentedInput.vue";
 export { default as NumberInput } from "./components/NumberInput/index.vue";
 export { default as NumberInputVertical } from "./components/NumberInput/Vertical.vue";
 export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",