@octabits-io/nuxt-ui-kit 0.13.0 → 0.14.1

package/dist/locale/index.js

@@ -45,7 +45,9 @@ function useLocaleTabs(hasValue, source, registerOverride = false) {
 	const isVariant = (loc) => baseLocaleOf(loc) !== loc && supportedLocales.value.includes(baseLocaleOf(loc));
 	const visibleLocales = computed(() => {
 		const filtered = toValue(registerOverride) ? supportedLocales.value : supportedLocales.value.filter((loc) => !isVariant(loc));
-		return filtered.includes(defaultLocale.value) ? filtered : [...filtered, defaultLocale.value];
+		const withDefault = filtered.includes(defaultLocale.value) ? filtered : [...filtered, defaultLocale.value];
+		if (!defaultLocale.value) return withDefault;
+		return [defaultLocale.value, ...withDefault.filter((loc) => loc !== defaultLocale.value)];
 	});
 	const active = ref("");
 	watchEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octabits-io/nuxt-ui-kit",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Frontend kit for Nuxt/Vue admin SPAs: OIDC session harness (oidc-client-ts), Eden Treaty client factory, auth/org store cores, and a route-guard builder — factory-style seams the app wires into its own plugins, stores, and middleware",
   "license": "MIT",
   "type": "module",
@@ -78,9 +78,9 @@
     "elysia": "^1.4.29",
     "oidc-client-ts": "^3.5.0",
     "vitest": "^4.1.10",
-    "vue": "^3.5.40",
+    "vue": "^3.5.41",
     "zod": "^4.4.3",
-    "@octabits-io/framework": "^0.8.0"
+    "@octabits-io/framework": "^0.21.1"
   },
   "peerDependencies": {
     "@elysiajs/eden": "^1.4.0",

package/src/components/DateRangeInput.vue

@@ -3,6 +3,11 @@
 // explicit — no reliance on the consumer's auto-import configuration.
 // i18n key contract: dateRange.* (checkIn/checkOut/errors.*/availability*/
 // atTime/nextDay/checking) and period.travel.nights / period.booking.days.
+//
+// Sizing contract: the root is an inline-size @container (the inputs stack
+// below 320px of own width), so its intrinsic width is 0. Parents must give
+// it a definite width — block/grid context, `flex-1`, or an explicit
+// `w-*`/`basis-*` — never shrink-to-fit.
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { CalendarDate } from '@internationalized/date'
@@ -510,109 +515,120 @@ const timeHintParts = computed(() =>
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <div class="flex items-center gap-2">
-      <UInputDate
-        v-model="startDate"
-        :is-date-disabled="isDateDisabled"
-        :size="size"
-        :disabled="disabled"
-        :color="inputColor"
-        :aria-label="startLabel"
-        class="flex-1"
-      >
-        <template #trailing>
-          <UPopover v-model:open="startPopoverOpen">
-            <UButton
-              color="neutral"
-              variant="link"
-              size="sm"
-              :icon="icon"
-              :aria-label="startLabel"
-              :disabled="disabled"
-              class="px-0"
-            />
-            <template #content>
-              <div class="flex flex-col" @pointerleave="hoveredDay = null">
-                <p class="flex items-baseline justify-between gap-2 px-3 pt-2 pb-1">
-                  <span class="text-xs font-medium text-muted uppercase tracking-wide">
-                    {{ startPopoverTitle }}
-                  </span>
-                  <span v-if="spanLabel('start')" class="text-xs font-medium text-primary">
-                    {{ spanLabel('start') }}
-                  </span>
-                </p>
-                <UCalendar
-                  :model-value="startDate"
-                  :placeholder="startDate ?? endDate"
-                  :is-date-disabled="isDateDisabled"
-                  :ui="calendarUi"
-                  class="p-2"
-                  @update:model-value="onStartCalendarSelect"
-                >
-                  <template #day="{ day }">
-                    <span :class="dayPillClass(day, 'start')" @pointerenter="hoveredDay = day.toString()">
-                      {{ day.day }}
+  <div class="@container flex flex-col gap-1">
+    <!-- Container-responsive: side-by-side from 320px of *own* width, stacked
+         below. Own-width queries keep the behavior correct inside modals,
+         narrow panels, and next to the assistant dock alike. When stacked,
+         the arrow disappears and each input gets a compact label instead
+         (the popover titles), so the two identical inputs stay tellable. -->
+    <div class="flex flex-col gap-2 @xs:flex-row @xs:items-center">
+      <div class="flex w-full min-w-0 flex-col gap-1 @xs:flex-1">
+        <span class="text-xs text-muted @xs:hidden" aria-hidden="true">{{ startPopoverTitle }}</span>
+        <UInputDate
+          v-model="startDate"
+          :is-date-disabled="isDateDisabled"
+          :size="size"
+          :disabled="disabled"
+          :color="inputColor"
+          :aria-label="startLabel"
+          class="w-full"
+        >
+          <template #trailing>
+            <UPopover v-model:open="startPopoverOpen">
+              <UButton
+                color="neutral"
+                variant="link"
+                size="sm"
+                :icon="icon"
+                :aria-label="startLabel"
+                :disabled="disabled"
+                class="px-0"
+              />
+              <template #content>
+                <div class="flex flex-col" @pointerleave="hoveredDay = null">
+                  <p class="flex items-baseline justify-between gap-2 px-3 pt-2 pb-1">
+                    <span class="text-xs font-medium text-muted uppercase tracking-wide">
+                      {{ startPopoverTitle }}
+                    </span>
+                    <span v-if="spanLabel('start')" class="text-xs font-medium text-primary">
+                      {{ spanLabel('start') }}
+                    </span>
+                  </p>
+                  <UCalendar
+                    :model-value="startDate"
+                    :placeholder="startDate ?? endDate"
+                    :is-date-disabled="isDateDisabled"
+                    :ui="calendarUi"
+                    class="p-2"
+                    @update:model-value="onStartCalendarSelect"
+                  >
+                    <template #day="{ day }">
+                      <span :class="dayPillClass(day, 'start')" @pointerenter="hoveredDay = day.toString()">
+                        {{ day.day }}
+                      </span>
+                    </template>
+                  </UCalendar>
+                </div>
+              </template>
+            </UPopover>
+          </template>
+        </UInputDate>
+      </div>
+
+      <span class="hidden shrink-0 text-muted @xs:inline" aria-hidden="true">→</span>
+
+      <div class="flex w-full min-w-0 flex-col gap-1 @xs:flex-1">
+        <span class="text-xs text-muted @xs:hidden" aria-hidden="true">{{ endPopoverTitle }}</span>
+        <UInputDate
+          v-model="endDate"
+          :is-date-disabled="isEndDateDisabled"
+          :size="size"
+          :disabled="disabled"
+          :color="inputColor"
+          :aria-label="endLabel"
+          class="w-full"
+        >
+          <template #trailing>
+            <UPopover v-model:open="endPopoverOpen">
+              <UButton
+                color="neutral"
+                variant="link"
+                size="sm"
+                :icon="icon"
+                :aria-label="endLabel"
+                :disabled="disabled"
+                class="px-0"
+              />
+              <template #content>
+                <div class="flex flex-col" @pointerleave="hoveredDay = null">
+                  <p class="flex items-baseline justify-between gap-2 px-3 pt-2 pb-1">
+                    <span class="text-xs font-medium text-muted uppercase tracking-wide">
+                      {{ endPopoverTitle }}
                     </span>
-                  </template>
-                </UCalendar>
-              </div>
-            </template>
-          </UPopover>
-        </template>
-      </UInputDate>
-
-      <span class="text-muted shrink-0" aria-hidden="true">→</span>
-
-      <UInputDate
-        v-model="endDate"
-        :is-date-disabled="isEndDateDisabled"
-        :size="size"
-        :disabled="disabled"
-        :color="inputColor"
-        :aria-label="endLabel"
-        class="flex-1"
-      >
-        <template #trailing>
-          <UPopover v-model:open="endPopoverOpen">
-            <UButton
-              color="neutral"
-              variant="link"
-              size="sm"
-              :icon="icon"
-              :aria-label="endLabel"
-              :disabled="disabled"
-              class="px-0"
-            />
-            <template #content>
-              <div class="flex flex-col" @pointerleave="hoveredDay = null">
-                <p class="flex items-baseline justify-between gap-2 px-3 pt-2 pb-1">
-                  <span class="text-xs font-medium text-muted uppercase tracking-wide">
-                    {{ endPopoverTitle }}
-                  </span>
-                  <span v-if="spanLabel('end')" class="text-xs font-medium text-primary">
-                    {{ spanLabel('end') }}
-                  </span>
-                </p>
-                <UCalendar
-                  :model-value="endDate"
-                  :placeholder="endDate ?? startDate"
-                  :is-date-disabled="isEndDateDisabled"
-                  :ui="calendarUi"
-                  class="p-2"
-                  @update:model-value="onEndCalendarSelect"
-                >
-                  <template #day="{ day }">
-                    <span :class="dayPillClass(day, 'end')" @pointerenter="hoveredDay = day.toString()">
-                      {{ day.day }}
+                    <span v-if="spanLabel('end')" class="text-xs font-medium text-primary">
+                      {{ spanLabel('end') }}
                     </span>
-                  </template>
-                </UCalendar>
-              </div>
-            </template>
-          </UPopover>
-        </template>
-      </UInputDate>
+                  </p>
+                  <UCalendar
+                    :model-value="endDate"
+                    :placeholder="endDate ?? startDate"
+                    :is-date-disabled="isEndDateDisabled"
+                    :ui="calendarUi"
+                    class="p-2"
+                    @update:model-value="onEndCalendarSelect"
+                  >
+                    <template #day="{ day }">
+                      <span :class="dayPillClass(day, 'end')" @pointerenter="hoveredDay = day.toString()">
+                        {{ day.day }}
+                      </span>
+                    </template>
+                  </UCalendar>
+                </div>
+              </template>
+            </UPopover>
+          </template>
+        </UInputDate>
+      </div>
     </div>
 
     <!-- Slot for a derived summary (e.g. the resulting travel period) shown

package/src/components/FlexiblePeriodInput.vue

@@ -11,6 +11,11 @@
 // i18n key contract: flexPeriod.* (earliestStart/latestEnd/nightsLabel/
 // clear/windowSpan/flexibility/example/errors.*) and period.travel.nights,
 // plus the composed DateRangeInput's dateRange.* keys.
+//
+// Sizing contract: the root is an inline-size @container (single row from
+// 512px of own width, stacked below), so its intrinsic width is 0. Parents
+// must give it a definite width — block/grid context, `flex-1`, or an
+// explicit `w-*`/`basis-*` — never shrink-to-fit.
 import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import UInputNumber from '@nuxt/ui/components/InputNumber.vue'
@@ -188,8 +193,13 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <div class="flex items-start gap-2">
+  <div class="@container flex flex-col gap-1">
+    <!-- Container-responsive: one row (window + nights + clear) from 512px of
+         *own* width; below that the window goes full-width and nights + clear
+         drop to their own line (the nights input gains a compact label, since
+         its placeholder vanishes once a value is set). The inner
+         DateRangeInput additionally stacks its two dates below 320px. -->
+    <div class="flex flex-col gap-2 @lg:flex-row @lg:items-start">
       <DateRangeInput
         v-model="innerPeriod"
         kind="travel"
@@ -198,29 +208,34 @@ watch(
         :icon="icon"
         :start-label="startAriaLabel"
         :end-label="endAriaLabel"
-        class="flex-1"
-      />
-      <UInputNumber
-        v-model="nightsValue"
-        :min="minNights"
-        :max="maxNights"
-        :size="size"
-        :disabled="disabled"
-        :color="nightsInputColor"
-        :aria-label="t('flexPeriod.nightsLabel')"
-        :placeholder="t('flexPeriod.nightsLabel')"
-        class="w-28 shrink-0"
-      />
-      <UButton
-        v-if="clearable && hasAnyValue"
-        icon="i-lucide-x"
-        color="neutral"
-        variant="ghost"
-        :size="size"
-        :disabled="disabled"
-        :aria-label="t('flexPeriod.clear')"
-        @click="clearAll"
+        class="w-full @lg:flex-1"
       />
+      <div class="flex items-end gap-2 @lg:shrink-0">
+        <div class="flex w-full flex-col gap-1 @lg:w-28">
+          <span class="text-xs text-muted @lg:hidden" aria-hidden="true">{{ t('flexPeriod.nightsLabel') }}</span>
+          <UInputNumber
+            v-model="nightsValue"
+            :min="minNights"
+            :max="maxNights"
+            :size="size"
+            :disabled="disabled"
+            :color="nightsInputColor"
+            :aria-label="t('flexPeriod.nightsLabel')"
+            :placeholder="t('flexPeriod.nightsLabel')"
+            class="w-full"
+          />
+        </div>
+        <UButton
+          v-if="clearable && hasAnyValue"
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          :size="size"
+          :disabled="disabled"
+          :aria-label="t('flexPeriod.clear')"
+          @click="clearAll"
+        />
+      </div>
     </div>
 
     <!-- Slot for a derived summary shown between the inputs and the hints,