@db-ux/react-core-components 4.9.0-stencil-bundle-ad37ca4 → 4.9.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @db-ux/react-core-components
 
+## 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
+
+- refactor: allow text and children to be used together in components - [see commit cecb833](https://github.com/db-ux-design-system/core-web/commit/cecb833e2d2b2d15b47f9ac1ed57ccf1040374f0):
+    - feat: add `text` property to components that previously only supported children for their label, like e.g. `DBTooltip`.
+    - refactor: allow `text` property and components children to be used in parallel in components. Previously, `text` and children were mutually exclusive.
+    - refactor(`DBRadio`, `DBCheckbox`, `DBSwitch`): `label` and `children` can now be used together. Previously they were mutually exclusive.
+    - fix(`DBTag`): changed render order of `children` and `text` to align with design (children rendered before text).
+
 ## 4.8.0
 
 ### Minor Changes
@@ -189,7 +207,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/dist/components/accordion/accordion.js

@@ -31,7 +31,7 @@ function DBAccordionFn(props, component) {
     useEffect(() => {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
-        if (initialized && _ref.current) {
+        if (initialized) {
             if (props.behavior === "single") {
                 if (props.name) {
                     if (_name !== props.name) {

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.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
-declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "open" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
     defaultOpen?: boolean;
-    open?: boolean;
     disabled?: boolean | string;
     headline?: any;
     headlinePlain?: string;

package/dist/components/accordion-item/accordion-item.js

@@ -27,9 +27,7 @@ function DBAccordionItemFn(props, component) {
         if (props.onToggle) {
             props.onToggle(newStateOpen);
         }
-        if (props.open === undefined) {
-            set_open(newStateOpen);
-        }
+        set_open(newStateOpen);
     }
     useEffect(() => {
         if (props.defaultOpen) {
@@ -47,11 +45,6 @@ function DBAccordionItemFn(props, component) {
             set_name(props.name);
         }
     }, [props.name]);
-    useEffect(() => {
-        if (props.open !== undefined) {
-            set_open(props.open);
-        }
-    }, [props.open]);
     return (React.createElement("li", Object.assign({ id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-accordion-item", props.className) }),
         React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onToggle"]), { name: _name, open: _open }),
             React.createElement("summary", { onClick: (event) => handleToggle(event) },

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

@@ -1,13 +1,9 @@
-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;
     /**
      * 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/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/drawer.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, isKeyboardEvent, } from "../../utils";
+import { cls, delay, getBooleanAsString, isKeyboardEvent } from "../../utils";
 import DBButton from "../button/button";
 function DBDrawerFn(props, component) {
     var _a, _b, _c;
@@ -40,8 +40,8 @@ function DBDrawerFn(props, component) {
     }
     function handleDialogOpen() {
         if (_ref.current) {
-            const dialogOpen = getBoolean(props.open);
-            if (dialogOpen && !_ref.current.open) {
+            const open = Boolean(props.open);
+            if (open && !_ref.current.open) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.removeAttribute("data-transition");
                 }
@@ -59,7 +59,7 @@ function DBDrawerFn(props, component) {
                     }
                 }, 1);
             }
-            if (!dialogOpen && _ref.current.open) {
+            if (!open && _ref.current.open) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.dataset["transition"] =
                         "close";

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.js

@@ -41,6 +41,13 @@ function DBHeaderFn(props, component) {
         }
     }, [initialized, _ref.current]);
     return (React.createElement("header", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-header", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
+            React.createElement("div", { className: "db-header-drawer-navigation" },
+                React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
+                React.createElement("div", { className: "db-header-meta-navigation" },
+                    React.createElement(React.Fragment, null, props.metaNavigation))),
+            React.createElement("div", { className: "db-header-secondary-action" },
+                React.createElement(React.Fragment, null, props.secondaryAction))),
         React.createElement("div", { className: "db-header-meta-navigation" },
             React.createElement(React.Fragment, null, props.metaNavigation)),
         React.createElement("div", { className: "db-header-navigation-bar" },
@@ -54,14 +61,7 @@ function DBHeaderFn(props, component) {
                 React.createElement("div", { className: "db-header-burger-menu-container" },
                     React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_c = props.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
-                    React.createElement(React.Fragment, null, props.secondaryAction)))),
-        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
-            React.createElement("div", { className: "db-header-drawer-navigation" },
-                React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
-                React.createElement("div", { className: "db-header-meta-navigation" },
-                    React.createElement(React.Fragment, null, props.metaNavigation))),
-            React.createElement("div", { className: "db-header-secondary-action" },
-                React.createElement(React.Fragment, null, props.secondaryAction)))));
+                    React.createElement(React.Fragment, null, props.secondaryAction))))));
 }
 const DBHeader = forwardRef(DBHeaderFn);
 export default DBHeader;

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,10 +17,6 @@ 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;
 };
 export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps;
 export type DBNavigationItemDefaultState = {

package/dist/components/navigation-item/navigation-item.js

@@ -70,13 +70,14 @@ function DBNavigationItemFn(props, component) {
             }
         }
     }, [initialized, _ref.current]);
-    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }), !getBoolean(props.hideSubNavigation, "hideSubNavigation") &&
+    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
+        !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
         hasSubNavigation ? (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-        React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
-            hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
-                React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
-            React.createElement(React.Fragment, null, props.subNavigation)))) : props.text ? (React.createElement(React.Fragment, null, props.text)) : (React.createElement(React.Fragment, null, props.children))));
+            React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
+                hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
+                    React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
+                React.createElement(React.Fragment, null, props.subNavigation)))) : null));
 }
 const DBNavigationItem = forwardRef(DBNavigationItemFn);
 export default DBNavigationItem;

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 = {

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
 export declare const TextareaResizeList: readonly ["none", "both", "horizontal", "vertical"];
 export type TextareaResizeType = (typeof TextareaResizeList)[number];
 export declare const TextareaWrapList: readonly ["hard", "soft", "off"];

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

@@ -1,4 +1,4 @@
-import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model';
+import type { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.9.0-stencil-bundle-ad37ca4",
+  "version": "4.9.1",
   "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
@@ -17,8 +17,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.9.0-stencil-bundle-ad37ca4",
-    "@db-ux/core-foundations": "4.9.0-stencil-bundle-ad37ca4"
+    "@db-ux/core-components": "4.9.1",
+    "@db-ux/core-foundations": "4.9.1"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",