orio-ui 1.28.0 → 1.28.1

package/README.md

@@ -23,7 +23,7 @@ orio-ui's shipped, version-pinned agent docs. Details in
 🚀 **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** - 37 test suites for reliability
 📱 **Responsive** - Mobile-first design approach
 ♿ **Accessible** - ARIA-compliant components
 🌐 **i18n** - Built-in vue-i18n support with English defaults

package/dist/agents/ROUTING.md

@@ -116,7 +116,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/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.28.0",
+  "version": "1.28.1",
   "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/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/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/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/package.json

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