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

package/dist/index.d.ts

@@ -4,14 +4,24 @@ export * from './components/accordion-item/model';
 export * from './components/accordion/model';
 export * from './components/badge';
 export * from './components/badge/model';
-export * from './components/brand';
-export * from './components/brand/model';
 export * from './components/button';
 export * from './components/button/model';
 export * from './components/card';
 export * from './components/card/model';
 export * from './components/checkbox';
 export * from './components/checkbox/model';
+export * from './components/control-panel-brand';
+export * from './components/control-panel-brand/model';
+export * from './components/control-panel-desktop';
+export * from './components/control-panel-desktop/model';
+export * from './components/control-panel-meta-navigation';
+export * from './components/control-panel-meta-navigation/model';
+export * from './components/control-panel-mobile';
+export * from './components/control-panel-mobile/model';
+export * from './components/control-panel-primary-actions';
+export * from './components/control-panel-primary-actions/model';
+export * from './components/control-panel-secondary-actions';
+export * from './components/control-panel-secondary-actions/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';
@@ -26,8 +36,6 @@ export * from './components/divider';
 export * from './components/divider/model';
 export * from './components/drawer';
 export * from './components/drawer/model';
-export * from './components/header';
-export * from './components/header/model';
 export * from './components/icon';
 export * from './components/icon/model';
 export * from './components/infotext';
@@ -38,12 +46,12 @@ export * from './components/link';
 export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item-group';
+export * from './components/navigation-item-group/model';
 export * from './components/navigation-item/model';
 export * from './components/navigation/model';
 export * from './components/notification';
 export * from './components/notification/model';
-export * from './components/page';
-export * from './components/page/model';
 export * from './components/popover';
 export * from './components/popover/model';
 export * from './components/radio';
@@ -52,6 +60,8 @@ export * from './components/section';
 export * from './components/section/model';
 export * from './components/select';
 export * from './components/select/model';
+export * from './components/shell';
+export * from './components/shell/model';
 export * from './components/stack';
 export * from './components/stack/model';
 export * from './components/switch';
@@ -77,3 +87,6 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from './components/shell-sub-navigation';
+export * from "./components/control-panel-flat-icon-navigation";
+export * from "./components/control-panel-flat-icon-navigation/model";

package/dist/shared/constants.d.ts

@@ -14,6 +14,8 @@ export declare const DEFAULT_INVALID_MESSAGE: string;
 export declare const DEFAULT_REMOVE: string;
 export declare const DEFAULT_BACK: string;
 export declare const DEFAULT_SELECTED: string;
+export declare const DEFAULT_EXPAND: string;
+export declare const DEFAULT_COLLAPSE: string;
 export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ICON: string;
 export declare const DEFAULT_ROWS: number;
@@ -64,6 +66,7 @@ export declare enum COLOR {
 export declare const COLORS: COLOR[];
 export declare const COLORS_SIMPLE: COLOR_SIMPLE[];
 export declare enum SEMANTIC {
+    'NEUTRAL' = "neutral",
     'CRITICAL' = "critical",
     'INFORMATIONAL' = "informational",
     'WARNING' = "warning",

package/dist/shared/model.d.ts

@@ -87,6 +87,10 @@ export type MarginProps = {
      */
     margin?: MarginType;
 };
+export declare const ShellControlPanelDesktopPosition: readonly ["top", "left"];
+export type ShellControlPanelDesktopPositionType = (typeof ShellControlPanelDesktopPosition)[number];
+export declare const ShellControlPanelMobilePosition: readonly ["top", "bottom"];
+export type ShellControlPanelMobilePositionType = (typeof ShellControlPanelMobilePosition)[number];
 export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
 export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
 export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
@@ -232,11 +236,13 @@ export type ValueProps = {
      */
     value?: any;
 };
-export type BaseFormProps = {
+export type DisabledProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the form element.
+     * The disabled attribute can be set to keep a user from clicking on the item.
      */
     disabled?: boolean | string;
+};
+export type BaseFormProps = {
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -245,7 +251,7 @@ export type BaseFormProps = {
      * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
      */
     name?: string;
-};
+} & DisabledProps;
 export type CustomFormProps = {
     /**
      * Overwrites auto handling for aria-describedby.
@@ -505,10 +511,83 @@ export type AriaControlsProps = {
      */
     controls?: string;
 };
+export type ControlPanelProps = {
+    /**
+     * Slot to pass in the DBControlPanelBrand component
+     */
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * Desktop: Above the regular control-panel-desktop
+     * Mobile: Inside the drawer
+     */
+    metaNavigation?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
+     * Desktop: Shown next to the main-navigation
+     * Mobile: Shown next to the control-panel-brand
+     */
+    primaryActions?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
+     * Desktop: Shown seperated by divider at the end of the control-panel-desktop
+     * Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryActions?: any;
+    /**
+     * Adds ``aria-labelledby`` to the <nav> element.
+     */
+    navigationLabeledBy?: string;
+};
 export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type OverflowScrollButtonProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
+};
+export type OverflowScrollButtonState = {
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+};
+export type SidebarProps = {
+    /**
+     * Set the expanded/collapsed state initially for the left sidebar
+     */
+    expanded?: boolean | string;
+    /**
+     * Set the tooltip for the expand/collapse button
+     */
+    expandButtonTooltip?: string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    expandButtonTooltipFn?: (open: boolean) => string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    onExpandButtonTooltipFn?: (open: boolean) => string;
+};
+export type SidebarState = {
+    _open: boolean;
+    getToggleButtonText: () => string;
+};
+export declare const NavigationItemGroupVariantList: readonly ["popover", "tree"];
+export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
+export type NavigationItemGroupVariant = {
+    variant?: NavigationItemGroupVariantType;
+};
+export type AdditionalInformationSlotProps = {
+    /**
+     * Slot to add additional information most likely a DBBadge
+     */
+    additionalInformation?: any;
+};
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;
     handleDocumentScroll: (event: any, parent?: HTMLElement) => void;

package/dist/utils/floating-components.d.ts

@@ -16,5 +16,21 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     correctedPlacement: string;
     innerWidth: number;
     innerHeight: number;
+    outsideYBoth?: undefined;
+    outsideXBoth?: undefined;
+} | {
+    top: number;
+    bottom: number;
+    right: number;
+    height: number;
+    width: number;
+    left: number;
+    childHeight: number;
+    childWidth: number;
+    correctedPlacement: string;
+    innerWidth: number;
+    innerHeight: number;
+    outsideYBoth: boolean;
+    outsideXBoth: boolean;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;

package/dist/utils/navigation.d.ts

@@ -23,10 +23,6 @@ export declare class NavigationItemSafeTriangle {
     private getTriangleTipY;
     private hasMouseEnteredSubNavigation;
     private getTriangleCoordinates;
-    followByMouseEvent(event: MouseEvent): void;
+    followByMouseEvent(event: any): void;
 }
-declare const _default: {
-    isEventTargetNavigationItem: (event: unknown) => boolean;
-    NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
-};
-export default _default;
+export declare const handleSubNavigationPosition: (element: HTMLElement, level?: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/v-core-components",
-  "version": "3.0.2-copilot2-e7bf98b",
+  "version": "3.0.2-shell2-badc28f",
   "type": "module",
   "description": "Vue components for @db-ux/core-components",
   "repository": {
@@ -23,15 +23,13 @@
     }
   },
   "files": [
-    "dist/",
-    "agent"
+    "dist/"
   ],
   "scripts": {
     "build": "npm-run-all build:*",
     "build:01_vite": "vite build",
     "build:02_types": "vue-tsc --declaration --emitDeclarationOnly",
     "mv:dist": "cpr dist ../../build-outputs/vue/dist --overwrite",
-    "mv:agent": "cpr agent ../../build-outputs/vue/agent -o",
     "mv:package.json": "cpr package.json ../../build-outputs/vue/package.json --overwrite",
     "mv:readme": "cpr README.md ../../build-outputs/vue/README.md --overwrite",
     "postbuild": "npm-run-all --parallel mv:*",
@@ -40,13 +38,13 @@
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.54.1",
-    "@vitejs/plugin-vue": "6.0.0",
+    "@vitejs/plugin-vue": "6.0.1",
     "replace-in-file": "8.3.0",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
     "vite": "6.3.5",
     "vue": "3.5.18",
-    "vue-tsc": "3.0.3"
+    "vue-tsc": "3.0.4"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -55,7 +53,7 @@
   "sideEffects": false,
   "source": "src/index.ts",
   "dependencies": {
-    "@db-ux/core-components": "3.0.2-copilot2-e7bf98b",
-    "@db-ux/core-foundations": "3.0.2-copilot2-e7bf98b"
+    "@db-ux/core-components": "3.0.2-shell2-badc28f",
+    "@db-ux/core-foundations": "3.0.2-shell2-badc28f"
   }
 }

package/agent/Accordion.md

@@ -1,42 +0,0 @@
-
-
-# Accordion Examples (vue)
-
-```vue
-<template>
-  <h1>DBAccordion Documentation Examples</h1>
-  <h2>1. Default Accordion</h2>
-  <DBAccordion>Default Accordion</DBAccordion>
-  <h2>2. Behavior Variants</h2>
-  <DBAccordion behavior="multiple">Multiple Behavior</DBAccordion>
-  <DBAccordion behavior="single">Single Behavior</DBAccordion>
-  <h2>3. Initial Open Index</h2>
-  <DBAccordion :initOpenIndex="[0, 1]">Initial Open Index</DBAccordion>
-  <h2>4. Items</h2>
-  <DBAccordion :items="getItems()">Accordion with Items</DBAccordion>
-  <h2>5. Name Attribute</h2>
-  <DBAccordion name="accordion-name">With Name</DBAccordion>
-  <h2>6. Variant Types</h2>
-  <DBAccordion variant="divider">Divider Variant</DBAccordion>
-  <DBAccordion variant="card">Card Variant</DBAccordion>
-</template>
-
-<script setup lang="ts">
-import { DBAccordion } from "@db-ux/v-v-core-components";
-
-function getItems() {
-  return [
-    {
-      text: "Item 1 Content",
-      headlinePlain: "Item 1",
-      disabled: false,
-    },
-    {
-      text: "Item 2 Content",
-      headlinePlain: "Item 2",
-      disabled: true,
-    },
-  ];
-}
-</script>
-```

package/agent/AccordionItem.md

@@ -1,31 +0,0 @@
-
-
-# AccordionItem Examples (vue)
-
-```vue
-<template>
-  <h1>DBAccordionItem Documentation Examples</h1>
-  <h2>1. Default Accordion Item</h2>
-  <DBAccordionItem>Default Accordion Item</DBAccordionItem>
-  <h2>2. Initial State</h2>
-  <DBAccordionItem :defaultOpen="true">Initially Open</DBAccordionItem>
-  <DBAccordionItem :defaultOpen="false"> Initially Closed </DBAccordionItem>
-  <h2>3. Disabled State</h2>
-  <DBAccordionItem :disabled="true"> Disabled Accordion Item </DBAccordionItem>
-  <h2>4. Headline Variants</h2>
-  <DBAccordionItem :headline="<strong>Custom Headline</strong>">
-    With Custom Headline
-  </DBAccordionItem>
-  <DBAccordionItem headlinePlain="Plain Headline">
-    With Plain Headline
-  </DBAccordionItem>
-  <h2>5. Toggle Event</h2>
-  <DBAccordionItem :onToggle="(open) => console.log('Toggled:', open)">
-    With Toggle Event
-  </DBAccordionItem>
-</template>
-
-<script setup lang="ts">
-import { DBAccordionItem } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Badge.md

@@ -1,38 +0,0 @@
-
-
-# Badge Examples (vue)
-
-```vue
-<template>
-  <h1>DBBadge Documentation Examples</h1>
-  <h2>1. Default Badge</h2>
-  <DBBadge>Default Badge</DBBadge>
-  <h2>2. Semantic Variants</h2>
-  <DBBadge semantic="adaptive">Adaptive</DBBadge>
-  <DBBadge semantic="neutral">Neutral</DBBadge>
-  <DBBadge semantic="critical">Critical</DBBadge>
-  <DBBadge semantic="informational">Informational</DBBadge>
-  <DBBadge semantic="warning">Warning</DBBadge>
-  <DBBadge semantic="successful">Successful</DBBadge>
-  <h2>3. Sizes</h2>
-  <DBBadge size="small">Small</DBBadge>
-  <DBBadge size="medium">Medium</DBBadge>
-  <h2>4. Emphasis Variants</h2>
-  <DBBadge emphasis="weak">Weak Emphasis</DBBadge>
-  <DBBadge emphasis="strong">Strong Emphasis</DBBadge>
-  <h2>5. Placement Variants</h2>
-  <DBBadge placement="inline">Inline</DBBadge>
-  <DBBadge placement="corner-top-left">Corner Top Left</DBBadge>
-  <DBBadge placement="corner-top-right">Corner Top Right</DBBadge>
-  <DBBadge placement="corner-center-left">Corner Center Left</DBBadge>
-  <DBBadge placement="corner-center-right"> Corner Center Right </DBBadge>
-  <DBBadge placement="corner-bottom-left">Corner Bottom Left</DBBadge>
-  <DBBadge placement="corner-bottom-right"> Corner Bottom Right </DBBadge>
-  <h2>6. Custom Label</h2>
-  <DBBadge label="Custom Label">With Custom Label</DBBadge>
-</template>
-
-<script setup lang="ts">
-import { DBBadge } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Brand.md

@@ -1,19 +0,0 @@
-
-
-# Brand Examples (vue)
-
-```vue
-<template>
-  <h1>DBBrand Documentation Examples</h1>
-  <h2>1. Default Brand</h2>
-  <DBBrand>Default Brand</DBBrand>
-  <h2>2. Icon Visibility</h2>
-  <DBBrand :showIcon="false">Icon Hidden</DBBrand>
-  <h2>3. Custom Text</h2>
-  <DBBrand text="Custom Brand Text">With Custom Text</DBBrand>
-</template>
-
-<script setup lang="ts">
-import { DBBrand } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Button.md

@@ -1,47 +0,0 @@
-
-
-# Button Examples (vue)
-
-```vue
-<template>
-  <h1>DBButton Documentation Examples</h1>
-  <h2>1. Default Button</h2>
-  <DBButton>Button</DBButton>
-  <h2>2. Variants</h2>
-  <DBButton variant="filled">Filled</DBButton>
-  <DBButton variant="outlined">Outlined</DBButton>
-  <DBButton variant="ghost">Ghost</DBButton>
-  <DBButton variant="brand">Brand</DBButton>
-  <h2>3. Sizes</h2>
-  <DBButton size="small">Small</DBButton>
-  <DBButton size="medium">Medium</DBButton>
-  <h2>4. Icon Only</h2>
-  <DBButton icon="check" :noText="true"></DBButton>
-  <h2>5. Disabled</h2>
-  <DBButton :disabled="true">Disabled</DBButton>
-  <h2>6. Button Types</h2>
-  <DBButton type="button">Type=button</DBButton>
-  <DBButton type="submit">Type=submit</DBButton>
-  <DBButton type="reset">Type=reset</DBButton>
-  <h2>7. Form Association</h2>
-  <form id="example-form">
-    <input name="exampleInput" placeholder="Example input" />
-  </form>
-  <DBButton form="example-form" type="submit"> Submit Form </DBButton>
-  <h2>8. Name &amp; Value</h2>
-  <DBButton name="testName" value="testValue"> Name/Value </DBButton>
-  <h2>9. Width</h2>
-  <DBButton width="full">Full width</DBButton>
-  <DBButton width="auto">Auto width</DBButton>
-  <h2>10. Icon Visibility</h2>
-  <DBButton icon="check" :showIcon="false"> Icon Hidden </DBButton>
-  <h2>11. Custom Class</h2>
-  <DBButton>Custom Class</DBButton>
-  <h2>12. Click Event</h2>
-  <DBButton :onClick="(event) => alert('Button clicked!')"> Click Me </DBButton>
-</template>
-
-<script setup lang="ts">
-import { DBButton } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Card.md

@@ -1,29 +0,0 @@
-
-
-# Card Examples (vue)
-
-```vue
-<template>
-  <h1>DBCard Documentation Examples</h1>
-  <h2>1. Default Card</h2>
-  <DBCard>Default Card</DBCard>
-  <h2>2. Behaviors</h2>
-  <DBCard behavior="static">Static</DBCard>
-  <DBCard behavior="interactive">Interactive</DBCard>
-  <h2>3. Elevation Levels</h2>
-  <DBCard elevationLevel="1">Elevation Level 1</DBCard>
-  <DBCard elevationLevel="2">Elevation Level 2</DBCard>
-  <DBCard elevationLevel="3">Elevation Level 3</DBCard>
-  <h2>4. Custom Class</h2>
-  <DBCard>Custom Class</DBCard>
-  <h2>5. Spacing</h2>
-  <DBCard spacing="medium">Medium Spacing</DBCard>
-  <DBCard spacing="small">Small Spacing</DBCard>
-  <DBCard spacing="large">Large Spacing</DBCard>
-  <DBCard spacing="none">No Spacing</DBCard>
-</template>
-
-<script setup lang="ts">
-import { DBCard } from "@db-ux/v-v-core-components";
-</script>
-```

package/agent/Checkbox.md

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

package/agent/CustomSelect.md

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

package/agent/Divider.md

@@ -1,27 +0,0 @@
-
-
-# Divider Examples (vue)
-
-```vue
-<template>
-  <h1>DBDivider Documentation Examples</h1>
-  <h2>1. Default Divider</h2>
-  <DBDivider></DBDivider>
-  <h2>2. Margin Variants</h2>
-  <DBDivider margin="none"></DBDivider>
-  <DBDivider margin="_"></DBDivider>
-  <h2>3. Orientation Variants</h2>
-  <DBDivider variant="horizontal"></DBDivider>
-  <DBDivider variant="vertical"></DBDivider>
-  <h2>4. Emphasis Variants</h2>
-  <DBDivider emphasis="weak"></DBDivider>
-  <DBDivider emphasis="strong"></DBDivider>
-  <h2>5. Width Variants</h2>
-  <DBDivider width="full"></DBDivider>
-  <DBDivider width="auto"></DBDivider>
-</template>
-
-<script setup lang="ts">
-import { DBDivider } from "@db-ux/v-v-core-components";
-</script>
-```