@db-ux/v-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/agent/Drawer.md

@@ -1,91 +0,0 @@
-## CSS Properties
-
-| CSS Variable | Default | CSS Property | Description | Example |
-| --- | --- | --- | --- | --- |
-| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
-| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
-| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
-| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
-
-
-# Drawer Examples (vue)
-
-```vue
-<template>
-  <h1>DBDrawer Documentation Examples</h1>
-  <h2>1. Default Drawer</h2>
-  <div>
-    <DBButton
-      :onClick="
-        (event) => {
-          open = true;
-        }
-      "
-    >
-      Open Me </DBButton
-    ><DBDrawer
-      :open="open"
-      :onClose="
-        (event) => {
-          open = false;
-        }
-      "
-      :drawerHeader="<header>Optional drawer header</header>"
-    >
-      My Drawer content
-    </DBDrawer>
-  </div>
-  <h2>2. Drawer Variants</h2>
-  <div>
-    <DBButton
-      :onClick="
-        (event) => {
-          open = true;
-        }
-      "
-    >
-      Open Modal Drawer </DBButton
-    ><DBDrawer
-      variant="modal"
-      :open="open"
-      :onClose="
-        (event) => {
-          open = false;
-        }
-      "
-    >
-      Modal Drawer content
-    </DBDrawer>
-  </div>
-  <div>
-    <DBButton
-      :onClick="
-        (event) => {
-          open = true;
-        }
-      "
-    >
-      Open Inside Drawer </DBButton
-    ><DBDrawer
-      variant="inside"
-      :open="open"
-      :onClose="
-        (event) => {
-          open = false;
-        }
-      "
-    >
-      Inside Drawer content
-    </DBDrawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-import { DBButton } from "@db-ux/v-v-core-components";
-import { DBDrawer } from "@db-ux/v-v-core-components";
-
-const open = ref<boolean>(false);
-</script>
-```

package/agent/Header.md

@@ -1,35 +0,0 @@
-
-
-# Header Examples (vue)
-
-```vue
-<template>
-  <h1>DBHeader Documentation Examples</h1>
-  <h2>1. Default Header</h2>
-  <DBHeader :drawerOpen="drawerOpen" :onToggle="(open) => (drawerOpen = open)">
-    <template v-slot:brand><DBBrand>My Awesome App</DBBrand></template>
-<template v-slot:metaNavigation><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template>
-<template v-slot:primaryAction><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template>
-<template v-slot:secondaryAction><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="alert" variant="ghost" noText>Notification</DBButton><DBButton icon="help" variant="ghost" noText>Help</DBButton></template>
-
-    <DBNavigation
-      ><DBNavigationItem><a href="#">Navi-Item 1</a></DBNavigationItem
-      ><DBNavigationItem icon="x_placeholder"
-        ><a href="#">Navi-Item 2</a></DBNavigationItem
-      ><DBNavigationItem :disabled="true"
-        ><a href="#">Navi-Item 3</a></DBNavigationItem
-      ></DBNavigation
-    ></DBHeader
-  >
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-import { DBNavigation } from "@db-ux/v-v-core-components";
-import { DBNavigationItem } from "@db-ux/v-v-core-components";
-import { DBHeader } from "@db-ux/v-v-core-components";
-
-const drawerOpen = ref<boolean>(false);
-</script>
-```

package/agent/Icon.md

@@ -1,26 +0,0 @@
-
-
-# Icon Examples (vue)
-
-```vue
-<template>
-  <h1>DBIcon Documentation Examples</h1>
-  <h2>1. Default Icon</h2>
-  <DBIcon>Default Icon</DBIcon>
-  <h2>2. Icon Variants</h2>
-  <DBIcon icon="user">User Icon</DBIcon>
-  <DBIcon icon="settings">Settings Icon</DBIcon>
-  <h2>3. Icon Weights</h2>
-  <DBIcon weight="16">16px Icon</DBIcon>
-  <DBIcon weight="24">24px Icon</DBIcon>
-  <DBIcon weight="32">32px Icon</DBIcon>
-  <h2>4. Custom Class</h2>
-  <DBIcon>Custom Class Icon</DBIcon>
-  <h2>5. Text Content</h2>
-  <DBIcon text="Icon with Text">Icon with Text</DBIcon>
-</template>
-
-<script setup lang="ts">
-import { DBIcon } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Infotext.md

@@ -1,29 +0,0 @@
-
-
-# Infotext Examples (vue)
-
-```vue
-<template>
-  <h1>DBInfotext Documentation Examples</h1>
-  <h2>1. Default Infotext</h2>
-  <DBInfotext>Default Infotext</DBInfotext>
-  <h2>2. Semantic Variants</h2>
-  <DBInfotext semantic="adaptive">Adaptive</DBInfotext>
-  <DBInfotext semantic="neutral">Neutral</DBInfotext>
-  <DBInfotext semantic="critical">Critical</DBInfotext>
-  <DBInfotext semantic="informational">Informational</DBInfotext>
-  <DBInfotext semantic="warning">Warning</DBInfotext>
-  <DBInfotext semantic="successful">Successful</DBInfotext>
-  <h2>3. Sizes</h2>
-  <DBInfotext size="small">Small</DBInfotext>
-  <DBInfotext size="medium">Medium</DBInfotext>
-  <h2>4. Icon Visibility</h2>
-  <DBInfotext icon="info" :showIcon="false"> Icon Hidden </DBInfotext>
-  <h2>5. Custom Class</h2>
-  <DBInfotext>Custom Class</DBInfotext>
-</template>
-
-<script setup lang="ts">
-import { DBInfotext } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Input.md

@@ -1,48 +0,0 @@
-
-
-# Input Examples (vue)
-
-```vue
-<template>
-  <h1>DBInput Documentation Examples</h1>
-  <h2>1. Default Input</h2>
-  <DBInput label="Enter text here"></DBInput>
-  <h2>2. Input Types</h2>
-  <DBInput type="text" label="Text Input"></DBInput>
-  <DBInput type="email" label="Email Input"></DBInput>
-  <DBInput type="password" label="Password Input"></DBInput>
-  <DBInput type="number" label="Number Input"></DBInput>
-  <h2>3. Sizes</h2>
-  <DBInput size="small" label="Small Input"></DBInput>
-  <DBInput size="medium" label="Medium Input"></DBInput>
-  <h2>4. Icon Support</h2>
-  <DBInput icon="search" label="Search Input"></DBInput>
-  <DBInput iconLeading="user" label="Leading Icon"></DBInput>
-  <DBInput iconTrailing="check" label="Trailing Icon"></DBInput>
-  <h2>5. Validation States</h2>
-  <DBInput validation="valid" label="Valid Input"></DBInput>
-  <DBInput validation="invalid" label="Invalid Input"></DBInput>
-  <DBInput validation="no-validation" label="No Validation"></DBInput>
-  <h2>6. Disabled State</h2>
-  <DBInput label="Disabled Input" :disabled="true"></DBInput>
-  <h2>7. Custom Class</h2>
-  <DBInput label="Custom Class"></DBInput>
-  <h2>8. Placeholder Examples</h2>
-  <DBInput placeholder="Enter text here" label="With Placeholder"></DBInput>
-  <DBInput placeholder="Search here" label="Search Placeholder"></DBInput>
-  <h2>9. Input Event Example</h2>
-  <DBInput
-    label="Input Event"
-    :onInput="(event) => console.log('Input event:', event.target.value)"
-  ></DBInput>
-  <h2>10. Message Property Example</h2>
-  <DBInput
-    label="Input with Message"
-    message="This is a helper message."
-  ></DBInput>
-</template>
-
-<script setup lang="ts">
-import { DBInput } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Link.md

@@ -1,42 +0,0 @@
-
-
-# Link Examples (vue)
-
-```vue
-<template>
-  <h1>DBLink Documentation Examples</h1>
-  <h2>1. Default Link</h2>
-  <DBLink href="https://example.com">Default Link</DBLink>
-  <h2>2. Disabled Link</h2>
-  <DBLink href="https://example.com" :disabled="true"> Disabled Link </DBLink>
-  <h2>3. Target Variants</h2>
-  <DBLink href="https://example.com" target="_self"> Self Target </DBLink>
-  <DBLink href="https://example.com" target="_blank"> Blank Target </DBLink>
-  <h2>4. Custom Class</h2>
-  <DBLink href="https://example.com"> Custom Class </DBLink>
-  <h2>5. Rel Attribute</h2>
-  <DBLink href="https://example.com" rel="noopener noreferrer">
-    No Referrer
-  </DBLink>
-  <h2>6. Link Variants</h2>
-  <DBLink href="https://example.com" variant="adaptive">
-    Adaptive Variant
-  </DBLink>
-  <DBLink href="https://example.com" variant="brand"> Brand Variant </DBLink>
-  <DBLink href="https://example.com" variant="inline"> Inline Variant </DBLink>
-  <h2>7. Link Sizes</h2>
-  <DBLink href="https://example.com" size="medium"> Medium Size </DBLink>
-  <DBLink href="https://example.com" size="small"> Small Size </DBLink>
-  <h2>8. Link Content</h2>
-  <DBLink href="https://example.com" content="external">
-    External Content
-  </DBLink>
-  <DBLink href="https://example.com" content="internal">
-    Internal Content
-  </DBLink>
-</template>
-
-<script setup lang="ts">
-import { DBLink } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Navigation.md

@@ -1,23 +0,0 @@
-
-
-# Navigation Examples (vue)
-
-```vue
-<template>
-  <h1>DBNavigation Documentation Examples</h1>
-  <h2>1. Default Navigation</h2>
-  <DBNavigation
-    ><DBNavigationItem><a href="#">Navi-Item 1</a></DBNavigationItem
-    ><DBNavigationItem icon="x_placeholder"
-      ><a href="#">Navi-Item 2</a></DBNavigationItem
-    ><DBNavigationItem :disabled="true"
-      ><a href="#">Navi-Item 3</a></DBNavigationItem
-    ></DBNavigation
-  >
-</template>
-
-<script setup lang="ts">
-import { DBNavigationItem } from "@db-ux/v-v-core-components";
-import { DBNavigation } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/NavigationItem.md

@@ -1,29 +0,0 @@
-
-
-# NavigationItem Examples (vue)
-
-```vue
-<template>
-  <h1>DBNavigationItem Documentation Examples</h1>
-  <h2>1. Default Navigation Item</h2>
-  <DBNavigationItem>Default Navigation Item</DBNavigationItem>
-  <h2>2. Active State</h2>
-  <DBNavigationItem :active="true">Active Navigation Item</DBNavigationItem>
-  <h2>3. Disabled State</h2>
-  <DBNavigationItem :disabled="true">
-    Disabled Navigation Item
-  </DBNavigationItem>
-  <h2>4. Sub-Navigation</h2>
-  <DBNavigationItem :subNavigation="<div>Sub Navigation Content</div>">
-    Navigation Item with Sub-Navigation
-  </DBNavigationItem>
-  <h2>5. Icon Support</h2>
-  <DBNavigationItem icon="user"> Navigation Item with Icon </DBNavigationItem>
-  <h2>6. Custom Class</h2>
-  <DBNavigationItem> Navigation Item with Custom Class </DBNavigationItem>
-</template>
-
-<script setup lang="ts">
-import { DBNavigationItem } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Notification.md

@@ -1,40 +0,0 @@
-
-
-# Notification Examples (vue)
-
-```vue
-<template>
-  <h1>DBNotification Documentation Examples</h1>
-  <h2>1. Default Notification</h2>
-  <DBNotification>Default Notification</DBNotification>
-  <h2>2. Semantic Variants</h2>
-  <DBNotification semantic="adaptive">Adaptive</DBNotification>
-  <DBNotification semantic="neutral">Neutral</DBNotification>
-  <DBNotification semantic="critical">Critical</DBNotification>
-  <DBNotification semantic="informational"> Informational </DBNotification>
-  <DBNotification semantic="warning">Warning</DBNotification>
-  <DBNotification semantic="successful">Successful</DBNotification>
-  <h2>3. Variants</h2>
-  <DBNotification variant="docked">Docked</DBNotification>
-  <DBNotification variant="standalone">Standalone</DBNotification>
-  <DBNotification variant="overlay">Overlay</DBNotification>
-  <h2>4. Closeable</h2>
-  <DBNotification :closeable="true">Closeable Notification</DBNotification>
-  <h2>5. Headline</h2>
-  <DBNotification headline="Important Update">
-    Notification with Headline
-  </DBNotification>
-  <h2>6. Timestamp</h2>
-  <DBNotification timestamp="10:30 AM">
-    Notification with Timestamp
-  </DBNotification>
-  <h2>7. Icon Support</h2>
-  <DBNotification icon="info">Notification with Icon</DBNotification>
-  <h2>8. Custom Class</h2>
-  <DBNotification> Custom Class </DBNotification>
-</template>
-
-<script setup lang="ts">
-import { DBNotification } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Page.md

@@ -1,33 +0,0 @@
-
-
-# Page Examples (vue)
-
-```vue
-<template>
-  <h1>DBPage Documentation Examples</h1>
-  <h2>1. Default Page</h2>
-  <DBPage><template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Main Page</DBPage>
-  <h2>2. Document Overflow Variants</h2>
-  <DBPage documentOverflow="hidden">
-    <template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Main Page with Hidden Overflow
-  </DBPage>
-  <DBPage documentOverflow="auto">
-    <template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Main Page with Auto Overflow
-  </DBPage>
-  <h2>3. Fade-In Effect</h2>
-  <DBPage :fadeIn="true"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Main Page with Fade-In</DBPage>
-  <h2>4. Variant Examples</h2>
-  <DBPage variant="auto"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Page with Auto Variant</DBPage>
-  <DBPage variant="fixed"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
- Page with Fixed Variant</DBPage>
-</template>
-
-<script setup lang="ts">
-import { DBPage } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Popover.md

@@ -1,50 +0,0 @@
-
-
-# Popover Examples (vue)
-
-```vue
-<template>
-  <h1>DBPopover Documentation Examples</h1>
-  <h2>1. Default Popover</h2>
-  <DBPopover :trigger="<DBButton>Hover on me to open Popover</DBButton>">
-    Use any HTML code here like e.g. a <code>button</code>:
-    <button type="button">Test</button></DBPopover
-  >
-  <h2>2. Placement Variants</h2>
-  <DBPopover placement="top" :trigger="<DBButton>Top Placement</DBButton>">
-    Popover with top placement
-  </DBPopover>
-  <DBPopover
-    placement="bottom"
-    :trigger="<DBButton>Bottom Placement</DBButton>"
-  >
-    Popover with bottom placement
-  </DBPopover>
-  <h2>3. Delay Variants</h2>
-  <DBPopover delay="fast" :trigger="<DBButton>Fast Delay</DBButton>">
-    Popover with fast delay
-  </DBPopover>
-  <DBPopover delay="slow" :trigger="<DBButton>Slow Delay</DBButton>">
-    Popover with slow delay
-  </DBPopover>
-  <h2>4. Animation</h2>
-  <DBPopover :trigger="<DBButton>With Animation</DBButton>" :animation="true">
-    Popover with animation
-  </DBPopover>
-  <DBPopover :trigger="<DBButton>No Animation</DBButton>" :animation="false">
-    Popover without animation
-  </DBPopover>
-  <h2>5. Width Variants</h2>
-  <DBPopover width="auto" :trigger="<DBButton>Auto Width</DBButton>">
-    Popover with auto width
-  </DBPopover>
-  <DBPopover width="fixed" :trigger="<DBButton>Fixed Width</DBButton>">
-    Popover with fixed width
-  </DBPopover>
-</template>
-
-<script setup lang="ts">
-import { DBButton } from "@db-ux/v-v-core-components";
-import { DBPopover } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Radio.md

@@ -1,29 +0,0 @@
-
-
-# Radio Examples (vue)
-
-```vue
-<template>
-  <h1>DBRadio Documentation Examples</h1>
-  <h2>1. Default Radio</h2>
-  <DBRadio label="Default Radio"></DBRadio>
-  <h2>2. Sizes</h2>
-  <DBRadio size="small" label="Small Radio"></DBRadio>
-  <DBRadio size="medium" label="Medium Radio"></DBRadio>
-  <h2>3. Validation States</h2>
-  <DBRadio validation="valid" label="Valid Radio"></DBRadio>
-  <DBRadio validation="invalid" label="Invalid Radio"></DBRadio>
-  <DBRadio validation="no-validation" label="No Validation Radio"></DBRadio>
-  <h2>4. Disabled State</h2>
-  <DBRadio label="Disabled Radio" :disabled="true"></DBRadio>
-  <h2>5. Change Event Example</h2>
-  <DBRadio
-    label="Change Event"
-    :onChange="(event) => console.log('Change event:', event.target.checked)"
-  ></DBRadio>
-</template>
-
-<script setup lang="ts">
-import { DBRadio } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Section.md

@@ -1,27 +0,0 @@
-
-
-# Section Examples (vue)
-
-```vue
-<template>
-  <h1>DBSection Documentation Examples</h1>
-  <h2>1. Default Section</h2>
-  <DBSection>Default Section</DBSection>
-  <h2>2. Spacing Variants</h2>
-  <DBSection spacing="medium">Medium Spacing</DBSection>
-  <DBSection spacing="small">Small Spacing</DBSection>
-  <DBSection spacing="large">Large Spacing</DBSection>
-  <DBSection spacing="none">No Spacing</DBSection>
-  <h2>3. Container Width</h2>
-  <DBSection width="full">Full Width</DBSection>
-  <DBSection width="medium">Medium Width</DBSection>
-  <DBSection width="large">Large Width</DBSection>
-  <DBSection width="small">Small Width</DBSection>
-  <h2>4. Custom Class</h2>
-  <DBSection>Custom Class</DBSection>
-</template>
-
-<script setup lang="ts">
-import { DBSection } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Select.md

@@ -1,70 +0,0 @@
-
-
-# Select Examples (vue)
-
-```vue
-<template>
-  <h1>DBSelect Documentation Examples</h1>
-  <h2>1. Default Select</h2>
-  <DBSelect label="Default Select"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <h2>2. Options Array</h2>
-  <DBSelect label="Select with Options" :options="getOptions()"></DBSelect>
-  <h2>3. Multiple Select</h2>
-  <DBSelect label="Multiple Select" :multiple="true"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <h2>4. Disabled State</h2>
-  <DBSelect label="Disabled Select" :disabled="true"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <h2>5. Validation States</h2>
-  <DBSelect validation="valid" label="Valid Select"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <DBSelect validation="invalid" label="Invalid Select"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <DBSelect validation="no-validation" label="No Validation Select"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-  <h2>6. Change Event Example</h2>
-  <DBSelect
-    label="Change Event"
-    :onChange="(event) => console.log('Change event:', event.target.value)"
-    ><option value="1">Option 1</option>
-    <option value="2" :disabled="true">Option 2</option></DBSelect
-  >
-</template>
-
-<script setup lang="ts">
-import { DBSelect } from "@db-ux/v-v-core-components";
-
-function getOptions() {
-  return [
-    {
-      id: "1",
-      label: "Option 1",
-      selected: false,
-    },
-    {
-      id: "2",
-      label: "Option 2",
-      selected: true,
-    },
-    {
-      id: "3",
-      label: "Option 3",
-      disabled: true,
-    },
-  ];
-}
-</script>
-```

package/agent/Stack.md

@@ -1,41 +0,0 @@
-
-
-# Stack Examples (vue)
-
-```vue
-<template>
-  <h1>DBStack Documentation Examples</h1>
-  <h2>1. Default Stack</h2>
-  <DBStack>Default Stack</DBStack>
-  <h2>2. Variants</h2>
-  <DBStack variant="simple">Simple Variant</DBStack>
-  <DBStack variant="divider">Divider Variant</DBStack>
-  <h2>3. Directions</h2>
-  <DBStack direction="row">Row Direction</DBStack>
-  <DBStack direction="column">Column Direction</DBStack>
-  <h2>4. Alignment</h2>
-  <DBStack alignment="stretch">Stretch Alignment</DBStack>
-  <DBStack alignment="start">Start Alignment</DBStack>
-  <DBStack alignment="end">End Alignment</DBStack>
-  <DBStack alignment="center">Center Alignment</DBStack>
-  <h2>5. Justify Content</h2>
-  <DBStack justifyContent="space-between">Space Between</DBStack>
-  <DBStack justifyContent="start">Start Justify</DBStack>
-  <DBStack justifyContent="end">End Justify</DBStack>
-  <DBStack justifyContent="center">Center Justify</DBStack>
-  <h2>6. Gap Spacing</h2>
-  <DBStack gap="medium">Medium Gap</DBStack>
-  <DBStack gap="small">Small Gap</DBStack>
-  <DBStack gap="large">Large Gap</DBStack>
-  <DBStack gap="none">No Gap</DBStack>
-  <h2>7. Wrap</h2>
-  <DBStack :wrap="true">Wrap Enabled</DBStack>
-  <DBStack :wrap="false">Wrap Disabled</DBStack>
-  <h2>8. Custom Class</h2>
-  <DBStack>Custom Class</DBStack>
-</template>
-
-<script setup lang="ts">
-import { DBStack } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Switch.md

@@ -1,36 +0,0 @@
-
-
-# Switch Examples (vue)
-
-```vue
-<template>
-  <h1>DBSwitch Documentation Examples</h1>
-  <h2>1. Default Switch</h2>
-  <DBSwitch label="Default Switch"></DBSwitch>
-  <h2>2. Visual Aid</h2>
-  <DBSwitch label="Switch with Visual Aid" :visualAid="true"></DBSwitch>
-  <DBSwitch label="Switch without Visual Aid" :visualAid="false"></DBSwitch>
-  <h2>3. Sizes</h2>
-  <DBSwitch size="small" label="Small Switch"></DBSwitch>
-  <DBSwitch size="medium" label="Medium Switch"></DBSwitch>
-  <h2>4. Validation States</h2>
-  <DBSwitch validation="valid" label="Valid Switch"></DBSwitch>
-  <DBSwitch validation="invalid" label="Invalid Switch"></DBSwitch>
-  <DBSwitch validation="no-validation" label="No Validation Switch"></DBSwitch>
-  <h2>5. Disabled State</h2>
-  <DBSwitch label="Disabled Switch" :disabled="true"></DBSwitch>
-  <h2>6. Icon Support</h2>
-  <DBSwitch icon="check" label="Switch with Icon"></DBSwitch>
-  <DBSwitch iconLeading="user" label="Switch with Leading Icon"></DBSwitch>
-  <DBSwitch iconTrailing="arrow" label="Switch with Trailing Icon"></DBSwitch>
-  <h2>7. Change Event Example</h2>
-  <DBSwitch
-    label="Change Event"
-    :onChange="(event) => console.log('Change event:', event.target.checked)"
-  ></DBSwitch>
-</template>
-
-<script setup lang="ts">
-import { DBSwitch } from "@db-ux/v-v-core-components";
-</script>
-```