@revojs/ui 0.2.11 → 0.2.13

package/dist/vue/components/container.vue

@@ -1,5 +1,14 @@
 <template>
-    <Stack gap="5" :padding="padding" :class="sizes[size]" class="mx-auto w-full">
+    <Stack
+        :gap="gap"
+        :padding="padding"
+        :direction="direction"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
+        :class="sizes[size]"
+        class="mx-auto w-full overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
         <slot />
     </Stack>
 </template>
@@ -8,7 +17,7 @@
 import type { ContainerProps, ContainerSize } from "../../components/container";
 import Stack from "./stack.vue";
 
-const { size = "5xl", padding = "5" } = defineProps<ContainerProps>();
+const { size = "5xl", padding = "5", gap = "5", direction, align, justify, wrap } = defineProps<ContainerProps>();
 
 const sizes: Record<ContainerSize, string> = {
     "3xl": "max-w-3xl",

package/dist/vue/components/counter.vue

@@ -1,10 +1,8 @@
 <template>
     <Stack>
-        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+        <span v-if="label" class="text-sm font-normal">{{ label }}</span>
 
-        <div
-            class="grid h-10 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center overflow-hidden rounded-ui border border-input"
-        >
+        <div class="relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center overflow-hidden rounded-ui">
             <Button
                 class="text-lg"
                 size="icon"
@@ -26,6 +24,11 @@
                 aria-label="Increase"
                 @click="change(step)"
             />
+
+            <span
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 rounded-ui ring-1 ring-input ring-inset"
+            />
         </div>
     </Stack>
 </template>

package/dist/vue/components/dialog.vue

@@ -1,14 +1,40 @@
 <template>
     <dialog
         ref="dialog"
-        class="m-auto w-full max-w-lg border-0 bg-transparent p-5 backdrop:bg-black/50"
-        @close="$emit('update:modelValue', false)"
-        @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
+        class="fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center overflow-y-auto border-0 bg-transparent p-5 backdrop:bg-black/50 open:flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        :aria-labelledby="label && !$slots.header ? (labelId ?? id) : ($attrs as HTMLAttributes)['aria-labelledby']"
+        @close="handleClose"
+        @cancel="dismiss"
+        @click="$event.target === $event.currentTarget && dismiss($event)"
     >
-        <Card :title="title" :description="description" class="shadow-2xl">
+        <Card
+            :label="label"
+            :label-id="labelId ?? id"
+            :body-padding="bodyPadding"
+            :body-gap="bodyGap"
+            :body-direction="bodyDirection"
+            :body-align="bodyAlign"
+            :body-justify="bodyJustify"
+            :body-wrap="bodyWrap"
+            class="my-auto max-w-3xl shrink-0 shadow-2xl"
+        >
+            <template v-if="$slots.header" #header>
+                <slot name="header" />
+            </template>
+
             <template #actions>
-                <Button size="icon" variant="ghost" :icon-prefix="CloseIcon" :aria-label="closeLabel" @click="close" />
+                <slot name="actions" />
+
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    :icon-prefix="CloseIcon"
+                    :aria-label="closeLabel"
+                    :disabled="!dismissible"
+                    @click="dismiss"
+                />
             </template>
+
             <slot :open="open" :close="close" :toggle="toggle" />
 
             <template v-if="$slots.footer" #footer>
@@ -20,14 +46,25 @@
 
 <script setup lang="ts">
 import CloseIcon from "~icons/hugeicons/multiplication-sign";
-import { useTemplateRef, watchEffect } from "vue";
+import { useId, useTemplateRef, type HTMLAttributes } from "vue";
 import type { DialogProps } from "../../components/dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
-import { useScrollLock } from "../utilities/use-scroll-lock";
+import { useModalDialog } from "../utilities/use-modal-dialog";
 
-const { modelValue = false, title, description, closeLabel = "Close" } = defineProps<DialogProps>();
+const {
+    modelValue = undefined,
+    label,
+    labelId,
+    bodyPadding,
+    bodyGap,
+    bodyDirection,
+    bodyAlign,
+    bodyJustify,
+    bodyWrap,
+    closeLabel = "Close",
+    dismissible = true,
+} = defineProps<DialogProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];
@@ -35,34 +72,14 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef("dialog");
 
-useFocusTrap(dialog, () => modelValue);
-
-useScrollLock(() => modelValue);
-
-function open() {
-    emit("update:modelValue", true);
-}
-
-function close() {
-    dialog.value?.close();
-    emit("update:modelValue", false);
-}
-
-function toggle() {
-    if (modelValue) {
-        close();
-    } else {
-        open();
-    }
-}
+const id = `dialog-${useId()}`;
 
-watchEffect(() => {
-    if (modelValue && !dialog.value?.open) {
-        dialog.value?.showModal();
-    } else if (!modelValue && dialog.value?.open) {
-        dialog.value.close();
-    }
-});
+const { open, close, toggle, dismiss, handleClose } = useModalDialog(
+    dialog,
+    () => modelValue,
+    (value) => emit("update:modelValue", value),
+    () => dismissible,
+);
 
 defineExpose({ open, close, toggle });
 </script>

package/dist/vue/components/entry.vue

@@ -0,0 +1,52 @@
+<template>
+    <Stack
+        :is="href ? 'a' : is"
+        :href="href"
+        :padding="padding"
+        :gap="gap"
+        :direction="direction"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
+        :aria-current="active && href ? 'page' : undefined"
+        class="min-w-0 text-sm"
+        :class="[
+            href
+                ? 'cursor-pointer outline-ring hover:bg-ghost-hover active:bg-ghost-active focus-visible:outline-2 focus-visible:outline-offset-[-2px]'
+                : '',
+            active ? 'bg-secondary text-secondary-foreground' : '',
+        ]"
+    >
+        <Stack v-if="$slots.prefix" gap="0" class="shrink-0">
+            <slot name="prefix" />
+        </Stack>
+
+        <Stack gap="0" class="min-w-0 flex-1">
+            <slot
+                ><span class="truncate">{{ label }}</span></slot
+            >
+        </Stack>
+
+        <Stack v-if="$slots.suffix" gap="0" class="shrink-0">
+            <slot name="suffix" />
+        </Stack>
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import type { EntryProps } from "../../components/entry";
+import Stack from "./stack.vue";
+
+const {
+    is = "div",
+    href,
+    label,
+    active = false,
+    padding = "5",
+    gap = "3",
+    direction = "horizontal",
+    align = "center",
+    justify = "between",
+    wrap = false,
+} = defineProps<EntryProps & { is?: string }>();
+</script>

package/dist/vue/components/field.vue

@@ -1,23 +1,58 @@
 <template>
-    <Stack is="fieldset" :disabled="disabled">
-        <legend v-if="label" class="mb-1 text-sm font-medium">
-            {{ label }}<span v-if="required" aria-hidden="true"> *</span>
-        </legend>
+    <Stack
+        :is="is ?? (controlId ? 'div' : 'fieldset')"
+        :disabled="is !== 'div' && !controlId ? disabled : undefined"
+        :class="texts[text]"
+    >
+        <component
+            :is="controlId ? 'label' : is === 'div' ? 'span' : 'legend'"
+            v-if="label"
+            :for="controlId"
+            class="font-normal"
+            :class="!controlId && is !== 'div' ? 'mb-1' : ''"
+        >
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
+        </component>
 
-        <slot />
+        <slot :control="controlAttributes" />
 
-        <p v-if="error" class="text-sm text-destructive">
+        <p v-if="error" :id="`${id}-error`" role="alert" class="text-destructive">
             {{ error }}
         </p>
-        <p v-else-if="description" class="text-sm opacity-60">
+        <p v-else-if="description" :id="`${id}-description`" class="opacity-60">
             {{ description }}
         </p>
     </Stack>
 </template>
 
 <script setup lang="ts">
-import type { FieldProps } from "../../components/field";
+import { computed, useId } from "vue";
+import type { FieldProps, FieldText } from "../../components/field";
 import Stack from "./stack.vue";
 
-const { label, description, error, required = false, disabled = false } = defineProps<FieldProps>();
+const {
+    label,
+    description,
+    error,
+    text = "sm",
+    required = false,
+    disabled = false,
+    for: controlId,
+    is,
+} = defineProps<FieldProps>();
+
+const id = useId();
+
+const controlAttributes = computed(() => ({
+    id: controlId,
+    required,
+    disabled,
+    "aria-describedby": error ? `${id}-error` : description ? `${id}-description` : undefined,
+    "aria-invalid": error ? true : undefined,
+}));
+
+const texts: Record<FieldText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
 </script>

package/dist/vue/components/input.vue

@@ -1,17 +1,27 @@
 <template>
     <Stack
+        v-bind="rootAttributes"
         is="span"
         direction="horizontal"
         align="center"
-        class="min-h-10 w-full cursor-text rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
-        :class="interactionVariants[interaction]"
+        gap="0"
+        class="w-full cursor-text rounded-ui bg-secondary p-3 ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
+        :class="[
+            texts[text],
+            interactionVariants[interaction],
+            (invalid ?? (controlAttributes['aria-invalid'] === true || controlAttributes['aria-invalid'] === 'true'))
+                ? 'ring-2 ring-destructive'
+                : '',
+        ]"
     >
         <slot name="leading" />
 
         <Icon v-if="iconPrefix" :is="iconPrefix" :size="iconSize" />
 
         <input
-            class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
+            v-bind="controlAttributes"
+            ref="control"
+            class="w-full min-w-0 appearance-none bg-transparent px-1 outline-none placeholder:opacity-50"
             :value="modelValue"
             :type="type"
             :name="name"
@@ -20,6 +30,7 @@
             :required="required"
             :readonly="readonly"
             :disabled="disabled"
+            :aria-invalid="invalid ?? controlAttributes['aria-invalid']"
             @input="input"
         />
 
@@ -30,15 +41,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { InputProps } from "../../components/input";
+import type { InputProps, InputText } from "../../components/input";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
+import { useControlAttributes } from "../utilities/use-control-attributes";
+
+defineOptions({ inheritAttrs: false });
 
 const {
     modelValue,
     type = "text",
+    text = "sm",
     iconPrefix,
     iconSuffix,
     placeholder,
@@ -47,9 +62,21 @@ const {
     required = false,
     readonly = false,
     disabled = false,
+    invalid = undefined,
 } = defineProps<InputProps>();
 
-const iconSize = 20;
+const { rootAttributes, controlAttributes } = useControlAttributes();
+
+const control = useTemplateRef("control");
+
+defineExpose({ focus: () => control.value?.focus() });
+
+const iconSize = computed(() => (text === "sm" ? 20 : 24));
+
+const texts: Record<InputText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
 
 const emit = defineEmits<{
     "update:modelValue": [value: string | number];

package/dist/vue/components/link.vue

@@ -1,7 +1,7 @@
 <template>
     <component
         :is="is"
-        class="cursor-pointer underline-offset-4 transition-colors hover:underline"
+        class="cursor-pointer underline-offset-4 hover:underline"
         :class="variants[variant]"
         :href="href"
     >

package/dist/vue/components/navigate.vue

@@ -8,6 +8,7 @@
         :icon-prefix="iconPrefix"
         :icon-suffix="iconSuffix"
         :label="label"
+        :aria-current="active ? 'page' : undefined"
     />
 </template>
 

package/dist/vue/components/notification.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        :role="announce ? (variant === 'error' ? 'alert' : 'status') : undefined"
+        class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-3 rounded-ui border p-3 text-sm"
+        :class="[variants[variant], $slots.actions ? 'sm:grid-cols-[auto_minmax(0,1fr)_auto]' : '']"
+    >
+        <Stack gap="0" class="shrink-0">
+            <slot name="icon">
+                <Icon :is="icon ?? icons[variant]" :size="20" />
+            </slot>
+        </Stack>
+
+        <Stack gap="1" class="min-w-0">
+            <p v-if="label" class="text-sm/5 font-medium">{{ label }}</p>
+
+            <div v-if="subtext || $slots.default" class="text-sm/5 text-muted-foreground">
+                <slot>{{ subtext }}</slot>
+            </div>
+        </Stack>
+
+        <Stack
+            v-if="$slots.actions"
+            direction="horizontal"
+            align="center"
+            gap="1"
+            wrap
+            class="col-start-2 sm:col-start-auto"
+        >
+            <slot name="actions" />
+        </Stack>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AlertIcon from "~icons/hugeicons/alert-circle";
+import CheckmarkIcon from "~icons/hugeicons/checkmark-circle-02";
+import InformationIcon from "~icons/hugeicons/information-circle";
+import type { IconComponent } from "../../components/icon";
+import type { NotificationProps, NotificationVariant } from "../../components/notification";
+import Icon from "./icon.vue";
+import Stack from "./stack.vue";
+
+const { label, subtext, icon, variant = "info", announce = true } = defineProps<NotificationProps>();
+
+const icons: Record<NotificationVariant, IconComponent> = {
+    error: AlertIcon,
+    attention: AlertIcon,
+    success: CheckmarkIcon,
+    info: InformationIcon,
+};
+
+const variants: Record<NotificationVariant, string> = {
+    error: "border-destructive/30 bg-destructive/5 text-destructive",
+    attention: "border-attention/30 bg-attention/5 text-attention",
+    success: "border-success/30 bg-success/5 text-success",
+    info: "border-border bg-muted/50 text-foreground",
+};
+</script>

package/dist/vue/components/pagination.vue

@@ -0,0 +1,24 @@
+<template>
+    <Stack is="nav" :aria-label="label" direction="horizontal" justify="end" gap="1" :aria-busy="loading || undefined">
+        <Button :label="previousLabel" variant="ghost" :disabled="!hasPrevious || loading" @click="$emit('previous')" />
+
+        <Button :label="nextLabel" variant="ghost" :disabled="!hasNext || loading" @click="$emit('next')" />
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import type { PaginationProps } from "../../components/pagination";
+import Button from "./button.vue";
+import Stack from "./stack.vue";
+
+const {
+    hasPrevious = false,
+    hasNext = false,
+    loading = false,
+    previousLabel = "Previous",
+    nextLabel = "Next",
+    label = "Pagination",
+} = defineProps<PaginationProps>();
+
+defineEmits<{ previous: []; next: [] }>();
+</script>

package/dist/vue/components/popover.vue

@@ -1,16 +1,38 @@
 <template>
-    <div ref="container" class="relative inline-flex">
-        <Button variant="outline" :class="triggerClass" :layout="triggerLayout" :disabled="disabled" @click="toggle">
-            <slot name="trigger" :open="open" :close="close" :toggle="toggle">{{ triggerLabel }}</slot>
+    <div
+        ref="container"
+        class="relative w-full"
+        @keydown="handleKeyDown"
+        @focusout="$event.relatedTarget && !container?.contains($event.relatedTarget as Node) && close()"
+    >
+        <Button
+            :variant="triggerVariant"
+            :class="triggerClass"
+            :layout="triggerLayout"
+            :disabled="disabled"
+            :aria-expanded="isOpen"
+            @click="toggle"
+        >
+            <slot name="trigger" :open="open" :close="close" :toggle="toggle">
+                <span class="truncate px-1" :class="triggerLayout === 'center' ? '' : 'flex-1'">{{
+                    triggerLabel
+                }}</span>
+            </slot>
         </Button>
 
-        <div
+        <Stack
             v-if="isOpen"
-            class="absolute left-0 top-full z-10 mt-1 max-w-sm rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
+            :padding="contentPadding"
+            :gap="contentGap"
+            :direction="contentDirection"
+            :align="contentAlign"
+            :justify="contentJustify"
+            :wrap="contentWrap"
+            class="absolute left-0 top-full z-10 mt-1 max-w-xs rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
             :class="[contentClass, matchTriggerWidth ? 'w-full' : '']"
         >
             <slot :open="open" :close="close" :toggle="toggle" />
-        </div>
+        </Stack>
     </div>
 </template>
 
@@ -18,15 +40,22 @@
 import { onUnmounted, ref, useTemplateRef, watch } from "vue";
 import type { PopoverProps } from "../../components/popover";
 import Button from "./button.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
+import Stack from "./stack.vue";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
     triggerClass,
     triggerLayout = "center",
-    contentClass = "flex flex-col gap-1 p-1",
-    matchTriggerWidth = false,
+    triggerVariant = "outline",
+    contentClass,
+    contentPadding = "1",
+    contentGap = "1",
+    contentDirection,
+    contentAlign,
+    contentJustify,
+    contentWrap,
+    matchTriggerWidth = true,
     disabled = false,
 } = defineProps<PopoverProps>();
 
@@ -38,8 +67,6 @@ const container = useTemplateRef("container");
 
 const isOpen = ref(modelValue);
 
-useFocusTrap(container, isOpen);
-
 function setOpen(value: boolean) {
     isOpen.value = value;
 
@@ -65,22 +92,25 @@ function handlePointerDown(event: PointerEvent) {
 }
 
 function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && isOpen.value) {
+        event.preventDefault();
+        event.stopPropagation();
         close();
+        container.value?.querySelector<HTMLButtonElement>("button")?.focus();
     }
 }
 
 watch(
     isOpen,
     (value) => {
+        if (typeof document === "undefined") {
+            return;
+        }
+
         if (value) {
             document.addEventListener("pointerdown", handlePointerDown);
-
-            document.addEventListener("keydown", handleKeyDown);
         } else {
             document.removeEventListener("pointerdown", handlePointerDown);
-
-            document.removeEventListener("keydown", handleKeyDown);
         }
     },
     { immediate: true },
@@ -95,8 +125,6 @@ watch(
 
 onUnmounted(() => {
     document.removeEventListener("pointerdown", handlePointerDown);
-
-    document.removeEventListener("keydown", handleKeyDown);
 });
 
 defineExpose({ open, close, toggle });

package/dist/vue/components/progress.vue

@@ -1,7 +1,7 @@
 <template>
     <Stack>
         <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
-            <span class="font-medium">{{ label }}</span>
+            <span class="font-normal">{{ label }}</span>
 
             <span class="tabular-nums opacity-60">{{ Math.round(percent) }}%</span>
         </Stack>
@@ -16,7 +16,7 @@
             aria-valuemin="0"
             :aria-valuemax="max"
         >
-            <div class="h-full rounded-ui bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
+            <div class="h-full rounded-ui bg-primary" :style="{ width: `${percent}%` }" />
         </div>
     </Stack>
 </template>

package/dist/vue/components/radio.vue

@@ -1,5 +1,12 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="start"
+        gap="3"
+        class="group"
+        :class="interactionVariants[interaction]"
+    >
         <input
             class="peer sr-only"
             type="radio"
@@ -13,14 +20,21 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
-            :class="modelValue === value ? 'border-primary bg-background' : 'border-input bg-background'"
+            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
+            :class="[
+                modelValue === value ? 'border-primary bg-background' : 'border-input bg-background',
+                disabled ? '' : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
         >
-            <span v-if="modelValue === value" class="size-2 rounded-ui bg-primary" />
+            <span
+                v-if="modelValue === value"
+                class="size-2 rounded-ui bg-primary"
+                :class="disabled ? '' : 'group-hover:bg-secondary-foreground group-active:bg-secondary-foreground'"
+            />
         </span>
 
         <Stack is="span" gap="0">
-            <span class="text-sm font-medium">
+            <span class="text-sm font-normal">
                 <slot> {{ label }}</slot>
             </span>
 

package/dist/vue/components/range.vue

@@ -1,7 +1,7 @@
 <template>
     <Stack :class="interactionVariants[interaction]">
         <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
-            <span class="font-medium"> {{ label }} </span>
+            <span class="font-normal"> {{ label }} </span>
 
             <output class="tabular-nums opacity-60">
                 {{ modelValue }}