@breadstone/mosaik-elements-angular 0.0.147 → 0.0.148

package/fesm2022/mosaik-elements-angular.mjs

@@ -324,7 +324,7 @@ const ABSOLUTE_DEFAULT_PROPS = new InjectionToken('MOSAIK_ABSOLUTE_DEFAULT_PROPS
 /**
  * @public
  *
- * @slot  - The default slot for placing child elements.
+ * @slot  - The default slot for placing absolutely positioned child elements.
  */
 let AbsoluteComponent = class AbsoluteComponent {
     _element;
@@ -485,7 +485,7 @@ const ANCHOR_DEFAULT_PROPS = new InjectionToken('MOSAIK_ANCHOR_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot label - The slot for the label or text content of the Anchor.
+ * @slot label - The text content or elements to display as the link text
  */
 let AnchorComponent = class AnchorComponent {
     _element;
@@ -893,12 +893,12 @@ const APP_DEFAULT_PROPS = new InjectionToken('MOSAIK_APP_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot nav - The slot for navigation elements.
- * @slot menu - The slot for menu items.
- * @slot logo - The slot for the application logo or branding.
- * @slot actions - The slot for action buttons or icons.
- * @slot content - The main content area of the App.
- * @slot footer - The footer area of the App, typically used for additional information or links.
+ * @slot nav - Navigation drawer content area for primary navigation links and menu items
+ * @slot menu - Menu area for contextual actions and secondary navigation
+ * @slot logo - Application branding area for logos, titles, and identity elements
+ * @slot actions - Action buttons area for global application actions and controls
+ * @slot content - Main content area for primary application content and views
+ * @slot footer - Footer area for secondary information, links, and application metadata
  */
 let AppComponent = class AppComponent {
     _element;
@@ -2155,8 +2155,8 @@ const AVATAR_DEFAULT_PROPS = new InjectionToken('MOSAIK_AVATAR_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default slot for avatar text, commonly a name or initials.
- * @slot badge - Used to provide a badge, such as a status badge.
+ * @slot  - Default content for avatar display (overrides automatic text/icon generation)
+ * @slot badge - Status indicator or notification badge positioned on the avatar
  */
 let AvatarComponent = class AvatarComponent {
     _element;
@@ -4646,8 +4646,8 @@ const BUSY_STATE_DEFAULT_PROPS = new InjectionToken('MOSAIK_BUSY_STATE_DEFAULT_P
 /**
  * @public
  *
- * @slot  - The default slot for placing additional content or elements related to the busy state.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ * @slot  - Default content area for additional loading state information
+ * @slot actions - Action buttons or controls available during loading (e.g., cancel operation)
  */
 let BusyStateComponent = class BusyStateComponent {
     _element;
@@ -5017,9 +5017,9 @@ const BUTTON_DEFAULT_PROPS = new InjectionToken('MOSAIK_BUTTON_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot label - The label slot.
- * @slot icon - The icon slot.
- * @slot overlay - The overlay slot (useful for badge).
+ * @slot label - The text content or label displayed on the button
+ * @slot icon - The icon displayed alongside or instead of the label
+ * @slot overlay - Additional overlay content such as badges or indicators
  */
 let ButtonComponent = class ButtonComponent {
     _element;
@@ -5659,6 +5659,46 @@ let CalendarItemComponent = class CalendarItemComponent {
             this._element.markers = value;
         });
     }
+    get isRangeStart() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.isRangeStart;
+    }
+    set isRangeStart(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.isRangeStart = value;
+        });
+    }
+    get isRangeMiddle() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.isRangeMiddle;
+    }
+    set isRangeMiddle(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.isRangeMiddle = value;
+        });
+    }
+    get isRangeEnd() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.isRangeEnd;
+    }
+    set isRangeEnd(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.isRangeEnd = value;
+        });
+    }
+    get isRangePreview() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.isRangePreview;
+    }
+    set isRangePreview(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.isRangePreview = value;
+        });
+    }
     get text() {
         // @ts-ignore - temporary fix for the type error
         return this._element.text;
@@ -5770,12 +5810,12 @@ let CalendarItemComponent = class CalendarItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CalendarItemComponent, isStandalone: true, selector: "mosaik-calendar-item", inputs: { isSelected: "isSelected", isBlackout: "isBlackout", isSpecial: "isSpecial", isToday: "isToday", isWeekend: "isWeekend", isAdjacent: "isAdjacent", markers: "markers", text: "text", themeName: "themeName", appearance: "appearance", variant: "variant", disabled: "disabled", value: "value", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CalendarItemComponent, isStandalone: true, selector: "mosaik-calendar-item", inputs: { isSelected: "isSelected", isBlackout: "isBlackout", isSpecial: "isSpecial", isToday: "isToday", isWeekend: "isWeekend", isAdjacent: "isAdjacent", markers: "markers", isRangeStart: "isRangeStart", isRangeMiddle: "isRangeMiddle", isRangeEnd: "isRangeEnd", isRangePreview: "isRangePreview", text: "text", themeName: "themeName", appearance: "appearance", variant: "variant", disabled: "disabled", value: "value", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CalendarItemComponent = __decorate$3h([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-calendar-item', CalendarItemElement),
-        inputs: ['isSelected', 'isBlackout', 'isSpecial', 'isToday', 'isWeekend', 'isAdjacent', 'markers', 'text', 'themeName', 'appearance', 'variant', 'disabled', 'value', 'isFocused', 'dir', 'lang'],
+        inputs: ['isSelected', 'isBlackout', 'isSpecial', 'isToday', 'isWeekend', 'isAdjacent', 'markers', 'isRangeStart', 'isRangeMiddle', 'isRangeEnd', 'isRangePreview', 'text', 'themeName', 'appearance', 'variant', 'disabled', 'value', 'isFocused', 'dir', 'lang'],
         methods: ['hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$3h("design:paramtypes", [])
@@ -5787,7 +5827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['isSelected', 'isBlackout', 'isSpecial', 'isToday', 'isWeekend', 'isAdjacent', 'markers', 'text', 'themeName', 'appearance', 'variant', 'disabled', 'value', 'isFocused', 'dir', 'lang'],
+                    inputs: ['isSelected', 'isBlackout', 'isSpecial', 'isToday', 'isWeekend', 'isAdjacent', 'markers', 'isRangeStart', 'isRangeMiddle', 'isRangeEnd', 'isRangePreview', 'text', 'themeName', 'appearance', 'variant', 'disabled', 'value', 'isFocused', 'dir', 'lang'],
                     outputs: ['connected', 'disconnected', 'changed']
                 }]
         }], ctorParameters: () => [], propDecorators: { isSelected: [{
@@ -5804,6 +5844,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], markers: [{
                 type: Input
+            }], isRangeStart: [{
+                type: Input
+            }], isRangeMiddle: [{
+                type: Input
+            }], isRangeEnd: [{
+                type: Input
+            }], isRangePreview: [{
+                type: Input
             }], text: [{
                 type: Input
             }], themeName: [{
@@ -6049,6 +6097,16 @@ let CalendarComponent = class CalendarComponent {
         this._element.on('changed', (e) => this.onEmit(this._changed, e));
         applyDefaults(this._element, inject(CALENDAR_DEFAULT_PROPS, { optional: true }) ?? {});
     }
+    get sheets() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.sheets;
+    }
+    set sheets(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.sheets = value;
+        });
+    }
     get intl() {
         // @ts-ignore - temporary fix for the type error
         return this._element.intl;
@@ -6375,7 +6433,7 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CalendarComponent, isStandalone: true, selector: "mosaik-calendar", inputs: { intl: "intl", displayDate: "displayDate", displayDateStart: "displayDateStart", displayDateEnd: "displayDateEnd", header: "header", values: "values", view: "view", selectionMode: "selectionMode", blackoutDates: "blackoutDates", specialDates: "specialDates", minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek", isTodayHighlighted: "isTodayHighlighted", isWeekendHighlighted: "isWeekendHighlighted", showWeekNumbers: "showWeekNumbers", showAdjacent: "showAdjacent", markerHandler: "markerHandler", themeName: "themeName", locale: "locale", appearance: "appearance", disabled: "disabled", invalid: "invalid", value: "value", orientation: "orientation", variant: "variant", fit: "fit", dir: "dir", lang: "lang" }, outputs: { dateChanged: "dateChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CalendarComponent, isStandalone: true, selector: "mosaik-calendar", inputs: { sheets: "sheets", intl: "intl", displayDate: "displayDate", displayDateStart: "displayDateStart", displayDateEnd: "displayDateEnd", header: "header", values: "values", view: "view", selectionMode: "selectionMode", blackoutDates: "blackoutDates", specialDates: "specialDates", minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek", isTodayHighlighted: "isTodayHighlighted", isWeekendHighlighted: "isWeekendHighlighted", showWeekNumbers: "showWeekNumbers", showAdjacent: "showAdjacent", markerHandler: "markerHandler", themeName: "themeName", locale: "locale", appearance: "appearance", disabled: "disabled", invalid: "invalid", value: "value", orientation: "orientation", variant: "variant", fit: "fit", dir: "dir", lang: "lang" }, outputs: { dateChanged: "dateChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CalendarComponent),
@@ -6390,7 +6448,7 @@ let CalendarComponent = class CalendarComponent {
 CalendarComponent = __decorate$3f([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-calendar', CalendarElement),
-        inputs: ['intl', 'displayDate', 'displayDateStart', 'displayDateEnd', 'header', 'values', 'view', 'selectionMode', 'blackoutDates', 'specialDates', 'minDate', 'maxDate', 'firstDayOfWeek', 'isTodayHighlighted', 'isWeekendHighlighted', 'showWeekNumbers', 'showAdjacent', 'markerHandler', 'themeName', 'locale', 'appearance', 'disabled', 'invalid', 'value', 'orientation', 'variant', 'fit', 'dir', 'lang'],
+        inputs: ['sheets', 'intl', 'displayDate', 'displayDateStart', 'displayDateEnd', 'header', 'values', 'view', 'selectionMode', 'blackoutDates', 'specialDates', 'minDate', 'maxDate', 'firstDayOfWeek', 'isTodayHighlighted', 'isWeekendHighlighted', 'showWeekNumbers', 'showAdjacent', 'markerHandler', 'themeName', 'locale', 'appearance', 'disabled', 'invalid', 'value', 'orientation', 'variant', 'fit', 'dir', 'lang'],
         methods: ['reset', 'checkValidity', 'navigatePrevious', 'navigateNext', 'navigateToday', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$3f("design:paramtypes", [])
@@ -6402,7 +6460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['intl', 'displayDate', 'displayDateStart', 'displayDateEnd', 'header', 'values', 'view', 'selectionMode', 'blackoutDates', 'specialDates', 'minDate', 'maxDate', 'firstDayOfWeek', 'isTodayHighlighted', 'isWeekendHighlighted', 'showWeekNumbers', 'showAdjacent', 'markerHandler', 'themeName', 'locale', 'appearance', 'disabled', 'invalid', 'value', 'orientation', 'variant', 'fit', 'dir', 'lang'],
+                    inputs: ['sheets', 'intl', 'displayDate', 'displayDateStart', 'displayDateEnd', 'header', 'values', 'view', 'selectionMode', 'blackoutDates', 'specialDates', 'minDate', 'maxDate', 'firstDayOfWeek', 'isTodayHighlighted', 'isWeekendHighlighted', 'showWeekNumbers', 'showAdjacent', 'markerHandler', 'themeName', 'locale', 'appearance', 'disabled', 'invalid', 'value', 'orientation', 'variant', 'fit', 'dir', 'lang'],
                     outputs: ['dateChanged', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -6417,7 +6475,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { intl: [{
+        }], ctorParameters: () => [], propDecorators: { sheets: [{
+                type: Input
+            }], intl: [{
                 type: Input
             }], displayDate: [{
                 type: Input
@@ -7831,12 +7891,12 @@ const CARD_DEFAULT_PROPS = new InjectionToken('MOSAIK_CARD_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot cover - The slot for placing a cover image or graphic at the top of the card.
- * @slot media - The slot for placing media content, such as images or videos.
- * @slot header - The slot for placing header content, typically containing the title.
- * @slot content - The slot for placing the main content of the card.
- * @slot actions - The slot for placing action buttons related to the card.
- * @slot footer - The slot for placing footer content, often for additional information or links.
+ * @slot cover - Primary visual content like hero images or graphics positioned at the top
+ * @slot media - Additional media content such as images, videos, or rich content
+ * @slot header - Header section typically containing titles and navigation elements
+ * @slot content - Main content body for text, descriptions, or detailed information
+ * @slot actions - Action buttons or interactive elements for user engagement
+ * @slot footer - Footer section for supplementary information, links, or metadata
  */
 let CardComponent = class CardComponent {
     _element;
@@ -8575,7 +8635,7 @@ const CAROUSEL_ITEM_DEFAULT_PROPS = new InjectionToken('MOSAIK_CAROUSEL_ITEM_DEF
 /**
  * @public
  *
- *
+ * @slot  - Default content area for the carousel item's content
  */
 let CarouselItemComponent = class CarouselItemComponent {
     _element;
@@ -8776,7 +8836,7 @@ const CAROUSEL_DEFAULT_PROPS = new InjectionToken('MOSAIK_CAROUSEL_DEFAULT_PROPS
 /**
  * @public
  *
- *
+ * @slot  - Default content area for carousel items and navigation elements
  */
 let CarouselComponent = class CarouselComponent {
     _element;
@@ -9037,8 +9097,8 @@ const CELL_GROUP_DEFAULT_PROPS = new InjectionToken('MOSAIK_CELL_GROUP_DEFAULT_P
 /**
  * @public
  *
- * @slot header - Slot for the group header.
- * @slot  - Slot for the default content, typically cells.
+ * @slot header - Header content area for group titles, descriptions, or section labels
+ * @slot  - Default content area for cell components and related content
  */
 let CellGroupComponent = class CellGroupComponent {
     _element;
@@ -9187,10 +9247,10 @@ const CELL_DEFAULT_PROPS = new InjectionToken('MOSAIK_CELL_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot start - Slot for content to be displayed at the start of the cell.
- * @slot label - Slot for the primary label content of the cell.
- * @slot subLabel - Slot for additional label content or description.
- * @slot end - Slot for content to be displayed at the end of the cell.
+ * @slot start - Leading content area for icons, avatars, thumbnails, or visual indicators
+ * @slot label - Primary content area for main text, titles, or primary information
+ * @slot subLabel - Secondary content area for descriptions, metadata, or supplementary text
+ * @slot end - Trailing content area for actions, status indicators, or secondary controls
  */
 let CellComponent = class CellComponent {
     _element;
@@ -9375,7 +9435,9 @@ const CHART_DEFAULT_PROPS = new InjectionToken('MOSAIK_CHART_DEFAULT_PROPS');
 /**
  * @public
  *
- *
+ * @slot  - Default content area for chart data configuration and custom elements
+ * @slot toolbar - Chart toolbar area for controls and actions
+ * @slot legend - Custom legend area for chart series labels
  */
 let ChartComponent = class ChartComponent {
     _element;
@@ -12095,7 +12157,9 @@ const CHECKBOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_CHECKBOX_DEFAULT_PROPS
 /**
  * @public
  *
- *
+ * @slot checkmark - The checkmark slot.
+ * @slot label - The label slot.
+ * @slot hint - The hint slot.
  */
 let CheckboxComponent = class CheckboxComponent {
     _element;
@@ -12953,7 +13017,8 @@ const CHIP_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_CHIP_BOX_DEFAULT_PROPS
 /**
  * @public
  *
- *
+ * @slot prefix - Content placed before the chip collection.
+ * @slot suffix - Content placed after the chip collection.
  */
 let ChipBoxComponent = class ChipBoxComponent {
     _element;
@@ -15451,7 +15516,8 @@ const COLOR_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_COLOR_BOX_DEFAULT_PRO
 /**
  * @public
  *
- *
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
  */
 let ColorBoxComponent = class ColorBoxComponent {
     _element;
@@ -15957,7 +16023,9 @@ const COMBO_ITEM_DEFAULT_PROPS = new InjectionToken('MOSAIK_COMBO_ITEM_DEFAULT_P
 /**
  * @public
  *
- *
+ * @slot  - Default content area for the option label and description
+ * @slot prefix - Leading content (icons, avatars, indicators)
+ * @slot suffix - Trailing content (checkmarks, badges, secondary actions)
  */
 let ComboItemComponent = class ComboItemComponent {
     _element;
@@ -16242,7 +16310,11 @@ const COMBO_DEFAULT_PROPS = new InjectionToken('MOSAIK_COMBO_DEFAULT_PROPS');
 /**
  * @public
  *
- *
+ * @slot  - Default content area for combo items and options
+ * @slot prefix - Leading content before the input (icons, labels)
+ * @slot suffix - Trailing content after the input (actions, indicators)
+ * @slot dropdown-header - Header content at the top of the dropdown
+ * @slot dropdown-footer - Footer content at the bottom of the dropdown
  */
 let ComboComponent = class ComboComponent {
     _element;
@@ -16882,17 +16954,20 @@ const COMPOUND_BUTTON_DEFAULT_PROPS = new InjectionToken('MOSAIK_COMPOUND_BUTTON
 /**
  * @public
  *
- * @slot icon - The slot for the button icon.
- * @slot label - The slot for the button label.
- * @slot overlay - The slot for the overlay content (useful for badges or additional information).
- * @slot  - The default slot for additional button content.
- * @slot prefix - The slot for the prefix content.
- * @slot suffix - The slot for the suffix content.
- * @slot subLabel - The slot for the sub label content.
+ * @slot icon - Primary icon content area for visual button identification
+ * @slot label - Primary text content area for main button labeling
+ * @slot overlay - Overlay content area for badges, notifications, or status indicators
+ * @slot  - Default content area for additional button content and elements
+ * @slot prefix - Leading content area before the main label
+ * @slot suffix - Trailing content area after the main label
+ * @slot subLabel - Secondary text content area for descriptions or additional information
  */
 let CompoundButtonComponent = class CompoundButtonComponent {
     _element;
     _zone;
+    _click;
+    _focus;
+    _blur;
     _connected;
     _disconnected;
     _changed;
@@ -16900,6 +16975,12 @@ let CompoundButtonComponent = class CompoundButtonComponent {
         inject(ChangeDetectorRef).detach();
         this._element = inject(ElementRef).nativeElement;
         this._zone = inject(NgZone);
+        this._click = new EventEmitter();
+        this._element.on('click', (e) => this.onEmit(this._click, e));
+        this._focus = new EventEmitter();
+        this._element.on('focus', (e) => this.onEmit(this._focus, e));
+        this._blur = new EventEmitter();
+        this._element.on('blur', (e) => this.onEmit(this._blur, e));
         this._connected = new EventEmitter();
         this._element.on('connected', (e) => this.onEmit(this._connected, e));
         this._disconnected = new EventEmitter();
@@ -17128,6 +17209,15 @@ let CompoundButtonComponent = class CompoundButtonComponent {
             this._element.lang = value;
         });
     }
+    get click() {
+        return this._click;
+    }
+    get focus() {
+        return this._focus;
+    }
+    get blur() {
+        return this._blur;
+    }
     get connected() {
         return this._connected;
     }
@@ -17149,7 +17239,7 @@ let CompoundButtonComponent = class CompoundButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CompoundButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CompoundButtonComponent, isStandalone: true, selector: "mosaik-compound-button", inputs: { subLabel: "subLabel", isNavigation: "isNavigation", themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CompoundButtonComponent, isStandalone: true, selector: "mosaik-compound-button", inputs: { subLabel: "subLabel", isNavigation: "isNavigation", themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { click: "click", focus: "focus", blur: "blur", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CompoundButtonComponent = __decorate$2z([
     ProxyCmp({
@@ -17167,7 +17257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['subLabel', 'isNavigation', 'themeName', 'reverse', 'orientation', 'horizontalContentAlignment', 'verticalContentAlignment', 'fit', 'isBusy', 'label', 'icon', 'iconPosition', 'iconSize', 'type', 'variant', 'appearance', 'size', 'value', 'disabled', 'isFocused', 'dir', 'lang'],
-                    outputs: ['connected', 'disconnected', 'changed']
+                    outputs: ['click', 'focus', 'blur', 'connected', 'disconnected', 'changed']
                 }]
         }], ctorParameters: () => [], propDecorators: { subLabel: [{
                 type: Input
@@ -17213,6 +17303,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], lang: [{
                 type: Input
+            }], click: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
             }], connected: [{
                 type: Output
             }], disconnected: [{
@@ -17695,7 +17791,9 @@ const DATA_TABLE_DEFAULT_PROPS = new InjectionToken('MOSAIK_DATA_TABLE_DEFAULT_P
 /**
  * @public
  *
- *
+ * @slot  - Default content area for custom table content and additional elements
+ * @slot header - Table header area for titles, filters, and actions
+ * @slot footer - Table footer area for pagination, totals, and summary information
  */
 let DataTableComponent = class DataTableComponent {
     _element;
@@ -17916,7 +18014,8 @@ const DATE_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_DATE_BOX_DEFAULT_PROPS
 /**
  * @public
  *
- *
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
  */
 let DateBoxComponent = class DateBoxComponent {
     _element;
@@ -20294,11 +20393,11 @@ const DIALOG_DEFAULT_PROPS = new InjectionToken('MOSAIK_DIALOG_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default content slot.
- * @slot header - The header slot.
- * @slot footer - The footer slot.
- * @slot content - The content slot.
- * @slot actions - The actions slot.
+ * @slot  - Default content area for main dialog body
+ * @slot header - Dialog header section for titles and controls
+ * @slot footer - Dialog footer section for additional information
+ * @slot content - Main content area for dialog body content
+ * @slot actions - Action buttons and controls area
  */
 let DialogComponent = class DialogComponent {
     _element;
@@ -21165,7 +21264,7 @@ const DOCK_PANEL_DEFAULT_PROPS = new InjectionToken('MOSAIK_DOCK_PANEL_DEFAULT_P
 /**
  * @public
  *
- * @slot  - The default slot for child elements to be docked.
+ * @slot  - The default slot for child elements with dock positioning attributes.
  */
 let DockPanelComponent = class DockPanelComponent {
     _element;
@@ -23239,8 +23338,8 @@ const EMPTY_STATE_DEFAULT_PROPS = new InjectionToken('MOSAIK_EMPTY_STATE_DEFAULT
 /**
  * @public
  *
- * @slot  - The default slot for placing additional content or elements related to the empty state.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ * @slot  - Default content area for additional empty state information
+ * @slot actions - Action buttons or links for user guidance and next steps
  */
 let EmptyStateComponent = class EmptyStateComponent {
     _element;
@@ -24276,8 +24375,8 @@ const ERROR_STATE_DEFAULT_PROPS = new InjectionToken('MOSAIK_ERROR_STATE_DEFAULT
 /**
  * @public
  *
- * @slot  - The default slot for placing additional content or elements related to the error.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for error resolution.
+ * @slot  - Default content area for additional error information or custom content
+ * @slot actions - Action buttons for error recovery (retry, refresh, contact support, etc.)
  */
 let ErrorStateComponent = class ErrorStateComponent {
     _element;
@@ -25930,13 +26029,16 @@ const FLOATING_ACTION_BUTTON_DEFAULT_PROPS = new InjectionToken('MOSAIK_FLOATING
 /**
  * @public
  *
- * @slot icon - The icon part.
- * @slot label - The label part.
- * @slot overlay - The overlay slot (useful for badges).
+ * @slot icon - Icon content area for the primary visual indicator
+ * @slot label - Optional text label for extended floating action buttons
+ * @slot overlay - Overlay content area for badges, notifications, or status indicators
  */
 let FloatingActionButtonComponent = class FloatingActionButtonComponent {
     _element;
     _zone;
+    _click;
+    _focus;
+    _blur;
     _connected;
     _disconnected;
     _changed;
@@ -25944,6 +26046,12 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         inject(ChangeDetectorRef).detach();
         this._element = inject(ElementRef).nativeElement;
         this._zone = inject(NgZone);
+        this._click = new EventEmitter();
+        this._element.on('click', (e) => this.onEmit(this._click, e));
+        this._focus = new EventEmitter();
+        this._element.on('focus', (e) => this.onEmit(this._focus, e));
+        this._blur = new EventEmitter();
+        this._element.on('blur', (e) => this.onEmit(this._blur, e));
         this._connected = new EventEmitter();
         this._element.on('connected', (e) => this.onEmit(this._connected, e));
         this._disconnected = new EventEmitter();
@@ -26102,6 +26210,15 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
             this._element.lang = value;
         });
     }
+    get click() {
+        return this._click;
+    }
+    get focus() {
+        return this._focus;
+    }
+    get blur() {
+        return this._blur;
+    }
     get connected() {
         return this._connected;
     }
@@ -26123,7 +26240,7 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FloatingActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FloatingActionButtonComponent, isStandalone: true, selector: "mosaik-fab", inputs: { themeName: "themeName", isBusy: "isBusy", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FloatingActionButtonComponent, isStandalone: true, selector: "mosaik-fab", inputs: { themeName: "themeName", isBusy: "isBusy", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { click: "click", focus: "focus", blur: "blur", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FloatingActionButtonComponent = __decorate$1_([
     ProxyCmp({
@@ -26141,7 +26258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['themeName', 'isBusy', 'label', 'icon', 'iconPosition', 'iconSize', 'type', 'variant', 'appearance', 'size', 'value', 'disabled', 'isFocused', 'dir', 'lang'],
-                    outputs: ['connected', 'disconnected', 'changed']
+                    outputs: ['click', 'focus', 'blur', 'connected', 'disconnected', 'changed']
                 }]
         }], ctorParameters: () => [], propDecorators: { themeName: [{
                 type: Input
@@ -26173,6 +26290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], lang: [{
                 type: Input
+            }], click: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
             }], connected: [{
                 type: Output
             }], disconnected: [{
@@ -26580,7 +26703,7 @@ const FILE_UPLOAD_DEFAULT_PROPS = new InjectionToken('MOSAIK_FILE_UPLOAD_DEFAULT
 /**
  * @public
  *
- * @slot  - The default slot for custom UI, such as buttons, instructions, or drop zones.
+ * @slot  - Default slot for custom UI elements like buttons or instructions.
  */
 let FileUploadComponent = class FileUploadComponent {
     _element;
@@ -28782,7 +28905,7 @@ const FORM_DEFAULT_PROPS = new InjectionToken('MOSAIK_FORM_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default slot where form controls can be placed.
+ * @slot  - Default content area for form controls and layout elements
  */
 let FormComponent = class FormComponent {
     _element;
@@ -29156,7 +29279,7 @@ const GRID_DEFAULT_PROPS = new InjectionToken('MOSAIK_GRID_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default slot.
+ * @slot  - The default slot for grid items.
  */
 let GridComponent = class GridComponent {
     _element;
@@ -29920,11 +30043,11 @@ const IMAGE_DEFAULT_PROPS = new InjectionToken('MOSAIK_IMAGE_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default content slot.
- * @slot empty - The empty state slot.
- * @slot failed - The empty state slot.
- * @slot pending - The empty state slot.
- * @slot legend - The legend slot.
+ * @slot  - Default content overlaid on the image
+ * @slot empty - Content shown when no image source is provided
+ * @slot failed - Content displayed when image loading fails
+ * @slot pending - Content shown while image is loading
+ * @slot legend - Caption or description content positioned around the image
  */
 let ImageComponent = class ImageComponent {
     _element;
@@ -31928,9 +32051,11 @@ const LIST_DEFAULT_PROPS = new InjectionToken('MOSAIK_LIST_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default slot.
- * @slot filter - The filter slot.
- * @slot empty - The empty slot.
+ * @slot  - Default content area for list items and groups
+ * @slot filter - Filter controls and search functionality area
+ * @slot empty - Empty state content when no items are available
+ * @slot header - Header content above the list items
+ * @slot footer - Footer content below the list items
  */
 let ListComponent = class ListComponent {
     _element;
@@ -32609,7 +32734,7 @@ const MASONRY_DEFAULT_PROPS = new InjectionToken('MOSAIK_MASONRY_DEFAULT_PROPS')
 /**
  * @public
  *
- * @slot  - The default slot.
+ * @slot  - The default slot for elements to be arranged in masonry layout.
  */
 let MasonryComponent = class MasonryComponent {
     _element;
@@ -34756,8 +34881,8 @@ const NUMBER_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_NUMBER_BOX_DEFAULT_P
 /**
  * @public
  *
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
  */
 let NumberBoxComponent = class NumberBoxComponent {
     _element;
@@ -35943,11 +36068,11 @@ const PAGE_DEFAULT_PROPS = new InjectionToken('MOSAIK_PAGE_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot preHeader - The header of the page.
- * @slot header - The header of the page.
- * @slot preContent - The pre content of the page.
- * @slot content - The content of the page.
- * @slot footer - The footer of the page.
+ * @slot preHeader - Content displayed before the main header (e.g., notifications, alerts)
+ * @slot header - Primary page header content (e.g., navigation, title, actions)
+ * @slot preContent - Content between header and main content (e.g., breadcrumbs, filters)
+ * @slot content - Main page content area
+ * @slot footer - Page footer content (e.g., copyright, links)
  */
 let PageComponent = class PageComponent {
     _element;
@@ -36490,7 +36615,8 @@ const PASSWORD_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_PASSWORD_BOX_DEFAU
 /**
  * @public
  *
- *
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
  */
 let PasswordBoxComponent = class PasswordBoxComponent {
     _element;
@@ -37153,8 +37279,8 @@ const PERSONA_DEFAULT_PROPS = new InjectionToken('MOSAIK_PERSONA_DEFAULT_PROPS')
 /**
  * @public
  *
- * @slot  - The default slot for avatar text, commonly a name or initials.
- * @slot badge - Used to provide a badge, such as a status badge.
+ * @slot  - Default content for avatar display (overrides automatic text/icon generation)
+ * @slot badge - Status indicator or notification badge positioned on the avatar
  */
 let PersonaComponent = class PersonaComponent {
     _element;
@@ -39215,8 +39341,8 @@ const PROGRESS_RING_DEFAULT_PROPS = new InjectionToken('MOSAIK_PROGRESS_RING_DEF
 /**
  * @public
  *
- * @slot label - The label slot.
- * @slot hint - The hint slot.
+ * @slot label - Text label content area for progress description or percentage display
+ * @slot hint - Secondary text content area for additional progress information or status
  */
 let ProgressRingComponent = class ProgressRingComponent {
     _element;
@@ -39968,7 +40094,9 @@ const RADIO_DEFAULT_PROPS = new InjectionToken('MOSAIK_RADIO_DEFAULT_PROPS');
 /**
  * @public
  *
- *
+ * @slot checkmark - The checkmark slot.
+ * @slot label - The label slot.
+ * @slot hint - The hint slot.
  */
 let RadioComponent = class RadioComponent {
     _element;
@@ -42028,7 +42156,7 @@ const RIPPLE_DEFAULT_PROPS = new InjectionToken('MOSAIK_RIPPLE_DEFAULT_PROPS');
 /**
  * @public
  *
- *
+ * @slot  - Default content area (typically empty as ripple is a visual effect overlay)
  */
 let RippleComponent = class RippleComponent {
     _element;
@@ -43021,8 +43149,8 @@ const SEARCH_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_SEARCH_BOX_DEFAULT_P
 /**
  * @public
  *
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
+ * @slot prefix - Content placed before the search input.
+ * @slot suffix - Content placed after the search input.
  */
 let SearchBoxComponent = class SearchBoxComponent {
     _element;
@@ -44392,10 +44520,10 @@ const SELECT_DEFAULT_PROPS = new InjectionToken('MOSAIK_SELECT_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default menu slot.
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
- * @slot filter - The filter slot.
+ * @slot prefix - Content placed before the input value.
+ * @slot suffix - Content placed after the input value.
+ * @slot filter - Custom filter input for the dropdown.
+ * @slot  - Default slot for select items and groups.
  */
 let SelectComponent = class SelectComponent {
     _element;
@@ -45556,8 +45684,8 @@ const SLIDER_DEFAULT_PROPS = new InjectionToken('MOSAIK_SLIDER_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
+ * @slot prefix - Content displayed before the slider track (e.g., min value label)
+ * @slot suffix - Content displayed after the slider track (e.g., max value label)
  */
 let SliderComponent = class SliderComponent {
     _element;
@@ -47074,9 +47202,9 @@ const SPLIT_DEFAULT_PROPS = new InjectionToken('MOSAIK_SPLIT_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot start - The start part.
- * @slot end - The end part.
- * @slot divider - The divider part.
+ * @slot start - The primary content panel positioned at the beginning of the split
+ * @slot end - The secondary content panel positioned at the end of the split
+ * @slot thumb - Custom grip icon for the draggable divider (defaults to three dots icon)
  */
 let SplitComponent = class SplitComponent {
     _element;
@@ -47353,7 +47481,7 @@ const STACK_DEFAULT_PROPS = new InjectionToken('MOSAIK_STACK_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot  - The default slot.
+ * @slot  - Default content area for child elements to be arranged in stack layout
  */
 let StackComponent = class StackComponent {
     _element;
@@ -47735,8 +47863,8 @@ const SUCCESS_STATE_DEFAULT_PROPS = new InjectionToken('MOSAIK_SUCCESS_STATE_DEF
 /**
  * @public
  *
- * @slot  - The default slot, used for displaying the success state content.
- * @slot actions - The actions slot, used for displaying action buttons or links related to the success state.
+ * @slot  - Default content area for additional success information or custom content
+ * @slot actions - Action buttons for next steps or related operations after success
  */
 let SuccessStateComponent = class SuccessStateComponent {
     _element;
@@ -50678,7 +50806,8 @@ const TEXT_DEFAULT_PROPS = new InjectionToken('MOSAIK_TEXT_DEFAULT_PROPS');
 /**
  * @public
  *
- * @slot text - The text slot.
+ * @slot text - Primary text content area for displaying formatted text
+ * @slot  - Default content area for text and inline elements
  */
 let TextComponent = class TextComponent {
     _element;
@@ -50949,6 +51078,8 @@ const TEXT_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_TEXT_BOX_DEFAULT_PROPS
  *
  * @slot prefix - The prefix slot.
  * @slot suffix - The suffix slot.
+ * @slot label - The label slot.
+ * @slot hint - The hint slot.
  */
 let TextBoxComponent = class TextBoxComponent {
     _element;
@@ -52439,7 +52570,8 @@ const TIME_BOX_DEFAULT_PROPS = new InjectionToken('MOSAIK_TIME_BOX_DEFAULT_PROPS
 /**
  * @public
  *
- *
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
  */
 let TimeBoxComponent = class TimeBoxComponent {
     _element;
@@ -53362,7 +53494,7 @@ const TOGGLE_BUTTON_GROUP_DEFAULT_PROPS = new InjectionToken('MOSAIK_TOGGLE_BUTT
 /**
  * @public
  *
- *
+ * @slot  - The default slot for toggle buttons.
  */
 let ToggleButtonGroupComponent = class ToggleButtonGroupComponent {
     _element;
@@ -53579,16 +53711,18 @@ const TOGGLE_BUTTON_DEFAULT_PROPS = new InjectionToken('MOSAIK_TOGGLE_BUTTON_DEF
 /**
  * @public
  *
- * @slot label - The label slot.
- * @slot icon - The icon slot.
- * @slot overlay - The overlay slot (useful for badge).
+ * @slot label - Text label content area for button identification
+ * @slot icon - Icon content area for visual state representation
+ * @slot overlay - Overlay content area for badges, notifications, or state indicators
  */
 let ToggleButtonComponent = class ToggleButtonComponent {
     _element;
     _zone;
     _accessor;
+    _change;
     _checked;
     _unchecked;
+    _click;
     _connected;
     _disconnected;
     _changed;
@@ -53598,10 +53732,14 @@ let ToggleButtonComponent = class ToggleButtonComponent {
         this._zone = inject(NgZone);
         this._accessor = toggleButtonElementValueAccessor(this._element);
         this._element.addController(this._accessor);
+        this._change = new EventEmitter();
+        this._element.on('change', (e) => this.onEmit(this._change, e));
         this._checked = new EventEmitter();
         this._element.on('checked', (e) => this.onEmit(this._checked, e));
         this._unchecked = new EventEmitter();
         this._element.on('unchecked', (e) => this.onEmit(this._unchecked, e));
+        this._click = new EventEmitter();
+        this._element.on('click', (e) => this.onEmit(this._click, e));
         this._connected = new EventEmitter();
         this._element.on('connected', (e) => this.onEmit(this._connected, e));
         this._disconnected = new EventEmitter();
@@ -53820,12 +53958,18 @@ let ToggleButtonComponent = class ToggleButtonComponent {
             this._element.lang = value;
         });
     }
+    get change() {
+        return this._change;
+    }
     get checked() {
         return this._checked;
     }
     get unchecked() {
         return this._unchecked;
     }
+    get click() {
+        return this._click;
+    }
     get connected() {
         return this._connected;
     }
@@ -53859,7 +54003,7 @@ let ToggleButtonComponent = class ToggleButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ToggleButtonComponent, isStandalone: true, selector: "mosaik-toggle-button", inputs: { themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", isChecked: "isChecked", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ToggleButtonComponent, isStandalone: true, selector: "mosaik-toggle-button", inputs: { themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", isChecked: "isChecked", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { change: "change", checked: "checked", unchecked: "unchecked", click: "click", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleButtonComponent),
@@ -53887,7 +54031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['themeName', 'reverse', 'orientation', 'horizontalContentAlignment', 'verticalContentAlignment', 'fit', 'isBusy', 'isChecked', 'label', 'icon', 'iconPosition', 'iconSize', 'type', 'variant', 'appearance', 'size', 'value', 'disabled', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'connected', 'disconnected', 'changed'],
+                    outputs: ['change', 'checked', 'unchecked', 'click', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
                         {
@@ -53943,10 +54087,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], lang: [{
                 type: Input
+            }], change: [{
+                type: Output
             }], checked: [{
                 type: Output
             }], unchecked: [{
                 type: Output
+            }], click: [{
+                type: Output
             }], connected: [{
                 type: Output
             }], disconnected: [{
@@ -53987,8 +54135,10 @@ const TOGGLE_SWITCH_DEFAULT_PROPS = new InjectionToken('MOSAIK_TOGGLE_SWITCH_DEF
 /**
  * @public
  *
- * @slot prefix - A slot for prefix content, typically used for icons or labels.
- * @slot suffix - A slot for suffix content, typically used for additional information or icons.
+ * @slot prefix - Content placed before the switch control.
+ * @slot suffix - Content placed after the switch control.
+ * @slot checkmark - Custom checkmark/switch indicator content.
+ * @slot label - Custom label content.
  */
 let ToggleSwitchComponent = class ToggleSwitchComponent {
     _element;
@@ -54623,11 +54773,11 @@ const TOOLBAR_DEFAULT_PROPS = new InjectionToken('MOSAIK_TOOLBAR_DEFAULT_PROPS')
 /**
  * @public
  *
- * @slot start - The content placed at the start of the toolbar.
- * @slot  - The default content in the toolbar.
- * @slot title - The title of the toolbar.
- * @slot subTitle - The subtitle of the toolbar.
- * @slot end - The content placed at the end of the toolbar.
+ * @slot start - Leading content area for navigation or primary actions
+ * @slot  - Default content slot for main toolbar controls
+ * @slot title - Primary toolbar title or heading
+ * @slot subTitle - Secondary title or subtitle text
+ * @slot end - Trailing content area for secondary actions or controls
  */
 let ToolbarComponent = class ToolbarComponent {
     _element;
@@ -57268,7 +57418,7 @@ const WRAP_DEFAULT_PROPS = new InjectionToken('MOSAIK_WRAP_DEFAULT_PROPS');
 /**
  * @public
  *
- *
+ * @slot  - The default slot for elements that will wrap based on available space.
  */
 let WrapComponent = class WrapComponent {
     _element;