@db-ux/wc-core-components 3.0.1 → 3.0.2-copilot2-e7bf98b

package/README.md

@@ -74,6 +74,16 @@ 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/agent/Accordion.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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