@db-ux/v-core-components 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/v-core-components
 
+## 4.10.0
+
+### Minor Changes
+
+- feat(`DBAccordionItem`): add `open` prop to control the expanded state of an accordion item programmatically. - [see commit 8e7c85d](https://github.com/db-ux-design-system/core-web/commit/8e7c85dfba9e0b013fce9db2151545b8f336a29a)
+
+- refactor(form components): replace hard 25ch label width limit with customizable CSS variable `--db-label-max-size` (defaults to `100%`). To restore the previous behavior, set `--db-label-max-size: 25ch;` in your project styles. - [see commit 08b1234](https://github.com/db-ux-design-system/core-web/commit/08b1234342e3c0d622116d528a979ff53d7e2356)
+
+## 4.9.1
+
+### Patch Changes
+
+- fix(switch): use `2lh` unit and add `min-inline-size` to prevent track from shrinking - [see commit 78c9fde](https://github.com/db-ux-design-system/core-web/commit/78c9fde67d9677f61eaa41761a088b9c1a9773a1)
+
+- fix(notification): remove empty grid gap when icon is hidden - [see commit 96f94c6](https://github.com/db-ux-design-system/core-web/commit/96f94c651391f014e2d073402c2700b524ccbf5e)
+
 ## 4.9.0
 
 ### Minor Changes
@@ -199,7 +215,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-          - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+                      - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/README.md

@@ -6,49 +6,89 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
 
 A Vue library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
-
-> **Note:** Find more information about specific components [here](https://design-system.deutschebahn.com/core-web/review/main)
+We also provide more information about specific components. This information is in our [Design System documentation](https://design-system.deutschebahn.com/documentation/get-started/).
 
 ## Install
 
 ```shell
-npm i @db-ux/v-core-components
+pnpm add @db-ux/v-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
 ```
 
-> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
-
 ## Styling Dependencies
 
-Import the styles in scss or css. Based on your technology the file names could be different.
+### Vite Plugin
+
+If you're using Vite, you can use the [`@db-ux/core-vite-plugin`](https://www.npmjs.com/package/@db-ux/core-vite-plugin) which simplifies the CSS setup to a single import.
+
+```shell
+pnpm add @db-ux/core-vite-plugin --save-dev
+```
+
+Add the plugin to your `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import dbUxPlugin from "@db-ux/core-vite-plugin";
+
+export default defineConfig({
+	plugins: [dbUxPlugin()]
+});
+```
+
+Then import the plugin in your CSS file:
+
+```css
+/* style.css */
+@import "@db-ux/core-vite-plugin/index.css";
+```
+
+📖 **[Learn more about `@db-ux/core-vite-plugin` node package](https://www.npmjs.com/package/@db-ux/core-vite-plugin)**
 
-- Default (relative): points to `../assets`
-- Rollup (rollup): points to `@db-ux/core-foundations/assets`
-- Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+### PostCSS Plugin (recommended)
 
-<details>
-  <summary><strong>SCSS</strong></summary>
+We recommend using the [`@db-ux/core-postcss-plugin`](https://www.npmjs.com/package/@db-ux/core-postcss-plugin) to reduce your bundle size. It flattens CSS custom properties by resolving `var()`, `calc()`, `color-mix()`, and `light-dark()` at build time, removing unused declarations.
 
-```scss
-// style.scss
-@forward "@db-ux/core-components/build/styles/rollup";
+```shell
+pnpm add @db-ux/core-postcss-plugin --save-dev
 ```
 
+Configure it in `vite.config.ts`:
+
 ```ts
-// main.ts
-import "./style.scss";
+import { defineConfig } from "vite";
+import { dbUxFlatten } from "@db-ux/core-postcss-plugin";
+
+export default defineConfig({
+	css: {
+		transformer: "postcss", // required for Vite 8+ (default: 'lightningcss')
+		postcss: {
+			plugins: [dbUxFlatten()]
+		}
+	}
+});
 ```
 
-</details>
-<details>
-  <summary><strong>CSS</strong></summary>
+📖 **[Learn more about `@db-ux/core-postcss-plugin` node package](https://www.npmjs.com/package/@db-ux/core-postcss-plugin)**
+
+### Manual CSS Setup
+
+If you're not using Vite or prefer manual setup, import the styles in your main CSS file:
+
+```css
+/* style.css */
+@layer whitelabel-theme, db-ux;
+/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
+@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
+	layer(whitelabel-theme);
+
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
+```
 
 ```ts
 // main.ts
-import "@db-ux/core-components/build/styles/rollup.css";
+import "./style.css";
 ```
 
-</details>
-
 ### Vite 8
 
 Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). To keep CSS output stable, configure `vite.config.ts` like this:
@@ -85,8 +125,6 @@ export default defineConfig({
 });
 ```
 
-> **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
-
 ### DB Theme
 
 In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
@@ -99,7 +137,7 @@ import { DBButton } from "@db-ux/v-core-components";
 </script>
 
 <template>
-	<DBButton icon="x_placeholder">Test</DBButton>
+	<DBButton variant="brand">Add item to cart</DBButton>
 </template>
 ```
 
@@ -108,14 +146,15 @@ import { DBButton } from "@db-ux/v-core-components";
 We add `v-model` support which fires on every change.
 But you can use normal `@` events as well.
 
-Both Inputs in this example do the same:
+Both inputs in this example do the same:
 
-```html
+```vue
 <script setup lang="ts">
-	import { DbInput } from "@db-ux/v-core-components";
-	import { ref } from "vue";
-	const input = ref("");
+import { DBInput } from "@db-ux/v-core-components";
+import { ref } from "vue";
+const input = ref("");
 </script>
+
 <template>
 	<DBInput
 		label="Inputfield"
@@ -126,7 +165,7 @@ Both Inputs in this example do the same:
 		label="Inputfield"
 		name="input-name"
 		:value="input"
-		@change="e => input = e.target.value"
+		@change="(e) => (input = e.target.value)"
 	></DBInput>
 </template>
 ```
@@ -145,7 +184,7 @@ npx @db-ux/agent-cli
 
 This will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.
 
-📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
+📖 **[Learn more about `@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli)**
 
 ## Code Quality
 
@@ -154,7 +193,7 @@ To enforce correct usage of DB UX Design System components in your Vue project,
 ### Installation
 
 ```shell
-npm install eslint @db-ux/core-eslint-plugin vue-eslint-parser @typescript-eslint/parser --save-dev
+pnpm add eslint @db-ux/core-eslint-plugin vue-eslint-parser @typescript-eslint/parser --save-dev
 ```
 
 ### Setup
@@ -186,6 +225,35 @@ export default [
 
 📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**
 
+## Stylelint
+
+To validate correct usage of DB UX Design System tokens in your CSS/SCSS, use the [`@db-ux/core-stylelint`](https://www.npmjs.com/package/@db-ux/core-stylelint) plugin.
+
+### Installation
+
+```shell
+pnpm add stylelint @db-ux/core-stylelint --save-dev
+```
+
+### Setup
+
+Add to your `.stylelintrc.json`:
+
+```json
+{
+	"plugins": ["@db-ux/core-stylelint"],
+	"rules": {
+		"db-ux/use-spacings": [true],
+		"db-ux/use-sizing": [true],
+		"db-ux/use-border-width": [true],
+		"db-ux/use-border-radius": [true],
+		"db-ux/use-border-color": [true]
+	}
+}
+```
+
+📖 **[Learn more about `@db-ux/core-stylelint` node package](https://www.npmjs.com/package/@db-ux/core-stylelint)**
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

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

@@ -1,5 +1,5 @@
-import { GlobalProps, InitializedState } from '../../shared/model';
-import { DBAccordionItemDefaultProps } from '../accordion-item/model';
+import type { GlobalProps, InitializedState } from '../../shared/model';
+import type { DBAccordionItemDefaultProps } from '../accordion-item/model';
 export declare const AccordionVariantList: readonly ["divider", "card"];
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
 export declare const AccordionBehaviorList: readonly ["multiple", "single"];

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

@@ -13,6 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<DBAccordionItemProps, {}
     name: string;
     text: string;
     defaultOpen: boolean;
+    open: boolean | string;
     disabled: boolean | string;
     headlinePlain: string;
     onToggle: (open: boolean) => void;

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

@@ -1,9 +1,13 @@
-import { GlobalProps, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
+import type { GlobalProps, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
 export type DBAccordionItemDefaultProps = {
     /**
      * Initial state for the accordion item
      */
     defaultOpen?: boolean;
+    /**
+     * State for the accordion item
+     */
+    open?: boolean | string;
     /**
      * The disabled attribute can be set to keep a user from clicking on the element.
      */

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

@@ -1,4 +1,4 @@
-import { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
+import type { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
 export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
 export type BadgePlacementType = (typeof BadgePlacementList)[number];
 export type DBBadgeDefaultProps = {

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
 export type DBBrandDefaultProps = {
     /**
      * @deprecated: Disable the default logo svg to pass in a custom `img`

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
+import type { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
 export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
 export type ButtonVariantType = (typeof ButtonVariantList)[number];
 export declare const ButtonTypeList: readonly ["button", "reset", "submit"];

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+import type { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
 export declare const CardBehaviorList: readonly ["static", "interactive"];
 export type CardBehaviorType = (typeof CardBehaviorList)[number];
 export declare const CardElevationLevelList: readonly ["1", "2", "3"];

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
 export type DBCheckboxDefaultProps = {
     /**
      * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox

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

@@ -1,5 +1,5 @@
-import { GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, WidthProps, WrapProps } from '../../shared/model';
-import { DBButtonSharedProps } from '../button/model';
+import type { GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, WidthProps, WrapProps } from '../../shared/model';
+import type { DBButtonSharedProps } from '../button/model';
 export type DBCustomButtonDefaultProps = {};
 export type DBCustomButtonProps = DBCustomButtonDefaultProps & DBButtonSharedProps & GlobalProps & IconProps & WidthProps & SizeProps & ShowIconProps & ShowIconLeadingProps & ShowIconTrailingProps & IconLeadingProps & IconTrailingProps & NoTextProps & WrapProps;
 export type DBCustomButtonDefaultState = {};

package/dist/components/custom-select/custom-select.vue.d.ts

@@ -17,8 +17,8 @@ declare const __VLS_base: import("vue").DefineComponent<DBCustomSelectProps, {},
     form: string;
     label: string;
     values: string[];
-    disabled: boolean | string;
     open: boolean;
+    disabled: boolean | string;
     multiple: boolean | string;
     variant: import("../../shared/model").LabelVariantType;
     placement: import("../../shared/model").PlacementVerticalType;

package/dist/components/custom-select/model.d.ts

@@ -1,7 +1,7 @@
-import { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
-import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
-import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
-import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
+import type { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
+import type { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
+import type { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
+import type { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
 export type CustomSelectOptionType = {
     /**
      * Disables this option

package/dist/components/custom-select-dropdown/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export declare const CustomSelectDropdownWidthList: readonly ["fixed", "auto", "full"];
 export type CustomSelectDropdownWidthType = (typeof CustomSelectDropdownWidthList)[number];
 export type DBCustomSelectDropdownDefaultProps = {

package/dist/components/custom-select-form-field/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export type DBCustomSelectFormFieldDefaultProps = {};
 export type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps & GlobalProps;
 export type DBCustomSelectFormFieldDefaultState = {};

package/dist/components/custom-select-list/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export type DBCustomSelectListDefaultProps = {
     label?: string;
     multiple?: boolean;

package/dist/components/custom-select-list-item/model.d.ts

@@ -1,4 +1,4 @@
-import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
+import type { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
 export declare const CustomSelectListItemTypeList: readonly ["checkbox", "radio"];
 export type CustomSelectListItemTypeType = (typeof CustomSelectListItemTypeList)[number];
 export type DBCustomSelectListItemExtraProps = {

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

@@ -1,4 +1,4 @@
-import { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
+import type { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
 export declare const DividerMarginList: readonly ["none", "_"];
 export type DividerMarginType = (typeof DividerMarginList)[number];
 export declare const DividerVariantList: readonly ["horizontal", "vertical"];

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

@@ -1,4 +1,4 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
+import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];

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

@@ -1,19 +1,19 @@
 import { DBHeaderProps } from "./model";
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_27: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_15: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    'meta-navigation'?: (props: typeof __VLS_1) => any;
 } & {
-    'meta-navigation'?: (props: typeof __VLS_9) => any;
+    brand?: (props: typeof __VLS_3) => any;
 } & {
-    'secondary-action'?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_5) => any;
 } & {
-    'meta-navigation'?: (props: typeof __VLS_13) => any;
+    'primary-action'?: (props: typeof __VLS_7) => any;
 } & {
-    brand?: (props: typeof __VLS_15) => any;
+    'secondary-action'?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_23) => any;
 } & {
-    'primary-action'?: (props: typeof __VLS_19) => any;
+    'meta-navigation'?: (props: typeof __VLS_25) => any;
 } & {
     'secondary-action'?: (props: typeof __VLS_27) => any;
 };

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

@@ -1,4 +1,4 @@
-import { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
+import type { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
 export type DBHeaderDefaultProps = {
     /**
      * Slot to pass in the DBBrand component

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
 export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
 export type IconWeightType = (typeof IconWeightList)[number];
 export type DBIconDefaultProps = {

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
 export type DBInfotextDefaultProps = {};
 export type DBInfotextProps = DBInfotextDefaultProps & GlobalProps & SemanticProps & IconProps & SizeProps & ShowIconProps & TextProps & WrapProps;
 export type DBInfotextDefaultState = {};

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
+import type { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
 export declare const LinkVariantList: readonly ["adaptive", "brand", "inline"];
 export type LinkVariantType = (typeof LinkVariantList)[number];
 export declare const LinkSizeList: readonly ["medium", "small"];

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

@@ -1,4 +1,4 @@
-import { GlobalProps } from '../../shared/model';
+import type { GlobalProps } from '../../shared/model';
 export type DBNavigationDefaultProps = {};
 export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
 export type DBNavigationDefaultState = {};

package/dist/components/navigation-item/model.d.ts

@@ -1,5 +1,5 @@
-import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
-import { NavigationItemSafeTriangle } from '../../utils/navigation';
+import type { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
+import type { NavigationItemSafeTriangle } from '../../utils/navigation';
 export type DBNavigationItemDefaultProps = {
     /**
      * Alternative indicator for active navigation item (bold font). In contrast to the use of aria-current="page" on the contained anchor, this does not guarantee correct a11y.
@@ -17,6 +17,10 @@ export type DBNavigationItemDefaultProps = {
      * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
      */
     subNavigationExpanded?: boolean | string;
+    /**
+     * Force hide sub-navigation - for web component output
+     */
+    hideSubNavigation?: boolean | string;
 };
 export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps;
 export type DBNavigationItemDefaultState = {

package/dist/components/navigation-item/navigation-item.vue.d.ts

@@ -1,12 +1,12 @@
 import { ClickEvent } from "../../shared/model";
 import { DBNavigationItemProps } from "./model";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_11: {};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    'sub-navigation'?: (props: typeof __VLS_9) => any;
 } & {
-    'sub-navigation'?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DBNavigationItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBNavigationItemProps> & Readonly<{}>, {
     id: string;
@@ -22,6 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<DBNavigationItemProps, {
     width: import("../../shared/model").WidthType | string;
     active: boolean;
     subNavigationExpanded: boolean | string;
+    hideSubNavigation: boolean | string;
     backButtonId: string;
     backButtonText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,4 +1,4 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import type { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export declare const PageVariantList: readonly ["auto", "fixed"];
 export type PageVariantType = (typeof PageVariantList)[number];
 export declare const PageDocumentOverflowList: readonly ["hidden", "auto"];

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

@@ -1,4 +1,4 @@
-import { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';
+import type { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';
 export type DBPopoverDefaultProps = {
     /**
      * Use open to disable the default hover/focus behavior to use it on click or other trigger.

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model';
 export type DBRadioDefaultProps = {};
 export type DBRadioProps = DBRadioDefaultProps & GlobalProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
 export type DBRadioDefaultState = {};

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

@@ -1,3 +1,3 @@
-import { ContainerWidthProps, GlobalProps, SpacingProps } from '../../shared/model';
+import type { ContainerWidthProps, GlobalProps, SpacingProps } from '../../shared/model';
 export type DBSectionDefaultProps = {};
 export type DBSectionProps = DBSectionDefaultProps & GlobalProps & SpacingProps & ContainerWidthProps;

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
      * @deprecated

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

@@ -1,4 +1,4 @@
-import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
+import type { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
 export declare const StackVariantList: readonly ["simple", "divider"];
 export type StackVariantType = (typeof StackVariantList)[number];
 export declare const StackDirectionList: readonly ["row", "column"];

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.

package/dist/components/tab-item/model.d.ts

@@ -1,4 +1,4 @@
-import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
+import type { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
 export type DBTabItemDefaultProps = {
     /**
      * To control the component

package/dist/components/tab-list/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps } from '../../shared/model';
+import type { GlobalProps } from '../../shared/model';
 export type DBTabListDefaultProps = {};
 export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
 export type DBTabListDefaultState = {};

package/dist/components/tab-panel/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.

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

@@ -1,6 +1,6 @@
-import { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
-import { DBTabItemProps } from '../tab-item/model';
-import { DBTabPanelProps } from '../tab-panel/model';
+import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
+import type { DBTabItemProps } from '../tab-item/model';
+import type { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
 export type TabsBehaviorType = (typeof TabsBehaviorList)[number];
 export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import type { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {