@db-ux/v-core-components 4.12.0 → 4.13.0-shell-f221975

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @db-ux/v-core-components
 
+## 4.13.0
+
+### Minor Changes
+
+- feat: enable Invoker Commands (`command`- and `commandfor`-HTML-attributes) for DBButton - [see commit 00f50c3](https://github.com/db-ux-design-system/core-web/commit/00f50c3fc4508e62f2e30589c00148c54e2fc852)
+
+## 4.12.1
+
+### Patch Changes
+
+- fix(custom-select): dropdown with `dropdownWidth="auto"` now correctly sizes to content width and respects the trigger minimum width. Long option labels no longer get truncated: `auto` keeps them on a single line (dropdown grows to the longest option), while `fixed` and `full` wrap long labels onto new lines. - [see commit 68dedc3](https://github.com/db-ux-design-system/core-web/commit/68dedc33c324b48339d5bb73a85fdff3045ed059)
+
+- fix(drawer): prevent backdrop drag-close when selection starts inside content - [see commit b53ff8a](https://github.com/db-ux-design-system/core-web/commit/b53ff8a4f0a5350c5be41fad072e14797676bba7)
+
 ## 4.12.0
 
 ### Minor Changes

package/agent/ControlPanelBrand.md

@@ -0,0 +1,15 @@
+
+
+# ControlPanelBrand Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelBrand Documentation Examples</h1>
+  <h2>1. Default Control Panel Brand</h2>
+  <DBControlPanelBrand></DBControlPanelBrand>
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelDesktop.md

@@ -0,0 +1,48 @@
+
+
+# ControlPanelDesktop Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelDesktop Documentation Examples</h1>
+  <h2>1. Default Control Panel Desktop</h2>
+  <DBControlPanelDesktop
+    :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+    ><DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
+        ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBControlPanelDesktop
+  >
+  <h2>2. Vertical Orientation</h2>
+  <DBControlPanelDesktop
+    orientation="vertical"
+    :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+    ><DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBControlPanelDesktop
+  >
+  <h2>3. Collapsed (expanded=false)</h2>
+  <DBControlPanelDesktop
+    orientation="vertical"
+    :expanded="false"
+    :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+    ><DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBControlPanelDesktop
+  >
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
+import { DBControlPanelDesktop } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelMeta.md

@@ -0,0 +1,19 @@
+
+
+# ControlPanelMeta Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelMeta Documentation Examples</h1>
+  <h2>1. Default Meta</h2>
+  <DBControlPanelMeta
+    ><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink
+    ><DBLink href="#">Privacy</DBLink></DBControlPanelMeta
+  >
+</template>
+
+<script setup lang="ts">
+import { DBLink } from "@db-ux/v-v-core-components";
+import { DBControlPanelMeta } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelMobile.md

@@ -0,0 +1,40 @@
+
+
+# ControlPanelMobile Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelMobile Documentation Examples</h1>
+  <h2>1. Default Control Panel Mobile (Drawer)</h2>
+  <DBControlPanelMobile
+    drawerHeaderText="Application Name"
+    :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+    ><DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
+        ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBControlPanelMobile
+  >
+  <h2>2. Bottom Position + Flat Icon Variant</h2>
+  <DBControlPanelMobile
+    position="bottom"
+    variant="flat-icon"
+    drawerHeaderText="Application Name"
+    :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+    ><DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBControlPanelMobile
+  >
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
+import { DBControlPanelMobile } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelNavigation.md

@@ -0,0 +1,24 @@
+
+
+# ControlPanelNavigation Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelNavigation Documentation Examples</h1>
+  <h2>1. Default Navigation</h2>
+  <DBControlPanelNavigation
+    ><DBControlPanelNavigationItem
+      ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+    ><DBControlPanelNavigationItem icon="x_placeholder"
+      ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
+    ><DBControlPanelNavigationItem :disabled="true"
+      ><a href="#">Navi-Item 3</a></DBControlPanelNavigationItem
+    ></DBControlPanelNavigation
+  >
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelNavigationItem.md

@@ -0,0 +1,39 @@
+
+
+# ControlPanelNavigationItem Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelNavigationItem Documentation Examples</h1>
+  <h2>1. Default Navigation Item</h2>
+  <DBControlPanelNavigationItem>
+    Default Navigation Item
+  </DBControlPanelNavigationItem>
+  <h2>2. Active State</h2>
+  <DBControlPanelNavigationItem :active="true">
+    Active Navigation Item
+  </DBControlPanelNavigationItem>
+  <h2>3. Disabled State</h2>
+  <DBControlPanelNavigationItem :disabled="true">
+    Disabled Navigation Item
+  </DBControlPanelNavigationItem>
+  <h2>4. Sub-Navigation</h2>
+  <DBControlPanelNavigationItem
+    :subNavigation="<div>Sub Navigation Content</div>"
+  >
+    Navigation Item with Sub-Navigation
+  </DBControlPanelNavigationItem>
+  <h2>5. Icon Support</h2>
+  <DBControlPanelNavigationItem icon="user">
+    Navigation Item with Icon
+  </DBControlPanelNavigationItem>
+  <h2>6. Custom Class</h2>
+  <DBControlPanelNavigationItem>
+    Navigation Item with Custom Class
+  </DBControlPanelNavigationItem>
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelPrimaryActions.md

@@ -0,0 +1,20 @@
+
+
+# ControlPanelPrimaryActions Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelPrimaryActions Documentation Examples</h1>
+  <h2>1. Default Primary Actions</h2>
+  <DBControlPanelPrimaryActions
+    ><DBButton icon="magnifying_glass" variant="ghost" :noText="true">
+      Search
+    </DBButton></DBControlPanelPrimaryActions
+  >
+</template>
+
+<script setup lang="ts">
+import { DBButton } from "@db-ux/v-v-core-components";
+import { DBControlPanelPrimaryActions } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ControlPanelSecondaryActions.md

@@ -0,0 +1,24 @@
+
+
+# ControlPanelSecondaryActions Examples (vue)
+
+```vue
+<template>
+  <h1>DBControlPanelSecondaryActions Documentation Examples</h1>
+  <h2>1. Default Secondary Actions</h2>
+  <DBControlPanelSecondaryActions
+    ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
+      Profile </DBButton
+    ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
+      Notification </DBButton
+    ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
+      Help
+    </DBButton></DBControlPanelSecondaryActions
+  >
+</template>
+
+<script setup lang="ts">
+import { DBButton } from "@db-ux/v-v-core-components";
+import { DBControlPanelSecondaryActions } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/Drawer.md

@@ -1,11 +1,3 @@
-## CSS Properties
-
-| CSS Variable | Default | CSS Property | Description | Example |
-| --- | --- | --- | --- | --- |
-| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
-| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
-| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
-| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
 
 
 # Drawer Examples (vue)

package/agent/Shell.md

@@ -0,0 +1,28 @@
+
+
+# Shell Examples (vue)
+
+```vue
+<template>
+  <h1>DBShell Documentation Examples</h1>
+  <h2>1. Full Shell (Desktop + Mobile Control Panel)</h2>
+  <DBShell>
+    <template v-slot:controlPanelDesktop><DBControlPanelDesktop><template v-slot:brand><DBControlPanelBrand data-logo="db-systel" /></template><template v-slot:metaNavigation><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template><template v-slot:primaryActions><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template><template v-slot:secondaryActions><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Notification</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Help</DBButton></template><DBControlPanelNavigation><DBControlPanelNavigationItem icon="x_placeholder"><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem><DBControlPanelNavigationItem icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem></DBControlPanelNavigation></DBControlPanelDesktop></template>
+<template v-slot:controlPanelMobile><DBControlPanelMobile drawerHeaderText="Application Name"><template v-slot:brand><DBControlPanelBrand data-logo="db-systel" /></template><template v-slot:metaNavigation><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template><template v-slot:primaryActions><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template><template v-slot:secondaryActions><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Notification</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Help</DBButton></template><DBControlPanelNavigation><DBControlPanelNavigationItem icon="x_placeholder"><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem><DBControlPanelNavigationItem icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem></DBControlPanelNavigation></DBControlPanelMobile></template>
+
+    <DBControlPanelNavigation
+      ><DBControlPanelNavigationItem icon="x_placeholder"
+        ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
+      ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
+        ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
+      ></DBControlPanelNavigation
+    ></DBShell
+  >
+</template>
+
+<script setup lang="ts">
+import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
+import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
+import { DBShell } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/ShellSubNavigation.md

@@ -0,0 +1,6 @@
+## CSS Properties
+
+| CSS Variable | Default | CSS Property | Description | Example |
+| --- | --- | --- | --- | --- |
+
+

package/agent/_instructions.md

@@ -1,5 +1,5 @@
 - Use "@db-ux/v-core-components" as import for components:
-  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
+  - use for `DBShellSubNavigation` or `ShellSubNavigation` the file __agent-path__/agent/ShellSubNavigation.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
@@ -7,25 +7,30 @@
   - 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 `DBShell` or `Shell` the file __agent-path__/agent/Shell.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 `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.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 `DBControlPanelSecondaryActions` or `ControlPanelSecondaryActions` the file __agent-path__/agent/ControlPanelSecondaryActions.md
+  - use for `DBControlPanelPrimaryActions` or `ControlPanelPrimaryActions` the file __agent-path__/agent/ControlPanelPrimaryActions.md
+  - use for `DBControlPanelNavigationItem` or `ControlPanelNavigationItem` the file __agent-path__/agent/ControlPanelNavigationItem.md
+  - use for `DBControlPanelNavigation` or `ControlPanelNavigation` the file __agent-path__/agent/ControlPanelNavigation.md
+  - use for `DBControlPanelMobile` or `ControlPanelMobile` the file __agent-path__/agent/ControlPanelMobile.md
+  - use for `DBControlPanelMeta` or `ControlPanelMeta` the file __agent-path__/agent/ControlPanelMeta.md
+  - use for `DBControlPanelDesktop` or `ControlPanelDesktop` the file __agent-path__/agent/ControlPanelDesktop.md
+  - use for `DBControlPanelBrand` or `ControlPanelBrand` the file __agent-path__/agent/ControlPanelBrand.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

package/dist/components/accordion/accordion.vue.d.ts

@@ -10,10 +10,10 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBAccordio
     className: string;
     propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     name: string;
-    behavior: import("./model.js", { with: { "resolution-mode": "import" } }).AccordionBehaviorType;
     initOpenIndex: number[];
     items: DBAccordionItemDefaultProps[] | string;
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).AccordionVariantType;
+    behavior: import("../../index.js", { with: { "resolution-mode": "import" } }).CollapsibleBehaviorType;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/accordion/model.d.ts

@@ -1,14 +1,8 @@
-import type { GlobalProps, InitializedState } from '../../shared/model.js';
+import { CollapsibleBehaviorProps, GlobalProps, InitializedState } from '../../shared/model.js';
 import type { DBAccordionItemDefaultProps } from '../accordion-item/model.js';
 export declare const AccordionVariantList: readonly ["divider", "card"];
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
-export declare const AccordionBehaviorList: readonly ["multiple", "single"];
-export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
 export type DBAccordionDefaultProps = {
-    /**
-     * To allow multiple items open at the same time or only 1 item
-     */
-    behavior?: AccordionBehaviorType;
     /**
      * The index of items which should be open when loading the accordion
      */
@@ -32,7 +26,7 @@ export type DBAccordionDefaultProps = {
      */
     variant?: AccordionVariantType;
 };
-export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
+export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps & CollapsibleBehaviorProps;
 export type DBAccordionDefaultState = {
     _initOpenIndexDone: boolean;
     _name?: string;

package/dist/components/button/button.vue.d.ts

@@ -18,9 +18,11 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBButtonPr
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).ButtonVariantType | string;
     size: import("../../index.js", { with: { "resolution-mode": "import" } }).SizeType;
     wrap: boolean | string;
+    command: string;
+    commandfor: string;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;
-    showIcon: boolean | string;
     width: import("../../index.js", { with: { "resolution-mode": "import" } }).WidthType | string;
+    showIcon: boolean | string;
     showIconLeading: boolean | string;
     showIconTrailing: boolean | string;
     iconLeading: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;

package/dist/components/button/model.d.ts

@@ -10,6 +10,14 @@ export type DBButtonSharedProps = {
     variant?: ButtonVariantType | string;
 };
 export type DBButtonDefaultProps = {
+    /**
+     * The [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) attribute specifies the action to perform on the element controlled by a `<button>` element.
+     */
+    command?: string;
+    /**
+     * The [commandfor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) attribute turns a `<button>` into a command button that controls the given interactive element referenced by `id`.
+     */
+    commandfor?: string;
     /**
      * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */

package/dist/components/control-panel-brand/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelBrand } from './control-panel-brand.vue';

package/dist/components/control-panel-brand/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model.js';
+export type DBControlPanelBrandDefaultProps = {};
+export type DBControlPanelBrandProps = DBControlPanelBrandDefaultProps & GlobalProps;
+export type DBControlPanelBrandDefaultState = {};
+export type DBControlPanelBrandState = DBControlPanelBrandDefaultState & GlobalState;

package/dist/components/control-panel-desktop/control-panel-desktop.vue.d.ts

@@ -0,0 +1,34 @@
+import { DBControlPanelDesktopProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    'skip-navigation'?: (props: typeof __VLS_1) => any;
+} & {
+    brand?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    'meta-navigation'?: (props: typeof __VLS_7) => any;
+} & {
+    'primary-actions'?: (props: typeof __VLS_9) => any;
+} & {
+    'secondary-actions'?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBControlPanelDesktopProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBControlPanelDesktopProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    width: import("../../index.js", { with: { "resolution-mode": "import" } }).MaxWidthType;
+    orientation: import("../../index.js", { with: { "resolution-mode": "import" } }).OrientationType;
+    expanded: boolean | string;
+    expandButtonTooltip: string;
+    onExpandButtonTooltipFn: (open: boolean) => string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/control-panel-desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelDesktop } from './control-panel-desktop.vue';

package/dist/components/control-panel-desktop/model.d.ts

@@ -0,0 +1,5 @@
+import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, OrientationProps, ResetIdState, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model.js';
+export type DBControlPanelDesktopDefaultProps = {};
+export type DBControlPanelDesktopProps = DBControlPanelDesktopDefaultProps & GlobalProps & ContainerWidthProps & ControlPanelProps & OrientationProps & SidebarProps;
+export type DBControlPanelDesktopDefaultState = {};
+export type DBControlPanelDesktopState = DBControlPanelDesktopDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState & ResetIdState;

package/dist/components/control-panel-flat-icon/control-panel-flat-icon.vue.d.ts

@@ -0,0 +1,22 @@
+import { DBControlPanelFlatIconProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    'skip-navigation'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBControlPanelFlatIconProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBControlPanelFlatIconProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    noText: boolean | string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/control-panel-flat-icon/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelFlatIcon } from './control-panel-flat-icon.vue';

package/dist/components/control-panel-flat-icon/model.d.ts

@@ -0,0 +1,12 @@
+import { GlobalProps, GlobalState, NoTextProps } from '../../shared/model.js';
+export type DBControlPanelFlatIconDefaultProps = {
+    /**
+     * Slot to pass an anchor or link to skip the navigation and jump to main content.
+     */
+    skipNavigation?: any;
+};
+export type DBControlPanelFlatIconProps = DBControlPanelFlatIconDefaultProps & GlobalProps & NoTextProps;
+export type DBControlPanelFlatIconDefaultState = {
+    _resizeObserverCallbackId?: string;
+};
+export type DBControlPanelFlatIconState = DBControlPanelFlatIconDefaultState & GlobalState;

package/dist/components/control-panel-meta/control-panel-meta.vue.d.ts

@@ -0,0 +1,18 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/control-panel-meta/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelMeta } from './control-panel-meta.vue';

package/dist/components/control-panel-meta/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model.js';
+export type DBControlPanelMetaDefaultProps = {};
+export type DBControlPanelMetaProps = DBControlPanelMetaDefaultProps & GlobalProps;
+export type DBControlPanelMetaDefaultState = {};
+export type DBControlPanelMetaState = DBControlPanelMetaDefaultState & GlobalState;

package/dist/components/control-panel-mobile/control-panel-mobile.vue.d.ts

@@ -0,0 +1,33 @@
+import { DBControlPanelMobileProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {};
+type __VLS_Slots = {} & {
+    'skip-navigation'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    'meta-navigation'?: (props: typeof __VLS_11) => any;
+} & {
+    'secondary-actions'?: (props: typeof __VLS_26) => any;
+} & {
+    brand?: (props: typeof __VLS_28) => any;
+} & {
+    'primary-actions'?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBControlPanelMobileProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBControlPanelMobileProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    onToggle: (open: boolean) => void;
+    position: import("../../index.js", { with: { "resolution-mode": "import" } }).ShellControlPanelMobilePositionType;
+    drawerHeaderText: string;
+    burgerMenuLabel: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/control-panel-mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelMobile } from './control-panel-mobile.vue';

package/dist/components/control-panel-mobile/model.d.ts

@@ -0,0 +1,21 @@
+import { ControlPanelProps, GlobalProps, GlobalState, NavigationBehaviorState, ShellControlPanelMobilePositionType, ToggleEventProps, ToggleEventState } from '../../shared/model.js';
+export type DBControlPanelMobileDefaultProps = {
+    /**
+     * Text to pass in a headline for the drawer header.
+     */
+    drawerHeaderText?: string;
+    /**
+     * Sets the accessible label for the burger menu button of the mobile control panel.
+     */
+    burgerMenuLabel?: string;
+    /**
+     * Change the position of the mobile content panel
+     */
+    position?: ShellControlPanelMobilePositionType;
+};
+export type DBControlPanelMobileProps = DBControlPanelMobileDefaultProps & GlobalProps & ToggleEventProps & ControlPanelProps;
+export type DBControlPanelMobileDefaultState = {
+    open: boolean;
+    handleClose: (event: any) => void;
+};
+export type DBControlPanelMobileState = DBControlPanelMobileDefaultState & GlobalState & ToggleEventState<HTMLElement> & NavigationBehaviorState;