@db-ux/ngx-core-components 4.7.0-tabs-34782eb → 4.7.1

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -170,7 +170,7 @@ const getNotificationRole = ({ semantic, role, ariaLive }) => {
     }
 };
 
-const defaultProps$z = {};
+const defaultProps$A = {};
 class DBAccordionItem {
     handleNameAttribute() {
         if (this._ref()?.nativeElement) {
@@ -327,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$y = {};
+const defaultProps$z = {};
 class DBAccordion {
     convertItems() {
         try {
@@ -622,7 +622,7 @@ const TESTING_VIEWPORTS = [{
 const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
 const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
 
-const defaultProps$x = {};
+const defaultProps$y = {};
 class DBBadge {
     constructor() {
         this.cls = cls;
@@ -742,7 +742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 
 const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
 
-const defaultProps$w = {};
+const defaultProps$x = {};
 class DBBrand {
     constructor() {
         this.DEFAULT_ICON = DEFAULT_ICON;
@@ -827,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$v = {};
+const defaultProps$w = {};
 class DBButton {
     getButtonType() {
         if (this.type()) {
@@ -962,7 +962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
 const ButtonTypeList = ['button', 'reset', 'submit'];
 
-const defaultProps$u = {};
+const defaultProps$v = {};
 class DBCard {
     handleClick(event) {
         if (this.click) {
@@ -1125,7 +1125,7 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
     }, signal);
 };
 
-const defaultProps$t = {};
+const defaultProps$u = {};
 class DBInfotext {
     constructor() {
         this.cls = cls;
@@ -1215,7 +1215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   > `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$s = {};
+const defaultProps$t = {};
 class DBCheckbox {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -1595,7 +1595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$r = {};
+const defaultProps$s = {};
 class DBCustomButton {
     constructor() {
         this.cls = cls;
@@ -2121,14 +2121,14 @@ const handleFixedPopover = (element, parent, placement) => {
     element.dataset['correctedPlacement'] = correctedPlacement;
 };
 
-const defaultProps$q = { width: "fixed" };
+const defaultProps$r = { width: "fixed" };
 class DBCustomSelectDropdown {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-        this.width = input(defaultProps$q["width"], ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
     }
     /**
@@ -2197,7 +2197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </article> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$p = {};
+const defaultProps$q = {};
 class DBCustomSelectListItem {
     handleChange(event) {
         event.stopPropagation();
@@ -2383,7 +2383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$o = {};
+const defaultProps$p = {};
 class DBCustomSelectList {
     constructor() {
         this.cls = cls;
@@ -2464,7 +2464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$n = {};
+const defaultProps$o = {};
 class DBInput {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -2944,7 +2944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], dataListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataListId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSizing", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], messageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageSize", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], validMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessageSize", required: false }] }], invalidMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessageSize", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$m = {};
+const defaultProps$n = {};
 class DBTooltip {
     handleClick(event) {
         event.stopPropagation();
@@ -3012,7 +3012,7 @@ class DBTooltip {
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
         this.showArrow = input(...(ngDevMode ? [undefined, { debugName: "showArrow" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
-        this._id = signal("tooltip-" + uuid(), ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
+        this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
         this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : /* istanbul ignore next */ []));
         this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
@@ -3152,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   ></i> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$l = {};
+const defaultProps$m = {};
 class DBTag {
     handleRemove(event) {
         if (!event)
@@ -3292,7 +3292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$k = {
+const defaultProps$l = {
     clearSelectionText: "Clear selection",
     showClearSelection: true,
 };
@@ -3792,8 +3792,8 @@ class DBCustomSelect {
         this.loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
         this.noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
         this.mobileCloseButtonText = input(...(ngDevMode ? [undefined, { debugName: "mobileCloseButtonText" }] : /* istanbul ignore next */ []));
-        this.showClearSelection = input(defaultProps$k["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : /* istanbul ignore next */ []));
-        this.clearSelectionText = input(defaultProps$k["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : /* istanbul ignore next */ []));
+        this.showClearSelection = input(defaultProps$l["showClearSelection"], ...(ngDevMode ? [{ debugName: "showClearSelection" }] : /* istanbul ignore next */ []));
+        this.clearSelectionText = input(defaultProps$l["clearSelectionText"], ...(ngDevMode ? [{ debugName: "clearSelectionText" }] : /* istanbul ignore next */ []));
         this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.messageIcon = input(...(ngDevMode ? [undefined, { debugName: "messageIcon" }] : /* istanbul ignore next */ []));
         this.amountChange = output();
@@ -4631,7 +4631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 
 const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
 
-const defaultProps$j = {};
+const defaultProps$k = {};
 class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
@@ -4706,7 +4706,7 @@ const CustomSelectListItemTypeList = ['checkbox', 'radio'];
 
 const SelectedTypeList = ['amount', 'text', 'tag'];
 
-const defaultProps$i = {};
+const defaultProps$j = {};
 class DBDivider {
     constructor() {
         this.cls = cls;
@@ -4788,7 +4788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 const DividerMarginList = ['none', '_'];
 const DividerVariantList = ['horizontal', 'vertical'];
 
-const defaultProps$h = {};
+const defaultProps$i = {};
 class DBDrawer {
     handleClose(event, forceClose) {
         if (!event)
@@ -5196,7 +5196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 }]
         }] });
 
-const defaultProps$g = {};
+const defaultProps$h = {};
 class DBHeader {
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -5425,7 +5425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: [SecondaryActionDirective, { read: TemplateRef }]
             }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$f = {};
+const defaultProps$g = {};
 class DBIcon {
     constructor() {
         this.cls = cls;
@@ -5518,7 +5518,7 @@ const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',
     // TODO: move this to own component
     'search', 'tel', 'text', 'time', 'url', 'week'];
 
-const defaultProps$e = {};
+const defaultProps$f = {};
 class DBLink {
     constructor() {
         this.cls = cls;
@@ -5636,7 +5636,7 @@ const LinkVariantList = ['adaptive', 'brand', 'inline'];
 const LinkSizeList = ['medium', 'small'];
 const LinkContentList = ['external', 'internal'];
 
-const defaultProps$d = {};
+const defaultProps$e = {};
 class DBNavigation {
     constructor() {
         this.cls = cls;
@@ -5720,7 +5720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 }]
         }] });
 
-const defaultProps$c = {};
+const defaultProps$d = {};
 class DBNavigationItem {
     handleNavigationItemClick(event) {
         if (event?.target?.nodeName === "A") {
@@ -5963,7 +5963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: [NavigationContentDirective, { read: TemplateRef }]
             }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$b = {};
+const defaultProps$c = {};
 class DBNotification {
     handleClose(event) {
         if (!event)
@@ -6135,7 +6135,7 @@ const NotificationVariantList = ['docked', 'standalone', 'overlay'];
 const NotificationLinkVariantList = ['block', 'inline'];
 const NotificationAriaLiveList = ['assertive', 'polite', 'off'];
 
-const defaultProps$a = {};
+const defaultProps$b = {};
 class DBPage {
     constructor() {
         this.cls = cls;
@@ -6251,7 +6251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 const PageVariantList = ['auto', 'fixed'];
 const PageDocumentOverflowList = ['hidden', 'auto'];
 
-const defaultProps$9 = {};
+const defaultProps$a = {};
 class DBPopover {
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -6476,7 +6476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$8 = {};
+const defaultProps$9 = {};
 class DBRadio {
     handleInput(event, reset) {
         if (this.input) {
@@ -6725,7 +6725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   > `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$7 = {};
+const defaultProps$8 = {};
 class DBSection {
     constructor() {
         this.cls = cls;
@@ -6802,7 +6802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </section> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$6 = {};
+const defaultProps$7 = {};
 class DBSelect {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -7308,7 +7308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$5 = {};
+const defaultProps$6 = {};
 class DBStack {
     constructor() {
         this.cls = cls;
@@ -7403,7 +7403,7 @@ const StackDirectionList = ['row', 'column'];
 const StackAlignmentList = ['stretch', 'start', 'end', 'center'];
 const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 
-const defaultProps$4 = {};
+const defaultProps$5 = {};
 class DBSwitch {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -7779,100 +7779,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], visualAid: [{ type: i0.Input, args: [{ isSignal: true, alias: "visualAid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$3 = {};
+const defaultProps$4 = {};
 class DBTabItem {
-    getCurrentTabIndex() {
-        return this.tabIndex() !== undefined
-            ? Number(this.tabIndex())
-            : this.internalTabIndex();
+    setSelectedOnChange(event) {
+        event.stopPropagation();
+        this._selected.set(event.target === this._ref().nativeElement);
     }
-    handleClick(event) {
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
-        if (!getBoolean(this.disabled()) && this.click.emit()) {
-            this.click.emit(event);
+    handleNameAttribute() {
+        if (this._ref()?.nativeElement) {
+            const setAttribute = this._ref()?.nativeElement.setAttribute;
+            this._ref().nativeElement.setAttribute = (attribute, value) => {
+                setAttribute.call(this._ref()?.nativeElement, attribute, value);
+                if (attribute === "name") {
+                    this._name.set(value);
+                }
+            };
         }
     }
-    checkTruncation() {
-        if (this._labelRef()?.nativeElement) {
-            const scrollWidth = Math.ceil(this._labelRef()?.nativeElement.scrollWidth);
-            const clientWidth = Math.ceil(this._labelRef()?.nativeElement.clientWidth);
-            const truncated = scrollWidth > clientWidth + 1;
-            if (this.isTruncated() !== truncated) {
-                this.isTruncated.set(truncated);
-                if (!truncated && this._ref()?.nativeElement) {
-                    if (this._ref()?.nativeElement.hasAttribute("data-has-tooltip")) {
-                        this._ref()?.nativeElement.removeAttribute("data-has-tooltip");
-                    }
-                    if (this._ref()?.nativeElement.hasAttribute("aria-describedby")) {
-                        this._ref()?.nativeElement.removeAttribute("aria-describedby");
-                    }
-                }
-            }
-            this.tooltipText.set(truncated
-                ? this.label() ||
-                    this._labelRef()?.nativeElement.innerText ||
-                    this._labelRef()?.nativeElement.textContent ||
-                    ""
-                : "");
+    handleChange(event) {
+        if (this.change) {
+            this.change.emit(event);
         }
+        handleFrameworkEventAngular(this, event, "checked");
     }
-    constructor() {
+    constructor(renderer) {
+        this.renderer = renderer;
         this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
         this.getBoolean = getBoolean;
         this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : /* istanbul ignore next */ []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-        this.tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : /* istanbul ignore next */ []));
-        this.ariaControls = input(...(ngDevMode ? [undefined, { debugName: "ariaControls" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
-        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : /* istanbul ignore next */ []));
-        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : /* istanbul ignore next */ []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
         this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : /* istanbul ignore next */ []));
-        this.click = output();
+        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : /* istanbul ignore next */ []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : /* istanbul ignore next */ []));
+        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : /* istanbul ignore next */ []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : /* istanbul ignore next */ []));
+        this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.change = output();
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
-        this._labelRef = viewChild("_labelRef", ...(ngDevMode ? [{ debugName: "_labelRef" }] : /* istanbul ignore next */ []));
+        this._selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+        this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
-        this.internalActive = signal(false, ...(ngDevMode ? [{ debugName: "internalActive" }] : /* istanbul ignore next */ []));
-        this.internalTabIndex = signal(-1, ...(ngDevMode ? [{ debugName: "internalTabIndex" }] : /* istanbul ignore next */ []));
-        this.isTruncated = signal(false, ...(ngDevMode ? [{ debugName: "isTruncated" }] : /* istanbul ignore next */ []));
-        this.tooltipText = signal("", ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
-        this._resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
-        this._ariaSelectedListener = signal(null, ...(ngDevMode ? [{ debugName: "_ariaSelectedListener" }] : /* istanbul ignore next */ []));
+        this._listenerAdded = signal(false, ...(ngDevMode ? [{ debugName: "_listenerAdded" }] : /* istanbul ignore next */ []));
+        this.boundSetSelectedOnChange = signal(undefined, ...(ngDevMode ? [{ debugName: "boundSetSelectedOnChange" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
-                this.active();
+                this._ref();
+                this.initialized();
+                this.boundSetSelectedOnChange();
                 // ---
-                if (this.active() !== undefined) {
-                    this.internalActive.set(getBoolean(this.active()) || false);
+                if (this._ref()?.nativeElement &&
+                    this.initialized() &&
+                    this.boundSetSelectedOnChange()) {
+                    this.initialized.set(false);
+                    // deselect this tab when another tab in tablist is selected
+                    if (!this._listenerAdded()) {
+                        this._ref()
+                            ?.nativeElement.closest("[role=tablist]")
+                            ?.addEventListener("change", this.boundSetSelectedOnChange());
+                        this._listenerAdded.set(true);
+                    }
+                    // Initialize selected state from either active prop (set by parent) or checked attribute
+                    if (this.active() || this._ref()?.nativeElement.checked) {
+                        this._selected.set(true);
+                        this._ref()?.nativeElement.click();
+                    }
                 }
             }, {
             // Enable writing to signals inside effects
             });
             effect(() => {
-                if (this._ref()?.nativeElement) {
-                    const isDisabled = getBoolean(this.disabled());
-                    const disabledStr = isDisabled ? "true" : "false";
-                    if (this._ref()?.nativeElement?.getAttribute("aria-disabled") !==
-                        disabledStr) {
-                        this._ref()?.nativeElement?.setAttribute("aria-disabled", disabledStr);
-                    }
-                    if (!this.isTruncated()) {
-                        if (this._ref()?.nativeElement.hasAttribute("data-has-tooltip")) {
-                            this._ref()?.nativeElement.removeAttribute("data-has-tooltip");
-                        }
-                        if (this._ref()?.nativeElement.hasAttribute("aria-describedby")) {
-                            this._ref()?.nativeElement.removeAttribute("aria-describedby");
-                        }
-                    }
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.name();
+                // ---
+                if (this.name()) {
+                    this._name.set(this.name());
                 }
             }, {
             // Enable writing to signals inside effects
@@ -7915,159 +7904,103 @@ class DBTabItem {
             }
         }
     }
+    writeValue(value) {
+        this.checked.set(!!value);
+        if (this._ref()?.nativeElement) {
+            this.renderer.setProperty(this._ref()?.nativeElement, 'checked', !!value);
+        }
+    }
+    propagateChange(_) { }
+    registerOnChange(onChange) {
+        this.propagateChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
     ngAfterViewInit() {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-tab-item");
-            this.internalActive.set(getBoolean(this.active()) || false);
-            this.internalTabIndex.set(getBoolean(this.active()) ? 0 : -1);
-            if (typeof window !== "undefined") {
-                const setupObserverAndCheck = () => {
-                    requestAnimationFrame(() => {
-                        this.checkTruncation();
-                        const labelEl = this._labelRef()?.nativeElement;
-                        if (labelEl && !labelEl.dataset.label) {
-                            labelEl.dataset.label =
-                                this.label() || labelEl.innerText || labelEl.textContent || "";
-                        }
-                        if (this._labelRef()?.nativeElement) {
-                            const resizeObserver = new ResizeObserver(() => {
-                                requestAnimationFrame(() => {
-                                    this.checkTruncation();
-                                });
-                            });
-                            resizeObserver.observe(this._labelRef()?.nativeElement);
-                            this._resizeObserver.set(resizeObserver);
-                        }
-                    });
-                };
-                const hasIcon = this.showIcon() && this.icon();
-                if (hasIcon && document.fonts?.ready) {
-                    document.fonts.ready.then(setupObserverAndCheck);
-                }
-                else {
-                    setupObserverAndCheck();
-                }
-            }
-            if (this._ref()?.nativeElement) {
-                const listener = (event) => {
-                    this.internalActive.set(event.detail.selected);
-                    if (this.tabIndex() === undefined) {
-                        if (event.detail.tabIndex !== undefined) {
-                            this.internalTabIndex.set(event.detail.tabIndex);
-                        }
-                        else {
-                            this.internalTabIndex.set(event.detail.selected ? 0 : -1);
-                        }
-                    }
-                };
-                this._ariaSelectedListener.set({
-                    fn: listener,
-                });
-                this._ref()?.nativeElement.addEventListener("aria-selected-changed", listener);
-            }
+            this.boundSetSelectedOnChange.set(this.setSelectedOnChange.bind(this));
+            this.initialized.set(true);
         }
     }
     ngOnDestroy() {
-        this._resizeObserver()?.disconnect();
-        const _listener = this._ariaSelectedListener();
-        if (this._ref()?.nativeElement && _listener) {
-            this._ref()?.nativeElement.removeEventListener("aria-selected-changed", _listener.fn);
+        if (this._listenerAdded() &&
+            this._ref()?.nativeElement &&
+            this.boundSetSelectedOnChange()) {
+            this._ref()
+                ?.nativeElement.closest("[role=tablist]")
+                ?.removeEventListener("change", this.boundSetSelectedOnChange());
+            this._listenerAdded.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "_labelRef", first: true, predicate: ["_labelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
-    type="button"
-    role="tab"
-    title=""
-    #_ref
-    [class]="cls('db-tab-item', className())"
-    [attr.aria-label]="getBoolean(noText()) ? label() : undefined"
-    [attr.aria-selected]="(active() !== undefined ? getBoolean(active()) : internalActive()) ? 'true' : 'false'"
-    [attr.aria-controls]="ariaControls()"
-    [disabled]="getBoolean(disabled()) ? true : undefined"
-    [attr.tabIndex]="getCurrentTabIndex()"
-    [attr.id]="id()"
-    [attr.data-active]="active() !== undefined ? getBoolean(active()) : internalActive()"
-    [attr.data-no-text]="getBoolean(noText()) ? 'true' : undefined"
-    [attr.data-value]="value()"
-    (click)="handleClick($event)"
-  >
-    @if(!noText()){
-    <span
-      class="db-tab-label"
-      title=""
-      #_labelRef
-      [attr.data-icon]="getBoolean(showIconLeading() ?? showIcon()) ? iconLeading() ?? icon() : undefined"
-      [attr.data-icon-trailing]="getBoolean(showIconTrailing()) ? iconTrailing() : undefined"
-      >@if(label()){{{label()}}} @if(!label()){
-      <ng-content> </ng-content>
-      }</span
-    >
-    } @if(getBoolean(noText())){
-    <span
-      class="db-tab-label"
-      aria-hidden="true"
-      [attr.data-icon]="getBoolean(showIconLeading() ?? showIcon()) ? iconLeading() ?? icon() : undefined"
-    ></span>
-    } @if(isTruncated() && tooltipText()){
-    <db-tooltip placement="right">{{tooltipText()}}</db-tooltip>
-    }
-  </button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: DBTabItem,
+                multi: true
+            }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li role="none" [class]="cls('db-tab-item', className())">
+    <label
+      [attr.for]="id() ?? propOverrides()?.id"
+      [attr.data-icon]="iconLeading() ?? icon()"
+      [attr.data-icon-trailing]="iconTrailing()"
+      [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+      [attr.data-no-text]="getBooleanAsString(noText())"
+      ><input
+        type="radio"
+        role="tab"
+        [disabled]="getBoolean(disabled(), 'disabled')"
+        [attr.aria-selected]="_selected()"
+        [attr.checked]="getBoolean(checked(), 'checked')"
+        #_ref
+        [attr.name]="_name()"
+        [attr.id]="id() ?? propOverrides()?.id"
+        (input)="handleChange($event)" />
+      @if(label()){{{label()}}} <ng-content></ng-content
+    ></label>
+  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabItem, decorators: [{
             type: Component,
-            args: [{ selector: "db-tab-item", standalone: true, imports: [CommonModule, DBTooltip], template: `<button
-    type="button"
-    role="tab"
-    title=""
-    #_ref
-    [class]="cls('db-tab-item', className())"
-    [attr.aria-label]="getBoolean(noText()) ? label() : undefined"
-    [attr.aria-selected]="(active() !== undefined ? getBoolean(active()) : internalActive()) ? 'true' : 'false'"
-    [attr.aria-controls]="ariaControls()"
-    [disabled]="getBoolean(disabled()) ? true : undefined"
-    [attr.tabIndex]="getCurrentTabIndex()"
-    [attr.id]="id()"
-    [attr.data-active]="active() !== undefined ? getBoolean(active()) : internalActive()"
-    [attr.data-no-text]="getBoolean(noText()) ? 'true' : undefined"
-    [attr.data-value]="value()"
-    (click)="handleClick($event)"
-  >
-    @if(!noText()){
-    <span
-      class="db-tab-label"
-      title=""
-      #_labelRef
-      [attr.data-icon]="getBoolean(showIconLeading() ?? showIcon()) ? iconLeading() ?? icon() : undefined"
-      [attr.data-icon-trailing]="getBoolean(showIconTrailing()) ? iconTrailing() : undefined"
-      >@if(label()){{{label()}}} @if(!label()){
-      <ng-content> </ng-content>
-      }</span
-    >
-    } @if(getBoolean(noText())){
-    <span
-      class="db-tab-label"
-      aria-hidden="true"
-      [attr.data-icon]="getBoolean(showIconLeading() ?? showIcon()) ? iconLeading() ?? icon() : undefined"
-    ></span>
-    } @if(isTruncated() && tooltipText()){
-    <db-tooltip placement="right">{{tooltipText()}}</db-tooltip>
-    }
-  </button> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], _labelRef: [{ type: i0.ViewChild, args: ["_labelRef", { isSignal: true }] }] } });
+            args: [{ providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: DBTabItem,
+                            multi: true
+                        }], selector: "db-tab-item", standalone: true, imports: [CommonModule], template: `<li role="none" [class]="cls('db-tab-item', className())">
+    <label
+      [attr.for]="id() ?? propOverrides()?.id"
+      [attr.data-icon]="iconLeading() ?? icon()"
+      [attr.data-icon-trailing]="iconTrailing()"
+      [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+      [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+      [attr.data-no-text]="getBooleanAsString(noText())"
+      ><input
+        type="radio"
+        role="tab"
+        [disabled]="getBoolean(disabled(), 'disabled')"
+        [attr.aria-selected]="_selected()"
+        [attr.checked]="getBoolean(checked(), 'checked')"
+        #_ref
+        [attr.name]="_name()"
+        [attr.id]="id() ?? propOverrides()?.id"
+        (input)="handleChange($event)" />
+      @if(label()){{{label()}}} <ng-content></ng-content
+    ></label>
+  </li> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$2 = {};
+const defaultProps$3 = {};
 class DBTabList {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-        this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
-        this._id = signal("tab-list-base-id", ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -8109,46 +8042,39 @@ class DBTabList {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-tab-list");
-            this._id.set(this.id() || "tab-list-" + uuid());
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
-    role="tablist"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="_id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tab-list', className())"
-    [attr.aria-orientation]="orientation() || 'horizontal'"
-    [attr.aria-label]="ariaLabelledby() ? undefined : ariaLabel()"
-    [attr.aria-labelledby]="ariaLabelledby()"
   >
-    <ng-content></ng-content>
+    <ul role="tablist">
+      <ng-content></ng-content>
+    </ul>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabList, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
-    role="tablist"
     #_ref
-    [attr.id]="_id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tab-list', className())"
-    [attr.aria-orientation]="orientation() || 'horizontal'"
-    [attr.aria-label]="ariaLabelledby() ? undefined : ariaLabel()"
-    [attr.aria-labelledby]="ariaLabelledby()"
   >
-    <ng-content></ng-content>
+    <ul role="tablist">
+      <ng-content></ng-content>
+    </ul>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
+const defaultProps$2 = {};
 class DBTabPanel {
     constructor() {
         this.cls = cls;
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
-        this.hidden = input(...(ngDevMode ? [undefined, { debugName: "hidden" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
         this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
     }
@@ -8195,336 +8121,144 @@ class DBTabPanel {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
     role="tabpanel"
     #_ref
     [class]="cls('db-tab-panel', className())"
     [attr.id]="id() ?? propOverrides()?.id"
-    [attr.tabIndex]="hidden() ? -1 : 0"
-    [attr.hidden]="hidden()"
-    [attr.aria-label]="ariaLabel()"
-    [attr.aria-labelledby]="ariaLabel() ? undefined : ariaLabelledby()"
   >
     @if(content()){{{content()}}} <ng-content></ng-content>
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  </section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabPanel, decorators: [{
             type: Component,
-            args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<div
+            args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `<section
     role="tabpanel"
     #_ref
     [class]="cls('db-tab-panel', className())"
     [attr.id]="id() ?? propOverrides()?.id"
-    [attr.tabIndex]="hidden() ? -1 : 0"
-    [attr.hidden]="hidden()"
-    [attr.aria-label]="ariaLabel()"
-    [attr.aria-labelledby]="ariaLabel() ? undefined : ariaLabelledby()"
   >
     @if(content()){{{content()}}} <ng-content></ng-content>
-  </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+  </section> `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$1 = {
-    tabItemWidth: "auto",
-    tabItemAlignment: "start",
-    scrollStartLabel: "Scroll start",
-    scrollEndLabel: "Scroll end",
-};
+const defaultProps$1 = {};
 class DBTabs {
-    _id() {
-        return this.id() || this._generatedId();
-    }
-    _name() {
-        return "tabs-" + (this.name() || this._generatedName());
-    }
-    getTabId(index) {
-        return `${this._name()}-tab-${index}`;
-    }
-    getPanelId(index) {
-        return `${this._name()}-tab-panel-${index}`;
-    }
-    activateTab(index) {
-        // Prevent activating a disabled tab
-        if (this._ref()?.nativeElement) {
-            const tabList = this._ref()?.nativeElement.querySelector('[role="tablist"]');
-            if (tabList) {
-                const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
-                const tab = tabs[index];
-                if (tab?.disabled || tab?.getAttribute("aria-disabled") === "true") {
-                    return;
-                }
-            }
-        }
-        if (this.activeTabIndex() !== index) {
-            this.activeTabIndex.set(index);
-            if (this.indexChange) {
-                this.indexChange.emit(index);
-            }
-            // Emit value of the newly active tab item if value props are set
-            if (this.valueChange) {
-                const tabList = this._ref()?.nativeElement?.querySelector('[role="tablist"]');
-                const tabs = tabList
-                    ? Array.from(tabList.querySelectorAll('[role="tab"]'))
-                    : [];
-                const value = tabs[index]?.dataset?.["value"];
-                this.valueChange.emit(value);
-            }
-            this.initTabs(index);
-        }
-    }
-    handleClick(event) {
-        // In props-mode (props.tabs), tab activation is handled via onClick on each DBTabItem directly.
-        // In slot-mode (!props.tabs), clicks bubble up and are handled here via DOM traversal.
-        if (this.tabs()) {
-            return;
-        }
-        const target = event.target;
-        const button = target.closest('[role="tab"]');
-        if (!button || !this._ref()?.nativeElement)
-            return;
-        const tabList = this._ref()?.nativeElement?.querySelector('[role="tablist"]');
-        if (!tabList)
-            return;
-        const buttons = Array.from(tabList.querySelectorAll('[role="tab"]'));
-        const index = buttons.indexOf(button);
-        if (index !== -1) {
-            event.preventDefault();
-            this.activateTab(index);
-        }
-    }
-    handleKeyDown(event) {
-        if (!this._ref()?.nativeElement)
-            return;
-        const key = event.key;
-        const navigationKeys = [
-            "ArrowRight",
-            "ArrowDown",
-            "ArrowLeft",
-            "ArrowUp",
-            "Home",
-            "End",
-            "Enter",
-            " ",
-        ];
-        if (!navigationKeys.includes(key)) {
-            return;
-        }
-        const tabList = this._ref()?.nativeElement.querySelector('[role="tablist"]');
-        if (!tabList)
-            return;
-        const buttons = Array.from(tabList.querySelectorAll('[role="tab"]'));
-        // find currently focused element within the buttons list
-        let currentIndex = -1;
-        if (typeof document !== "undefined") {
-            // Traverse Shadow DOM boundaries to find the truly focused element.
-            // document.activeElement only returns the shadow host when focus is inside a Shadow DOM,
-            // so we must walk through each shadowRoot to reach the actual focused element.
-            let activeEl = document.activeElement;
-            while (activeEl?.shadowRoot?.activeElement) {
-                activeEl = activeEl.shadowRoot.activeElement;
-            }
-            if (activeEl) {
-                const focusedButton = activeEl.closest('[role="tab"]');
-                if (focusedButton) {
-                    currentIndex = buttons.indexOf(focusedButton);
-                }
-            }
-        }
-        if (currentIndex === -1) {
-            currentIndex = this.activeTabIndex();
-        }
-        if (buttons.length > 0) {
-            // handle activation (enter / space) -> change panel
-            if (key === "Enter" || key === " ") {
-                event.preventDefault();
-                this.activateTab(currentIndex);
-                return;
-            }
-            // handle navigation (arrows) -> moves focus
-            let nextIndex;
-            const length = buttons.length;
-            if (key === "ArrowRight" || key === "ArrowDown") {
-                nextIndex = (currentIndex + 1) % length;
-            }
-            else if (key === "ArrowLeft" || key === "ArrowUp") {
-                nextIndex = (currentIndex - 1 + length) % length;
-            }
-            else if (key === "Home") {
-                nextIndex = 0;
-            }
-            else if (key === "End") {
-                nextIndex = length - 1;
-            }
-            if (nextIndex !== undefined) {
-                event.preventDefault();
-                // Skip disabled tabs when navigating with arrow keys
-                const isForward = key === "ArrowRight" || key === "ArrowDown";
-                const maxAttempts = length;
-                for (let i = 0; i < maxAttempts; i++) {
-                    const candidate = buttons[nextIndex];
-                    if (!candidate?.disabled &&
-                        candidate?.getAttribute("aria-disabled") !== "true") {
-                        break;
-                    }
-                    if (isForward) {
-                        nextIndex = (nextIndex + 1) % length;
-                    }
-                    else {
-                        nextIndex = (nextIndex - 1 + length) % length;
-                    }
-                }
-                // do not activateTab here for manual activation, just move the focus
-                const nextButton = buttons[nextIndex];
-                if (nextButton &&
-                    !nextButton.disabled &&
-                    nextButton.getAttribute("aria-disabled") !== "true") {
-                    nextButton.focus();
-                }
-            }
-        }
-    }
-    isIndexActive(index) {
-        return this.activeTabIndex() === Number(index);
-    }
-    getTabItemTabIndex(index) {
-        const i = Number(index);
-        // only the active tab should be reachable via Tab key
-        return this.activeTabIndex() === i ||
-            (this.activeTabIndex() === -1 && i === 0)
-            ? 0
-            : -1;
-    }
-    _updateCachedTabs() {
+    convertTabs() {
         try {
             if (typeof this.tabs() === "string") {
-                this._cachedTabs.set(JSON.parse(this.tabs()));
-            }
-            else if (this.tabs()) {
-                this._cachedTabs.set(this.tabs());
-            }
-            else {
-                this._cachedTabs.set([]);
+                return JSON.parse(this.tabs());
             }
+            return this.tabs();
         }
         catch (error) {
             console.error(error);
-            this._cachedTabs.set([]);
         }
-    }
-    _getScrollContainer() {
-        return (this._ref()?.nativeElement?.querySelector('[role="tablist"]') ?? null);
-    }
-    _isRtl() {
-        const container = this._getScrollContainer();
-        return (!!container &&
-            typeof getComputedStyle !== "undefined" &&
-            getComputedStyle(container).direction === "rtl");
+        return [];
     }
     evaluateScrollButtons(tList) {
         const needsScroll = tList.scrollWidth > tList.clientWidth;
-        if (!needsScroll) {
-            this.showScrollStart.set(false);
-            this.showScrollEnd.set(false);
-            return;
-        }
-        const scrollPos = Math.abs(tList.scrollLeft);
-        const maxScroll = tList.scrollWidth - tList.clientWidth;
-        const tolerance = 2;
-        // scrollPos=0 means "at inline-start" in both LTR and RTL
-        this.showScrollStart.set(scrollPos > tolerance);
-        this.showScrollEnd.set(scrollPos < maxScroll - tolerance);
+        this.showScrollLeft.set(needsScroll && tList.scrollLeft > 1);
+        this.showScrollRight.set(needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth);
     }
-    scroll(toStart) {
-        const container = this._getScrollContainer();
-        if (!container) {
-            return;
-        }
-        let step = Number(this.arrowScrollDistance()) || 120;
-        const isLeft = !!toStart;
-        const isRtl = this._isRtl();
-        // Map logical direction (start/end) to physical direction.
-        // In LTR: toStart=true → scroll left (negative), toEnd → scroll right (positive).
-        // In RTL: directions are inverted physically.
-        if (isLeft !== isRtl) {
+    scroll(left) {
+        let step = Number(this.arrowScrollDistance()) || 100;
+        if (left) {
             step *= -1;
         }
-        container.scrollBy({
+        this.scrollContainer()?.scrollBy({
+            top: 0,
             left: step,
             behavior: "smooth",
         });
     }
     initTabList() {
         if (this._ref()?.nativeElement) {
-            const container = this._ref()?.nativeElement.querySelector('[role="tablist"]');
-            if (container) {
-                if (!container.getAttribute("aria-orientation")) {
-                    container.setAttribute("aria-orientation", this.orientation() ?? "horizontal");
-                }
-                if (this.behavior() === "arrows") {
-                    this.evaluateScrollButtons(container);
-                    const _listener = this._scrollListener();
-                    if (_listener && container) {
-                        container.removeEventListener("scroll", _listener.fn);
-                        this._scrollListener.set(null);
-                    }
-                    const onScroll = () => this.evaluateScrollButtons(container);
-                    this._scrollListener.set({
-                        fn: onScroll,
-                    });
-                    container.addEventListener("scroll", onScroll);
-                    if (!this._resizeObserver()) {
-                        const observer = new ResizeObserver(() => {
+            const tabList = this._ref()?.nativeElement.querySelector(".db-tab-list");
+            if (tabList) {
+                const container = tabList.querySelector('[role="tablist"]');
+                if (container) {
+                    container.setAttribute("aria-orientation", this.orientation() || "horizontal");
+                    if (this.behavior() === "arrows") {
+                        this.scrollContainer.set(container);
+                        this.evaluateScrollButtons(container);
+                        container.addEventListener("scroll", () => {
                             this.evaluateScrollButtons(container);
                         });
-                        observer.observe(container);
-                        this._resizeObserver.set(observer);
+                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
+                        if (!this._resizeObserver()) {
+                            const observer = new ResizeObserver(() => {
+                                this.evaluateScrollButtons(container);
+                            });
+                            observer.observe(container);
+                            this._resizeObserver.set(observer);
+                        }
                     }
                 }
-                if (this.name() && !container.getAttribute("aria-label")) {
-                    container.setAttribute("aria-label", this.name() ?? "");
-                }
             }
         }
     }
-    initTabs(activeIndex) {
-        const currentIndex = activeIndex !== undefined ? activeIndex : this.activeTabIndex();
+    initTabs(init) {
         if (this._ref()?.nativeElement) {
-            const tabListEl = this._ref()?.nativeElement.querySelector('[role="tablist"]');
-            const panels = Array.from(this._ref()?.nativeElement?.querySelectorAll('[role="tabpanel"]') ?? []).filter((panel) => panel.closest(".db-tabs") === this._ref()?.nativeElement);
-            if (!tabListEl)
-                return;
-            const buttons = Array.from(tabListEl.querySelectorAll('[role="tab"]'));
-            buttons.forEach((button, index) => {
-                const isSelected = currentIndex === index;
-                const panel = panels[index];
-                const tabId = button.id || this.getTabId(index);
-                const panelId = panel?.id || this.getPanelId(index);
-                if (!button.id) {
-                    button.id = tabId;
-                }
-                if (!button.getAttribute("aria-controls")) {
-                    button.setAttribute("aria-controls", panelId);
-                }
-                button.dispatchEvent(new CustomEvent("aria-selected-changed", {
-                    detail: {
-                        selected: isSelected,
-                        tabIndex: currentIndex === index || (currentIndex === -1 && index === 0)
-                            ? 0
-                            : -1,
-                    },
-                }));
-                if (panel) {
-                    if (!panel.id) {
-                        panel.id = panelId;
+            const tabItems = Array.from(this._ref()?.nativeElement.getElementsByClassName("db-tab-item"));
+            const tabPanels = Array.from(this._ref()?.nativeElement.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
+            for (const tabItem of tabItems) {
+                const index = tabItems.indexOf(tabItem);
+                const label = tabItem.querySelector("label");
+                const input = tabItem.querySelector("input");
+                if (input && label) {
+                    if (!input.id) {
+                        const tabId = `${this._name()}-tab-${index}`;
+                        label.setAttribute("for", tabId);
+                        input.id = tabId;
+                        input.setAttribute("name", this._name());
+                        if (tabPanels.length > index) {
+                            input.setAttribute("aria-controls", `${this._name()}-tab-panel-${index}`);
+                        }
                     }
-                    if (!panel.getAttribute("aria-label") &&
-                        !panel.getAttribute("aria-labelledby")) {
-                        panel.setAttribute("aria-labelledby", tabId);
+                    if (init) {
+                        // Auto select
+                        const autoSelect = !this.initialSelectedMode() ||
+                            this.initialSelectedMode() === "auto";
+                        const shouldAutoSelect = (this.initialSelectedIndex() == null && index === 0) ||
+                            Number(this.initialSelectedIndex()) === index;
+                        if (autoSelect && shouldAutoSelect) {
+                            input.click();
+                        }
                     }
-                    // toggle visibility
-                    panel.hidden = !isSelected;
                 }
-            });
+            }
+            for (const panel of tabPanels) {
+                if (panel.id)
+                    continue;
+                const index = tabPanels.indexOf(panel);
+                panel.id = `${this._name()}-tab-panel-${index}`;
+                panel.setAttribute("aria-labelledby", `${this._name()}-tab-${index}`);
+            }
+        }
+    }
+    handleChange(event) {
+        event.stopPropagation();
+        if (event.target) {
+            const target = event.target;
+            const parent = target.parentElement;
+            if (parent &&
+                parent.parentElement &&
+                parent.parentElement?.nodeName === "LI") {
+                const tabItem = parent.parentElement.parentElement;
+                if (tabItem) {
+                    const list = tabItem.parentElement;
+                    if (list) {
+                        const tabIndex = Array.from(list.children).indexOf(tabItem);
+                        if (this.indexChange) {
+                            this.indexChange.emit(tabIndex);
+                        }
+                        if (this.tabSelect) {
+                            this.tabSelect.emit(event);
+                        }
+                    }
+                }
+            }
         }
     }
     trackByTab0(index, tab) {
@@ -8535,53 +8269,53 @@ class DBTabs {
     }
     constructor() {
         this.cls = cls;
-        this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : /* istanbul ignore next */ []));
-        this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : /* istanbul ignore next */ []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
         this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : /* istanbul ignore next */ []));
-        this.activeIndex = input(...(ngDevMode ? [undefined, { debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.arrowScrollDistance = input(...(ngDevMode ? [undefined, { debugName: "arrowScrollDistance" }] : /* istanbul ignore next */ []));
         this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : /* istanbul ignore next */ []));
+        this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : /* istanbul ignore next */ []));
+        this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : /* istanbul ignore next */ []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-        this.tabItemAlignment = input(defaultProps$1["tabItemAlignment"], ...(ngDevMode ? [{ debugName: "tabItemAlignment" }] : /* istanbul ignore next */ []));
-        this.tabItemWidth = input(defaultProps$1["tabItemWidth"], ...(ngDevMode ? [{ debugName: "tabItemWidth" }] : /* istanbul ignore next */ []));
-        this.scrollStartLabel = input(defaultProps$1["scrollStartLabel"], ...(ngDevMode ? [{ debugName: "scrollStartLabel" }] : /* istanbul ignore next */ []));
-        this.scrollEndLabel = input(defaultProps$1["scrollEndLabel"], ...(ngDevMode ? [{ debugName: "scrollEndLabel" }] : /* istanbul ignore next */ []));
+        this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
         this.indexChange = output();
-        this.valueChange = output();
+        this.tabSelect = output();
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
-        this._generatedId = signal("tabs-" + uuid(), ...(ngDevMode ? [{ debugName: "_generatedId" }] : /* istanbul ignore next */ []));
-        this._generatedName = signal(uuid(), ...(ngDevMode ? [{ debugName: "_generatedName" }] : /* istanbul ignore next */ []));
-        this.activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
+        this._name = signal("", ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
-        this.showScrollStart = signal(false, ...(ngDevMode ? [{ debugName: "showScrollStart" }] : /* istanbul ignore next */ []));
-        this.showScrollEnd = signal(false, ...(ngDevMode ? [{ debugName: "showScrollEnd" }] : /* istanbul ignore next */ []));
-        this._resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
-        this._observer = signal(null, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
-        this._pendingRafId = signal(null, ...(ngDevMode ? [{ debugName: "_pendingRafId" }] : /* istanbul ignore next */ []));
-        this._scrollListener = signal(null, ...(ngDevMode ? [{ debugName: "_scrollListener" }] : /* istanbul ignore next */ []));
-        this._cachedTabs = signal([], ...(ngDevMode ? [{ debugName: "_cachedTabs" }] : /* istanbul ignore next */ []));
+        this.showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : /* istanbul ignore next */ []));
+        this.showScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : /* istanbul ignore next */ []));
+        this.scrollContainer = signal(null, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
+        this._resizeObserver = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
-                this.tabs();
-                // ---
-                this._updateCachedTabs();
-            }, {
-            // Enable writing to signals inside effects
-            });
-            effect(() => {
-                // --- Mitosis: Workaround to make sure the effect() is triggered ---
-                this.activeIndex();
+                this._ref();
+                this.initialized();
                 // ---
-                if (this.activeIndex() !== undefined) {
-                    const newIndex = Number(this.activeIndex());
-                    if (!isNaN(newIndex) && newIndex !== this.activeTabIndex()) {
-                        this.activateTab(newIndex);
+                if (this._ref()?.nativeElement && this.initialized()) {
+                    this.initTabList();
+                    this.initTabs(true);
+                    const tabList = this._ref()?.nativeElement.querySelector(".db-tab-list");
+                    if (tabList) {
+                        const observer = new MutationObserver((mutations) => {
+                            mutations.forEach((mutation) => {
+                                if (mutation.removedNodes.length ||
+                                    mutation.addedNodes.length) {
+                                    this.initTabList();
+                                    this.initTabs();
+                                }
+                            });
+                        });
+                        observer.observe(tabList, {
+                            childList: true,
+                            subtree: true,
+                        });
                     }
+                    this.initialized.set(false);
                 }
             }, {
             // Enable writing to signals inside effects
@@ -8628,209 +8362,125 @@ class DBTabs {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-tabs");
-            // 1. Calculate final start index synchronously to avoid race conditions
-            let startIndex = 0;
-            if (this.initialSelectedIndex() !== undefined) {
-                const parsedIndex = Number(this.initialSelectedIndex());
-                startIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
-            }
-            else if (this.initialSelectedMode() === "manually") {
-                startIndex = -1;
-            }
-            // 2. Support deep linking: URL hash takes precedence over initial index
-            if (typeof window !== "undefined" && window.location.hash) {
-                const hashId = window.location.hash.substring(1);
-                const name = this.name() ? "tabs-" + this.name() : this._name();
-                const prefix = `${name}-tab-`;
-                if (hashId.startsWith(prefix)) {
-                    const indexStr = hashId.replace(prefix, "");
-                    const index = parseInt(indexStr, 10);
-                    if (!isNaN(index)) {
-                        startIndex = index;
-                    }
-                }
-            }
-            // 3. Set initial state synchronously
-            this.activeTabIndex.set(startIndex);
+            this._name.set(`tabs-${this.name() || uuid()}`);
             this.initialized.set(true);
-            this._updateCachedTabs();
-            // 4. Trigger single initial DOM update after paint
-            if (typeof window !== "undefined") {
-                requestAnimationFrame(() => {
-                    this.initTabList();
-                    this.initTabs(startIndex);
-                });
-            }
-            if (this._ref()?.nativeElement) {
-                const tabListEl = this._ref()?.nativeElement.querySelector('[role="tablist"]');
-                if (tabListEl) {
-                    const observer = new MutationObserver(() => {
-                        const rafId = this._pendingRafId();
-                        if (rafId !== null)
-                            cancelAnimationFrame(rafId);
-                        this._pendingRafId.set(requestAnimationFrame(() => {
-                            this._pendingRafId.set(null);
-                            this.initTabList();
-                            this.initTabs(this.activeTabIndex());
-                        }));
-                    });
-                    // Observe only the tablist (not panel content) to avoid unnecessary
-                    // re-evaluations when user content inside panels changes.
-                    // childList only – attribute changes (set by initTabs) are not observed, preventing infinite loops.
-                    observer.observe(tabListEl, {
-                        childList: true,
-                        subtree: true,
-                    });
-                    this._observer.set(observer);
-                }
-            }
         }
     }
     ngOnDestroy() {
-        const rafId = this._pendingRafId();
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            this._pendingRafId.set(null);
-        }
-        const _listener = this._scrollListener();
-        const _container = this._getScrollContainer();
-        if (_listener && _container) {
-            _container.removeEventListener("scroll", _listener.fn);
-        }
         this._resizeObserver()?.disconnect();
-        this._resizeObserver.set(null);
-        this._observer()?.disconnect();
-        this._observer.set(null);
+        this._resizeObserver.set(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabItemAlignment: { classPropertyName: "tabItemAlignment", publicName: "tabItemAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabItemWidth: { classPropertyName: "tabItemWidth", publicName: "tabItemWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id() ?? propOverrides()?.id ?? _id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
     [attr.data-orientation]="orientation()"
     [attr.data-scroll-behavior]="behavior()"
-    [attr.data-tab-item-alignment]="tabItemAlignment()"
-    [attr.data-tab-item-width]="tabItemWidth()"
-    (click)="handleClick($event)"
-    (keydown)="handleKeyDown($event)"
+    [attr.data-alignment]="alignment() ?? 'start'"
+    [attr.data-width]="width() ?? 'auto'"
+    (input)="handleChange($event)"
+    (change)="handleChange($event)"
   >
-    @if(showScrollStart()){
+    @if(showScrollLeft()){
     <db-button
       variant="ghost"
       icon="chevron_left"
       type="button"
-      className="tabs-scroll-start"
+      className="tabs-scroll-left"
       [noText]="true"
       (click)="scroll(true)"
-      >{{scrollStartLabel()}}</db-button
     >
+      Scroll left
+    </db-button>
     } @if(tabs()){
-    <db-tab-list [orientation]="orientation()" [ariaLabel]="name()">
-      @for (tab of _cachedTabs();track trackByTab0(index, tab);let index =
+    <db-tab-list>
+      @for (tab of convertTabs();track trackByTab0(index, tab);let index =
       $index) {
       <db-tab-item
-        [id]="getTabId(index)"
-        [ariaControls]="getPanelId(index)"
-        [active]="isIndexActive(index)"
-        [tabIndex]="getTabItemTabIndex(index)"
+        [active]="tab.active"
         [label]="tab.label"
         [iconTrailing]="tab.iconTrailing"
         [icon]="tab.icon"
         [noText]="tab.noText"
-        (click)="activateTab(index)"
       ></db-tab-item>
       }
     </db-tab-list>
 
-    @for (tab of _cachedTabs();track trackByTab1(index, tab);let index = $index)
+    @for (tab of convertTabs();track trackByTab1(index, tab);let index = $index)
     {
-    <db-tab-panel
-      [id]="getPanelId(index)"
-      [ariaLabelledby]="getTabId(index)"
-      [content]="tab.content"
-      [hidden]="!isIndexActive(index)"
-      >{{tab.children}}</db-tab-panel
-    >
-    } } @if(!tabs()){
-    <ng-content></ng-content>
-    } @if(showScrollEnd()){
+    <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
+    } } @if(showScrollRight()){
     <db-button
       variant="ghost"
       icon="chevron_right"
       type="button"
-      className="tabs-scroll-end"
+      className="tabs-scroll-right"
       [noText]="true"
-      (click)="scroll(false)"
-      >{{scrollEndLabel()}}</db-button
+      (click)="scroll()"
     >
+      Scroll right
+    </db-button>
     }
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "className", "orientation", "ariaLabelledby", "ariaLabel"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "label", "showIcon", "icon", "tabIndex", "disabled", "className", "noText", "ariaControls", "id", "value", "showIconLeading", "iconLeading", "showIconTrailing", "iconTrailing"], outputs: ["disabledChange", "click"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "propOverrides", "hidden", "ariaLabel", "ariaLabelledby", "content"] }] }); }
+    <ng-content></ng-content>
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "propOverrides", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "propOverrides", "content"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DBTabs, decorators: [{
             type: Component,
             args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
     #_ref
-    [attr.id]="id() ?? propOverrides()?.id ?? _id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
     [attr.data-orientation]="orientation()"
     [attr.data-scroll-behavior]="behavior()"
-    [attr.data-tab-item-alignment]="tabItemAlignment()"
-    [attr.data-tab-item-width]="tabItemWidth()"
-    (click)="handleClick($event)"
-    (keydown)="handleKeyDown($event)"
+    [attr.data-alignment]="alignment() ?? 'start'"
+    [attr.data-width]="width() ?? 'auto'"
+    (input)="handleChange($event)"
+    (change)="handleChange($event)"
   >
-    @if(showScrollStart()){
+    @if(showScrollLeft()){
     <db-button
       variant="ghost"
       icon="chevron_left"
       type="button"
-      className="tabs-scroll-start"
+      className="tabs-scroll-left"
       [noText]="true"
       (click)="scroll(true)"
-      >{{scrollStartLabel()}}</db-button
     >
+      Scroll left
+    </db-button>
     } @if(tabs()){
-    <db-tab-list [orientation]="orientation()" [ariaLabel]="name()">
-      @for (tab of _cachedTabs();track trackByTab0(index, tab);let index =
+    <db-tab-list>
+      @for (tab of convertTabs();track trackByTab0(index, tab);let index =
       $index) {
       <db-tab-item
-        [id]="getTabId(index)"
-        [ariaControls]="getPanelId(index)"
-        [active]="isIndexActive(index)"
-        [tabIndex]="getTabItemTabIndex(index)"
+        [active]="tab.active"
         [label]="tab.label"
         [iconTrailing]="tab.iconTrailing"
         [icon]="tab.icon"
         [noText]="tab.noText"
-        (click)="activateTab(index)"
       ></db-tab-item>
       }
     </db-tab-list>
 
-    @for (tab of _cachedTabs();track trackByTab1(index, tab);let index = $index)
+    @for (tab of convertTabs();track trackByTab1(index, tab);let index = $index)
     {
-    <db-tab-panel
-      [id]="getPanelId(index)"
-      [ariaLabelledby]="getTabId(index)"
-      [content]="tab.content"
-      [hidden]="!isIndexActive(index)"
-      >{{tab.children}}</db-tab-panel
-    >
-    } } @if(!tabs()){
-    <ng-content></ng-content>
-    } @if(showScrollEnd()){
+    <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
+    } } @if(showScrollRight()){
     <db-button
       variant="ghost"
       icon="chevron_right"
       type="button"
-      className="tabs-scroll-end"
+      className="tabs-scroll-right"
       [noText]="true"
-      (click)="scroll(false)"
-      >{{scrollEndLabel()}}</db-button
+      (click)="scroll()"
     >
+      Scroll right
+    </db-button>
     }
+    <ng-content></ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabItemAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabItemAlignment", required: false }] }], tabItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabItemWidth", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const TabsBehaviorList = ['scrollbar', 'arrows'];
 const TabsInitialSelectedModeList = ['auto', 'manually'];
@@ -9267,11 +8917,11 @@ const LabelVariantHorizontalList = ['leading', 'trailing'];
 const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
 const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
-const TabItemAlignmentList = ['start', 'center', 'end'];
+const AlignmentList = ['start', 'center'];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionBehaviorList, AccordionVariantList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabItemAlignmentList, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
+export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map