@db-ux/react-core-components 4.7.3 → 4.8.1-fix-publish-f7808e2

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # @db-ux/react-core-components
 
-## 4.7.3
+## 4.8.1
 
 _version bump_
 
+## 4.8.0
+
+### Minor Changes
+
+- Notification content now supports additional inline elements like `span` without styling collisions. And added the possibility to set the duration as a machine-readable value via the new `timestampDatetime` property - [see commit dae5149](https://github.com/db-ux-design-system/core-web/commit/dae514902f92a74cb95a3a3adab205d560174692)
+
+## 4.7.3
+
+_version bump_
 
 ## 4.7.2
 
@@ -42,7 +51,7 @@ _version bump_
 - docs(vite): mentioning version 8 configuration in `README.md` file - [see commit 4c5fc92](https://github.com/db-ux-design-system/core-web/commit/4c5fc9266402d9585087f4738a1a800cff1515f1)
 
 - fix(number input): prevent from clearing on intermediate decimal entry - [see commit aa85967](https://github.com/db-ux-design-system/core-web/commit/aa85967ffeaa685f6b647069d0e1d415d812dc87):
-  - fix(input,textarea): allow using `undefined` as `value`
+    - fix(input,textarea): allow using `undefined` as `value`
 
 ## 4.5.4
 
@@ -184,7 +193,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
 
@@ -205,14 +214,14 @@ _version bump_
 - refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
 
 - fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
-  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+    - feat(DBCustomSelect): introduce new property `selectedPrefix`
 
 ### Patch Changes
 
 - fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
-  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
-  - This listener detects form resets and updates the component's internal value/checked state accordingly.
-  - > **Note**: This does not work for `ngModel` in Angular.
+    - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+    - This listener detects form resets and updates the component's internal value/checked state accordingly.
+    - > **Note**: This does not work for `ngModel` in Angular.
 
 - fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
 
@@ -247,9 +256,9 @@ _version bump_
 ### Major Changes
 
 - feat: Switch stable rework - [see commit cb2deb0](https://github.com/db-ux-design-system/core-web/commit/cb2deb0f1c54900d1967483aea05d81279c02f59):
-  - **BREAKING CHANGE**: remove `emphasis` property
-  - introduce validation (invalid and valid)
-  - configurable label position
+    - **BREAKING CHANGE**: remove `emphasis` property
+    - introduce validation (invalid and valid)
+    - configurable label position
 
 - **BREAKING CHANGE**: refactor(Custom Select): renamed `ariaListLabel` property to `listLabel` - [see commit 966d5ad](https://github.com/db-ux-design-system/core-web/commit/966d5ad01f00d0ca1707cc316a63e2d431fff1e9)
 
@@ -268,12 +277,12 @@ _version bump_
 ### Patch Changes
 
 - fix(DBTabs): ensure navigation arrows appear correctly on window resize - [see commit 4e65e00](https://github.com/db-ux-design-system/core-web/commit/4e65e00d280cae18baee03b5a7a9b13eec063835):
-  - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
+    - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
 
 - fix(select): jumping placeholder for label above - [see commit 7ed8d22](https://github.com/db-ux-design-system/core-web/commit/7ed8d2225102e0e9044437e95917e11eef4bc73f)
 
 - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
-  - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
+    - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
 
 ## 3.1.17
 
@@ -287,8 +296,8 @@ _version bump_
 ### Patch Changes
 
 - a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
-  - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
-  - Now, all options are accessible via keyboard regardless of group boundaries.
+    - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
+    - Now, all options are accessible via keyboard regardless of group boundaries.
 - fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
 
 ## 3.1.15

package/README.md

@@ -21,16 +21,19 @@ npm i @db-ux/react-core-components
 
 Import the styles in scss or css. Based on your technology the file names could be different.
 
--   Default (relative): points to `../assets`
--   Rollup (rollup): points to `@db-ux/core-foundations/assets`
--   Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+- Default (relative): points to `../assets`
+- Rollup (rollup): points to `@db-ux/core-foundations/assets`
+- Webpack (webpack): points to `~@db-ux/core-foundations/assets`
 
 <details>
   <summary><strong>SCSS</strong></summary>
 
 ```scss
 // index.scss
-@forward "@db-ux/core-components/build/styles/rollup";
+@forward "@db-ux/core-foundations/build/styles/theme/rollup"; // Palette tokens
+@forward "@db-ux/core-foundations/build/styles/bundle"; // Semantic tokens
+@forward "@db-ux/core-foundations/build/styles/icons/rollup"; // Icon fonts
+@forward "@db-ux/core-components/build/styles/rollup"; // Component styling
 ```
 
 </details>
@@ -38,8 +41,11 @@ Import the styles in scss or css. Based on your technology the file names could
   <summary><strong>CSS</strong></summary>
 
 ```tsx
-// main.tsx
-import "@db-ux/core-components/build/styles/rollup.css";
+// main.tsx — order matters!
+import "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Palette tokens
+import "@db-ux/core-foundations/build/styles/bundle.css"; // Semantic tokens
+import "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Icon fonts
+import "@db-ux/core-components/build/styles/rollup.css"; // Component styling
 ```
 
 </details>
@@ -51,9 +57,9 @@ Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](htt
 ```ts
 // vite.config.ts
 export default defineConfig({
-  build: {
-    cssMinify: "esbuild"
-  }
+	build: {
+		cssMinify: "esbuild"
+	}
 });
 ```
 
@@ -68,11 +74,15 @@ import { browserslistToTargets } from "lightningcss";
 import browserslist from "browserslist";
 
 export default defineConfig({
-  css: {
-    lightningcss: {
-      targets: browserslistToTargets(browserslist(">= 0.5%, last 2 major versions, Firefox ESR, not dead"))
-    }
-  }
+	css: {
+		lightningcss: {
+			targets: browserslistToTargets(
+				browserslist(
+					">= 0.5%, last 2 major versions, Firefox ESR, not dead"
+				)
+			)
+		}
+	}
 });
 ```
 
@@ -82,22 +92,22 @@ export default defineConfig({
 
 Starting with Next 16, 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). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `next.config.ts` like this:
 
-````ts
+```ts
 // next.config.ts
 
-import type { NextConfig } from 'next'
+import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
 	experimental: {
 		useLightningcss: true,
 		lightningCssFeatures: {
-			exclude: ['light-dark'],
-		},
-	},
-}
+			exclude: ["light-dark"]
+		}
+	}
+};
 
-export default nextConfig
-````
+export default nextConfig;
+```
 
 ### DB Theme
 

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

@@ -50,7 +50,9 @@ function DBAccordionItemFn(props, component) {
             React.createElement("summary", { onClick: (event) => handleToggle(event) },
                 props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
                 !props.headlinePlain ? React.createElement(React.Fragment, null, props.headline) : null),
-            React.createElement("div", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)))));
+            React.createElement("div", null,
+                props.text ? React.createElement(React.Fragment, null, props.text) : null,
+                props.children))));
 }
 const DBAccordionItem = forwardRef(DBAccordionItemFn);
 export default DBAccordionItem;

package/dist/components/badge/badge.js

@@ -26,7 +26,9 @@ function DBBadgeFn(props, component) {
             }
         }
     }, [_ref.current, initialized]);
-    return (React.createElement("span", 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 }, 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-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-wrap": getBooleanAsString(props.wrap), "data-label": ((_c = props.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = props.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("span", 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 }, 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-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-wrap": getBooleanAsString(props.wrap), "data-label": ((_c = props.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = props.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBBadge = forwardRef(DBBadgeFn);
 export default DBBadge;

package/dist/components/brand/brand.js

@@ -7,7 +7,9 @@ import { cls, getBooleanAsString } from "../../utils";
 function DBBrandFn(props, component) {
     var _a, _b, _c;
     const _ref = component || useRef(component);
-    return (React.createElement("div", 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"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: (_b = props.id) !== null && _b !== void 0 ? _b : (_c = props.propOverrides) === null || _c === void 0 ? void 0 : _c.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-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("div", 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"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: (_b = props.id) !== null && _b !== void 0 ? _b : (_c = props.propOverrides) === null || _c === void 0 ? void 0 : _c.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-brand", props.className) }),
+        props.children,
+        props.text ? React.createElement(React.Fragment, null, props.text) : null));
 }
 const DBBrand = forwardRef(DBBrandFn);
 export default DBBrand;

package/dist/components/button/button.js

@@ -15,7 +15,9 @@ function DBButtonFn(props, component) {
         }
         return "submit";
     }
-    return (React.createElement("button", 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 }, 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-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap), "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("button", 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 }, 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-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap), "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBButton = forwardRef(DBButtonFn);
 export default DBButton;

package/dist/components/checkbox/checkbox.js

@@ -148,7 +148,8 @@ function DBCheckboxFn(props, component) {
     return (React.createElement("div", Object.assign({}, 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-checkbox", props.className), "data-size": props.size, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id },
             React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds })),
-            props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
+            props.label ? React.createElement(React.Fragment, null, props.label) : null,
+            props.children),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

package/dist/components/custom-select-list-item/custom-select-list-item.js

@@ -27,7 +27,8 @@ function DBCustomSelectListItemFn(props, component) {
             "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
         }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-icon-trailing": getIconTrailing() },
         React.createElement("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, form: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, onChange: (event) => handleChange(event) }),
-        props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children))) : (React.createElement("span", null, props.groupTitle))));
+        props.label ? React.createElement(React.Fragment, null, props.label) : null,
+        props.children)) : (React.createElement("span", null, props.groupTitle))));
 }
 const DBCustomSelectListItem = forwardRef(DBCustomSelectListItemFn);
 export default DBCustomSelectListItem;

package/dist/components/icon/icon.js

@@ -6,7 +6,9 @@ import { cls } from "../../utils";
 function DBIconFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("span", Object.assign({ "aria-hidden": "true", 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 }, 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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("span", Object.assign({ "aria-hidden": "true", 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 }, 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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBIcon = forwardRef(DBIconFn);
 export default DBIcon;

package/dist/components/infotext/infotext.js

@@ -6,7 +6,9 @@ import { cls, getBooleanAsString } from "../../utils";
 function DBInfotextFn(props, component) {
     var _a, _b, _c;
     const _ref = component || useRef(component);
-    return (React.createElement("span", 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 }, 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-wrap": getBooleanAsString(props.wrap), "data-show-icon-leading": getBooleanAsString((_c = props.showIcon) !== null && _c !== void 0 ? _c : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("span", 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 }, 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-wrap": getBooleanAsString(props.wrap), "data-show-icon-leading": getBooleanAsString((_c = props.showIcon) !== null && _c !== void 0 ? _c : true) }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBInfotext = forwardRef(DBInfotextFn);
 export default DBInfotext;

package/dist/components/link/link.js

@@ -6,7 +6,9 @@ import { cls, getBooleanAsString } from "../../utils";
 function DBLinkFn(props, component) {
     var _a, _b, _c, _d;
     const _ref = component || useRef(component);
-    return (React.createElement("a", 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 }, 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-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, referrerPolicy: (_c = props.referrerpolicy) !== null && _c !== void 0 ? _c : props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_d = props.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("a", 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 }, 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-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, referrerPolicy: (_c = props.referrerpolicy) !== null && _c !== void 0 ? _c : props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_d = props.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBLink = forwardRef(DBLinkFn);
 export default DBLink;

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

@@ -40,6 +40,17 @@ export type DBNotificationDefaultProps = {
      * The timestamp attribute can be set for overlay notifications
      */
     timestamp?: string;
+    /**
+     * Machine-readable value for the `datetime` attribute of the rendered `<time>` element.
+     *
+     * Accepts any valid HTML datetime string:
+     * - Absolute moment: ISO 8601 date/time, e.g. `"2024-06-01T12:30:00"`
+     * - Duration: ISO 8601 duration, e.g. `"PT5M"` (5 minutes), `"PT1H30M"` (1 h 30 min)
+     *
+     * When omitted the `datetime` attribute is not rendered and assistive technologies
+     * fall back to the visible `timestamp` text.
+     */
+    timestampDatetime?: string;
     /**
      * Enables or disables the visibility of the timestamp.
      */

package/dist/components/notification/notification.js

@@ -22,9 +22,11 @@ function DBNotificationFn(props, component) {
             ariaLive: props.ariaLive,
         }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
-        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
-        React.createElement("div", { "data-area": "content" }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("span", null, props.timestamp)) : null,
+        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", { "data-area": "head" }, props.headline)) : null,
+        React.createElement("div", { "data-area": "content" },
+            props.text ? React.createElement(React.Fragment, null, props.text) : null,
+            props.children),
+        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("time", { "data-area": "timestamp", dateTime: props.timestampDatetime }, props.timestamp)) : null,
         React.createElement(React.Fragment, null, props.link),
         getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
 }

package/dist/components/radio/radio.js

@@ -80,7 +80,8 @@ function DBRadioFn(props, component) {
     }, []);
     return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, 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-radio", props.className), htmlFor: _id }),
         React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
-        props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
+        props.label ? React.createElement(React.Fragment, null, props.label) : null,
+        props.children));
 }
 const DBRadio = forwardRef(DBRadioFn);
 export default DBRadio;

package/dist/components/switch/switch.js

@@ -141,7 +141,8 @@ function DBSwitchFn(props, component) {
     return (React.createElement("div", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-custom-validity": props.validation }, 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-switch", props.className) }),
         React.createElement("label", { htmlFor: _id },
             React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), onKeyDown: (event) => handleKeyDown(event) })),
-            props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
+            props.label ? React.createElement(React.Fragment, null, props.label) : null,
+            props.children),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", semantic: "adaptive", id: _messageId, icon: props.messageIcon }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_c = props.validMessage) !== null && _c !== void 0 ? _c : DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

package/dist/components/tag/tag.js

@@ -25,8 +25,8 @@ function DBTagFn(props, component) {
     }
     return (React.createElement("div", 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", "onRemove"]), { 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-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_c = props.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
         React.createElement(React.Fragment, null, props.content),
-        props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children,
         props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => handleRemove(event) },
             React.createElement(DBTooltip, { variant: "label" }, getRemoveButtonText()))) : null));
 }

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

@@ -1,4 +1,4 @@
-import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, WrapProps } from '../../shared/model';
+import { 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 = {
@@ -13,7 +13,7 @@ export type DBTooltipDefaultProps = {
      */
     variant?: TooltipVariantType;
 };
-export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps;
+export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps & TextProps;
 export type DBTooltipDefaultState = {
     getParent: () => HTMLElement;
 };

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "text" | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/components/tooltip/tooltip.js

@@ -109,7 +109,9 @@ function DBTooltipFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized, _id]);
-    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap), "data-animation": getBooleanAsString((_b = props.animation) !== null && _b !== void 0 ? _b : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_c = props.showArrow) !== null && _c !== void 0 ? _c : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
+    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap), "data-animation": getBooleanAsString((_b = props.animation) !== null && _b !== void 0 ? _b : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_c = props.showArrow) !== null && _c !== void 0 ? _c : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.children));
 }
 const DBTooltip = forwardRef(DBTooltipFn);
 export default DBTooltip;

package/dist/shared/figma.d.ts

@@ -0,0 +1,111 @@
+/** A nested Figma instance swap prop (e.g. icon components). */
+export type FigmaInstanceProp = {
+    /** Use 'instance' for generic instance swaps, 'iconSwap' for icon instances that resolve to a string name. */
+    type: 'instance' | 'iconSwap';
+    /** The Figma property key of the instance swap (e.g. '🔄 Icon Small'). */
+    key: string;
+};
+/** An enum prop mapping Figma variant values to code values. */
+export type FigmaEnumProp = {
+    type: 'enum';
+    /** The Figma property key (e.g. 'Size', '💻 Variant'). */
+    key: string;
+    /** Map of Figma variant value → code value. Values can be strings, booleans, numbers, or instance swaps. */
+    value: Record<string, string | boolean | number | FigmaInstanceProp>;
+};
+/** A simple scalar prop. */
+export type FigmaSimpleProp = {
+    /**
+     * - 'string': maps to instance.getString()
+     * - 'boolean': maps to instance.getBoolean()
+     * - 'children': maps to instance.getSlot() — replaces slot content
+     * - 'textContent': maps to instance.getString() — used for text content rendered as children
+     */
+    type: 'string' | 'boolean' | 'children' | 'textContent';
+    /** The Figma property key (e.g. '✏️ Text', '✏️ Label'). */
+    key: string;
+};
+/** Reads a text property from a named nested instance via instance.findInstance(layerName)?.getString(key). */
+export type FigmaNestedTextProp = {
+    type: 'nestedText';
+    /** The exact Figma layer name of the nested instance to find. */
+    layerName: string;
+    /** The Figma property key on the nested instance (e.g. '✏️ Text'). */
+    key: string;
+};
+/**
+ * Reads a text property from the first code-connected child instance.
+ * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
+ *   .filter((node) => node.type === 'INSTANCE')
+ *   .filter((node) => !!node.properties[key])[0]
+ *   .getString(key)
+ */
+export type FigmaConnectedTextProp = {
+    type: 'connectedText';
+    /** The Figma property key to read from each connected instance (e.g. '✏️ Text'). */
+    key: string;
+    /** Index into the array of connected instances. Defaults to 0. */
+    index?: number;
+};
+/**
+ * Generates a single message variable from a connected instance's text,
+ * then maps it to different attribute names based on another prop's value.
+ *
+ * @example
+ * validationMessage: { type: 'validationMessage', key: '✏️ Text', conditionProp: 'validation', map: { 'invalid': 'invalidMessage', 'valid': 'validMessage', default: 'message' } }
+ */
+export type FigmaValidationMessageProp = {
+    type: 'validationMessage';
+    /** The Figma property key to read from the connected instance (e.g. '✏️ Text'). */
+    key: string;
+    /** The prop name whose value determines which attribute to use. */
+    conditionProp: string;
+    /** Map of condition prop values to attribute names, plus a 'default' fallback. */
+    map: Record<string, string>;
+};
+/**
+ * Renders all direct code-connected child instances as children.
+ * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
+ *   .map((child) => child.executeTemplate().example)
+ */
+export type FigmaConnectedInstancesProp = {
+    type: 'connectedInstances';
+};
+/**
+ * Renders code-connected child instances recursively, filtered by a nestedImports string.
+ * Uses traverseInstances: true to find all descendants, then filters by checking whether
+ * the instance's template nestedImports contains the given filter string.
+ *
+ * @example filter: 'DBAccordionItem' generates:
+ *   instance
+ *     .findConnectedInstances((node) => node.hasCodeConnect(), { traverseInstances: true })
+ *     .filter((node) => node.type === 'INSTANCE')
+ *     .filter((node) => node.executeTemplate().example
+ *       .some((section) => section.nestedImports?.some((i) => i.includes('DBAccordionItem'))))
+ *     .map((child) => child.executeTemplate().example)
+ */
+export type FigmaNestedConnectedInstancesProp = {
+    type: 'nestedConnectedInstances';
+    /** Import string to filter by (e.g. 'DBAccordionItem'). Only instances whose template nestedImports contain this string are included. */
+    filter: string;
+};
+/**
+ * Wraps an iconSwap prop so it is only rendered when a boolean guard prop is true.
+ * Generates: let icon = ''; if (showIconLeading) { icon = `\n\t\ticon="${iconLeading}"` }
+ */
+export type FigmaConditionalProp = {
+    type: 'conditionalProp';
+    /** The Figma property key of the icon instance swap. */
+    key: string;
+    /** The prop name of the boolean guard (e.g. 'showIconLeading'). */
+    guardProp: string;
+    /** The attribute name to render (e.g. 'icon'). */
+    attrName: string;
+};
+export type FigmaProp = FigmaEnumProp | FigmaInstanceProp | FigmaNestedTextProp | FigmaConnectedTextProp | FigmaValidationMessageProp | FigmaConditionalProp | FigmaConnectedInstancesProp | FigmaNestedConnectedInstancesProp | FigmaSimpleProp;
+export type FigmaCodeConnect = {
+    /** Figma node URLs this component connects to. Use 'FIGMA_FILE' as placeholder for the file key. */
+    urls: string[];
+    /** Map of prop name → Figma prop definition. */
+    props: Record<string, FigmaProp>;
+};

package/dist/shared/figma.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/model.d.ts

@@ -424,7 +424,7 @@ export type RoleProps = {
 };
 export type TextProps = {
     /**
-     * Alternative for default slot/children.
+     * Alternative for default slot/children. Do not use together with a text children/slot, as both will be rendered and result in duplicate labels.
      */
     text?: string;
 };

package/package.json

@@ -1,29 +1,33 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.7.3",
+  "version": "4.8.1-fix-publish-f7808e2",
+  "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/db-ux-design-system/core-web.git"
   },
   "license": "Apache-2.0",
-  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
   "files": [
-    "dist/",
+    "CHANGELOG.md",
     "agent",
-    "CHANGELOG.md"
+    "dist/"
   ],
+  "dependencies": {
+    "@db-ux/core-components": "4.8.1-fix-publish-f7808e2",
+    "@db-ux/core-foundations": "4.8.1-fix-publish-f7808e2"
+  },
   "devDependencies": {
-    "npm-run-all2": "8.0.4",
     "@playwright/experimental-ct-react": "1.59.1",
     "@types/react": "19.2.14",
     "cpr": "3.0.1",
+    "npm-run-all2": "8.0.4",
     "playwright": "1.59.1",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "typescript": "5.9.3"
   },
   "publishConfig": {
@@ -31,22 +35,18 @@
     "access": "public"
   },
   "sideEffects": false,
-  "dependencies": {
-    "@db-ux/core-components": "4.7.3",
-    "@db-ux/core-foundations": "4.7.3"
-  },
   "scripts": {
     "build": "npm-run-all tsc --parallel mv:*",
-    "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
     "mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
     "mv:changelog": "cpr CHANGELOG.md ../../build-outputs/react/CHANGELOG.md --overwrite",
+    "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
     "mv:package.json": "cpr package.json ../../build-outputs/react/package.json --overwrite",
     "mv:readme": "cpr README.md ../../build-outputs/react/README.md --overwrite",
     "open:report": "npx playwright show-report",
     "regenerate:screenshots": "playwright test --config playwright.config.ts --update-snapshots",
     "test:components": "playwright test --config playwright.config.ts",
-    "test:windows": "playwright test --config playwright.screen-reader.win.ts",
     "test:components:ui": "playwright test --config playwright.config.ts --ui",
+    "test:windows": "playwright test --config playwright.screen-reader.win.ts",
     "tsc": "tsc --project . --sourceMap false"
   }
 }