@polymarbot/nuxt-layer-shadcn-ui 0.8.0 → 0.8.2

package/app/assets/styles/z-index.css

@@ -8,6 +8,7 @@
  * Stacking order (low → high):
  *   layout header                         z-100  (project convention)
  *   dialog / sheet (Modal / Drawer)       z-200  (cover the header)
+ *   alert dialog (system interrupts)      z-250  (always above other modals)
  *   tooltip / popover / dropdown / select z-300  (above modal when nested)
  * ========================================================================= */
 
@@ -19,6 +20,17 @@
   z-index: 200;
 }
 
+/* AlertDialog must always sit above regular Modals, regardless of teleport
+ * order. Vue's <Teleport> places content at a stable anchor based on the
+ * host component's mount time — so an AlertDialog declared in app.vue (early
+ * mount) ends up *behind* a page-level Modal opened later. The overlay is
+ * matched via :has() because reka-ui's DialogPortal renders it as the
+ * adjacent previous sibling of the content. */
+[data-slot='dialog-content'][data-alert-dialog],
+[data-slot='dialog-overlay']:has(+ [data-slot='dialog-content'][data-alert-dialog]) {
+  z-index: 250;
+}
+
 [data-slot='tooltip-content'],
 [data-slot='popover-content'],
 [data-slot='dropdown-menu-content'],

package/app/components/ui/Accordion/index.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import type { AccordionItem } from './types'
 import Icon from '../Icon/index.vue'
 import Surface from '../Surface/index.vue'
@@ -29,24 +30,29 @@ const meta = {
   title: 'UI/Accordion',
   component: Accordion as any,
   argTypes: {
+    modelValue: { control: 'text' },
     type: { control: 'select', options: [ 'single', 'multiple' ]},
     collapsible: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
   args: {
+    modelValue: 'shipping',
     type: 'single',
     collapsible: true,
     disabled: false,
   },
-  render: args => ({
-    components: { Accordion, Surface },
-    setup: () => ({ args, items }),
-    template: `
-      <Surface variant="bordered" class="max-w-md px-4">
-        <Accordion v-bind="args" :items="items" default-value="shipping" />
-      </Surface>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Accordion, Surface },
+      setup: () => ({ args, onUpdate, items }),
+      template: `
+        <Surface variant="bordered" class="max-w-md px-4">
+          <Accordion v-bind="args" :items="items" @update:modelValue="onUpdate" />
+        </Surface>
+      `,
+    }
+  },
 } satisfies Meta
 
 export default meta

package/app/components/ui/AlertDialog/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { current, isOpen, close, onClosed } = useDialogState()
+const { current, isOpen, isActive, close, onClosed } = useDialogState()
 
 const isAlert = computed(() => current.value?.options.rejectLabel === '')
 const isDestructive = computed(() => {
@@ -10,6 +10,8 @@ const isDestructive = computed(() => {
 
 <template>
   <Modal
+    v-if="isActive"
+    data-alert-dialog
     :visible="isOpen"
     :title="current?.options.title"
     :type="current?.options.type"

package/app/components/ui/Checkbox/index.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import Checkbox from './index.vue'
 
 const meta = {
@@ -20,16 +21,19 @@ const meta = {
     name: '',
     value: '',
   },
-  render: args => ({
-    components: { Checkbox },
-    setup: () => ({ args }),
-    template: `
-      <label class="flex items-center gap-2 cursor-pointer">
-        <Checkbox v-bind="args" />
-        <span class="text-sm">Accept terms and conditions</span>
-      </label>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Checkbox },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <label class="flex items-center gap-2 cursor-pointer">
+          <Checkbox v-bind="args" @update:modelValue="onUpdate" />
+          <span class="text-sm">Accept terms and conditions</span>
+        </label>
+      `,
+    }
+  },
 } satisfies Meta<typeof Checkbox>
 
 export default meta

package/app/components/ui/DatePicker/index.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import type { DatePickerType } from './types'
 import Button from '../Button/index.vue'
 import Modal from '../Modal/index.vue'
@@ -35,18 +36,19 @@ const meta = {
     autoApply: true,
     class: '',
   },
-  render: args => ({
-    components: { DatePicker },
-    setup () {
-      return { args }
-    },
-    template: `
-      <div class="max-w-xs">
-        <DatePicker v-bind="args" @update:modelValue="v => args.modelValue = v" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { DatePicker },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-xs">
+          <DatePicker v-bind="args" @update:modelValue="onUpdate" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof DatePicker>
 
 export default meta

package/app/components/ui/DateRangePicker/index.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import DateRangePicker from './index.vue'
 
 const meta = {
@@ -34,25 +35,27 @@ const meta = {
     autoApply: true,
     class: '',
   },
-  render: args => ({
-    components: { DateRangePicker },
-    setup () {
-      return { args }
-    },
-    template: `
-      <div class="max-w-lg">
-        <DateRangePicker
-          v-bind="args"
-          @update:start="v => args.start = v"
-          @update:end="v => args.end = v"
-        />
-        <div class="mt-2 text-sm text-muted-foreground">
-          <div>Start: {{ args.start }}</div>
-          <div>End: {{ args.end }}</div>
+  render: args => {
+    const onUpdateStart = useArgsModel('start')
+    const onUpdateEnd = useArgsModel('end')
+    return {
+      components: { DateRangePicker },
+      setup: () => ({ args, onUpdateStart, onUpdateEnd }),
+      template: `
+        <div class="max-w-lg">
+          <DateRangePicker
+            v-bind="args"
+            @update:start="onUpdateStart"
+            @update:end="onUpdateEnd"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">
+            <div>Start: {{ args.start }}</div>
+            <div>End: {{ args.end }}</div>
+          </div>
         </div>
-      </div>
-    `,
-  }),
+      `,
+    }
+  },
 } satisfies Meta<typeof DateRangePicker>
 
 export default meta

package/app/components/ui/Drawer/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
 import type { ButtonVariant } from '../Button/types'
@@ -13,6 +14,7 @@ const meta = {
   title: 'UI/Drawer',
   component: Drawer,
   argTypes: {
+    visible: { control: 'boolean' },
     loading: { control: 'boolean' },
     disabled: { control: 'boolean' },
     confirmDisabled: { control: 'boolean' },
@@ -31,6 +33,7 @@ const meta = {
     class: { control: 'text' },
   },
   args: {
+    visible: false,
     loading: false,
     disabled: false,
     confirmDisabled: false,
@@ -48,22 +51,22 @@ const meta = {
     cancelVariant: 'outline',
     class: '',
   },
-  render: args => ({
-    components: { Drawer, Button, Input },
-    setup () {
-      const visible = ref(false)
-      return { args, visible }
-    },
-    template: `
-      <div>
-        <Button @click="visible = true">Open Drawer</Button>
-        <Drawer v-bind="args" v-model:visible="visible">
-          <p>This is the drawer content.</p>
-          <Input class="mt-4" placeholder="Try interacting with this input" />
-        </Drawer>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdateVisible = useArgsModel('visible')
+    return {
+      components: { Drawer, Button, Input },
+      setup: () => ({ args, onUpdateVisible }),
+      template: `
+        <div>
+          <Button @click="onUpdateVisible(true)">Open Drawer</Button>
+          <Drawer v-bind="args" @update:visible="onUpdateVisible">
+            <p>This is the drawer content.</p>
+            <Input class="mt-4" placeholder="Try interacting with this input" />
+          </Drawer>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof Drawer>
 
 export default meta

package/app/components/ui/Drawer/index.vue

@@ -11,7 +11,10 @@ import {
 } from '../../shadcn/sheet'
 import type { DrawerProps } from './types'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<DrawerProps>(), {
+  showCancel: true,
   showClose: true,
   closeOnClickOutside: false,
   side: 'right',
@@ -92,6 +95,7 @@ const contentClass = computed(() =>
     </SheetTrigger>
 
     <SheetContent
+      v-bind="$attrs"
       :side="side"
       :class="contentClass"
       @pointerDownOutside="onPointerDownOutside"

package/app/components/ui/Input/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Icon from '../Icon/index.vue'
 import Input from './index.vue'
 
@@ -22,13 +23,14 @@ const meta = {
     invalid: false,
     class: 'max-w-sm',
   },
-  render: args => ({
-    components: { Input },
-    setup: () => ({ args }),
-    template: `
-      <Input v-bind="args" placeholder="Type something..." />
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Input },
+      setup: () => ({ args, onUpdate }),
+      template: '<Input v-bind="args" placeholder="Type something..." @update:modelValue="onUpdate" />',
+    }
+  },
 } satisfies Meta<typeof Input>
 
 export default meta

package/app/components/ui/InputCurrency/index.stories.ts

@@ -1,33 +1,36 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import InputCurrency from './index.vue'
 
 const currencyDisplays = [ 'symbol', 'narrowSymbol', 'code', 'name' ] as const
 
 const meta = {
   title: 'UI/InputCurrency',
-  component: InputCurrency,
+  component: InputCurrency as any,
   argTypes: {
+    modelValue: { control: 'number' },
     currency: { control: 'text' },
     currencyDisplay: { control: 'select', options: currencyDisplays },
   },
   args: {
+    modelValue: 1000,
     currency: 'JPY',
     currencyDisplay: 'symbol',
   },
-  render: args => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(1000)
-      return { args, value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-bind="args" v-model="value" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-} satisfies Meta<typeof InputCurrency>
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { InputCurrency },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-xs">
+          <InputCurrency v-bind="args" @update:modelValue="onUpdate" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
+} satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>

package/app/components/ui/InputNumber/index.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import InputNumber from './index.vue'
 
 const meta = {
   title: 'UI/InputNumber',
   component: InputNumber,
   argTypes: {
+    modelValue: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
     step: { control: 'number' },
@@ -15,6 +17,7 @@ const meta = {
     invalid: { control: 'boolean' },
   },
   args: {
+    modelValue: 0,
     min: undefined,
     max: undefined,
     step: 1,
@@ -23,19 +26,19 @@ const meta = {
     disabled: false,
     invalid: false,
   },
-  render: args => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(0)
-      return { args, value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputNumber v-bind="args" v-model="value" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { InputNumber },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-xs">
+          <InputNumber v-bind="args" @update:modelValue="onUpdate" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof InputNumber>
 
 export default meta

package/app/components/ui/InputOtp/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import InputOtp from './index.vue'
 
 const meta = {
@@ -15,18 +16,19 @@ const meta = {
     length: 6,
     disabled: false,
   },
-  render: args => ({
-    components: { InputOtp },
-    setup () {
-      return { args }
-    },
-    template: `
-      <div class="space-y-4">
-        <InputOtp v-bind="args" @update:modelValue="v => args.modelValue = v" />
-        <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { InputOtp },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="space-y-4">
+          <InputOtp v-bind="args" @update:modelValue="onUpdate" />
+          <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof InputOtp>
 
 export default meta

package/app/components/ui/InputPercent/index.stories.ts

@@ -1,25 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { useArgsModel } from '#storybook/argsModel'
 import InputPercent from './index.vue'
 
 const meta = {
   title: 'UI/InputPercent',
-  component: InputPercent,
-  argTypes: {},
-  args: {},
-  render: args => ({
-    components: { InputPercent },
-    setup () {
-      const percent = ref(0.5)
-      return { args, percent }
-    },
-    template: `
-      <div class="max-w-xs space-y-4">
-        <InputPercent v-bind="args" v-model="percent" />
-        <div class="text-sm text-muted-foreground">Value: {{ percent }}</div>
-      </div>
-    `,
-  }),
-} satisfies Meta<typeof InputPercent>
+  component: InputPercent as any,
+  argTypes: {
+    modelValue: { control: 'number' },
+  },
+  args: {
+    modelValue: 0.5,
+  },
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { InputPercent },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-xs space-y-4">
+          <InputPercent v-bind="args" @update:modelValue="onUpdate" />
+          <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
+} satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>

package/app/components/ui/InputRange/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import InputRange from './index.vue'
 
 const meta = {
@@ -23,22 +24,24 @@ const meta = {
     endPlaceholder: '',
     disabled: false,
   },
-  render: args => ({
-    components: { InputRange },
-    setup () {
-      return { args }
-    },
-    template: `
-      <div class="max-w-md">
-        <InputRange
-          v-bind="args"
-          @update:start="v => args.start = v"
-          @update:end="v => args.end = v"
-        />
-        <div class="mt-2 text-sm text-muted-foreground">Start: {{ args.start }}, End: {{ args.end }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdateStart = useArgsModel('start')
+    const onUpdateEnd = useArgsModel('end')
+    return {
+      components: { InputRange },
+      setup: () => ({ args, onUpdateStart, onUpdateEnd }),
+      template: `
+        <div class="max-w-md">
+          <InputRange
+            v-bind="args"
+            @update:start="onUpdateStart"
+            @update:end="onUpdateEnd"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Start: {{ args.start }}, End: {{ args.end }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof InputRange>
 
 export default meta

package/app/components/ui/Modal/index.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type { ModalContentType } from '../ModalContent/types'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
 import Modal from './index.vue'
@@ -11,6 +12,7 @@ const meta = {
   title: 'UI/Modal',
   component: Modal,
   argTypes: {
+    visible: { control: 'boolean' },
     loading: { control: 'boolean' },
     disabled: { control: 'boolean' },
     confirmDisabled: { control: 'boolean' },
@@ -27,6 +29,7 @@ const meta = {
     cancelText: { control: 'text' },
   },
   args: {
+    visible: false,
     loading: false,
     disabled: false,
     confirmDisabled: false,
@@ -42,22 +45,22 @@ const meta = {
     confirmText: 'OK',
     cancelText: 'Cancel',
   },
-  render: args => ({
-    components: { Modal, Button, Input },
-    setup () {
-      const visible = ref(false)
-      return { args, visible }
-    },
-    template: `
-      <div>
-        <Button @click="visible = true">Open Modal</Button>
-        <Modal v-bind="args" v-model:visible="visible">
-          <p>This is the modal content.</p>
-          <Input class="mt-4" placeholder="Try interacting with this input" />
-        </Modal>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdateVisible = useArgsModel('visible')
+    return {
+      components: { Modal, Button, Input },
+      setup: () => ({ args, onUpdateVisible }),
+      template: `
+        <div>
+          <Button @click="onUpdateVisible(true)">Open Modal</Button>
+          <Modal v-bind="args" @update:visible="onUpdateVisible">
+            <p>This is the modal content.</p>
+            <Input class="mt-4" placeholder="Try interacting with this input" />
+          </Modal>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof Modal>
 
 export default meta

package/app/components/ui/Modal/index.vue

@@ -11,7 +11,10 @@ import {
 } from '../../shadcn/dialog'
 import type { ModalProps } from './types'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<ModalProps>(), {
+  showCancel: true,
   showClose: true,
   closeOnClickOutside: false,
   title: undefined,
@@ -97,6 +100,7 @@ const contentClass = computed(() =>
     </DialogTrigger>
 
     <DialogContent
+      v-bind="$attrs"
       :class="contentClass"
       :showCloseButton="false"
       @pointerDownOutside="onPointerDownOutside"

package/app/components/ui/Pagination/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Pagination from './index.vue'
 
 const sizes = [ 'default', 'sm' ] as const
@@ -25,11 +26,15 @@ const meta = {
     siblingCount: 1,
     size: 'default',
   },
-  render: args => ({
-    components: { Pagination },
-    setup: () => ({ args }),
-    template: '<Pagination v-bind="args" />',
-  }),
+  render: args => {
+    const onUpdatePage = useArgsModel('page')
+    const onUpdatePageSize = useArgsModel('pageSize')
+    return {
+      components: { Pagination },
+      setup: () => ({ args, onUpdatePage, onUpdatePageSize }),
+      template: '<Pagination v-bind="args" @update:page="onUpdatePage" @update:pageSize="onUpdatePageSize" />',
+    }
+  },
 } satisfies Meta<typeof Pagination>
 
 export default meta

package/app/components/ui/RadioCardGroup/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import type { RadioCardGroupOption } from './types'
 import RadioCardGroup from './index.vue'
 
@@ -48,18 +49,19 @@ const meta = {
     options,
     disabled: false,
   },
-  render: args => ({
-    components: { RadioCardGroup },
-    setup () {
-      return { args }
-    },
-    template: `
-      <div class="max-w-md space-y-4">
-        <RadioCardGroup v-bind="args" @update:modelValue="v => args.modelValue = v" />
-        <div class="text-sm text-muted-foreground">Selected: {{ args.modelValue }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { RadioCardGroup },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-md space-y-4">
+          <RadioCardGroup v-bind="args" @update:modelValue="onUpdate" />
+          <div class="text-sm text-muted-foreground">Selected: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof RadioCardGroup>
 
 export default meta

package/app/components/ui/RadioCardGroup/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
-  RadioGroup,
-  RadioGroupItem,
+  RadioGroup as ShadcnRadioGroup,
+  RadioGroupItem as ShadcnRadioGroupItem,
 } from '../../shadcn/radio-group'
 import type { RadioCardGroupProps } from './types'
 
@@ -26,7 +26,7 @@ const mergedClass = computed(() => cn('gap-3', props.class))
 </script>
 
 <template>
-  <RadioGroup
+  <ShadcnRadioGroup
     v-model="model"
     :disabled="disabled"
     :class="mergedClass"
@@ -35,20 +35,20 @@ const mergedClass = computed(() => cn('gap-3', props.class))
       v-for="option in options"
       :key="option.value"
       class="
-        flex cursor-pointer items-center gap-3 rounded-lg border border-border
-        px-4 py-3 transition-colors
-        has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50
+        gap-3 rounded-lg border-border px-4 py-3
         has-data-[state=checked]:border-primary
+        flex cursor-pointer items-center border transition-colors
+        has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50
       "
       :class="[
         option.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-accent/50',
       ]"
     >
-      <RadioGroupItem
+      <ShadcnRadioGroupItem
         :value="option.value"
         :disabled="option.disabled"
       />
-      <div class="grid flex-1 gap-0.5">
+      <div class="gap-0.5 grid flex-1">
         <span class="text-sm font-medium">
           {{ option.title }}
         </span>
@@ -60,5 +60,5 @@ const mergedClass = computed(() => cn('gap-3', props.class))
         </span>
       </div>
     </label>
-  </RadioGroup>
+  </ShadcnRadioGroup>
 </template>

package/app/components/ui/RadioGroup/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import type { RadioGroupItem } from './types'
 import RadioGroup from './index.vue'
 
@@ -30,11 +31,14 @@ const meta = {
     disabled: false,
     orientation: 'vertical',
   },
-  render: args => ({
-    components: { RadioGroup },
-    setup: () => ({ args }),
-    template: '<RadioGroup v-bind="args" />',
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { RadioGroup },
+      setup: () => ({ args, onUpdate }),
+      template: '<RadioGroup v-bind="args" @update:modelValue="onUpdate" />',
+    }
+  },
 } satisfies Meta<typeof RadioGroup>
 
 export default meta

package/app/components/ui/RadioGroup/index.vue

@@ -59,15 +59,15 @@ const mergedClass = computed(() => cn(
         :value="item.value"
         :disabled="item.disabled"
       />
-      <span class="text-sm">
-        <slot
-          name="label"
-          :item="item"
-          :checked="model === item.value"
-        >
+      <slot
+        name="label"
+        :item="item"
+        :checked="model === item.value"
+      >
+        <span class="text-sm">
           {{ item.label || item.value }}
-        </slot>
-      </span>
+        </span>
+      </slot>
     </label>
   </ShadcnRadioGroup>
 </template>

package/app/components/ui/SearchSelect/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import type { SearchSelectLoadMethodParams, SearchSelectLoadMethodResult } from './types'
 import SearchSelect from './index.vue'
 
@@ -41,6 +42,7 @@ const meta = {
   title: 'UI/SearchSelect',
   component: SearchSelect as any,
   argTypes: {
+    modelValue: { control: 'text' },
     placeholder: { control: 'text' },
     searchPlaceholder: { control: 'text' },
     emptyText: { control: 'text' },
@@ -52,6 +54,7 @@ const meta = {
     disabled: { control: 'boolean' },
   },
   args: {
+    modelValue: undefined,
     placeholder: '',
     searchPlaceholder: '',
     emptyText: '',
@@ -62,23 +65,23 @@ const meta = {
     autoLoad: false,
     disabled: false,
   },
-  render: args => ({
-    components: { SearchSelect },
-    setup () {
-      const value = ref<string>()
-      return { args, value, mockLoadMethod }
-    },
-    template: `
-      <div class="max-w-sm">
-        <SearchSelect
-          v-model="value"
-          :loadMethod="mockLoadMethod"
-          v-bind="args"
-        />
-        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { SearchSelect },
+      setup: () => ({ args, onUpdate, mockLoadMethod }),
+      template: `
+        <div class="max-w-sm">
+          <SearchSelect
+            v-bind="args"
+            :loadMethod="mockLoadMethod"
+            @update:modelValue="onUpdate"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ args.modelValue ?? 'none' }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta
 
 export default meta

package/app/components/ui/Select/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Select from './index.vue'
 
 const frameworks = [
@@ -34,6 +35,7 @@ const meta = {
   title: 'UI/Select',
   component: Select as any,
   argTypes: {
+    modelValue: { control: 'text' },
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
     loading: { control: 'boolean' },
@@ -43,6 +45,7 @@ const meta = {
     emptyText: { control: 'text' },
   },
   args: {
+    modelValue: undefined,
     placeholder: 'Select an option',
     disabled: false,
     loading: false,
@@ -51,19 +54,19 @@ const meta = {
     searchPlaceholder: '',
     emptyText: '',
   },
-  render: args => ({
-    components: { Select },
-    setup () {
-      const value = ref<string>()
-      return { args, value, frameworks }
-    },
-    template: `
-      <div class="max-w-sm">
-        <Select v-bind="args" v-model="value" :options="frameworks" />
-        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Select },
+      setup: () => ({ args, onUpdate, frameworks }),
+      template: `
+        <div class="max-w-sm">
+          <Select v-bind="args" :options="frameworks" @update:modelValue="onUpdate" />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ args.modelValue ?? 'none' }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta
 
 export default meta

package/app/components/ui/Slider/index.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Slider from './index.vue'
 
 const meta = {
   title: 'UI/Slider',
   component: Slider,
   argTypes: {
+    modelValue: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
     step: { control: 'number' },
@@ -13,25 +15,26 @@ const meta = {
     orientation: { control: 'select', options: [ 'horizontal', 'vertical' ]},
   },
   args: {
+    modelValue: 50,
     min: 0,
     max: 100,
     step: 1,
     disabled: false,
     orientation: 'horizontal',
   },
-  render: args => ({
-    components: { Slider },
-    setup () {
-      const value = ref(50)
-      return { args, value }
-    },
-    template: `
-      <div class="max-w-sm">
-        <Slider v-bind="args" v-model="value" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Slider },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-sm">
+          <Slider v-bind="args" @update:modelValue="onUpdate" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof Slider>
 
 export default meta

package/app/components/ui/Switch/index.stories.ts

@@ -1,29 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Switch from './index.vue'
 
 const meta = {
   title: 'UI/Switch',
   component: Switch,
   argTypes: {
+    modelValue: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
   args: {
+    modelValue: true,
     disabled: false,
   },
-  render: args => ({
-    components: { Switch },
-    setup () {
-      const on = ref(true)
-      return { args, on }
-    },
-    template: `
-      <div class="flex items-center gap-4">
-        <Switch v-bind="args" v-model="on" />
-        <div class="text-sm text-muted-foreground">Value: {{ on }}</div>
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Switch },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="flex items-center gap-4">
+          <Switch v-bind="args" @update:modelValue="onUpdate" />
+          <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof Switch>
 
 export default meta

package/app/components/ui/Tabs/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Card from '../Card/index.vue'
 import type { TabsItem } from './types'
 import Tabs from './index.vue'
@@ -52,11 +53,14 @@ const meta = {
     listClass: '',
     triggerClass: '',
   },
-  render: args => ({
-    components: { Tabs },
-    setup: () => ({ args }),
-    template: '<Tabs v-bind="args" class="max-w-md" />',
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Tabs },
+      setup: () => ({ args, onUpdate }),
+      template: '<Tabs v-bind="args" class="max-w-md" @update:modelValue="onUpdate" />',
+    }
+  },
 } satisfies Meta<typeof Tabs>
 
 export default meta

package/app/components/ui/Textarea/index.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
+import { useArgsModel } from '#storybook/argsModel'
 import Textarea from './index.vue'
 
 const meta = {
@@ -19,15 +20,18 @@ const meta = {
     invalid: false,
     class: '',
   },
-  render: args => ({
-    components: { Textarea },
-    setup: () => ({ args }),
-    template: `
-      <div class="max-w-sm">
-        <Textarea v-bind="args" placeholder="Type your message here..." />
-      </div>
-    `,
-  }),
+  render: args => {
+    const onUpdate = useArgsModel()
+    return {
+      components: { Textarea },
+      setup: () => ({ args, onUpdate }),
+      template: `
+        <div class="max-w-sm">
+          <Textarea v-bind="args" placeholder="Type your message here..." @update:modelValue="onUpdate" />
+        </div>
+      `,
+    }
+  },
 } satisfies Meta<typeof Textarea>
 
 export default meta

package/app/composables/useDialog.ts

@@ -18,6 +18,7 @@ interface DialogQueueItem {
 
 const dialogQueue = reactive<DialogQueueItem[]>([])
 const isOpen = ref(false)
+const mountedInstances = ref<symbol[]>([])
 
 function showDialog (options: DialogOptions): Promise<boolean> {
   return new Promise<boolean>(resolve => {
@@ -52,8 +53,22 @@ export function useDialog () {
 
 /**
  * Internal composable for the AlertDialog component to access dialog queue.
+ *
+ * Multiple `<AlertDialog />` instances can be mounted simultaneously (e.g. in
+ * Storybook docs view), but only the first one renders the modal — the rest
+ * stay inert via `isActive`. This prevents stacked overlays and duplicate
+ * `onClosed` events from over-shifting the shared queue.
  */
 export function useDialogState () {
+  const id = Symbol('AlertDialog')
+  mountedInstances.value.push(id)
+
+  onScopeDispose(() => {
+    const idx = mountedInstances.value.indexOf(id)
+    if (idx >= 0) mountedInstances.value.splice(idx, 1)
+  })
+
+  const isActive = computed(() => mountedInstances.value[0] === id)
   const current = computed(() => dialogQueue[0] ?? null)
 
   /** Resolve current dialog and trigger close animation */
@@ -72,5 +87,5 @@ export function useDialogState () {
     }
   }
 
-  return { current, isOpen, close, onClosed }
+  return { current, isOpen, isActive, close, onClosed }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "dbce6d8341e369cdd6ae0c7008b31325c339d200"
+  "gitHead": "f3a22e25c23b87c559dba70c2227bc02c6167baf"
 }