@db-ux/v-core-components 3.1.16 → 3.1.18

package/README.md

@@ -95,6 +95,17 @@ Both Inputs in this example do the same:
 </template>
 ```
 
+## Documentation for AI Agents
+
+We provide a documentation for every component in the DB UX Design System via `docs` folder.
+To consume those documentation for AI Agents (currently GitHub Copilot) the best way is to copy the `docs` folder into your project.
+
+We provide a [CLI tool (`@db-ux/agent-cli`)](https://www.npmjs.com/package/@db-ux/agent-cli) to do this automatically, which you can run with:
+
+```shell
+npx @db-ux/agent-cli
+```
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/agent/Accordion.md

@@ -0,0 +1,42 @@
+
+
+# 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

@@ -0,0 +1,31 @@
+
+
+# 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

@@ -0,0 +1,38 @@
+
+
+# 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

@@ -0,0 +1,19 @@
+
+
+# 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

@@ -0,0 +1,47 @@
+
+
+# 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

@@ -0,0 +1,29 @@
+
+
+# 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

@@ -0,0 +1,39 @@
+
+
+# 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

@@ -0,0 +1,79 @@
+
+
+# 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

@@ -0,0 +1,27 @@
+
+
+# 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>
+```

package/agent/Drawer.md

@@ -0,0 +1,91 @@
+## 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

@@ -0,0 +1,35 @@
+
+
+# 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

@@ -0,0 +1,26 @@
+
+
+# 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

@@ -0,0 +1,29 @@
+
+
+# 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

@@ -0,0 +1,48 @@
+
+
+# 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

@@ -0,0 +1,42 @@
+
+
+# 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>
+```