@db-ux/react-core-components 4.11.1 → 4.12.1

package/dist/components/switch/switch.js

@@ -1,184 +1,137 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a, getHideProp as o, hasVoiceOver as s, stringPropVisible as c } from "../../utils/index.js";
-import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as l, DEFAULT_MESSAGE_ID_SUFFIX as u, DEFAULT_VALID_MESSAGE_ID_SUFFIX as d } from "../../shared/constants.js";
-import { addCheckedResetEventListener as f } from "../../utils/form-components.js";
-import p from "../infotext/infotext.js";
-import { forwardRef as m, useEffect as h, useId as g, useRef as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-//#region src/components/switch/switch.tsx
-function S(m, S) {
-	let C = g(), w = S || _(S), [T, E] = v(() => void 0), [D, O] = v(() => void 0), [k, A] = v(() => void 0), [j, M] = v(() => void 0), [N, P] = v(() => void 0), [F, I] = v(() => void 0), [L, R] = v(() => ""), [z, B] = v(() => void 0);
-	function V() {
-		return !!(m.validMessage ?? m.validation === "valid");
-	}
-	function H() {
-		if (!w.current?.validity?.valid || m.validation === "invalid") {
-			I(j), P(m.invalidMessage || w.current?.validationMessage || "TODO: Add an invalidMessage"), s() && (R(N || "TODO: Add an invalidMessage"), r(() => {
-				R("");
-			}, 1e3));
-			return;
-		}
-		if (V() && w.current?.validity?.valid && m.required) {
-			I(k), s() && (R(m.validMessage ?? "TODO: Add a validMessage"), r(() => {
-				R("");
-			}, 1e3));
-			return;
-		}
-		if (c(m.message, m.showMessage)) {
-			I(D);
-			return;
-		}
-		I(void 0);
-	}
-	function U(e, t) {
-		m.onChange && m.onChange(e), H();
-	}
-	function W(e) {
-		m.onBlur && m.onBlur(e);
-	}
-	function G(e) {
-		m.onFocus && m.onFocus(e);
-	}
-	function K(e) {
-		e.key === "Enter" && (e.preventDefault(), m.disabled || w.current?.click());
-	}
-	function q() {
-		let e = m.id ?? m.propOverrides?.id ?? `switch-${C}`;
-		E(e), O(`${e}${u}`), A(`${e}${d}`), M(`${e}${l}`);
-	}
-	return h(() => {
-		q(), H(), P(m.invalidMessage || "TODO: Add an invalidMessage");
-	}, []), h(() => {
-		(m.id ?? m.propOverrides?.id) && q();
-	}, [m.id, m.propOverrides?.id]), h(() => {
-		H();
-	}, [
-		m.validation,
-		m.required,
-		m.message,
-		m.showMessage,
-		m.validMessage,
-		m.invalidMessage,
-		m.checked
-	]), h(() => {
-		P(m.invalidMessage || w.current?.validationMessage || "TODO: Add an invalidMessage");
-	}, [w.current, m.invalidMessage]), h(() => {
-		if (w.current) {
-			let e = m.defaultChecked, t = z;
-			t || (t = new AbortController(), B(t)), f(w.current, {
-				checked: m.checked,
-				defaultChecked: e
-			}, (e) => {
-				U(e, !0);
-			}, t.signal);
-		}
-	}, [w.current]), h(() => () => {
-		z?.abort();
-	}, []), /* @__PURE__ */ x("div", {
-		"data-visual-aid": a(m.visualAid, "visualAid"),
-		"data-size": m.size,
-		"data-hide-label": o(m.showLabel),
-		"data-variant": m.variant,
-		"data-hide-asterisk": o(m.showRequiredAsterisk),
-		"data-custom-validity": m.validation,
-		...t(m, [
-			"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: n("db-switch", m.className),
-		children: [
-			/* @__PURE__ */ x("label", {
-				htmlFor: T,
-				children: [
-					/* @__PURE__ */ b("input", {
-						type: "checkbox",
-						role: "switch",
-						id: T,
-						ref: w,
-						...e(m, [
-							"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: i(m.checked, "checked"),
-						value: m.value,
-						disabled: i(m.disabled, "disabled"),
-						"aria-invalid": m.validation === "invalid" ? "true" : void 0,
-						"aria-describedby": F,
-						name: m.name,
-						required: i(m.required, "required"),
-						"data-aid-icon": m.iconLeading ?? m.icon,
-						"data-aid-icon-trailing": m.iconTrailing,
-						onChange: (e) => U(e),
-						onBlur: (e) => W(e),
-						onFocus: (e) => G(e),
-						onKeyDown: (e) => K(e)
-					}),
-					m.label ? /* @__PURE__ */ b(y, { children: m.label }) : null,
-					m.children
-				]
-			}),
-			c(m.message, m.showMessage) ? /* @__PURE__ */ b(p, {
-				size: "small",
-				semantic: "adaptive",
-				id: D,
-				icon: m.messageIcon,
-				children: m.message
-			}) : null,
-			V() ? /* @__PURE__ */ b(p, {
-				size: "small",
-				semantic: "successful",
-				id: k,
-				children: m.validMessage ?? "TODO: Add a validMessage"
-			}) : null,
-			/* @__PURE__ */ b(p, {
-				size: "small",
-				semantic: "critical",
-				id: j,
-				children: N
-			}),
-			/* @__PURE__ */ b("span", {
-				"data-visually-hidden": "true",
-				role: "status",
-				children: L
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, } from "../../utils/index.js";
+import { addCheckedResetEventListener, } from "../../utils/form-components.js";
+import DBInfotext from "../infotext/infotext.js";
+import { useId } from "react";
+function DBSwitchFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [_messageId, set_messageId] = useState(() => undefined);
+    const [_validMessageId, set_validMessageId] = useState(() => undefined);
+    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
+    function hasValidState() {
+        return !!(props.validMessage ?? props.validation === "valid");
+    }
+    function handleValidation() {
+        if (!_ref.current?.validity?.valid || props.validation === "invalid") {
+            set_descByIds(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                _ref.current?.validationMessage ||
+                DEFAULT_INVALID_MESSAGE);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(_invalidMessage || DEFAULT_INVALID_MESSAGE);
+                void delay(() => {
+                    set_voiceOverFallback("");
+                }, 1000);
+            }
+            return;
+        }
+        if (hasValidState() && _ref.current?.validity?.valid && props.required) {
+            set_descByIds(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(props.validMessage ?? DEFAULT_VALID_MESSAGE);
+                void delay(() => {
+                    set_voiceOverFallback("");
+                }, 1000);
+            }
+            return;
+        }
+        if (stringPropVisible(props.message, props.showMessage)) {
+            set_descByIds(_messageId);
+            return;
+        }
+        set_descByIds(undefined);
+    }
+    function handleChange(event, reset) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        handleValidation();
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }
+    function handleKeyDown(event) {
+        // Support ENTER key for toggling the switch (a11y requirement)
+        if (event.key === "Enter") {
+            event.preventDefault();
+            // Toggle the switch by clicking it programmatically
+            if (!props.disabled) {
+                _ref.current?.click();
+            }
+        }
+    }
+    function resetIds() {
+        const mId = props.id ?? props.propOverrides?.id ?? `switch-${uuid}`;
+        set_id(mId);
+        set_messageId(`${mId}${DEFAULT_MESSAGE_ID_SUFFIX}`);
+        set_validMessageId(`${mId}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
+        set_invalidMessageId(`${mId}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+    }
+    useEffect(() => {
+        resetIds();
+        handleValidation();
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
+    }, []);
+    useEffect(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.id]);
+    useEffect(() => {
+        handleValidation();
+    }, [
+        props.validation,
+        props.required,
+        props.message,
+        props.showMessage,
+        props.validMessage,
+        props.invalidMessage,
+        props.checked,
+    ]);
+    useEffect(() => {
+        set_invalidMessage(props.invalidMessage ||
+            _ref.current?.validationMessage ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addCheckedResetEventListener(_ref.current, {
+                checked: props.checked,
+                defaultChecked,
+            }, (event) => {
+                handleChange(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController?.abort();
+        };
+    }, []);
+    return (_jsxs("div", { "data-visual-aid": getBooleanAsString(props.visualAid, "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), children: [_jsxs("label", { htmlFor: _id, children: [_jsx("input", { 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": props.iconLeading ?? 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 ? _jsx(_Fragment, { children: props.label }) : null, props.children] }), stringPropVisible(props.message, props.showMessage) ? (_jsx(DBInfotext, { size: "small", semantic: "adaptive", id: _messageId, icon: props.messageIcon, children: props.message })) : null, hasValidState() ? (_jsx(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId, children: props.validMessage ?? DEFAULT_VALID_MESSAGE })) : null, _jsx(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId, children: _invalidMessage }), _jsx("span", { "data-visually-hidden": "true", role: "status", children: _voiceOverFallback })] }));
 }
-var C = m(S);
-//#endregion
-export { C as default };
+const DBSwitch = forwardRef(DBSwitchFn);
+export default DBSwitch;

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

@@ -1 +1 @@
-export { default as DBTabItem } from './tab-item';
+export { default as DBTabItem } from './tab-item.js';

package/dist/components/tab-item/index.js

@@ -0,0 +1 @@
+export { default as DBTabItem } from './tab-item.js';

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

@@ -1,4 +1,4 @@
-import type { 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.js';
 export type DBTabItemDefaultProps = {
     /**
      * To control the component

package/dist/components/tab-item/model.js

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

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../..").GlobalProps | "name" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../..").ChangeEventProps<HTMLInputElement> | "active" | keyof import("./model").DBTabItemDefaultProps> & import("../..").GlobalProps & import("./model").DBTabItemDefaultProps & import("../..").IconProps & import("../..").IconTrailingProps & import("../..").IconLeadingProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").ActiveProps & import("../..").ChangeEventProps<HTMLInputElement> & import("../..").ShowIconProps & import("../..").NameProps & React.RefAttributes<any>>;
+declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "name" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../../index.js").ChangeEventProps<HTMLInputElement> | "active" | keyof import("./model.js").DBTabItemDefaultProps> & import("../../index.js").GlobalProps & import("./model.js").DBTabItemDefaultProps & import("../../index.js").IconProps & import("../../index.js").IconTrailingProps & import("../../index.js").IconLeadingProps & import("../../index.js").ShowIconLeadingProps & import("../../index.js").ShowIconTrailingProps & import("../../index.js").ActiveProps & import("../../index.js").ChangeEventProps<HTMLInputElement> & import("../../index.js").ShowIconProps & import("../../index.js").NameProps & React.RefAttributes<any>>;
 export default DBTabItem;

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

@@ -1,107 +1,74 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBoolean as r, getBooleanAsString as i } from "../../utils/index.js";
-import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/components/tab-item/tab-item.tsx
-function f(a, f) {
-	let p = f || s(f), [m, h] = c(() => !1), [g, _] = c(() => void 0), [v, y] = c(() => !1), [b, x] = c(() => !1), [S, C] = c(() => void 0);
-	function w(e) {
-		e.stopPropagation(), h(e.target === p.current);
-	}
-	function T() {
-		if (p.current) {
-			let e = p.current.setAttribute;
-			p.current.setAttribute = (t, n) => {
-				e.call(p.current, t, n), t === "name" && _(n);
-			};
-		}
-	}
-	function E(e) {
-		a.onChange && a.onChange(e);
-	}
-	return o(() => {
-		C(() => w), y(!0);
-	}, []), o(() => {
-		p.current && v && S && (T(), y(!1), b || (p.current.closest("[role=tablist]")?.addEventListener("change", S), x(!0)), (a.active || p.current.checked) && (h(!0), p.current.click()));
-	}, [
-		p.current,
-		v,
-		S
-	]), o(() => {
-		a.name && _(a.name);
-	}, [a.name]), o(() => () => {
-		b && p.current && S && (p.current.closest("[role=tablist]")?.removeEventListener("change", S), x(!1));
-	}, []), /* @__PURE__ */ u("li", {
-		role: "none",
-		...t(a, [
-			"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: n("db-tab-item", a.className),
-		children: /* @__PURE__ */ d("label", {
-			htmlFor: a.id ?? a.propOverrides?.id,
-			"data-icon": a.iconLeading ?? a.icon,
-			"data-icon-trailing": a.iconTrailing,
-			"data-show-icon": i(a.showIconLeading, "showIconLeading") || i(a.showIcon, "showIcon"),
-			"data-show-icon-trailing": i(a.showIconTrailing, "showIconTrailing"),
-			"data-no-text": i(a.noText, "noText"),
-			children: [
-				/* @__PURE__ */ u("input", {
-					type: "radio",
-					role: "tab",
-					disabled: r(a.disabled, "disabled"),
-					"aria-selected": m,
-					checked: r(a.checked, "checked"),
-					ref: p,
-					...e(a, [
-						"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"
-					]),
-					name: g,
-					id: a.id ?? a.propOverrides?.id,
-					onInput: (e) => E(e)
-				}),
-				a.label ? /* @__PURE__ */ u(l, { children: a.label }) : null,
-				a.children
-			]
-		})
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBoolean, getBooleanAsString } from "../../utils/index.js";
+function DBTabItemFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_selected, set_selected] = useState(() => false);
+    const [_name, set_name] = useState(() => undefined);
+    const [initialized, setInitialized] = useState(() => false);
+    const [_listenerAdded, set_listenerAdded] = useState(() => false);
+    const [boundSetSelectedOnChange, setBoundSetSelectedOnChange] = useState(() => undefined);
+    function setSelectedOnChange(event) {
+        event.stopPropagation();
+        set_selected(event.target === _ref.current);
+    }
+    function handleNameAttribute() {
+        if (_ref.current) {
+            const setAttribute = _ref.current.setAttribute;
+            _ref.current.setAttribute = (attribute, value) => {
+                setAttribute.call(_ref.current, attribute, value);
+                if (attribute === "name") {
+                    set_name(value);
+                }
+            };
+        }
+    }
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+    }
+    useEffect(() => {
+        setBoundSetSelectedOnChange(() => setSelectedOnChange);
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized && boundSetSelectedOnChange) {
+            handleNameAttribute();
+            setInitialized(false);
+            // deselect this tab when another tab in tablist is selected
+            if (!_listenerAdded) {
+                _ref.current
+                    .closest("[role=tablist]")
+                    ?.addEventListener("change", boundSetSelectedOnChange);
+                set_listenerAdded(true);
+            }
+            // Initialize selected state from either active prop (set by parent) or checked attribute
+            if (props.active || _ref.current.checked) {
+                set_selected(true);
+                _ref.current.click();
+            }
+        }
+    }, [_ref.current, initialized, boundSetSelectedOnChange]);
+    useEffect(() => {
+        if (props.name) {
+            set_name(props.name);
+        }
+    }, [props.name]);
+    useEffect(() => {
+        return () => {
+            if (_listenerAdded && _ref.current && boundSetSelectedOnChange) {
+                _ref.current
+                    .closest("[role=tablist]")
+                    ?.removeEventListener("change", boundSetSelectedOnChange);
+                set_listenerAdded(false);
+            }
+        };
+    }, []);
+    return (_jsx("li", { role: "none", ...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-tab-item", props.className), children: _jsxs("label", { htmlFor: props.id ?? props.propOverrides?.id, "data-icon": props.iconLeading ?? props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString(props.showIconLeading, "showIconLeading") ||
+                getBooleanAsString(props.showIcon, "showIcon"), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing, "showIconTrailing"), "data-no-text": getBooleanAsString(props.noText, "noText"), children: [_jsx("input", { type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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"]), name: _name, id: props.id ?? props.propOverrides?.id, onInput: (event) => handleChange(event) }), props.label ? _jsx(_Fragment, { children: props.label }) : null, props.children] }) }));
 }
-var p = a(f);
-//#endregion
-export { p as default };
+const DBTabItem = forwardRef(DBTabItemFn);
+export default DBTabItem;

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

@@ -1 +1 @@
-export { default as DBTabList } from './tab-list';
+export { default as DBTabList } from './tab-list.js';

package/dist/components/tab-list/index.js

@@ -0,0 +1 @@
+export { default as DBTabList } from './tab-list.js';

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

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

package/dist/components/tab-list/model.js

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

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
+declare const DBTabList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps> & import("../../index.js").GlobalProps & React.RefAttributes<any>>;
 export default DBTabList;