@revojs/ui 0.2.60 → 0.2.62

package/dist/vue/components/select.vue

@@ -6,7 +6,7 @@
 
         <input v-if="name" type="hidden" :name="name" :value="modelValue" :disabled="disabled" />
 
-        <div ref="container" class="relative">
+        <div ref="container" class="relative" :style="anchorStyle">
             <Stack
                 direction="horizontal"
                 align="center"
@@ -39,7 +39,7 @@
                     v-if="searchable"
                     class="grid min-w-0 flex-1"
                     :class="[controlTexts[text], searchWidths[width]]"
-                    :data-value="query || (placeholder ?? 'Select')"
+                    :data-value="query || (placeholder ?? labels.select)"
                 >
                     <input
                         v-bind="controlAttributes"
@@ -49,7 +49,7 @@
                         role="combobox"
                         size="1"
                         class="w-full min-w-0 bg-transparent px-1 outline-none [grid-area:1/1] placeholder:opacity-50"
-                        :placeholder="placeholder ?? 'Select'"
+                        :placeholder="placeholder ?? labels.select"
                         :aria-expanded="open"
                         :aria-controls="listboxId"
                         :aria-activedescendant="activeId"
@@ -62,8 +62,7 @@
                         @keydown.enter.prevent="confirm"
                         @keydown.escape="escape"
                         @keydown.tab="open = false"
-                        @keydown.arrow-down.prevent="stepHighlight(1)"
-                        @keydown.arrow-up.prevent="stepHighlight(-1)"
+                        @keydown="navigate"
                     />
                 </span>
 
@@ -77,6 +76,7 @@
                     class="min-w-0 flex-1 cursor-pointer truncate bg-transparent px-1 text-left outline-none disabled:cursor-not-allowed"
                     :class="selected ? '' : 'opacity-50'"
                     :aria-expanded="open"
+                    :data-state="open ? 'open' : 'closed'"
                     :aria-controls="listboxId"
                     :aria-activedescendant="activeId"
                     :aria-invalid="invalid ?? controlAttributes['aria-invalid']"
@@ -86,10 +86,9 @@
                     @keydown.space.prevent="confirm"
                     @keydown.escape="escape"
                     @keydown.tab="open = false"
-                    @keydown.arrow-down.prevent="stepHighlight(1)"
-                    @keydown.arrow-up.prevent="stepHighlight(-1)"
+                    @keydown="navigate"
                 >
-                    {{ selected?.label ?? placeholder ?? "Select" }}
+                    {{ selected?.label ?? placeholder ?? labels.select }}
                 </button>
 
                 <button
@@ -118,39 +117,70 @@
             <Stack
                 v-if="open"
                 :id="listboxId"
+                ref="listbox"
                 role="listbox"
                 :aria-label="label"
+                :popover="anchored ? 'manual' : undefined"
+                :style="anchored ? layerStyle : undefined"
+                data-state="open"
                 padding="1"
-                :class="[placements[placement], listWidths[width]]"
-                class="absolute z-10 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover text-popover-foreground shadow-xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                class="max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover text-popover-foreground shadow-xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                :class="
+                    anchored
+                        ? `inset-auto mx-0 my-1 [position-try-fallbacks:flip-block] ${areas[placement]} ${layerWidths[width]}`
+                        : `absolute z-10 ${placements[placement]} ${listWidths[width]}`
+                "
             >
-                <Button
-                    v-for="(option, index) in filtered"
-                    :key="option.value"
-                    :id="`${listboxId}-${index}`"
-                    :class="['w-full', highlighted === index ? 'bg-accent!' : '']"
-                    variant="ghost"
-                    layout="left"
-                    font="normal"
-                    :text="text"
-                    :size="size"
-                    :disabled="option.disabled"
-                    tabindex="-1"
-                    role="option"
-                    :aria-selected="option.value === modelValue"
-                    @click="select(option)"
-                >
-                    <Stack direction="horizontal" align="center" justify="between" gap="1" class="w-full text-left">
-                        <slot name="option" :option="option" :selected="option.value === modelValue">
-                            <span class="min-w-0 flex-1 truncate px-1">{{ option.label }}</span>
-                        </slot>
-
-                        <Icon v-if="option.value === modelValue" :is="TickIcon" :size="iconSize" />
+                <template v-for="section in sections" :key="section.group ?? ''">
+                    <Stack
+                        :role="section.group ? 'group' : undefined"
+                        :aria-labelledby="section.group ? `${listboxId}-group-${section.start}` : undefined"
+                        gap="0"
+                    >
+                        <span
+                            v-if="section.group"
+                            :id="`${listboxId}-group-${section.start}`"
+                            class="p-2 text-xs font-medium text-muted-foreground"
+                        >
+                            <span class="block truncate px-1">{{ section.group }}</span>
+                        </span>
+
+                        <Button
+                            v-for="{ option, index } in section.options"
+                            :key="option.value"
+                            :id="`${listboxId}-${index}`"
+                            :class="['w-full', highlighted === index ? 'bg-accent!' : '']"
+                            variant="ghost"
+                            layout="left"
+                            font="normal"
+                            :text="text"
+                            :size="size"
+                            :disabled="option.disabled"
+                            :data-highlighted="highlighted === index ? '' : undefined"
+                            tabindex="-1"
+                            role="option"
+                            :aria-selected="option.value === modelValue"
+                            @click="select(option)"
+                        >
+                            <Stack
+                                direction="horizontal"
+                                align="center"
+                                justify="between"
+                                gap="1"
+                                class="w-full text-left"
+                            >
+                                <slot name="option" :option="option" :selected="option.value === modelValue">
+                                    <span class="min-w-0 flex-1 truncate px-1">{{ option.label }}</span>
+                                </slot>
+
+                                <Icon v-if="option.value === modelValue" :is="TickIcon" :size="iconSize" />
+                            </Stack>
+                        </Button>
                     </Stack>
-                </Button>
+                </template>
 
                 <p v-if="filtered.length === 0" class="px-1 py-5 text-center opacity-60">
-                    {{ emptyLabel }}
+                    {{ emptyLabel ?? labels.noResults }}
                 </p>
             </Stack>
         </div>
@@ -175,7 +205,10 @@ import type {
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
+import { useUiLabels } from "../utilities/labels";
+import { useAnchor } from "../utilities/use-anchor";
 import { useControlAttributes } from "../utilities/use-control-attributes";
+import { isTypeaheadKey, useTypeahead } from "../utilities/use-typeahead";
 
 defineOptions({ inheritAttrs: false });
 
@@ -189,19 +222,21 @@ const {
     placement = "bottom",
     width = "full",
     placeholder,
-    emptyLabel = "No results found",
+    emptyLabel,
     name,
     required = false,
     disabled = false,
     searchable = true,
     invalid = undefined,
-    requiredLabel = "Please select an option",
+    requiredLabel,
 } = defineProps<SelectProps<Value>>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: Value];
 }>();
 
+const labels = useUiLabels();
+
 const open = ref(false);
 
 const container = useTemplateRef("container");
@@ -214,6 +249,12 @@ const trigger = useTemplateRef("trigger");
 
 const validity = useTemplateRef("validity");
 
+const listbox = useTemplateRef<InstanceType<typeof Stack>>("listbox");
+
+const { anchored, anchorStyle, layerStyle } = useAnchor(computed(() => listbox.value?.$el ?? null));
+
+const { search: typeahead } = useTypeahead();
+
 const listboxId = `select-${useId()}`;
 
 const controlId = `${listboxId}-control`;
@@ -260,7 +301,17 @@ const searchWidths: Record<SelectWidth, string> = {
 
 const listWidths: Record<SelectWidth, string> = {
     full: "inset-x-0",
-    fit: "left-0 w-max max-w-xs min-w-full",
+    fit: "start-0 w-max max-w-xs min-w-full",
+};
+
+const layerWidths: Record<SelectWidth, string> = {
+    full: "[width:anchor-size(width)]",
+    fit: "w-max max-w-xs [min-width:anchor-size(width)]",
+};
+
+const areas: Record<SelectPlacement, string> = {
+    bottom: "[position-area:block-end_span-inline-end]",
+    top: "[position-area:block-start_span-inline-end]",
 };
 
 const selected = computed(() => options.find((option) => option.value === modelValue));
@@ -275,6 +326,27 @@ const filtered = computed(() => {
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
 
+const sections = computed(() => {
+    const list: Array<{
+        group?: string;
+        start: number;
+        options: Array<{ option: SelectOption<Value>; index: number }>;
+    }> = [];
+
+    for (const [index, option] of filtered.value.entries()) {
+        const last = list[list.length - 1];
+
+        if (last && last.group === option.group) {
+            last.options.push({ option, index });
+            continue;
+        }
+
+        list.push({ group: option.group, start: index, options: [{ option, index }] });
+    }
+
+    return list;
+});
+
 const highlighted = ref(-1);
 
 const activeId = computed(() =>
@@ -307,17 +379,11 @@ function focusControl() {
     (search.value ?? trigger.value)?.focus();
 }
 
-function highlight(step: 1 | -1) {
+function highlight(start: number, step: 1 | -1) {
     const count = filtered.value.length;
 
-    if (count === 0) {
-        return;
-    }
-
-    let index = highlighted.value;
-
     for (let round = 0; round < count; round++) {
-        index = (index + step + count) % count;
+        const index = Math.min(count - 1, Math.max(0, start + step * round));
 
         if (!filtered.value[index].disabled) {
             highlighted.value = index;
@@ -329,14 +395,62 @@ function highlight(step: 1 | -1) {
     }
 }
 
-function stepHighlight(step: 1 | -1) {
-    if (!open.value) {
+function navigate(event: KeyboardEvent) {
+    const count = filtered.value.length;
+    const current = highlighted.value;
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+
+        if (!open.value) {
+            open.value = true;
+
+            return;
+        }
+
+        const step = event.key === "ArrowDown" ? 1 : -1;
+        let index = current;
+
+        for (let round = 0; round < count; round++) {
+            index = (index + step + count) % count;
+
+            if (!filtered.value[index].disabled) {
+                highlight(index, step);
+
+                return;
+            }
+        }
+    } else if (open.value && (event.key === "Home" || event.key === "End") && (!searchable || event.altKey)) {
+        event.preventDefault();
+
+        if (event.key === "Home") {
+            highlight(0, 1);
+        } else {
+            highlight(count - 1, -1);
+        }
+    } else if (open.value && (event.key === "PageDown" || event.key === "PageUp")) {
+        event.preventDefault();
+
+        if (event.key === "PageDown") {
+            highlight(Math.min(count - 1, Math.max(0, current) + 10), -1);
+        } else {
+            highlight(Math.max(0, current - 10), 1);
+        }
+    } else if (!searchable && isTypeaheadKey(event) && event.key !== " ") {
+        const options: Array<string> = [];
+
+        for (const option of filtered.value) {
+            options.push(option.label);
+        }
+
+        const index = typeahead(event.key, options, current);
+
         open.value = true;
 
-        return;
+        if (index !== -1) {
+            highlight(index, 1);
+        }
     }
-
-    highlight(step);
 }
 
 function confirm() {
@@ -372,7 +486,9 @@ watch(selected, (value) => {
 });
 
 watchEffect(() => {
-    (search.value ?? validity.value)?.setCustomValidity(required && !disabled && !selected.value ? requiredLabel : "");
+    (search.value ?? validity.value)?.setCustomValidity(
+        required && !disabled && !selected.value ? (requiredLabel ?? labels.selectRequired) : "",
+    );
 
     if (disabled) {
         open.value = false;
@@ -381,7 +497,9 @@ watchEffect(() => {
 
 watch(open, (value) => {
     if (value) {
-        highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);
+        if (highlighted.value === -1) {
+            highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);
+        }
 
         document.addEventListener("pointerdown", handlePointerDown);
 

package/dist/vue/components/sheet.vue

@@ -27,7 +27,7 @@
                     size="md"
                     variant="ghost"
                     :icon-prefix="CloseIcon"
-                    :aria-label="closeLabel"
+                    :aria-label="closeLabel ?? labels.close"
                     :disabled="!dismissible"
                     @click="dismiss"
                 />
@@ -55,6 +55,7 @@
 import { useId, useTemplateRef, type HTMLAttributes } from "vue";
 import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import type { SheetProps, SheetSide } from "../../components/sheet";
+import { useUiLabels } from "../utilities/labels";
 import { useModalDialog } from "../utilities/use-modal-dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
@@ -71,7 +72,7 @@ const {
     bodyAlign,
     bodyJustify,
     bodyWrap,
-    closeLabel = "Close",
+    closeLabel,
     dismissible = true,
 } = defineProps<SheetProps>();
 
@@ -79,6 +80,8 @@ const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
+const labels = useUiLabels();
+
 const sheet = useTemplateRef("sheet");
 
 const id = `sheet-${useId()}`;

package/dist/vue/components/shell.vue

@@ -19,7 +19,7 @@
         <Stack
             v-if="$slots.navigation"
             is="nav"
-            :aria-label="navigationLabel"
+            :aria-label="navigationLabel ?? labels.pageNavigation"
             direction="horizontal"
             gap="1"
             padding="1"
@@ -32,7 +32,10 @@
 
 <script setup lang="ts">
 import type { ShellProps } from "../../components/shell";
+import { useUiLabels } from "../utilities/labels";
 import Stack from "./stack.vue";
 
-const { label, headingLabel, sticky = true, navigationLabel = "Page navigation" } = defineProps<ShellProps>();
+const { label, headingLabel, sticky = true, navigationLabel } = defineProps<ShellProps>();
+
+const labels = useUiLabels();
 </script>

package/dist/vue/components/stepper.vue

@@ -0,0 +1,96 @@
+<template>
+    <nav :aria-label="label" class="w-full">
+        <Stack is="ol" :direction="orientation" gap="1" class="m-0 list-none p-0">
+            <li
+                v-for="(item, index) in items"
+                :key="item.value"
+                class="min-w-0"
+                :class="orientation === 'horizontal' ? 'flex-1' : ''"
+            >
+                <Button
+                    variant="ghost"
+                    layout="left"
+                    font="normal"
+                    class="w-full"
+                    :aria-current="index === currentIndex ? 'step' : undefined"
+                    :data-state="state(index)"
+                    :disabled="item.disabled || (linear && index > currentIndex)"
+                    @click="select(item.value)"
+                >
+                    <span
+                        class="shrink-0 rounded-ui p-1 text-xs/4 font-medium tabular-nums"
+                        :class="markers[state(index)]"
+                    >
+                        <Icon v-if="state(index) === 'complete'" :is="TickIcon" :size="16" />
+                        <span v-else class="block px-1">{{ index + 1 }}</span>
+                    </span>
+
+                    <Stack gap="0" class="min-w-0 flex-1 px-1">
+                        <span class="truncate" :class="state(index) === 'current' ? 'font-medium' : ''">
+                            {{ item.label }}
+                        </span>
+
+                        <span v-if="item.description" class="truncate text-xs text-muted-foreground">
+                            {{ item.description }}
+                        </span>
+                    </Stack>
+                </Button>
+            </li>
+        </Stack>
+    </nav>
+</template>
+
+<script setup lang="ts" generic="Value extends StepperValue = StepperValue">
+import TickIcon from "~icons/hugeicons/tick-02";
+import { computed, ref, watch } from "vue";
+import type { StepperProps, StepperState, StepperValue } from "../../components/stepper";
+import Button from "./button.vue";
+import Icon from "./icon.vue";
+import Stack from "./stack.vue";
+
+const { modelValue, items, label, orientation = "horizontal", linear = false } = defineProps<StepperProps<Value>>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: Value];
+}>();
+
+const selected = ref(modelValue);
+
+const currentIndex = computed(() =>
+    Math.max(
+        0,
+        items.findIndex((item) => item.value === selected.value),
+    ),
+);
+
+const markers: Record<StepperState, string> = {
+    complete: "bg-primary text-primary-foreground",
+    current: "bg-primary text-primary-foreground",
+    upcoming: "bg-secondary text-secondary-foreground",
+};
+
+function state(index: number): StepperState {
+    if (index < currentIndex.value) {
+        return "complete";
+    }
+
+    if (index === currentIndex.value) {
+        return "current";
+    }
+
+    return "upcoming";
+}
+
+function select(value: Value) {
+    selected.value = value;
+
+    emit("update:modelValue", value);
+}
+
+watch(
+    () => modelValue,
+    (value) => {
+        selected.value = value;
+    },
+);
+</script>

package/dist/vue/components/tabs.vue

@@ -1,12 +1,16 @@
 <template>
-    <Stack gap="3">
+    <Stack :direction="orientation === 'vertical' ? 'horizontal' : 'vertical'" gap="3">
         <Stack
-            direction="horizontal"
+            ref="tablist"
+            :direction="orientation === 'vertical' ? 'vertical' : 'horizontal'"
             gap="1"
             role="tablist"
             :aria-label="label"
+            :aria-orientation="orientation"
             class="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            :class="orientation === 'vertical' ? 'shrink-0' : ''"
             @keydown="handleKeyDown"
+            @focusin="handleFocusIn"
         >
             <Button
                 v-for="(item, index) in items"
@@ -15,13 +19,15 @@
                 role="tab"
                 font="medium"
                 :size="size"
+                :layout="orientation === 'vertical' ? 'left' : 'center'"
                 :variant="item.value === active ? 'secondary' : 'ghost'"
                 :icon-prefix="item.iconPrefix"
                 :label="item.label"
                 :disabled="item.disabled"
                 :aria-selected="item.value === active"
                 :aria-controls="$slots.default ? `${id}-panel` : undefined"
-                :tabindex="item.value === active ? 0 : -1"
+                :data-state="item.value === active ? 'active' : 'inactive'"
+                :data-value="index"
                 @click="select(item.value)"
             />
         </Stack>
@@ -33,7 +39,7 @@
             :aria-labelledby="`${id}-tab-${activeIndex}`"
             tabindex="0"
             gap="3"
-            class="rounded-ui outline-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]"
+            class="min-w-0 flex-1 rounded-ui outline-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]"
         >
             <slot :value="active" />
         </Stack>
@@ -41,12 +47,20 @@
 </template>
 
 <script setup lang="ts" generic="Value extends TabsValue = TabsValue">
-import { computed, nextTick, ref, useId, watch } from "vue";
+import { computed, ref, useId, useTemplateRef, watch } from "vue";
 import type { TabsProps, TabsValue } from "../../components/tabs";
+import { useRovingFocus } from "../utilities/use-roving-focus";
 import Button from "./button.vue";
 import Stack from "./stack.vue";
 
-const { modelValue, items, label, size = "md" } = defineProps<TabsProps<Value>>();
+const {
+    modelValue,
+    items,
+    label,
+    size = "md",
+    orientation = "horizontal",
+    activation = "automatic",
+} = defineProps<TabsProps<Value>>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: Value];
@@ -54,6 +68,8 @@ const emit = defineEmits<{
 
 const id = useId();
 
+const tablist = useTemplateRef<InstanceType<typeof Stack>>("tablist");
+
 const selected = ref(modelValue);
 
 const active = computed(() => {
@@ -79,49 +95,27 @@ const activeIndex = computed(() =>
     ),
 );
 
+const { handleKeyDown, handleFocusIn } = useRovingFocus(
+    computed(() => tablist.value?.$el ?? null),
+    () => ({
+        selector: "[role='tab']",
+        orientation,
+        onMove: (element: HTMLElement) => {
+            const item = items[Number(element.dataset.value)];
+
+            if (activation === "automatic" && item) {
+                select(item.value);
+            }
+        },
+    }),
+);
+
 function select(value: Value) {
     selected.value = value;
 
     emit("update:modelValue", value);
 }
 
-async function handleKeyDown(event: KeyboardEvent) {
-    const enabled: Array<number> = [];
-
-    for (const [index, item] of items.entries()) {
-        if (!item.disabled) {
-            enabled.push(index);
-        }
-    }
-
-    const position = enabled.indexOf(activeIndex.value);
-    let next = position;
-
-    if (event.key === "ArrowRight") {
-        next = (position + 1) % enabled.length;
-    } else if (event.key === "ArrowLeft") {
-        next = (position - 1 + enabled.length) % enabled.length;
-    } else if (event.key === "Home") {
-        next = 0;
-    } else if (event.key === "End") {
-        next = enabled.length - 1;
-    } else {
-        return;
-    }
-
-    event.preventDefault();
-
-    const index = enabled[next];
-
-    if (index === undefined) {
-        return;
-    }
-
-    select(items[index].value);
-    await nextTick();
-    document.getElementById(`${id}-tab-${index}`)?.focus();
-}
-
 watch(
     () => modelValue,
     (value) => {