@db-ux/wc-core-components 3.0.2-copilot3-1616965 → 3.0.2-copilot4-0defc04

package/README.md

@@ -74,16 +74,6 @@ If you don't have it already, add a VS Code settings folder and file at the root
 }
 ```
 
-## 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 the best way is to copy the `docs` folder into your project.
-
-We provide a CLI tool to do this automatically, which you can run with:
-
-```shell
-npx @db-ux/agent-cli
-```
 
 ## Deutsche Bahn brand
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/wc-core-components",
-  "version": "3.0.2-copilot3-1616965",
+  "version": "3.0.2-copilot4-0defc04",
   "description": "Stencil components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -17,14 +17,12 @@
     }
   },
   "files": [
-    "dist/",
-    "agent"
+    "dist/"
   ],
   "scripts": {
     "build": "stencil build",
     "build:cem": "cem analyze",
     "mv:dist": "cpr dist ../../build-outputs/wc-core-components/dist -o",
-    "mv:agent": "cpr agent ../../build-outputs/wc-core-components/agent -o",
     "mv:package.json": "cpr package.json ../../build-outputs/wc-core-components/package.json -o",
     "mv:readme": "cpr README.md ../../build-outputs/wc-core-components/README.md -o",
     "postbuild": "npm-run-all --parallel build:* --parallel mv:*",
@@ -44,7 +42,7 @@
   },
   "web-types": "./dist/web-types.json",
   "dependencies": {
-    "@db-ux/core-components": "3.0.2-copilot3-1616965",
-    "@db-ux/core-foundations": "3.0.2-copilot3-1616965"
+    "@db-ux/core-components": "3.0.2-copilot4-0defc04",
+    "@db-ux/core-foundations": "3.0.2-copilot4-0defc04"
   }
 }

package/agent/Accordion.md

@@ -1,23 +0,0 @@
-
-
-# Accordion Examples (stencil)
-
-```html
-<h1>DBAccordion Documentation Examples</h1>
-        <h2>1. Default Accordion</h2>
-        <db-accordion>Default Accordion</db-accordion>
-        <h2>2. Behavior Variants</h2>
-        <db-accordion behavior="multiple">Multiple Behavior</db-accordion>
-        <db-accordion behavior="single">Single Behavior</db-accordion>
-        <h2>3. Initial Open Index</h2>
-        <db-accordion initOpenIndex={[0, 1]}>Initial Open Index</db-accordion>
-        <h2>4. Items</h2>
-        <db-accordion items={this.getItems()}>
-          Accordion with Items
-        </db-accordion>
-        <h2>5. Name Attribute</h2>
-        <db-accordion name="accordion-name">With Name</db-accordion>
-        <h2>6. Variant Types</h2>
-        <db-accordion variant="divider">Divider Variant</db-accordion>
-        <db-accordion variant="card">Card Variant</db-accordion>
-```

package/agent/AccordionItem.md

@@ -1,29 +0,0 @@
-
-
-# AccordionItem Examples (stencil)
-
-```html
-<h1>DBAccordionItem Documentation Examples</h1>
-        <h2>1. Default Accordion Item</h2>
-        <db-accordion-item>Default Accordion Item</db-accordion-item>
-        <h2>2. Initial State</h2>
-        <db-accordion-item defaultOpen={true}>Initially Open</db-accordion-item>
-        <db-accordion-item defaultOpen={false}>
-          Initially Closed
-        </db-accordion-item>
-        <h2>3. Disabled State</h2>
-        <db-accordion-item disabled={true}>
-          Disabled Accordion Item
-        </db-accordion-item>
-        <h2>4. Headline Variants</h2>
-        <db-accordion-item headline={<strong>Custom Headline</strong>}>
-          With Custom Headline
-        </db-accordion-item>
-        <db-accordion-item headlinePlain="Plain Headline">
-          With Plain Headline
-        </db-accordion-item>
-        <h2>5. Toggle Event</h2>
-        <db-accordion-item onToggle={(open) => console.log("Toggled:", open)}>
-          With Toggle Event
-        </db-accordion-item>
-```

package/agent/Badge.md

@@ -1,32 +0,0 @@
-
-
-# Badge Examples (stencil)
-
-```html
-<h1>DBBadge Documentation Examples</h1>
-        <h2>1. Default Badge</h2>
-        <db-badge>Default Badge</db-badge>
-        <h2>2. Semantic Variants</h2>
-        <db-badge semantic="adaptive">Adaptive</db-badge>
-        <db-badge semantic="neutral">Neutral</db-badge>
-        <db-badge semantic="critical">Critical</db-badge>
-        <db-badge semantic="informational">Informational</db-badge>
-        <db-badge semantic="warning">Warning</db-badge>
-        <db-badge semantic="successful">Successful</db-badge>
-        <h2>3. Sizes</h2>
-        <db-badge size="small">Small</db-badge>
-        <db-badge size="medium">Medium</db-badge>
-        <h2>4. Emphasis Variants</h2>
-        <db-badge emphasis="weak">Weak Emphasis</db-badge>
-        <db-badge emphasis="strong">Strong Emphasis</db-badge>
-        <h2>5. Placement Variants</h2>
-        <db-badge placement="inline">Inline</db-badge>
-        <db-badge placement="corner-top-left">Corner Top Left</db-badge>
-        <db-badge placement="corner-top-right">Corner Top Right</db-badge>
-        <db-badge placement="corner-center-left">Corner Center Left</db-badge>
-        <db-badge placement="corner-center-right">Corner Center Right</db-badge>
-        <db-badge placement="corner-bottom-left">Corner Bottom Left</db-badge>
-        <db-badge placement="corner-bottom-right">Corner Bottom Right</db-badge>
-        <h2>6. Custom Label</h2>
-        <db-badge label="Custom Label">With Custom Label</db-badge>
-```

package/agent/Brand.md

@@ -1,13 +0,0 @@
-
-
-# Brand Examples (stencil)
-
-```html
-<h1>DBBrand Documentation Examples</h1>
-        <h2>1. Default Brand</h2>
-        <db-brand>Default Brand</db-brand>
-        <h2>2. Icon Visibility</h2>
-        <db-brand showIcon={false}>Icon Hidden</db-brand>
-        <h2>3. Custom Text</h2>
-        <db-brand text="Custom Brand Text">With Custom Text</db-brand>
-```

package/agent/Button.md

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

package/agent/Card.md

@@ -1,23 +0,0 @@
-
-
-# Card Examples (stencil)
-
-```html
-<h1>DBCard Documentation Examples</h1>
-        <h2>1. Default Card</h2>
-        <db-card>Default Card</db-card>
-        <h2>2. Behaviors</h2>
-        <db-card behavior="static">Static</db-card>
-        <db-card behavior="interactive">Interactive</db-card>
-        <h2>3. Elevation Levels</h2>
-        <db-card elevationLevel="1">Elevation Level 1</db-card>
-        <db-card elevationLevel="2">Elevation Level 2</db-card>
-        <db-card elevationLevel="3">Elevation Level 3</db-card>
-        <h2>4. Custom Class</h2>
-        <db-card class="my-custom-class">Custom Class</db-card>
-        <h2>5. Spacing</h2>
-        <db-card spacing="medium">Medium Spacing</db-card>
-        <db-card spacing="small">Small Spacing</db-card>
-        <db-card spacing="large">Large Spacing</db-card>
-        <db-card spacing="none">No Spacing</db-card>
-```

package/agent/Checkbox.md

@@ -1,41 +0,0 @@
-
-
-# Checkbox Examples (stencil)
-
-```html
-<h1>DBCheckbox Documentation Examples</h1>
-        <h2>1. Default Checkbox</h2>
-        <db-checkbox label="Default Checkbox"></db-checkbox>
-        <h2>2. Indeterminate State</h2>
-        <db-checkbox
-          label="Indeterminate Checkbox"
-          indeterminate={true}
-        ></db-checkbox>
-        <h2>3. Sizes</h2>
-        <db-checkbox size="small" label="Small Checkbox"></db-checkbox>
-        <db-checkbox size="medium" label="Medium Checkbox"></db-checkbox>
-        <h2>4. Validation States</h2>
-        <db-checkbox validation="valid" label="Valid Checkbox"></db-checkbox>
-        <db-checkbox
-          validation="invalid"
-          label="Invalid Checkbox"
-        ></db-checkbox>
-        <db-checkbox
-          validation="no-validation"
-          label="No Validation Checkbox"
-        ></db-checkbox>
-        <h2>5. Disabled State</h2>
-        <db-checkbox label="Disabled Checkbox" disabled={true}></db-checkbox>
-        <h2>6. Message Property Example</h2>
-        <db-checkbox
-          label="Checkbox with Message"
-          message="This is a helper message."
-        ></db-checkbox>
-        <h2>7. Change Event Example</h2>
-        <db-checkbox
-          label="Change Event"
-          onChange={(event) =>
-            console.log("Change event:", event.target.checked)
-          }
-        ></db-checkbox>
-```

package/agent/CustomSelect.md

@@ -1,54 +0,0 @@
-
-
-# CustomSelect Examples (stencil)
-
-```html
-<h1>DBCustomSelect Documentation Examples</h1>
-        <h2>1. Default Custom Select</h2>
-        <db-custom-select
-          label="Default Custom Select"
-          options={this.getOptions()}
-        ></db-custom-select>
-        <h2>3. Multiple Select</h2>
-        <db-custom-select
-          label="Multiple Custom Select"
-          multiple={true}
-          options={this.getOptions()}
-        ></db-custom-select>
-        <h2>4. Disabled State</h2>
-        <db-custom-select
-          label="Disabled Custom Select"
-          disabled={true}
-          options={this.getOptions()}
-        ></db-custom-select>
-        <h2>5. Validation States</h2>
-        <db-custom-select
-          validMessage="This is a valid selection"
-          validation="valid"
-          label="Valid Custom Select"
-          options={this.getOptions()}
-        ></db-custom-select>
-        <db-custom-select
-          invalidMessage="This is an invalid selection"
-          validation="invalid"
-          label="Invalid Custom Select"
-          options={this.getOptions()}
-        ></db-custom-select>
-        <db-custom-select
-          validation="no-validation"
-          label="No Validation Custom Select"
-          options={this.getOptions()}
-        ></db-custom-select>
-        <h2>6. Change Event Example</h2>
-        <db-custom-select
-          label="Change Event"
-          onChange={(event) => console.log("Change event:", event.target.value)}
-          options={this.getOptions()}
-        ></db-custom-select>
-        <h2>7. Placeholder Example</h2>
-        <db-custom-select
-          label="Custom Select with Placeholder"
-          placeholder="Select an option"
-          options={this.getOptions()}
-        ></db-custom-select>
-```

package/agent/Divider.md

@@ -1,21 +0,0 @@
-
-
-# Divider Examples (stencil)
-
-```html
-<h1>DBDivider Documentation Examples</h1>
-        <h2>1. Default Divider</h2>
-        <db-divider></db-divider>
-        <h2>2. Margin Variants</h2>
-        <db-divider margin="none"></db-divider>
-        <db-divider margin="_"></db-divider>
-        <h2>3. Orientation Variants</h2>
-        <db-divider variant="horizontal"></db-divider>
-        <db-divider variant="vertical"></db-divider>
-        <h2>4. Emphasis Variants</h2>
-        <db-divider emphasis="weak"></db-divider>
-        <db-divider emphasis="strong"></db-divider>
-        <h2>5. Width Variants</h2>
-        <db-divider width="full"></db-divider>
-        <db-divider width="auto"></db-divider>
-```

package/agent/Drawer.md

@@ -1,71 +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 (stencil)
-
-```html
-<h1>DBDrawer Documentation Examples</h1>
-        <h2>1. Default Drawer</h2>
-        <div>
-          <db-button
-            onClick={() => {
-              this.open = true;
-            }}
-          >
-            Open Me
-          </db-button>
-          <db-drawer
-            open={this.open}
-            onClose={() => {
-              this.open = false;
-            }}
-            drawerHeader={<header>Optional drawer header</header>}
-          >
-            My Drawer content
-          </db-drawer>
-        </div>
-        <h2>2. Drawer Variants</h2>
-        <div>
-          <db-button
-            onClick={() => {
-              this.open = true;
-            }}
-          >
-            Open Modal Drawer
-          </db-button>
-          <db-drawer
-            variant="modal"
-            open={this.open}
-            onClose={() => {
-              this.open = false;
-            }}
-          >
-            Modal Drawer content
-          </db-drawer>
-        </div>
-        <div>
-          <db-button
-            onClick={() => {
-              this.open = true;
-            }}
-          >
-            Open Inside Drawer
-          </db-button>
-          <db-drawer
-            variant="inside"
-            open={this.open}
-            onClose={() => {
-              this.open = false;
-            }}
-          >
-            Inside Drawer content
-          </db-drawer>
-        </div>
-```

package/agent/Header.md

@@ -1,29 +0,0 @@
-
-
-# Header Examples (stencil)
-
-```html
-<h1>DBHeader Documentation Examples</h1>
-        <h2>1. Default Header</h2>
-        <db-header
-          drawerOpen={this.drawerOpen}
-          onToggle={(open) => (this.drawerOpen = open)}
-        >
-          <db-brand slot="brand">My Awesome App</db-brand>
-<div slot="metaNavigation"><db-link href="#">Imprint</db-link><db-link href="#">Help</db-link></div>
-<db-button slot="primaryAction" icon="magnifying_glass" variant="ghost" noText>Search</db-button>
-<div slot="secondaryAction"><db-button icon="x_placeholder" variant="ghost" noText>Profile</db-button><db-button icon="alert" variant="ghost" noText>Notification</db-button><db-button icon="help" variant="ghost" noText>Help</db-button></div>
-
-          <db-navigation>
-            <db-navigation-item>
-              <a href="#">Navi-Item 1</a>
-            </db-navigation-item>
-            <db-navigation-item icon="x_placeholder">
-              <a href="#">Navi-Item 2</a>
-            </db-navigation-item>
-            <db-navigation-item disabled={true}>
-              <a href="#">Navi-Item 3</a>
-            </db-navigation-item>
-          </db-navigation>
-        </db-header>
-```

package/agent/Icon.md

@@ -1,20 +0,0 @@
-
-
-# Icon Examples (stencil)
-
-```html
-<h1>DBIcon Documentation Examples</h1>
-        <h2>1. Default Icon</h2>
-        <db-icon>Default Icon</db-icon>
-        <h2>2. Icon Variants</h2>
-        <db-icon icon="user">User Icon</db-icon>
-        <db-icon icon="settings">Settings Icon</db-icon>
-        <h2>3. Icon Weights</h2>
-        <db-icon weight="16">16px Icon</db-icon>
-        <db-icon weight="24">24px Icon</db-icon>
-        <db-icon weight="32">32px Icon</db-icon>
-        <h2>4. Custom Class</h2>
-        <db-icon class="my-custom-class">Custom Class Icon</db-icon>
-        <h2>5. Text Content</h2>
-        <db-icon text="Icon with Text">Icon with Text</db-icon>
-```

package/agent/Infotext.md

@@ -1,25 +0,0 @@
-
-
-# Infotext Examples (stencil)
-
-```html
-<h1>DBInfotext Documentation Examples</h1>
-        <h2>1. Default Infotext</h2>
-        <db-infotext>Default Infotext</db-infotext>
-        <h2>2. Semantic Variants</h2>
-        <db-infotext semantic="adaptive">Adaptive</db-infotext>
-        <db-infotext semantic="neutral">Neutral</db-infotext>
-        <db-infotext semantic="critical">Critical</db-infotext>
-        <db-infotext semantic="informational">Informational</db-infotext>
-        <db-infotext semantic="warning">Warning</db-infotext>
-        <db-infotext semantic="successful">Successful</db-infotext>
-        <h2>3. Sizes</h2>
-        <db-infotext size="small">Small</db-infotext>
-        <db-infotext size="medium">Medium</db-infotext>
-        <h2>4. Icon Visibility</h2>
-        <db-infotext icon="info" showIcon={false}>
-          Icon Hidden
-        </db-infotext>
-        <h2>5. Custom Class</h2>
-        <db-infotext class="my-custom-class">Custom Class</db-infotext>
-```

package/agent/Input.md

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

package/agent/Link.md

@@ -1,52 +0,0 @@
-
-
-# Link Examples (stencil)
-
-```html
-<h1>DBLink Documentation Examples</h1>
-        <h2>1. Default Link</h2>
-        <db-link href="https://example.com">Default Link</db-link>
-        <h2>2. Disabled Link</h2>
-        <db-link href="https://example.com" disabled={true}>
-          Disabled Link
-        </db-link>
-        <h2>3. Target Variants</h2>
-        <db-link href="https://example.com" target="_self">
-          Self Target
-        </db-link>
-        <db-link href="https://example.com" target="_blank">
-          Blank Target
-        </db-link>
-        <h2>4. Custom Class</h2>
-        <db-link class="my-custom-class" href="https://example.com">
-          Custom Class
-        </db-link>
-        <h2>5. Rel Attribute</h2>
-        <db-link href="https://example.com" rel="noopener noreferrer">
-          No Referrer
-        </db-link>
-        <h2>6. Link Variants</h2>
-        <db-link href="https://example.com" variant="adaptive">
-          Adaptive Variant
-        </db-link>
-        <db-link href="https://example.com" variant="brand">
-          Brand Variant
-        </db-link>
-        <db-link href="https://example.com" variant="inline">
-          Inline Variant
-        </db-link>
-        <h2>7. Link Sizes</h2>
-        <db-link href="https://example.com" size="medium">
-          Medium Size
-        </db-link>
-        <db-link href="https://example.com" size="small">
-          Small Size
-        </db-link>
-        <h2>8. Link Content</h2>
-        <db-link href="https://example.com" content="external">
-          External Content
-        </db-link>
-        <db-link href="https://example.com" content="internal">
-          Internal Content
-        </db-link>
-```

package/agent/Navigation.md

@@ -1,19 +0,0 @@
-
-
-# Navigation Examples (stencil)
-
-```html
-<h1>DBNavigation Documentation Examples</h1>
-        <h2>1. Default Navigation</h2>
-        <db-navigation>
-          <db-navigation-item>
-            <a href="#">Navi-Item 1</a>
-          </db-navigation-item>
-          <db-navigation-item icon="x_placeholder">
-            <a href="#">Navi-Item 2</a>
-          </db-navigation-item>
-          <db-navigation-item disabled={true}>
-            <a href="#">Navi-Item 3</a>
-          </db-navigation-item>
-        </db-navigation>
-```

package/agent/NavigationItem.md

@@ -1,29 +0,0 @@
-
-
-# NavigationItem Examples (stencil)
-
-```html
-<h1>DBNavigationItem Documentation Examples</h1>
-        <h2>1. Default Navigation Item</h2>
-        <db-navigation-item>Default Navigation Item</db-navigation-item>
-        <h2>2. Active State</h2>
-        <db-navigation-item active={true}>
-          Active Navigation Item
-        </db-navigation-item>
-        <h2>3. Disabled State</h2>
-        <db-navigation-item disabled={true}>
-          Disabled Navigation Item
-        </db-navigation-item>
-        <h2>4. Sub-Navigation</h2>
-        <db-navigation-item subNavigation={<div>Sub Navigation Content</div>}>
-          Navigation Item with Sub-Navigation
-        </db-navigation-item>
-        <h2>5. Icon Support</h2>
-        <db-navigation-item icon="user">
-          Navigation Item with Icon
-        </db-navigation-item>
-        <h2>6. Custom Class</h2>
-        <db-navigation-item class="custom-class">
-          Navigation Item with Custom Class
-        </db-navigation-item>
-```

package/agent/Notification.md

@@ -1,38 +0,0 @@
-
-
-# Notification Examples (stencil)
-
-```html
-<h1>DBNotification Documentation Examples</h1>
-        <h2>1. Default Notification</h2>
-        <db-notification>Default Notification</db-notification>
-        <h2>2. Semantic Variants</h2>
-        <db-notification semantic="adaptive">Adaptive</db-notification>
-        <db-notification semantic="neutral">Neutral</db-notification>
-        <db-notification semantic="critical">Critical</db-notification>
-        <db-notification semantic="informational">
-          Informational
-        </db-notification>
-        <db-notification semantic="warning">Warning</db-notification>
-        <db-notification semantic="successful">Successful</db-notification>
-        <h2>3. Variants</h2>
-        <db-notification variant="docked">Docked</db-notification>
-        <db-notification variant="standalone">Standalone</db-notification>
-        <db-notification variant="overlay">Overlay</db-notification>
-        <h2>4. Closeable</h2>
-        <db-notification closeable={true}>
-          Closeable Notification
-        </db-notification>
-        <h2>5. Headline</h2>
-        <db-notification headline="Important Update">
-          Notification with Headline
-        </db-notification>
-        <h2>6. Timestamp</h2>
-        <db-notification timestamp="10:30 AM">
-          Notification with Timestamp
-        </db-notification>
-        <h2>7. Icon Support</h2>
-        <db-notification icon="info">Notification with Icon</db-notification>
-        <h2>8. Custom Class</h2>
-        <db-notification class="my-custom-class">Custom Class</db-notification>
-```

package/agent/Page.md

@@ -1,27 +0,0 @@
-
-
-# Page Examples (stencil)
-
-```html
-<h1>DBPage Documentation Examples</h1>
-        <h2>1. Default Page</h2>
-        <db-page><db-header slot="header">Header Content</db-header>
- Main Page</db-page>
-        <h2>2. Document Overflow Variants</h2>
-        <db-page documentOverflow="hidden">
-          <db-header slot="header">Header Content</db-header>
- Main Page with Hidden Overflow
-        </db-page>
-        <db-page documentOverflow="auto">
-          <db-header slot="header">Header Content</db-header>
- Main Page with Auto Overflow
-        </db-page>
-        <h2>3. Fade-In Effect</h2>
-        <db-page fadeIn={true}><db-header slot="header">Header Content</db-header>
- Main Page with Fade-In</db-page>
-        <h2>4. Variant Examples</h2>
-        <db-page variant="auto"><db-header slot="header">Header Content</db-header>
- Page with Auto Variant</db-page>
-        <db-page variant="fixed"><db-header slot="header">Header Content</db-header>
- Page with Fixed Variant</db-page>
-```

package/agent/Popover.md

@@ -1,52 +0,0 @@
-
-
-# Popover Examples (stencil)
-
-```html
-<h1>DBPopover Documentation Examples</h1>
-        <h2>1. Default Popover</h2>
-        <db-popover 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>
-        </db-popover>
-        <h2>2. Placement Variants</h2>
-        <db-popover
-          placement="top"
-          trigger={<DBButton>Top Placement</DBButton>}
-        >
-          Popover with top placement
-        </db-popover>
-        <db-popover
-          placement="bottom"
-          trigger={<DBButton>Bottom Placement</DBButton>}
-        >
-          Popover with bottom placement
-        </db-popover>
-        <h2>3. Delay Variants</h2>
-        <db-popover delay="fast" trigger={<DBButton>Fast Delay</DBButton>}>
-          Popover with fast delay
-        </db-popover>
-        <db-popover delay="slow" trigger={<DBButton>Slow Delay</DBButton>}>
-          Popover with slow delay
-        </db-popover>
-        <h2>4. Animation</h2>
-        <db-popover
-          trigger={<DBButton>With Animation</DBButton>}
-          animation={true}
-        >
-          Popover with animation
-        </db-popover>
-        <db-popover
-          trigger={<DBButton>No Animation</DBButton>}
-          animation={false}
-        >
-          Popover without animation
-        </db-popover>
-        <h2>5. Width Variants</h2>
-        <db-popover width="auto" trigger={<DBButton>Auto Width</DBButton>}>
-          Popover with auto width
-        </db-popover>
-        <db-popover width="fixed" trigger={<DBButton>Fixed Width</DBButton>}>
-          Popover with fixed width
-        </db-popover>
-```

package/agent/Radio.md

@@ -1,28 +0,0 @@
-
-
-# Radio Examples (stencil)
-
-```html
-<h1>DBRadio Documentation Examples</h1>
-        <h2>1. Default Radio</h2>
-        <db-radio label="Default Radio"></db-radio>
-        <h2>2. Sizes</h2>
-        <db-radio size="small" label="Small Radio"></db-radio>
-        <db-radio size="medium" label="Medium Radio"></db-radio>
-        <h2>3. Validation States</h2>
-        <db-radio validation="valid" label="Valid Radio"></db-radio>
-        <db-radio validation="invalid" label="Invalid Radio"></db-radio>
-        <db-radio
-          validation="no-validation"
-          label="No Validation Radio"
-        ></db-radio>
-        <h2>4. Disabled State</h2>
-        <db-radio label="Disabled Radio" disabled={true}></db-radio>
-        <h2>5. Change Event Example</h2>
-        <db-radio
-          label="Change Event"
-          onChange={(event) =>
-            console.log("Change event:", event.target.checked)
-          }
-        ></db-radio>
-```

package/agent/Section.md

@@ -1,21 +0,0 @@
-
-
-# Section Examples (stencil)
-
-```html
-<h1>DBSection Documentation Examples</h1>
-        <h2>1. Default Section</h2>
-        <db-section>Default Section</db-section>
-        <h2>2. Spacing Variants</h2>
-        <db-section spacing="medium">Medium Spacing</db-section>
-        <db-section spacing="small">Small Spacing</db-section>
-        <db-section spacing="large">Large Spacing</db-section>
-        <db-section spacing="none">No Spacing</db-section>
-        <h2>3. Container Width</h2>
-        <db-section width="full">Full Width</db-section>
-        <db-section width="medium">Medium Width</db-section>
-        <db-section width="large">Large Width</db-section>
-        <db-section width="small">Small Width</db-section>
-        <h2>4. Custom Class</h2>
-        <db-section class="my-custom-class">Custom Class</db-section>
-```

package/agent/Select.md

@@ -1,62 +0,0 @@
-
-
-# Select Examples (stencil)
-
-```html
-<h1>DBSelect Documentation Examples</h1>
-        <h2>1. Default Select</h2>
-        <db-select label="Default Select">
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <h2>2. Options Array</h2>
-        <db-select
-          label="Select with Options"
-          options={this.getOptions()}
-        ></db-select>
-        <h2>3. Multiple Select</h2>
-        <db-select label="Multiple Select" multiple={true}>
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <h2>4. Disabled State</h2>
-        <db-select label="Disabled Select" disabled={true}>
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <h2>5. Validation States</h2>
-        <db-select validation="valid" label="Valid Select">
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <db-select validation="invalid" label="Invalid Select">
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <db-select validation="no-validation" label="No Validation Select">
-          <option value="1">Option 1</option>
-          <option value="2" disabled={true}>
-            Option 2
-          </option>
-        </db-select>
-        <h2>6. Change Event Example</h2>
-        <db-select
-          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>
-        </db-select>
-```

package/agent/Stack.md

@@ -1,35 +0,0 @@
-
-
-# Stack Examples (stencil)
-
-```html
-<h1>DBStack Documentation Examples</h1>
-        <h2>1. Default Stack</h2>
-        <db-stack>Default Stack</db-stack>
-        <h2>2. Variants</h2>
-        <db-stack variant="simple">Simple Variant</db-stack>
-        <db-stack variant="divider">Divider Variant</db-stack>
-        <h2>3. Directions</h2>
-        <db-stack direction="row">Row Direction</db-stack>
-        <db-stack direction="column">Column Direction</db-stack>
-        <h2>4. Alignment</h2>
-        <db-stack alignment="stretch">Stretch Alignment</db-stack>
-        <db-stack alignment="start">Start Alignment</db-stack>
-        <db-stack alignment="end">End Alignment</db-stack>
-        <db-stack alignment="center">Center Alignment</db-stack>
-        <h2>5. Justify Content</h2>
-        <db-stack justifyContent="space-between">Space Between</db-stack>
-        <db-stack justifyContent="start">Start Justify</db-stack>
-        <db-stack justifyContent="end">End Justify</db-stack>
-        <db-stack justifyContent="center">Center Justify</db-stack>
-        <h2>6. Gap Spacing</h2>
-        <db-stack gap="medium">Medium Gap</db-stack>
-        <db-stack gap="small">Small Gap</db-stack>
-        <db-stack gap="large">Large Gap</db-stack>
-        <db-stack gap="none">No Gap</db-stack>
-        <h2>7. Wrap</h2>
-        <db-stack wrap={true}>Wrap Enabled</db-stack>
-        <db-stack wrap={false}>Wrap Disabled</db-stack>
-        <h2>8. Custom Class</h2>
-        <db-stack class="my-custom-class">Custom Class</db-stack>
-```

package/agent/Switch.md

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

package/agent/TabItem.md

@@ -1,25 +0,0 @@
-
-
-# TabItem Examples (stencil)
-
-```html
-<h1>DBTabItem Documentation Examples</h1>
-        <h2>1. Default Tab Item</h2>
-        <db-tab-item>Default Tab Item</db-tab-item>
-        <h2>2. Active State</h2>
-        <db-tab-item active={true}>Active Tab Item</db-tab-item>
-        <h2>3. Disabled State</h2>
-        <db-tab-item disabled={true}>Disabled Tab Item</db-tab-item>
-        <h2>4. Icon Variants</h2>
-        <db-tab-item icon="user">Tab Item with Icon</db-tab-item>
-        <db-tab-item iconLeading="arrow-left">
-          Tab Item with Leading Icon
-        </db-tab-item>
-        <db-tab-item iconTrailing="arrow-right">
-          Tab Item with Trailing Icon
-        </db-tab-item>
-        <h2>5. Label Property</h2>
-        <db-tab-item label="Tab Item Label">Tab Item with Label</db-tab-item>
-        <h2>6. No Text</h2>
-        <db-tab-item icon="user" noText={true}></db-tab-item>
-```

package/agent/Tabs.md

@@ -1,61 +0,0 @@
-
-
-# Tabs Examples (stencil)
-
-```html
-<h1>DBTabs Documentation Examples</h1>
-        <h2>1. Default Tabs</h2>
-        <db-tabs>
-          <db-tab-list>
-            <db-tab-item>Tab 1</db-tab-item>
-            <db-tab-item>Tab 2</db-tab-item>
-            <db-tab-item>Tab 3</db-tab-item>
-          </db-tab-list>
-          <db-tab-panel>Tab Panel 1</db-tab-panel>
-          <db-tab-panel>Tab Panel 2</db-tab-panel>
-          <db-tab-panel>Tab Panel 3</db-tab-panel>
-        </db-tabs>
-        <h2>2. Behavior Variants</h2>
-        <db-tabs behavior="scrollbar">
-          <db-tab-list>
-            <db-tab-item>Tab 1</db-tab-item>
-            <db-tab-item>Tab 2</db-tab-item>
-            <db-tab-item>Tab 3</db-tab-item>
-          </db-tab-list>
-          <db-tab-panel>Tab Panel 1</db-tab-panel>
-          <db-tab-panel>Tab Panel 2</db-tab-panel>
-          <db-tab-panel>Tab Panel 3</db-tab-panel>
-        </db-tabs>
-        <db-tabs behavior="arrows">
-          <db-tab-list>
-            <db-tab-item>Tab 1</db-tab-item>
-            <db-tab-item>Tab 2</db-tab-item>
-            <db-tab-item>Tab 3</db-tab-item>
-          </db-tab-list>
-          <db-tab-panel>Tab Panel 1</db-tab-panel>
-          <db-tab-panel>Tab Panel 2</db-tab-panel>
-          <db-tab-panel>Tab Panel 3</db-tab-panel>
-        </db-tabs>
-        <h2>3. Initial Selected Index</h2>
-        <db-tabs initialSelectedIndex={1}>
-          <db-tab-list>
-            <db-tab-item>Tab 1</db-tab-item>
-            <db-tab-item>Tab 2</db-tab-item>
-            <db-tab-item>Tab 3</db-tab-item>
-          </db-tab-list>
-          <db-tab-panel>Tab Panel 1</db-tab-panel>
-          <db-tab-panel>Tab Panel 2</db-tab-panel>
-          <db-tab-panel>Tab Panel 3</db-tab-panel>
-        </db-tabs>
-        <h2>4. Initial Selected Mode</h2>
-        <db-tabs initialSelectedMode="manually">
-          <db-tab-list>
-            <db-tab-item>Tab 1</db-tab-item>
-            <db-tab-item>Tab 2</db-tab-item>
-            <db-tab-item>Tab 3</db-tab-item>
-          </db-tab-list>
-          <db-tab-panel>Tab Panel 1</db-tab-panel>
-          <db-tab-panel>Tab Panel 2</db-tab-panel>
-          <db-tab-panel>Tab Panel 3</db-tab-panel>
-        </db-tabs>
-```

package/agent/Tag.md

@@ -1,41 +0,0 @@
-
-
-# Tag Examples (stencil)
-
-```html
-<h1>DBTag Documentation Examples</h1>
-        <h2>1. Default Tags</h2>
-        <db-tag>
-          <db-button>Tag as Button</db-button>
-        </db-tag>
-        <db-tag>
-          <db-link>Tag as Link</db-link>
-        </db-tag>
-        <db-tag>
-          <db-checkbox>Tag as Checkbox</db-checkbox>
-        </db-tag>
-        <db-tag>
-          <db-radio>Tag as Radio</db-radio>
-        </db-tag>
-        <db-tag>Static Tag</db-tag>
-        <h2>2. Overflow Example</h2>
-        <db-tag overflow={true}>
-          <span>Static Tag with overflow</span>
-        </db-tag>
-        <h2>3. Removable Tag</h2>
-        <db-tag
-          behavior="removable"
-          onRemove={() => console.log("Tag removed")}
-        >
-          Removable Tag
-        </db-tag>
-        <h2>4. Semantic Variants</h2>
-        <db-tag semantic="adaptive">Adaptive Tag</db-tag>
-        <db-tag semantic="neutral">Neutral Tag</db-tag>
-        <db-tag semantic="critical">Critical Tag</db-tag>
-        <db-tag semantic="informational">Informational Tag</db-tag>
-        <db-tag semantic="warning">Warning Tag</db-tag>
-        <db-tag semantic="successful">Successful Tag</db-tag>
-        <h2>5. Icon Support</h2>
-        <db-tag icon="user">Tag with Icon</db-tag>
-```

package/agent/Textarea.md

@@ -1,44 +0,0 @@
-
-
-# Textarea Examples (stencil)
-
-```html
-<h1>DBTextarea Documentation Examples</h1>
-        <h2>1. Default Textarea</h2>
-        <db-textarea label="Default Textarea"></db-textarea>
-        <h2>2. Resizable Variants</h2>
-        <db-textarea resize="none" label="No Resize"></db-textarea>
-        <db-textarea resize="both" label="Resize Both"></db-textarea>
-        <db-textarea
-          resize="horizontal"
-          label="Resize Horizontal"
-        ></db-textarea>
-        <db-textarea resize="vertical" label="Resize Vertical"></db-textarea>
-        <h2>3. Rows and Columns</h2>
-        <db-textarea
-          label="Custom Rows and Columns"
-          rows={5}
-          cols={30}
-        ></db-textarea>
-        <h2>4. Wrap Variants</h2>
-        <db-textarea wrap="hard" label="Hard Wrap"></db-textarea>
-        <db-textarea wrap="soft" label="Soft Wrap"></db-textarea>
-        <db-textarea wrap="off" label="No Wrap"></db-textarea>
-        <h2>5. Disabled State</h2>
-        <db-textarea label="Disabled Textarea" disabled={true}></db-textarea>
-        <h2>6. Placeholder Examples</h2>
-        <db-textarea
-          placeholder="Enter text here"
-          label="With Placeholder"
-        ></db-textarea>
-        <h2>7. Message Property Example</h2>
-        <db-textarea
-          label="Textarea with Message"
-          message="This is a helper message."
-        ></db-textarea>
-        <h2>8. Input Event Example</h2>
-        <db-textarea
-          label="Input Event"
-          onInput={(event) => console.log("Input event:", event.target.value)}
-        ></db-textarea>
-```

package/agent/Tooltip.md

@@ -1,37 +0,0 @@
-
-
-# Tooltip Examples (stencil)
-
-```html
-<h1>DBTooltip Documentation Examples</h1>
-        <h2>1. Default Tooltip</h2>
-        <db-button>
-          Hover on me to open Tooltip
-          <db-tooltip>Tooltip</db-tooltip>
-        </db-button>
-        <h2>2. Tooltip Variants</h2>
-        <db-button>
-          Description Tooltip
-          <db-tooltip variant="description">
-            Description Tooltip Content
-          </db-tooltip>
-        </db-button>
-        <db-button>
-          Label Tooltip
-          <db-tooltip variant="label">Label Tooltip Content</db-tooltip>
-        </db-button>
-        <h2>3. Tooltip with Arrow</h2>
-        <db-button>
-          Tooltip with Arrow
-          <db-tooltip showArrow={true}>Tooltip Content with Arrow</db-tooltip>
-        </db-button>
-        <h2>4. Placement Variants</h2>
-        <db-button>
-          Top Placement
-          <db-tooltip placement="top">Tooltip Content at Top</db-tooltip>
-        </db-button>
-        <db-button>
-          Bottom Placement
-          <db-tooltip placement="bottom">Tooltip Content at Bottom</db-tooltip>
-        </db-button>
-```

package/agent/_instructions.md

@@ -1,31 +0,0 @@
-- Use "@db-ux/wc-core-components" as import for components:
-  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
-  - use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
-  - use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
-  - use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
-  - use for `DBTabs` or `Tabs` the file __agent-path__/agent/Tabs.md
-  - use for `DBTabItem` or `TabItem` the file __agent-path__/agent/TabItem.md
-  - use for `DBSwitch` or `Switch` the file __agent-path__/agent/Switch.md
-  - use for `DBStack` or `Stack` the file __agent-path__/agent/Stack.md
-  - use for `DBSelect` or `Select` the file __agent-path__/agent/Select.md
-  - use for `DBSection` or `Section` the file __agent-path__/agent/Section.md
-  - use for `DBRadio` or `Radio` the file __agent-path__/agent/Radio.md
-  - use for `DBPopover` or `Popover` the file __agent-path__/agent/Popover.md
-  - use for `DBPage` or `Page` the file __agent-path__/agent/Page.md
-  - use for `DBNotification` or `Notification` the file __agent-path__/agent/Notification.md
-  - use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/agent/NavigationItem.md
-  - use for `DBNavigation` or `Navigation` the file __agent-path__/agent/Navigation.md
-  - use for `DBLink` or `Link` the file __agent-path__/agent/Link.md
-  - use for `DBInput` or `Input` the file __agent-path__/agent/Input.md
-  - use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
-  - use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
-  - use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
-  - use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
-  - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
-  - use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
-  - use for `DBCard` or `Card` the file __agent-path__/agent/Card.md
-  - use for `DBButton` or `Button` the file __agent-path__/agent/Button.md
-  - use for `DBBrand` or `Brand` the file __agent-path__/agent/Brand.md
-  - use for `DBBadge` or `Badge` the file __agent-path__/agent/Badge.md
-  - use for `DBAccordionItem` or `AccordionItem` the file __agent-path__/agent/AccordionItem.md
-  - use for `DBAccordion` or `Accordion` the file __agent-path__/agent/Accordion.md