@una-ui/nuxt 0.61.0 → 1.0.0-alpha.2

package/dist/runtime/components/forms/Slider.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
-import { computed } from "vue";
 import { cn } from "../../utils";
 const props = defineProps({
   slider: { type: String, required: false, default: "primary" },
-  size: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
   una: { type: Object, required: false },
   defaultValue: { type: Array, required: false },
   modelValue: { type: [Array, null], required: false },
@@ -25,37 +24,38 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const emits = defineEmits(["update:modelValue", "valueCommit"]);
-const rootProps = reactiveOmit(props, ["class", "una", "slider", "una"]);
+const rootProps = reactiveOmit(props, ["class", "una", "slider"]);
 const forwarded = useForwardPropsEmits(rootProps, emits);
-const isVertical = computed(() => props.orientation === "vertical");
 </script>
 
 <template>
   <SliderRoot
     v-slot="{ modelValue }"
+    data-slot="slider-root"
     :class="cn(
   'slider-root',
-  isVertical && 'slider-root-vertical',
   props.class,
-  props.una?.sliderRoot,
-  disabled && 'slider-disabled'
+  props.una?.sliderRoot
 )"
     v-bind="forwarded"
-    :slider="slider"
+    :slider
+    :size
   >
     <slot name="slider-track">
       <SliderTrack
+        data-slot="slider-track"
         :class="cn(
   'slider-track',
-  isVertical && 'slider-track-vertical',
   props.una?.sliderTrack
 )"
+        :size
       >
         <slot name="slider-range">
           <SliderRange
+            data-slot="slider-range"
+            :size
             :class="cn(
   'slider-range',
-  isVertical && 'slider-range-vertical',
   props.una?.sliderRange
 )"
           />
@@ -67,9 +67,10 @@ const isVertical = computed(() => props.orientation === "vertical");
       <SliderThumb
         v-for="(_, key) in modelValue"
         :key="key"
+        data-slot="slider-thumb"
+        :size
         :class="cn(
   'slider-thumb',
-  isVertical && 'slider-thumb-vertical',
   props.una?.sliderThumb
 )"
       />

package/dist/runtime/components/forms/Slider.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import("vue").DefineComponent<NSliderProps, {}, {
     "onUpdate:modelValue"?: ((payload: number[] | undefined) => any) | undefined;
     onValueCommit?: ((payload: number[]) => any) | undefined;
 }>, {
+    size: string;
     slider: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/forms/form/FormField.vue

@@ -32,7 +32,7 @@ const statusClassVariants = computed(() => {
     success: "text-success",
     warning: "text-warning",
     error: "text-error",
-    default: "text-muted"
+    default: "text-muted-foreground"
   };
   return text[props.status ?? "default"];
 });

package/dist/runtime/components/forms/radio-group/RadioGroupItem.vue.d.ts

@@ -8,8 +8,8 @@ type __VLS_Slots = {} & {
     description?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NRadioGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NRadioGroupItemProps> & Readonly<{}>, {
-    size: import("vue").HTMLAttributes["class"];
     icon: import("vue").HTMLAttributes["class"];
+    size: import("vue").HTMLAttributes["class"];
     square: import("vue").HTMLAttributes["class"];
     radioGroup: import("vue").HTMLAttributes["class"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -7,7 +7,7 @@ import Button from "../../elements/Button.vue";
 import Icon from "../../elements/Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
-  select: { type: String, required: false, default: "solid-white" },
+  select: { type: String, required: false, default: "outline-gray" },
   status: { type: String, required: false },
   una: { type: Object, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -1,32 +1,47 @@
 <script setup>
-import { useColorMode } from "#imports";
+import { useAppConfig, useColorMode } from "#imports";
 import { useToggle } from "@vueuse/core";
 import { capitalize, computed } from "vue";
 import { useUnaSettings } from "../../composables/useUnaSettings";
 import { useUnaThemes } from "../../composables/useUnaThemes";
 import { RADIUS } from "../../constants";
 import Button from "../elements/Button.vue";
+import Icon from "../elements/Icon.vue";
 import Label from "../elements/Label.vue";
 import Popover from "../elements/popover/Popover.vue";
 import Separator from "../elements/Separator.vue";
 const colorMode = useColorMode();
 const [value, toggle] = useToggle();
 const { primaryThemes, grayThemes } = useUnaThemes();
+const { una: { themes } } = useAppConfig();
 const { settings, reset } = useUnaSettings();
 const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.["--una-primary-hex"]);
 const currentPrimaryThemeName = computed(() => {
+  if (settings.value.theme) {
+    return settings.value.theme;
+  }
   const theme = primaryThemes.find(([, theme2]) => theme2["--una-primary-hex"] === currentPrimaryThemeHex.value);
   return theme ? theme[0] : "";
 });
 const currentGrayThemeHex = computed(() => settings.value.grayColors?.["--una-gray-hex"]);
 const currentGrayThemeName = computed(() => {
+  if (settings.value.theme) {
+    return settings.value.theme;
+  }
   const theme = grayThemes.find(([, theme2]) => theme2["--una-gray-hex"] === currentGrayThemeHex.value);
   return theme ? theme[0] : "";
 });
+function updateTheme(theme) {
+  settings.value.theme = theme;
+  settings.value.primary = false;
+  settings.value.gray = false;
+}
 function updatePrimaryTheme(theme) {
+  settings.value.theme = false;
   settings.value.primary = theme;
 }
 function updateGrayTheme(theme) {
+  settings.value.theme = false;
   settings.value.gray = theme;
 }
 function shuffleTheme() {
@@ -62,8 +77,7 @@ function shuffleTheme() {
       <slot name="trigger" :open="open">
         <Button
           btn="soft"
-          square
-          icon
+          icon square
           label="i-lucide-paintbrush"
         />
       </slot>
@@ -72,32 +86,81 @@ function shuffleTheme() {
     <slot name="content">
       <div class="flex flex-col">
         <div class="grid space-y-1">
-          <h1 class="text-md text-base font-semibold">
+          <h1 class="text-md text-foreground font-semibold">
             Customize
           </h1>
-          <p class="text-xs text-muted">
+          <p class="text-xs text-muted-foreground">
             Pick a style and color for your components.
           </p>
         </div>
 
+        <template v-if="themes.length > 0">
+          <Separator />
+
+          <div
+            class="space-y-2"
+          >
+            <Label for="color" class="text-xs"> Themes</Label>
+            <div class="grid grid-cols-2 gap-3">
+              <template
+                v-for="theme in themes"
+                :key="theme"
+              >
+                <Button
+                  v-if="theme"
+                  btn="outline-gray"
+                  size="xs"
+                  :title="capitalize(theme?.name)"
+                  class="justify-start gap-2 ring-primary"
+                  :aria-label="`Theme: ${theme.name}`"
+                  :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
+                  @click="updateTheme(theme.name)"
+                >
+                  <template #leading>
+                    <Icon
+                      name="i-tabler-circle-filled"
+                      square="4.5"
+                      :style="{
+  '--c-primary': `oklch(${theme?.cssVars.dark['--una-primary']})`,
+  '--c-primary-foreground': `oklch(${theme?.cssVars.dark['--una-background']})`
+}"
+                      class="shrink-0 rounded-full from-$c-primary to-$c-primary-foreground from-20% bg-gradient-to-b"
+                    />
+                  </template>
+
+                  <span class="truncate text-xs">
+                    {{ theme.name }}
+                  </span>
+                </Button>
+              </template>
+            </div>
+          </div>
+        </template>
+
         <Separator />
 
         <div class="space-y-2">
           <Label for="color" class="text-xs"> Primary Color</Label>
           <div class="grid grid-cols-7 gap-3">
-            <button
+            <template
               v-for="[key, theme] in primaryThemes"
               :key="key"
-              :title="capitalize(key)"
-              :style="{ background: theme['--una-primary-hex'] }"
-              class="transition-all"
-              rounded="full"
-              square="6.5"
-              :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
-              ring="primary offset-4 offset-base"
-              :aria-label="`Primary Color: ${key}`"
-              @click="updatePrimaryTheme(key)"
-            />
+            >
+              <button
+                :title="capitalize(key)"
+                :style="{
+  '--c-primary': `oklch(${theme['--una-primary-600']})`,
+  '--c-primary-foreground': `oklch(${theme['--una-primary-500']})`
+}"
+                class="bg-$c-primary transition-all dark:bg-$c-primary-foreground"
+                rounded="full"
+                square="6.5"
+                :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
+                ring="primary offset-4 offset-background"
+                :aria-label="`Primary Color: ${key}`"
+                @click="updatePrimaryTheme(key)"
+              />
+            </template>
           </div>
         </div>
 
@@ -106,19 +169,25 @@ function shuffleTheme() {
         <div class="space-y-2">
           <Label for="color" class="text-xs"> Gray Color </Label>
           <div class="grid grid-cols-7 gap-3">
-            <button
+            <template
               v-for="[key, theme] in grayThemes"
               :key="key"
-              :title="capitalize(key)"
-              :style="{ background: theme['--una-gray-hex'] }"
-              :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
-              class="transition-all"
-              rounded="full"
-              square="6.5"
-              :aria-label="`Gray Color: ${key}`"
-              ring="gray offset-4 offset-base"
-              @click="updateGrayTheme(key)"
-            />
+            >
+              <button
+                :title="capitalize(key)"
+                :style="{
+  '--c-gray': `oklch(${theme['--una-gray-600']})`,
+  '--c-gray-foreground': `oklch(${theme['--una-gray-500']})`
+}"
+                class="bg-$c-gray transition-all dark:bg-$c-gray-foreground"
+                rounded="full"
+                square="6.5"
+                :class="[currentGrayThemeName === key ? 'ring-2' : 'scale-93']"
+                ring="gray offset-4 offset-background"
+                :aria-label="`Gray Color: ${key}`"
+                @click="updateGrayTheme(key)"
+              />
+            </template>
           </div>
         </div>
 
@@ -130,7 +199,7 @@ function shuffleTheme() {
             <Button
               v-for="r in RADIUS"
               :key="r"
-              btn="solid-gray"
+              btn="outline-gray"
               size="xs"
               :class="
   r === settings.radius ? 'ring-2 ring-primary' : ''
@@ -149,7 +218,7 @@ function shuffleTheme() {
 
           <div class="flex justify-around py-1.5 space-x-2">
             <Button
-              btn="solid-gray"
+              btn="outline-gray"
               :class="{ 'ring-2 ring-primary': colorMode.preference === 'system' }"
               leading="i-radix-icons-desktop"
               class="px-3"
@@ -159,7 +228,7 @@ function shuffleTheme() {
             />
 
             <Button
-              btn="solid-gray"
+              btn="outline-gray"
               :class="{ 'ring-2 ring-primary': colorMode.preference === 'light' }"
               leading="i-radix-icons-sun"
               class="px-3"
@@ -169,7 +238,7 @@ function shuffleTheme() {
             />
 
             <Button
-              btn="solid-gray"
+              btn="outline-gray"
               :class="{ 'ring-2 ring-primary': colorMode.preference === 'dark' }"
               leading="i-radix-icons-moon"
               class="px-3"
@@ -185,7 +254,7 @@ function shuffleTheme() {
         <div class="grid grid-cols-2 gap-2">
           <Button
             size="xs"
-            btn="solid-gray"
+            btn="outline-gray"
             label="Reset"
             leading="i-radix-icons-reload"
             @click="reset"

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbEllipsis.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NBreadcrumbEllipsisProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NBreadcrumbEllipsisProps> & Readonly<{}>, {
-    size: string;
     icon: string;
+    size: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbPage.vue

@@ -10,7 +10,7 @@ const props = defineProps({
     role="link"
     aria-disabled="true"
     aria-current="page"
-    :class="cn('font-normal text-base', props.class)"
+    :class="cn('font-normal text-foreground', props.class)"
   >
     <slot />
   </span>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbSeparator.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NBreadcrumbSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NBreadcrumbSeparatorProps> & Readonly<{}>, {
-    size: string;
     icon: string;
+    size: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/navigation-menu/NavigationMenuLink.vue.d.ts

@@ -14,9 +14,9 @@ declare const __VLS_component: import("vue").DefineComponent<NNavigationMenuLink
         originalEvent: Event;
     }>) => any) | undefined;
 }>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
     btn: string;
     navigationMenuLink: string;
+    as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/navigation-menu/NavigationMenuTrigger.vue.d.ts

@@ -4,10 +4,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NNavigationMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NNavigationMenuTriggerProps> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
     btn: string;
     trailing: string;
     navigationMenu: string;
+    as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/number-field/NumberField.vue.d.ts

@@ -14,9 +14,9 @@ declare const __VLS_component: import("vue").DefineComponent<NNumberFieldProps,
 }, string, import("vue").PublicProps, Readonly<NNumberFieldProps> & Readonly<{
     "onUpdate:modelValue"?: ((val: number) => any) | undefined;
 }>, {
-    size: import("vue").HTMLAttributes["class"];
     leading: string;
     trailing: string;
+    size: import("vue").HTMLAttributes["class"];
     numberField: import("vue").HTMLAttributes["class"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/number-field/NumberFieldDecrement.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NNumberFieldDecrementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NNumberFieldDecrementProps> & Readonly<{}>, {
-    size: import("vue").HTMLAttributes["class"];
     icon: string;
+    size: import("vue").HTMLAttributes["class"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/number-field/NumberFieldIncrement.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NNumberFieldIncrementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NNumberFieldIncrementProps> & Readonly<{}>, {
-    size: import("vue").HTMLAttributes["class"];
     icon: string;
+    size: import("vue").HTMLAttributes["class"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/overlays/toast/ToastAction.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NToastActionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NToastActionProps> & Readonly<{}>, {
-    size: string;
     btn: string;
+    size: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/scroll-area/ScrollArea.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NScrollAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NScrollAreaProps> & Readonly<{}>, {
-    rounded: import("vue").HTMLAttributes["class"];
     size: import("vue").HTMLAttributes["class"];
+    rounded: import("vue").HTMLAttributes["class"];
     scrollArea: import("vue").HTMLAttributes["class"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/sheet/Sheet.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false },
   sheet: { type: null, required: false },
-  preventClose: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
   showClose: { type: Boolean, required: false, default: true },
   overlay: { type: Boolean, required: false, default: true }
 });
@@ -40,8 +40,12 @@ const forwarded = useForwardPropsEmits(rootProps, emits);
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="forwarded">
-    <slot name="root">
+  <DialogRoot
+    v-slot="{ open }"
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot>
       <SheetTrigger
         v-if="$slots.trigger"
         v-bind="_sheetTrigger"
@@ -54,7 +58,7 @@ const forwarded = useForwardPropsEmits(rootProps, emits);
         :_sheet-overlay
         :_sheet-portal
         :sheet
-        :prevent-close
+        :dismissible
         :show-close
         :overlay
         v-bind="_sheetContent"
@@ -99,7 +103,9 @@ const forwarded = useForwardPropsEmits(rootProps, emits);
             </slot>
           </SheetHeader>
 
-          <slot />
+          <slot name="body">
+            <slot />
+          </slot>
 
           <SheetFooter
             v-if="$slots.footer"

package/dist/runtime/components/sheet/Sheet.vue.d.ts

@@ -1,9 +1,9 @@
 import type { NSheetProps } from '../../types/index.js';
 declare var __VLS_6: {}, __VLS_11: {
     open: boolean;
-}, __VLS_26: {}, __VLS_31: {}, __VLS_36: {}, __VLS_41: {}, __VLS_43: {}, __VLS_48: {};
+}, __VLS_26: {}, __VLS_31: {}, __VLS_36: {}, __VLS_41: {}, __VLS_43: {}, __VLS_45: {}, __VLS_50: {};
 type __VLS_Slots = {} & {
-    root?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
     trigger?: (props: typeof __VLS_11) => any;
 } & {
@@ -15,15 +15,18 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_41) => any;
 } & {
-    default?: (props: typeof __VLS_43) => any;
+    body?: (props: typeof __VLS_43) => any;
 } & {
-    footer?: (props: typeof __VLS_48) => any;
+    default?: (props: typeof __VLS_45) => any;
+} & {
+    footer?: (props: typeof __VLS_50) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<NSheetProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    dismissible: boolean;
     overlay: boolean;
     showClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/sheet/SheetClose.vue

@@ -38,6 +38,7 @@ const props = defineProps({
 
 <template>
   <DialogClose
+    data-slot="sheet-close"
     as-child
   >
     <slot>

package/dist/runtime/components/sheet/SheetContent.vue

@@ -1,16 +1,17 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
 import { cn } from "../../utils";
 import SheetClose from "./SheetClose.vue";
+import SheetOverlay from "./SheetOverlay.vue";
 defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
   class: { type: null, required: false },
   sheet: { type: null, required: false, default: "right" },
-  preventClose: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
   showClose: { type: Boolean, required: false, default: true },
   overlay: { type: Boolean, required: false, default: true },
   _sheetClose: { type: Object, required: false },
@@ -27,7 +28,7 @@ const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside"
 const contentProps = reactiveOmit(props, ["sheet", "class", "_sheetClose", "_sheetPortal", "_sheetOverlay"]);
 const forwarded = useForwardPropsEmits(contentProps, emits);
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e) => e.preventDefault(),
       interactOutside: (e) => e.preventDefault(),
@@ -46,12 +47,12 @@ const contentEvents = computed(() => {
     v-bind="props._sheetPortal"
     :class="cn('sheet-portal', props.una?.sheetPortal, props._sheetPortal?.class)"
   >
-    <DialogOverlay
+    <SheetOverlay
       v-if="props.overlay"
       v-bind="_sheetOverlay"
-      :class="cn('sheet-overlay', props.una?.sheetOverlay, props._sheetOverlay?.class)"
     />
     <DialogContent
+      data-slot="sheet-content"
       v-bind="{ ...forwarded, ...$attrs }"
       :sheet
       :class="cn('sheet-content', props.una?.sheetContent, props.class)"

package/dist/runtime/components/sheet/SheetContent.vue.d.ts

@@ -1,12 +1,13 @@
 import type { NSheetContentProps } from '../../types/index.js';
-declare var __VLS_14: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NSheetContentProps>, {
     sheet: string;
     overlay: boolean;
     showClose: boolean;
+    dismissible: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
@@ -18,6 +19,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     sheet: string;
     overlay: boolean;
     showClose: boolean;
+    dismissible: boolean;
 }>>> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;

package/dist/runtime/components/sheet/SheetDescription.vue

@@ -13,6 +13,7 @@ const delegatedProps = reactiveOmit(props, ["class"]);
 
 <template>
   <DialogDescription
+    data-slot="sheet-description"
     :class="cn('sheet-description', props.una?.sheetDescription, props.class)"
     v-bind="delegatedProps"
   >

package/dist/runtime/components/sheet/SheetFooter.vue

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sheet-footer"
     :class="
   cn(
     'sheet-footer',

package/dist/runtime/components/sheet/SheetHeader.vue

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sheet-header"
     :class="
   cn('sheet-header', props.una?.sheetHeader, props.class)
 "