(false);
+
+ return (
+ <>
+ DBDrawer Documentation Examples
+
+ 1. Default Drawer
+
+ {
+ setOpen(true);
+ }}>
+ Open Me
+
+ {
+ setOpen(false);
+ }}
+ drawerHeader={}>
+ My Drawer content
+
+
+
+ 2. Drawer Variants
+
+ {
+ setOpen(true);
+ }}>
+ Open Modal Drawer
+
+ {
+ setOpen(false);
+ }}
+ variant="modal">
+ Modal Drawer content
+
+
+
+ {
+ setOpen(true);
+ }}>
+ Open Inside Drawer
+
+ {
+ setOpen(false);
+ }}
+ variant="inside">
+ Inside Drawer content
+
+
+
+ );
+}
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index ab174ff5d572..58f806873de4 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -26,6 +26,10 @@
%full-horizontal {
&:not([data-width="full"]) {
+ /// Sets the maximum height of the drawer
+ /// @propertyname max-block-size
+ /// @cssprop --db-drawer-max-height
+ /// @default calc(100% - #{variables.$db-spacing-fixed-xl})
max-block-size: var(
--db-drawer-max-height,
calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -87,6 +91,10 @@ $spacings: (
.db-drawer-header {
// We need this variable to overwrite it inside the header
+ /// Controls the bottom padding inside the drawer header
+ /// @propertyname padding-block-end
+ /// @cssprop --db-drawer-header-padding-block-end
+ /// @default #{map.get($spacing, "block")}
/* stylelint-disable-next-line db-ux/use-spacings */
padding-block-end: var(
--db-drawer-header-padding-block-end,
@@ -97,6 +105,10 @@ $spacings: (
.db-drawer-content {
// We need this variable to overwrite it inside the header
+ /// Controls left/right padding inside the drawer content area
+ /// @propertyname padding-inline
+ /// @cssprop --db-drawer-content-padding-inline
+ /// @default #{map.get($spacing, "inline")}
/* stylelint-disable-next-line db-ux/use-spacings */
padding-inline: var(
--db-drawer-content-padding-inline,
@@ -134,6 +146,19 @@ $spacings: (
box-shadow: variables.$db-elevation-md;
&:not([data-width="full"]) {
+ /// Sets the maximum width of the drawer
+ /// and some default values for the drawer
+ /// @propertyname max-inline-size
+ /// @cssprop --db-drawer-max-width
+ /// @default calc(100% - #{variables.$db-spacing-fixed-xl})
+ ///
+ /// @example css - Wide drawer
+ /// .db-drawer-wide {
+ /// --db-drawer-max-width: 800px;
+ /// }
+ ///
+ ///
+ ///
max-inline-size: var(
--db-drawer-max-width,
calc(100% - #{variables.$db-spacing-fixed-xl})
diff --git a/packages/components/src/components/header/agent/header.agent.lite.tsx b/packages/components/src/components/header/agent/header.agent.lite.tsx
new file mode 100644
index 000000000000..68d1ba5d560f
--- /dev/null
+++ b/packages/components/src/components/header/agent/header.agent.lite.tsx
@@ -0,0 +1,68 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { useState } from 'react';
+import { DBNavigation } from '../../navigation';
+import { DBNavigationItem } from '../../navigation-item';
+import { DBHeader } from '../index';
+
+useMetadata({
+ slots: {
+ brand: {
+ angular: 'My Awesome App',
+ vue: 'My Awesome App',
+ stencil: 'My Awesome App',
+ react: 'My Awesome App'
+ },
+ metaNavigation: {
+ angular:
+ 'ImprintHelp',
+ vue: 'ImprintHelp',
+ stencil:
+ 'ImprintHelp
',
+ react: '<>ImprintHelp'
+ },
+ primaryAction: {
+ angular:
+ 'Search',
+ vue: 'Search',
+ stencil:
+ 'Search',
+ react: 'Search'
+ },
+ secondaryAction: {
+ angular:
+ 'ProfileNotificationHelp',
+ vue: 'ProfileNotificationHelp',
+ stencil:
+ 'ProfileNotificationHelp
',
+ react: '<>ProfileNotificationHelp'
+ }
+ }
+});
+
+export default function Header() {
+ const [drawerOpen, setDrawerOpen] = useState(false);
+
+ return (
+ <>
+ DBHeader Documentation Examples
+
+ 1. Default Header
+ setDrawerOpen(open)}>
+ __slots__
+
+
+ Navi-Item 1
+
+
+ Navi-Item 2
+
+
+ Navi-Item 3
+
+
+
+
+ );
+}
diff --git a/packages/components/src/components/icon/agent/icon.agent.lite.tsx b/packages/components/src/components/icon/agent/icon.agent.lite.tsx
new file mode 100644
index 000000000000..15a7054b61b8
--- /dev/null
+++ b/packages/components/src/components/icon/agent/icon.agent.lite.tsx
@@ -0,0 +1,27 @@
+import { DBIcon } from '../index';
+
+export default function Icon() {
+ return (
+ <>
+ DBIcon Documentation Examples
+
+ 1. Default Icon
+ Default Icon
+
+ 2. Icon Variants
+ User Icon
+ Settings Icon
+
+ 3. Icon Weights
+ 16px Icon
+ 24px Icon
+ 32px Icon
+
+ 4. Custom Class
+ Custom Class Icon
+
+ 5. Text Content
+ Icon with Text
+
+ );
+}
diff --git a/packages/components/src/components/infotext/agent/infotext.agent.lite.tsx b/packages/components/src/components/infotext/agent/infotext.agent.lite.tsx
new file mode 100644
index 000000000000..b310b0b01d1d
--- /dev/null
+++ b/packages/components/src/components/infotext/agent/infotext.agent.lite.tsx
@@ -0,0 +1,32 @@
+import { DBInfotext } from '../index';
+
+export default function Infotext() {
+ return (
+ <>
+ DBInfotext Documentation Examples
+
+ 1. Default Infotext
+ Default Infotext
+
+ 2. Semantic Variants
+ Adaptive
+ Neutral
+ Critical
+ Informational
+ Warning
+ Successful
+
+ 3. Sizes
+ Small
+ Medium
+
+ 4. Icon Visibility
+
+ Icon Hidden
+
+
+ 5. Custom Class
+ Custom Class
+
+ );
+}
diff --git a/packages/components/src/components/input/agent/input.agent.lite.tsx b/packages/components/src/components/input/agent/input.agent.lite.tsx
new file mode 100644
index 000000000000..f87c00148024
--- /dev/null
+++ b/packages/components/src/components/input/agent/input.agent.lite.tsx
@@ -0,0 +1,46 @@
+import { DBInput } from '../index';
+
+export default function Input() {
+ return (
+ <>
+ DBInput Documentation Examples
+ 1. Default Input
+
+ 2. Input Types
+
+
+
+
+ 3. Sizes
+
+
+ 4. Icon Support
+
+
+
+ 5. Validation States
+
+
+
+ 6. Disabled State
+
+ 7. Custom Class
+
+ 8. Placeholder Examples
+
+
+ 9. Input Event Example
+
+ console.log('Input event:', event.target.value)
+ }
+ />
+ 10. Message Property Example
+
+
+ );
+}
diff --git a/packages/components/src/components/link/agent/link.agent.lite.tsx b/packages/components/src/components/link/agent/link.agent.lite.tsx
new file mode 100644
index 000000000000..34a0c3d4569f
--- /dev/null
+++ b/packages/components/src/components/link/agent/link.agent.lite.tsx
@@ -0,0 +1,62 @@
+import { DBLink } from '../index';
+
+export default function Link() {
+ return (
+ <>
+ DBLink Documentation Examples
+
+ 1. Default Link
+ Default Link
+
+ 2. Disabled Link
+
+ Disabled Link
+
+
+ 3. Target Variants
+
+ Self Target
+
+
+ Blank Target
+
+
+ 4. Custom Class
+
+ Custom Class
+
+
+ 5. Rel Attribute
+
+ No Referrer
+
+
+ 6. Link Variants
+
+ Adaptive Variant
+
+
+ Brand Variant
+
+
+ Inline Variant
+
+
+ 7. Link Sizes
+
+ Medium Size
+
+
+ Small Size
+
+
+ 8. Link Content
+
+ External Content
+
+
+ Internal Content
+
+
+ );
+}
diff --git a/packages/components/src/components/navigation-item/agent/navigation-item.agent.lite.tsx b/packages/components/src/components/navigation-item/agent/navigation-item.agent.lite.tsx
new file mode 100644
index 000000000000..0b645ef0b306
--- /dev/null
+++ b/packages/components/src/components/navigation-item/agent/navigation-item.agent.lite.tsx
@@ -0,0 +1,35 @@
+import { DBNavigationItem } from '../index';
+
+export default function NavigationItem() {
+ return (
+ <>
+ DBNavigationItem Documentation Examples
+
+ 1. Default Navigation Item
+ Default Navigation Item
+
+ 2. Active State
+ Active Navigation Item
+
+ 3. Disabled State
+
+ Disabled Navigation Item
+
+
+ 4. Sub-Navigation
+ Sub Navigation Content}>
+ Navigation Item with Sub-Navigation
+
+
+ 5. Icon Support
+
+ Navigation Item with Icon
+
+
+ 6. Custom Class
+
+ Navigation Item with Custom Class
+
+
+ );
+}
diff --git a/packages/components/src/components/navigation/agent/navigation.agent.lite.tsx b/packages/components/src/components/navigation/agent/navigation.agent.lite.tsx
new file mode 100644
index 000000000000..b37f0ac15bcf
--- /dev/null
+++ b/packages/components/src/components/navigation/agent/navigation.agent.lite.tsx
@@ -0,0 +1,23 @@
+import { DBNavigationItem } from '../../navigation-item/index';
+import { DBNavigation } from '../index';
+
+export default function Navigation() {
+ return (
+ <>
+ DBNavigation Documentation Examples
+
+ 1. Default Navigation
+
+
+ Navi-Item 1
+
+
+ Navi-Item 2
+
+
+ Navi-Item 3
+
+
+
+ );
+}
diff --git a/packages/components/src/components/notification/agent/notification.agent.lite.tsx b/packages/components/src/components/notification/agent/notification.agent.lite.tsx
new file mode 100644
index 000000000000..e1118b1fef64
--- /dev/null
+++ b/packages/components/src/components/notification/agent/notification.agent.lite.tsx
@@ -0,0 +1,48 @@
+import { DBNotification } from '../index';
+
+export default function Notification() {
+ return (
+ <>
+ DBNotification Documentation Examples
+
+ 1. Default Notification
+ Default Notification
+
+ 2. Semantic Variants
+ Adaptive
+ Neutral
+ Critical
+
+ Informational
+
+ Warning
+ Successful
+
+ 3. Variants
+ Docked
+ Standalone
+ Overlay
+
+ 4. Closeable
+ Closeable Notification
+
+ 5. Headline
+
+ Notification with Headline
+
+
+ 6. Timestamp
+
+ Notification with Timestamp
+
+
+ 7. Icon Support
+ Notification with Icon
+
+ 8. Custom Class
+
+ Custom Class
+
+
+ );
+}
diff --git a/packages/components/src/components/page/agent/page.agent.lite.tsx b/packages/components/src/components/page/agent/page.agent.lite.tsx
new file mode 100644
index 000000000000..d3587e2ea8ed
--- /dev/null
+++ b/packages/components/src/components/page/agent/page.agent.lite.tsx
@@ -0,0 +1,39 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { DBPage } from '../index';
+
+useMetadata({
+ slots: {
+ header: {
+ angular: 'Header Content',
+ vue: 'Header Content',
+ stencil: 'Header Content',
+ react: 'Header Content'
+ }
+ }
+});
+
+export default function Page() {
+ return (
+ <>
+ DBPage Documentation Examples
+
+ 1. Default Page
+ __slots__ Main Page
+
+ 2. Document Overflow Variants
+
+ __slots__ Main Page with Hidden Overflow
+
+
+ __slots__ Main Page with Auto Overflow
+
+
+ 3. Fade-In Effect
+ __slots__ Main Page with Fade-In
+
+ 4. Variant Examples
+ __slots__ Page with Auto Variant
+ __slots__ Page with Fixed Variant
+
+ );
+}
diff --git a/packages/components/src/components/popover/agent/popover.agent.lite.tsx b/packages/components/src/components/popover/agent/popover.agent.lite.tsx
new file mode 100644
index 000000000000..c1a520e01f77
--- /dev/null
+++ b/packages/components/src/components/popover/agent/popover.agent.lite.tsx
@@ -0,0 +1,57 @@
+import { DBButton } from '../../button/index';
+import { DBPopover } from '../index';
+
+export default function Popover() {
+ return (
+ <>
+ DBPopover Documentation Examples
+
+ 1. Default Popover
+ Hover on me to open Popover}>
+ Use any HTML code here like e.g. a button:
+
+
+
+ 2. Placement Variants
+ Top Placement}
+ placement="top">
+ Popover with top placement
+
+ Bottom Placement}
+ placement="bottom">
+ Popover with bottom placement
+
+
+ 3. Delay Variants
+ Fast Delay} delay="fast">
+ Popover with fast delay
+
+ Slow Delay} delay="slow">
+ Popover with slow delay
+
+
+ 4. Animation
+ With Animation}
+ animation={true}>
+ Popover with animation
+
+ No Animation}
+ animation={false}>
+ Popover without animation
+
+
+ 5. Width Variants
+ Auto Width} width="auto">
+ Popover with auto width
+
+ Fixed Width} width="fixed">
+ Popover with fixed width
+
+
+ );
+}
diff --git a/packages/components/src/components/radio/agent/radio.agent.lite.tsx b/packages/components/src/components/radio/agent/radio.agent.lite.tsx
new file mode 100644
index 000000000000..88000a240c2e
--- /dev/null
+++ b/packages/components/src/components/radio/agent/radio.agent.lite.tsx
@@ -0,0 +1,32 @@
+import { DBRadio } from '../index';
+
+export default function Radio() {
+ return (
+ <>
+ DBRadio Documentation Examples
+
+ 1. Default Radio
+
+
+ 2. Sizes
+
+
+
+ 3. Validation States
+
+
+
+
+ 4. Disabled State
+
+
+ 5. Change Event Example
+
+ console.log('Change event:', event.target.checked)
+ }
+ />
+
+ );
+}
diff --git a/packages/components/src/components/section/agent/section.agent.lite.tsx b/packages/components/src/components/section/agent/section.agent.lite.tsx
new file mode 100644
index 000000000000..ef21a8812d8d
--- /dev/null
+++ b/packages/components/src/components/section/agent/section.agent.lite.tsx
@@ -0,0 +1,27 @@
+import { DBSection } from '../index';
+
+export default function Section() {
+ return (
+ <>
+ DBSection Documentation Examples
+
+ 1. Default Section
+ Default Section
+
+ 2. Spacing Variants
+ Medium Spacing
+ Small Spacing
+ Large Spacing
+ No Spacing
+
+ 3. Container Width
+ Full Width
+ Medium Width
+ Large Width
+ Small Width
+
+ 4. Custom Class
+ Custom Class
+
+ );
+}
diff --git a/packages/components/src/components/select/agent/select.agent.lite.tsx b/packages/components/src/components/select/agent/select.agent.lite.tsx
new file mode 100644
index 000000000000..e1433af6cc14
--- /dev/null
+++ b/packages/components/src/components/select/agent/select.agent.lite.tsx
@@ -0,0 +1,76 @@
+import { DBSelect } from '../index';
+
+export default function Select() {
+ function getOptions() {
+ return [
+ { id: '1', label: 'Option 1', selected: false },
+ { id: '2', label: 'Option 2', selected: true },
+ { id: '3', label: 'Option 3', disabled: true }
+ ];
+ }
+
+ return (
+ <>
+ DBSelect Documentation Examples
+
+ 1. Default Select
+
+
+
+
+
+ 2. Options Array
+
+
+ 3. Multiple Select
+
+
+
+
+
+ 4. Disabled State
+
+
+
+
+
+ 5. Validation States
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 6. Change Event Example
+
+ console.log('Change event:', event.target.value)
+ }>
+
+
+
+
+ );
+}
diff --git a/packages/components/src/components/stack/agent/stack.agent.lite.tsx b/packages/components/src/components/stack/agent/stack.agent.lite.tsx
new file mode 100644
index 000000000000..43ebfc9939ca
--- /dev/null
+++ b/packages/components/src/components/stack/agent/stack.agent.lite.tsx
@@ -0,0 +1,45 @@
+import { DBStack } from '../index';
+
+export default function Stack() {
+ return (
+ <>
+ DBStack Documentation Examples
+
+ 1. Default Stack
+ Default Stack
+
+ 2. Variants
+ Simple Variant
+ Divider Variant
+
+ 3. Directions
+ Row Direction
+ Column Direction
+
+ 4. Alignment
+ Stretch Alignment
+ Start Alignment
+ End Alignment
+ Center Alignment
+
+ 5. Justify Content
+ Space Between
+ Start Justify
+ End Justify
+ Center Justify
+
+ 6. Gap Spacing
+ Medium Gap
+ Small Gap
+ Large Gap
+ No Gap
+
+ 7. Wrap
+ Wrap Enabled
+ Wrap Disabled
+
+ 8. Custom Class
+ Custom Class
+
+ );
+}
diff --git a/packages/components/src/components/switch/agent/switch.agent.lite.tsx b/packages/components/src/components/switch/agent/switch.agent.lite.tsx
new file mode 100644
index 000000000000..3d21ca0ffd7c
--- /dev/null
+++ b/packages/components/src/components/switch/agent/switch.agent.lite.tsx
@@ -0,0 +1,41 @@
+import { DBSwitch } from '../index';
+
+export default function Switch() {
+ return (
+ <>
+ DBSwitch Documentation Examples
+
+ 1. Default Switch
+
+
+ 2. Visual Aid
+
+
+
+ 3. Sizes
+
+
+
+ 4. Validation States
+
+
+
+
+ 5. Disabled State
+
+
+ 6. Icon Support
+
+
+
+
+ 7. Change Event Example
+
+ console.log('Change event:', event.target.checked)
+ }
+ />
+
+ );
+}
diff --git a/packages/components/src/components/tab-item/agent/tab-item.agent.lite.tsx b/packages/components/src/components/tab-item/agent/tab-item.agent.lite.tsx
new file mode 100644
index 000000000000..17b1fd12ea1d
--- /dev/null
+++ b/packages/components/src/components/tab-item/agent/tab-item.agent.lite.tsx
@@ -0,0 +1,33 @@
+import { DBTabItem } from '../index';
+
+export default function TabItem() {
+ return (
+ <>
+ DBTabItem Documentation Examples
+
+ 1. Default Tab Item
+ Default Tab Item
+
+ 2. Active State
+ Active Tab Item
+
+ 3. Disabled State
+ Disabled Tab Item
+
+ 4. Icon Variants
+ Tab Item with Icon
+
+ Tab Item with Leading Icon
+
+
+ Tab Item with Trailing Icon
+
+
+ 5. Label Property
+ Tab Item with Label
+
+ 6. No Text
+
+
+ );
+}
diff --git a/packages/components/src/components/tabs/agent/tabs.agent.lite.tsx b/packages/components/src/components/tabs/agent/tabs.agent.lite.tsx
new file mode 100644
index 000000000000..187a5b7ba7c5
--- /dev/null
+++ b/packages/components/src/components/tabs/agent/tabs.agent.lite.tsx
@@ -0,0 +1,70 @@
+import { DBTabItem } from '../../tab-item/index';
+import { DBTabList } from '../../tab-list/index';
+import { DBTabPanel } from '../../tab-panel/index';
+import { DBTabs } from '../index';
+
+export default function Tabs() {
+ return (
+ <>
+ DBTabs Documentation Examples
+
+ 1. Default Tabs
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Tab Panel 1
+ Tab Panel 2
+ Tab Panel 3
+
+
+ 2. Behavior Variants
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Tab Panel 1
+ Tab Panel 2
+ Tab Panel 3
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Tab Panel 1
+ Tab Panel 2
+ Tab Panel 3
+
+
+ 3. Initial Selected Index
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Tab Panel 1
+ Tab Panel 2
+ Tab Panel 3
+
+
+ 4. Initial Selected Mode
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+ Tab Panel 1
+ Tab Panel 2
+ Tab Panel 3
+
+
+ );
+}
diff --git a/packages/components/src/components/tag/agent/tag.agent.lite.tsx b/packages/components/src/components/tag/agent/tag.agent.lite.tsx
new file mode 100644
index 000000000000..29b44538dcf0
--- /dev/null
+++ b/packages/components/src/components/tag/agent/tag.agent.lite.tsx
@@ -0,0 +1,51 @@
+import { DBButton } from '../../button';
+import { DBCheckbox } from '../../checkbox';
+import { DBLink } from '../../link';
+import { DBRadio } from '../../radio';
+import { DBTag } from '../index';
+
+export default function Tag() {
+ return (
+ <>
+ DBTag Documentation Examples
+
+ 1. Default Tags
+
+ Tag as Button
+
+
+ Tag as Link
+
+
+ Tag as Checkbox
+
+
+ Tag as Radio
+
+ Static Tag
+
+ 2. Overflow Example
+
+ Static Tag with overflow
+
+
+ 3. Removable Tag
+ console.log('Tag removed')}>
+ Removable Tag
+
+
+ 4. Semantic Variants
+ Adaptive Tag
+ Neutral Tag
+ Critical Tag
+ Informational Tag
+ Warning Tag
+ Successful Tag
+
+ 5. Icon Support
+ Tag with Icon
+
+ );
+}
diff --git a/packages/components/src/components/textarea/agent/textarea.agent.lite.tsx b/packages/components/src/components/textarea/agent/textarea.agent.lite.tsx
new file mode 100644
index 000000000000..9626b41e90c4
--- /dev/null
+++ b/packages/components/src/components/textarea/agent/textarea.agent.lite.tsx
@@ -0,0 +1,49 @@
+import { DBTextarea } from '../index';
+
+export default function Textarea() {
+ return (
+ <>
+ DBTextarea Documentation Examples
+
+ 1. Default Textarea
+
+
+ 2. Resizable Variants
+
+
+
+
+
+ 3. Rows and Columns
+
+
+ 4. Wrap Variants
+
+
+
+
+ 5. Disabled State
+
+
+ 6. Placeholder Examples
+
+
+ 7. Message Property Example
+
+
+ 8. Input Event Example
+
+ console.log('Input event:', event.target.value)
+ }
+ />
+
+ );
+}
diff --git a/packages/components/src/components/tooltip/agent/tooltip.agent.lite.tsx b/packages/components/src/components/tooltip/agent/tooltip.agent.lite.tsx
new file mode 100644
index 000000000000..5ac8d45ba39f
--- /dev/null
+++ b/packages/components/src/components/tooltip/agent/tooltip.agent.lite.tsx
@@ -0,0 +1,48 @@
+import { DBButton } from '../../button';
+import { DBTooltip } from '../index';
+
+export default function Tooltip() {
+ return (
+ <>
+ DBTooltip Documentation Examples
+
+ 1. Default Tooltip
+
+ Hover on me to open Tooltip
+ Tooltip
+
+
+ 2. Tooltip Variants
+
+ Description Tooltip
+
+ Description Tooltip Content
+
+
+
+ Label Tooltip
+ Label Tooltip Content
+
+
+ 3. Tooltip with Arrow
+
+ Tooltip with Arrow
+
+ Tooltip Content with Arrow
+
+
+
+ 4. Placement Variants
+
+ Top Placement
+ Tooltip Content at Top
+
+
+ Bottom Placement
+
+ Tooltip Content at Bottom
+
+
+
+ );
+}
diff --git a/packages/components/tsconfig.typedoc.json b/packages/components/tsconfig.typedoc.json
new file mode 100644
index 000000000000..a515cf4eb1bd
--- /dev/null
+++ b/packages/components/tsconfig.typedoc.json
@@ -0,0 +1,22 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "jsx": "react",
+ "skipLibCheck": true,
+ "target": "es2015",
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "include": ["src/components/**/*.ts", "src/components/**/*.tsx"],
+ "exclude": [
+ "node_modules",
+ "**/index.ts",
+ "**/*.spec.ts",
+ "**/*.spec.tsx",
+ "**/*.agent.lite.tsx",
+ "**/__snapshots__/**"
+ ]
+}
diff --git a/packages/foundations/agent/_instructions.md b/packages/foundations/agent/_instructions.md
new file mode 100644
index 000000000000..269790c622d9
--- /dev/null
+++ b/packages/foundations/agent/_instructions.md
@@ -0,0 +1,15 @@
+## CSS
+
+- If you use CSS follow these rules:
+ - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/agent/css/Variables.md
+
+## SCSS
+
+- If you use SCSS follow these rules:
+ - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/agent/scss/Variables.md
+
+## Tailwind
+
+- If you use Tailwind follow these rules:
+ - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/agent/tailwind/Variables.md
+ - Always stick with the variables don't use something like `p-4` or `m-[16px]` use `p-fix-xs` or `m-fix-md` instead.
diff --git a/packages/foundations/agent/css/Variables.md b/packages/foundations/agent/css/Variables.md
new file mode 100644
index 000000000000..445cc86fed25
--- /dev/null
+++ b/packages/foundations/agent/css/Variables.md
@@ -0,0 +1,130 @@
+```css
+.my-component {
+ inline-size: var(--db-sizing-md); /* Use sizing for fixed widths */
+ block-size: var(--db-sizing-lg); /* Use sizing for fixed heights */
+ padding: var(--db-spacing-fixed-sm); /* Use fixed spacing for paddings */
+ margin: var(
+ --db-spacing-responsive-md
+ ); /* Use responsive spacing for margins */
+ border-radius: var(--db-border-radius-md); /* Use border radius */
+ transition-duration: var(
+ --db-transition-duration-medium
+ ); /* Use transition duration */
+ border-width: var(--db-border-width-md); /* Use border width */
+}
+```
+
+## CSS Variables List
+
+Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
+
+- `--db-sizing-3xs`
+- `--db-sizing-2xs`
+- `--db-sizing-xs`
+- `--db-sizing-sm`
+- `--db-sizing-md`
+- `--db-sizing-lg`
+- `--db-sizing-xl`
+- `--db-sizing-2xl`
+- `--db-sizing-3xl`
+
+Use fixed spacings for all kind of distances (margin, padding, ...)
+
+- `--db-spacing-fixed-3xs`
+- `--db-spacing-fixed-2xs`
+- `--db-spacing-fixed-xs`
+- `--db-spacing-fixed-sm`
+- `--db-spacing-fixed-md`
+- `--db-spacing-fixed-lg`
+- `--db-spacing-fixed-xl`
+- `--db-spacing-fixed-2xl`
+- `--db-spacing-fixed-3xl`
+
+The primary use-case for responsive spacings are paddings/gaps in an application e.g. the should have a responsive padding.
+
+- `--db-spacing-responsive-3xs`
+- `--db-spacing-responsive-2xs`
+- `--db-spacing-responsive-xs`
+- `--db-spacing-responsive-sm`
+- `--db-spacing-responsive-md`
+- `--db-spacing-responsive-lg`
+- `--db-spacing-responsive-xl`
+- `--db-spacing-responsive-2xl`
+- `--db-spacing-responsive-3xl`
+
+Elevation
+
+- `--db-elevation-sm`
+- `--db-elevation-md`
+- `--db-elevation-lg`
+
+Border
+
+- `--db-border-width-3xs`
+- `--db-border-width-2xs`
+- `--db-border-width-xs`
+- `--db-border-width-sm`
+- `--db-border-width-md`
+- `--db-border-width-lg`
+- `--db-border-width-xl`
+- `--db-border-width-2xl`
+- `--db-border-width-3xl`
+- `--db-border-radius-3xs`
+- `--db-border-radius-2xs`
+- `--db-border-radius-xs`
+- `--db-border-radius-sm`
+- `--db-border-radius-md`
+- `--db-border-radius-lg`
+- `--db-border-radius-xl`
+- `--db-border-radius-2xl`
+- `--db-border-radius-3xl`
+- `--db-border-radius-full`
+
+Opacity
+
+- `--db-opacity-3xs`
+- `--db-opacity-2xs`
+- `--db-opacity-xs`
+- `--db-opacity-sm`
+- `--db-opacity-md`
+- `--db-opacity-lg`
+- `--db-opacity-xl`
+- `--db-opacity-2xl`
+- `--db-opacity-3xl`
+- `--db-opacity-full`
+
+Transitions
+
+- `--db-transition-duration-extra-slow`
+- `--db-transition-duration-slow`
+- `--db-transition-duration-medium`
+- `--db-transition-duration-fast`
+- `--db-transition-duration-extra-fast`
+- `--db-transition-timing-emotional`
+- `--db-transition-timing-functional`
+- `--db-transition-timing-show`
+- `--db-transition-timing-hide`
+- `--db-transition-straight-emotional`
+- `--db-transition-straight-functional`
+- `--db-transition-straight-show`
+- `--db-transition-straight-hide`
+
+Screen sizes
+
+- `--db-screen-xs`
+- `--db-screen-sm`
+- `--db-screen-md`
+- `--db-screen-lg`
+- `--db-screen-xl`
+
+Container sizes
+
+- `--db-container-3xs`
+- `--db-container-2xs`
+- `--db-container-xs`
+- `--db-container-sm`
+- `--db-container-md`
+- `--db-container-lg`
+- `--db-container-xl`
+- `--db-container-2xl`
+- `--db-container-3xl`
diff --git a/packages/foundations/agent/scss/Variables.md b/packages/foundations/agent/scss/Variables.md
new file mode 100644
index 000000000000..db86db6e2ca9
--- /dev/null
+++ b/packages/foundations/agent/scss/Variables.md
@@ -0,0 +1,131 @@
+```scss
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.my-component {
+ inline-size: variables.$db-sizing-md; // Use sizing for fixed widths
+ block-size: variables.$db-sizing-lg; // Use sizing for fixed heights
+ padding: variables.$db-spacing-fixed-sm; // Use fixed spacing for paddings
+ margin: variables.$db-spacing-responsive-md; // Use responsive spacing for margins
+ border-radius: variables.$db-border-radius-md; // Use border radius
+ transition-duration: variables.$db-transition-duration-medium; // Use transition duration
+ border-width: variables.$db-border-width-md; // Use border width
+}
+```
+
+### SCSS Variables List
+
+Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
+
+- `$db-sizing-3xs`
+- `$db-sizing-2xs`
+- `$db-sizing-xs`
+- `$db-sizing-sm`
+- `$db-sizing-md`
+- `$db-sizing-lg`
+- `$db-sizing-xl`
+- `$db-sizing-2xl`
+- `$db-sizing-3xl`
+
+Use fixed spacings for all kind of distances (margin, padding, ...)
+
+- `$db-spacing-fixed-3xs`
+- `$db-spacing-fixed-2xs`
+- `$db-spacing-fixed-xs`
+- `$db-spacing-fixed-sm`
+- `$db-spacing-fixed-md`
+- `$db-spacing-fixed-lg`
+- `$db-spacing-fixed-xl`
+- `$db-spacing-fixed-2xl`
+- `$db-spacing-fixed-3xl`
+
+The primary use-case for responsive spacings are paddings/gaps in an application e.g. the should have a responsive padding.
+
+- `$db-spacing-responsive-3xs`
+- `$db-spacing-responsive-2xs`
+- `$db-spacing-responsive-xs`
+- `$db-spacing-responsive-sm`
+- `$db-spacing-responsive-md`
+- `$db-spacing-responsive-lg`
+- `$db-spacing-responsive-xl`
+- `$db-spacing-responsive-2xl`
+- `$db-spacing-responsive-3xl`
+
+Use elevation for shadows
+
+- `$db-elevation-sm`
+- `$db-elevation-md`
+- `$db-elevation-lg`
+
+### Use border widths for borders
+
+- `$db-border-width-3xs`
+- `$db-border-width-2xs`
+- `$db-border-width-xs`
+- `$db-border-width-sm`
+- `$db-border-width-md`
+- `$db-border-width-lg`
+- `$db-border-width-xl`
+- `$db-border-width-2xl`
+- `$db-border-width-3xl`
+
+Use border radius for rounded corners
+
+- `$db-border-radius-3xs`
+- `$db-border-radius-2xs`
+- `$db-border-radius-xs`
+- `$db-border-radius-sm`
+- `$db-border-radius-md`
+- `$db-border-radius-lg`
+- `$db-border-radius-xl`
+- `$db-border-radius-2xl`
+- `$db-border-radius-3xl`
+- `$db-border-radius-full`
+
+Use opacity for transparency effects
+
+- `$db-opacity-3xs`
+- `$db-opacity-2xs`
+- `$db-opacity-xs`
+- `$db-opacity-sm`
+- `$db-opacity-md`
+- `$db-opacity-lg`
+- `$db-opacity-xl`
+- `$db-opacity-2xl`
+- `$db-opacity-3xl`
+- `$db-opacity-full`
+
+Use transition durations for animations
+
+- `$db-transition-duration-extra-slow`
+- `$db-transition-duration-slow`
+- `$db-transition-duration-medium`
+- `$db-transition-duration-fast`
+- `$db-transition-duration-extra-fast`
+- `$db-transition-timing-emotional`
+- `$db-transition-timing-functional`
+- `$db-transition-timing-show`
+- `$db-transition-timing-hide`
+- `$db-transition-straight-emotional`
+- `$db-transition-straight-functional`
+- `$db-transition-straight-show`
+- `$db-transition-straight-hide`
+
+Use screen sizes for responsive design breakpoints
+
+- `$db-screen-xs`
+- `$db-screen-sm`
+- `$db-screen-md`
+- `$db-screen-lg`
+- `$db-screen-xl`
+
+Use container sizes for fixed containers
+
+- `$db-container-3xs`
+- `$db-container-2xs`
+- `$db-container-xs`
+- `$db-container-sm`
+- `$db-container-md`
+- `$db-container-lg`
+- `$db-container-xl`
+- `$db-container-2xl`
+- `$db-container-3xl`
diff --git a/packages/foundations/agent/tailwind/Variables.md b/packages/foundations/agent/tailwind/Variables.md
new file mode 100644
index 000000000000..406d7d5aa441
--- /dev/null
+++ b/packages/foundations/agent/tailwind/Variables.md
@@ -0,0 +1,75 @@
+```html
+
+```
+
+## Available Variables
+
+```css
+--spacing-fix-3xs: var(--db-spacing-fixed-3xs);
+--spacing-fix-2xs: var(--db-spacing-fixed-2xs);
+--spacing-fix-xs: var(--db-spacing-fixed-xs);
+--spacing-fix-sm: var(--db-spacing-fixed-sm);
+--spacing-fix-md: var(--db-spacing-fixed-md);
+--spacing-fix-lg: var(--db-spacing-fixed-lg);
+--spacing-fix-xl: var(--db-spacing-fixed-xl);
+--spacing-fix-2xl: var(--db-spacing-fixed-2xl);
+--spacing-fix-3xl: var(--db-spacing-fixed-3xl);
+--spacing-res-3xs: var(--db-spacing-responsive-3xs);
+--spacing-res-2xs: var(--db-spacing-responsive-2xs);
+--spacing-res-xs: var(--db-spacing-responsive-xs);
+--spacing-res-sm: var(--db-spacing-responsive-sm);
+--spacing-res-md: var(--db-spacing-responsive-md);
+--spacing-res-lg: var(--db-spacing-responsive-lg);
+--spacing-res-xl: var(--db-spacing-responsive-xl);
+--spacing-res-2xl: var(--db-spacing-responsive-2xl);
+--spacing-res-3xl: var(--db-spacing-responsive-3xl);
+--spacing-siz-3xs: var(--db-sizing-3xs);
+--spacing-siz-2xs: var(--db-sizing-2xs);
+--spacing-siz-xs: var(--db-sizing-xs);
+--spacing-siz-sm: var(--db-sizing-sm);
+--spacing-siz-md: var(--db-sizing-md);
+--spacing-siz-lg: var(--db-sizing-lg);
+--spacing-siz-xl: var(--db-sizing-xl);
+--spacing-siz-2xl: var(--db-sizing-2xl);
+--spacing-siz-3xl: var(--db-sizing-3xl);
+--gap-3xs: var(--db-spacing-fixed-3xs);
+--gap-2xs: var(--db-spacing-fixed-2xs);
+--gap-xs: var(--db-spacing-fixed-xs);
+--gap-sm: var(--db-spacing-fixed-sm);
+--gap-md: var(--db-spacing-fixed-md);
+--gap-lg: var(--db-spacing-fixed-lg);
+--gap-xl: var(--db-spacing-fixed-xl);
+--gap-2xl: var(--db-spacing-fixed-2xl);
+--gap-3xl: var(--db-spacing-fixed-3xl);
+--border: var(--db-border-width-3xs);
+--border-3xs: var(--db-border-width-3xs);
+--border-2xs: var(--db-border-width-2xs);
+--border-xs: var(--db-border-width-xs);
+--border-sm: var(--db-border-width-sm);
+--border-md: var(--db-border-width-md);
+--border-lg: var(--db-border-width-lg);
+--border-xl: var(--db-border-width-xl);
+--border-2xl: var(--db-border-width-2xl);
+--border-3xl: var(--db-border-width-3xl);
+--radius: var(--db-border-radius-xs);
+--radius-3xs: var(--db-border-radius-3xs);
+--radius-2xs: var(--db-border-radius-2xs);
+--radius-xs: var(--db-border-radius-xs);
+--radius-sm: var(--db-border-radius-sm);
+--radius-md: var(--db-border-radius-md);
+--radius-lg: var(--db-border-radius-lg);
+--radius-xl: var(--db-border-radius-xl);
+--radius-2xl: var(--db-border-radius-2xl);
+--radius-3xl: var(--db-border-radius-3xl);
+--radius-full: var(--db-border-radius-full);
+--shadow: var(--db-elevation-md);
+--shadow-sm: var(--db-elevation-sm);
+--shadow-md: var(--db-elevation-md);
+--shadow-lg: var(--db-elevation-lg);
+```
diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index c16a86d3a9ec..3021ba569214 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -12,6 +12,7 @@
"types": "./build/index.d.ts",
"module": "./build/index.js",
"files": [
+ "agent",
"assets",
"build"
],
@@ -27,6 +28,7 @@
"build:06_ts": "tsc",
"clean": "rm --recursive --force build",
"copy-build": "npm-run-all copy-build:*",
+ "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent -o",
"copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
"copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
"copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
diff --git a/scripts/documentation/README.md b/scripts/documentation/README.md
new file mode 100644
index 000000000000..5c7e4d19ee3a
--- /dev/null
+++ b/scripts/documentation/README.md
@@ -0,0 +1,125 @@
+# Generating docs for AI agents
+
+This document describes the order in which scripts must be run to produce the `agent-instructions.md` file,
+which combines component documentation, code examples and CSS variable references for both agent and developers.
+
+## 1. Generate separate documentation files
+
+### 1.1 Annotate components and generate component Markdown
+
+> **Note:** This confuses copilot at the moment, we skip this step for now.
+
+Annotate your components with [JSDoc](https://jsdoc.app/) (classes, properties, etc.) so TypeDoc can pick up API signatures:
+
+````ts
+/**
+* Renders a configurable button element that works across multiple frameworks.
+*
+* @remarks
+* Use `DBButton` for primary and secondary actions. Supports variants, sizes,
+* icons, loading state, and ARIA helpers for accessibility.
+*
+* @param props - {@link DBButtonProps | Component props} controlling appearance and behavior.
+* @returns A `