orio-ui 1.23.3 → 1.27.0

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **56 Components** - Beautiful, accessible components ready to use
+✨ **58 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
@@ -67,7 +67,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (56)
+### Components (58)
 
 #### Form Controls
 
@@ -119,7 +119,7 @@ function handleClick() {
 
 - **Upload** - File upload component
 
-### Composables (13)
+### Composables (15)
 
 - **useTheme** - Theme and color mode management
 - **useModal** - Modal state with animation origin tracking
@@ -194,8 +194,8 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 56 Vue components
-│   │   ├── composables/  # 13 composables
+│   │   ├── components/   # 58 Vue components
+│   │   ├── composables/  # 15 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry
 │   └── module.ts         # Nuxt Module definition

package/dist/module.json

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

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

@@ -3,13 +3,14 @@ interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;
-    disabled?: boolean;
 }
-declare var __VLS_13: {}, __VLS_20: {};
+declare var __VLS_13: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_13) => any;
 } & {
     default?: (props: typeof __VLS_20) => any;
+} & {
+    'icon-right'?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: PointerEvent) => any;

package/dist/runtime/components/Button.vue

@@ -4,7 +4,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
   icon: { type: String, required: false },
   loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
@@ -12,7 +11,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const { loading, disabled } = toRefs(props);
 const slots = useSlots();
@@ -39,21 +44,25 @@ function onMouseleave(event) {
 </script>
 
 <template>
-  <orio-control-element v-bind="props">
+  <orio-control-element v-slot="{ control }" v-bind="props">
     <button
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...control }"
       :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
-      :disabled
       @click="click"
       @mousedown="onMousedown"
       @mouseup="onMouseup"
       @mouseleave="onMouseleave"
     >
       <orio-loading-spinner v-if="loading" />
-      <slot v-else name="icon">
-        <orio-icon v-if="icon" :name="icon" />
-      </slot>
-      <slot />
+      <template v-else>
+        <slot name="icon">
+          <orio-icon v-if="icon" :name="icon" />
+        </slot>
+
+        <slot />
+
+        <slot name="icon-right" />
+      </template>
     </button>
   </orio-control-element>
 </template>
@@ -73,9 +82,8 @@ button {
   user-select: none;
 }
 button.icon-only {
-  padding: 0;
-  border-radius: 50%;
   line-height: 0;
+  aspect-ratio: 1;
 }
 button:disabled, button:disabled:hover {
   background-color: var(--color-accent-soft-base);

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

@@ -3,13 +3,14 @@ interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;
-    disabled?: boolean;
 }
-declare var __VLS_13: {}, __VLS_20: {};
+declare var __VLS_13: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_13) => any;
 } & {
     default?: (props: typeof __VLS_20) => any;
+} & {
+    'icon-right'?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: PointerEvent) => any;

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

@@ -0,0 +1,51 @@
+# Calendar — agent-only invariants
+
+`<orio-calendar>` is the month-grid primitive. `date/Picker.vue` and
+`date/RangePicker.vue` compose it inside a popover.
+
+## Invariants
+
+- **All dates are ISO `YYYY-MM-DD` strings** at the API boundary
+  (`selected`, `markers.start`/`end`, `getMarker`, `isDisabled`, `@select`,
+  `@dayEnter`). Never pass `Date` objects.
+- **Two reactive states**:
+  - `selected` (prop) — the picked day. Calendar does not own it; emit
+    `@select` and let the parent update its v-model.
+  - `anchor` (v-model:anchor) — the visible month. Calendar owns this when
+    uncontrolled, derived from `selected` if not provided. Pass it as
+    `v-model:anchor` if you need cross-component sync (RangePicker uses
+    this to keep two months in lockstep).
+- **Keyboard a11y via `useRovingGrid`.** Arrow keys, Home/End, PageUp/Down
+  navigate. Only one day cell is in the tab order at a time. Do not add
+  manual `tabindex` to day cells from outside.
+- **42-cell grid (6 rows × 7 cols).** Leading/trailing days from neighbour
+  months are rendered with `inMonth: false`. Selection and disabled checks
+  apply to them too — `isDisabled` is called for every cell.
+- **Markers are matched in reverse order** — the last marker in the array
+  wins on overlap. `getMarker` takes precedence over `markers[]` when both
+  are provided.
+- **`weekStartsOn`** is `0` (Sunday) or `1` (Monday, default). Weekday
+  header labels are derived via `Intl.DateTimeFormat` in the active i18n
+  locale.
+
+## Gotchas
+
+- Disabled-day logic should be reactive — `isDisabled` is called inside a
+  computed. Wrap any external state it reads in `computed`/`ref` or it will
+  not re-render on change.
+- The Calendar emits `@dayEnter` on hover/keyboard-focus, **not** on
+  selection. Use for range-picking previews; selection is only `@select`.
+- i18n keys used: `calendar.previousYear`, `calendar.previousMonth`,
+  `calendar.nextMonth`, `calendar.nextYear`. Override these if you ship a
+  locale not bundled in `runtime/i18n/`.
+
+## Quick reference
+
+```vue
+<orio-calendar
+  :selected="iso"
+  :markers="[{ variant: 'accent', start: '2026-06-01', end: '2026-06-07' }]"
+  :is-disabled="(iso) => iso < todayIso"
+  @select="iso = $event"
+/>
+```

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

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,418 @@
+<script setup>
+import { computed, ref, useId, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRovingGrid } from "../composables/useRovingGrid";
+import {
+  addMonths,
+  formatISO,
+  isSameDay,
+  parseISO,
+  startOfMonth
+} from "../utils/date";
+const props = defineProps({
+  selected: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  weekStartsOn: { type: Number, required: false, default: 1 }
+});
+const anchor = defineModel("anchor", { type: [String, null], ...{ default: null } });
+const emit = defineEmits(["select", "dayEnter"]);
+const { locale, t } = useI18n();
+const today = /* @__PURE__ */ new Date();
+const visibleMonth = computed(
+  () => startOfMonth(
+    parseISO(anchor.value) ?? parseISO(props.selected) ?? /* @__PURE__ */ new Date()
+  )
+);
+function shiftMonth(delta) {
+  anchor.value = formatISO(addMonths(visibleMonth.value, delta));
+}
+function shiftYear(delta) {
+  const target = new Date(visibleMonth.value);
+  target.setFullYear(target.getFullYear() + delta);
+  anchor.value = formatISO(startOfMonth(target));
+}
+const monthLabel = computed(
+  () => new Intl.DateTimeFormat(locale.value, {
+    month: "long",
+    year: "numeric"
+  }).format(visibleMonth.value)
+);
+const titleId = useId();
+const dayLabelFormat = computed(
+  () => new Intl.DateTimeFormat(locale.value, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })
+);
+function fullDateLabel(iso) {
+  const date = parseISO(iso);
+  return date ? dayLabelFormat.value.format(date) : iso;
+}
+const weekdayLabels = computed(() => {
+  const tuesday = new Date(1998, 6, 14);
+  return Array.from({ length: 7 }, (_, position) => {
+    const date = new Date(tuesday);
+    date.setDate(
+      tuesday.getDate() + (position + props.weekStartsOn - 2 + 7) % 7
+    );
+    return new Intl.DateTimeFormat(locale.value, { weekday: "short" }).format(
+      date
+    );
+  });
+});
+function resolveMarker(iso, reversedMarkers) {
+  const matched = props.getMarker?.(iso) ?? reversedMarkers.find(
+    (marker) => iso >= marker.start && iso <= marker.end
+  ) ?? null;
+  if (!matched) return null;
+  return {
+    variant: matched.variant,
+    isStart: iso === matched.start,
+    isEnd: iso === matched.end
+  };
+}
+const days = computed(() => {
+  const firstOfMonth = visibleMonth.value;
+  const leadingOffset = (firstOfMonth.getDay() - props.weekStartsOn + 7) % 7;
+  const gridStart = new Date(firstOfMonth);
+  gridStart.setDate(gridStart.getDate() - leadingOffset);
+  const selectedDate = parseISO(props.selected);
+  const reversedMarkers = [...props.markers].reverse();
+  return Array.from({ length: 42 }, (_, dayOffset) => {
+    const date = new Date(gridStart);
+    date.setDate(gridStart.getDate() + dayOffset);
+    const iso = formatISO(date);
+    return {
+      iso,
+      label: date.getDate(),
+      inMonth: date.getMonth() === firstOfMonth.getMonth(),
+      isToday: isSameDay(date, today),
+      isSelected: !!selectedDate && isSameDay(date, selectedDate),
+      isDisabled: props.isDisabled?.(iso) ?? false,
+      marker: resolveMarker(iso, reversedMarkers)
+    };
+  });
+});
+const weeks = computed(
+  () => Array.from(
+    { length: 6 },
+    (_, weekIndex) => days.value.slice(weekIndex * 7, weekIndex * 7 + 7)
+  )
+);
+function isInVisibleMonth(date) {
+  return date.getMonth() === visibleMonth.value.getMonth() && date.getFullYear() === visibleMonth.value.getFullYear();
+}
+function initialActiveISO() {
+  const selectedDate = parseISO(props.selected);
+  if (selectedDate && isInVisibleMonth(selectedDate)) {
+    return formatISO(selectedDate);
+  }
+  if (isInVisibleMonth(today)) return formatISO(today);
+  return formatISO(visibleMonth.value);
+}
+const navButtons = computed(() => [
+  {
+    key: "year-prev",
+    ariaLabel: t("calendar.previousYear"),
+    icon: "chevron-left",
+    size: "md",
+    action: () => shiftYear(-1)
+  },
+  {
+    key: "month-prev",
+    ariaLabel: t("calendar.previousMonth"),
+    icon: "chevron-left",
+    size: "sm",
+    action: () => shiftMonth(-1)
+  },
+  {
+    key: "month-next",
+    ariaLabel: t("calendar.nextMonth"),
+    icon: "chevron-right",
+    size: "sm",
+    action: () => shiftMonth(1)
+  },
+  {
+    key: "year-next",
+    ariaLabel: t("calendar.nextYear"),
+    icon: "chevron-right",
+    size: "md",
+    action: () => shiftYear(1)
+  }
+]);
+const navRows = computed(() => [navButtons.value]);
+const navRef = ref(null);
+const {
+  tabindexFor: tabindexForNav,
+  setActive: setActiveNav,
+  onKeydown: onNavKeydown
+} = useRovingGrid({
+  rows: navRows,
+  gridRef: navRef,
+  getKey: (button) => button.key,
+  initial: () => "month-prev",
+  onActivate: (button) => button.action()
+});
+function onNavButtonClick(button) {
+  setActiveNav(button.key, false);
+  button.action();
+}
+const ARROW_DAY_DELTA = {
+  up: -7,
+  down: 7,
+  left: -1,
+  right: 1
+};
+const gridRef = ref(null);
+const { activeKey, setActive, tabindexFor, onKeydown } = useRovingGrid({
+  rows: weeks,
+  gridRef,
+  getKey: (day) => day.iso,
+  initial: initialActiveISO,
+  isNavigable: (day) => !day.isDisabled,
+  onActivate(day) {
+    if (day.isDisabled) return;
+    emit("select", day.iso);
+  },
+  onArrowOverflow(direction, currentKey) {
+    const date = parseISO(currentKey);
+    if (!date) return null;
+    const stepDays = ARROW_DAY_DELTA[direction];
+    for (let attempt = 0; attempt < 750; attempt++) {
+      date.setDate(date.getDate() + stepDays);
+      const iso = formatISO(date);
+      if (!props.isDisabled?.(iso)) return iso;
+    }
+    return null;
+  },
+  onPage(direction, bigJump, currentKey) {
+    const date = parseISO(currentKey);
+    if (!date) return null;
+    const monthDelta = (direction === "down" ? 1 : -1) * (bigJump ? 12 : 1);
+    const target = new Date(
+      date.getFullYear(),
+      date.getMonth() + monthDelta,
+      1
+    );
+    const lastDayOfTargetMonth = new Date(
+      target.getFullYear(),
+      target.getMonth() + 1,
+      0
+    ).getDate();
+    target.setDate(Math.min(date.getDate(), lastDayOfTargetMonth));
+    return formatISO(target);
+  }
+});
+watch(activeKey, (iso) => {
+  const date = parseISO(iso);
+  if (date && !isInVisibleMonth(date)) {
+    anchor.value = formatISO(startOfMonth(date));
+  }
+});
+function onDayClick(day) {
+  if (day.isDisabled) return;
+  setActive(day.iso, false);
+  emit("select", day.iso);
+}
+function onDayMouseenter(day) {
+  emit("dayEnter", day.iso);
+}
+</script>
+
+<template>
+  <div class="calendar">
+    <div
+      ref="navRef"
+      class="calendar-nav"
+      role="toolbar"
+      aria-orientation="horizontal"
+      :aria-label="t('calendar.navigation')"
+      @keydown="onNavKeydown"
+    >
+      <template v-for="(button, position) in navButtons" :key="button.key">
+        <orio-button
+          variant="subdued"
+          :icon="button.icon"
+          :size="button.size"
+          :focus-key="button.key"
+          :tabindex="tabindexForNav(button.key)"
+          :aria-label="button.ariaLabel"
+          @click="onNavButtonClick(button)"
+        />
+        <span v-if="position === 1" :id="titleId" class="calendar-month-title">
+          {{ monthLabel }}
+        </span>
+      </template>
+    </div>
+    <div class="calendar-weekdays">
+      <span
+        v-for="weekday in weekdayLabels"
+        :key="weekday"
+        class="calendar-weekday"
+      >
+        {{ weekday }}
+      </span>
+    </div>
+    <div
+      ref="gridRef"
+      class="calendar-grid"
+      role="grid"
+      :aria-labelledby="titleId"
+      @keydown="onKeydown"
+    >
+      <div
+        v-for="(week, weekIndex) in weeks"
+        :key="weekIndex"
+        role="row"
+        class="calendar-week"
+      >
+        <button
+          v-for="day in week"
+          :key="day.iso"
+          type="button"
+          role="gridcell"
+          class="calendar-day"
+          :class="{
+  'out-of-month': !day.inMonth,
+  today: day.isToday,
+  selected: day.isSelected,
+  'has-marker': !!day.marker,
+  [`marker-${day.marker?.variant}`]: !!day.marker,
+  'marker-start': day.marker?.isStart,
+  'marker-end': day.marker?.isEnd,
+  active: day.iso === activeKey
+}"
+          :focus-key="day.iso"
+          :tabindex="tabindexFor(day.iso)"
+          :aria-selected="day.isSelected"
+          :aria-current="day.isToday ? 'date' : void 0"
+          :aria-label="fullDateLabel(day.iso)"
+          :disabled="day.isDisabled"
+          @click="onDayClick(day)"
+          @mouseenter="onDayMouseenter(day)"
+        >
+          <orio-badge v-if="day.isSelected" pill variant="primary">
+            {{ day.label }}
+          </orio-badge>
+          <template v-else>{{ day.label }}</template>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar {
+  display: inline-block;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: 0.75rem;
+  user-select: none;
+  font-size: var(--control-font-size, var(--font-md));
+  color: var(--color-text);
+  width: 22rem;
+}
+
+.calendar-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.calendar-month-title {
+  flex: 1;
+  text-align: center;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.calendar-weekdays,
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar-week {
+  display: contents;
+}
+
+.calendar-weekday {
+  text-align: center;
+  font-size: var(--font-xs);
+  color: var(--color-muted);
+  padding: 0.25rem 0;
+  text-transform: uppercase;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  font-size: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.calendar-day:hover:not(:disabled):not(.has-marker):not(.selected) {
+  background-color: var(--color-surface);
+}
+.calendar-day:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+.calendar-day.out-of-month {
+  color: var(--color-muted);
+  opacity: 0.45;
+}
+.calendar-day.today {
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+.calendar-day.has-marker {
+  background-color: var(--marker-bg);
+  color: var(--marker-color);
+  border-radius: 0;
+}
+.calendar-day.has-marker.marker-start {
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.calendar-day.has-marker.marker-end {
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+}
+.calendar-day.marker-accent {
+  --marker-bg: var(--color-accent-soft);
+  --marker-color: var(--color-accent);
+}
+.calendar-day.marker-success {
+  --marker-bg: var(--color-success-soft);
+  --marker-color: var(--color-success);
+}
+.calendar-day.marker-alert {
+  --marker-bg: var(--color-alert-soft);
+  --marker-color: var(--color-alert);
+}
+.calendar-day.marker-danger {
+  --marker-bg: var(--color-danger-soft);
+  --marker-color: var(--color-danger);
+}
+.calendar-day.marker-muted {
+  --marker-bg: var(--color-surface);
+  --marker-color: var(--color-muted);
+}
+.calendar-day:disabled {
+  color: var(--color-muted);
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+</style>

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

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;