@breadstone/mosaik-elements-foundation 0.0.147 → 0.0.149

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts

@@ -2,73 +2,92 @@ import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement';
 import type { ICompoundButtonElementProps } from './ICompoundButtonElementProps';
 declare const CompoundButtonElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/ContentAlignable").IContentAlignableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Busyable").IBusyableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Iconable").IIconableProps) & typeof ButtonBaseElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Compound Button - A button component that combines different elements for extended functionality.
+ * CompoundButton - An enhanced button component that supports multiple content areas and hierarchical information display.
  *
- * @description
- * The Compound Button is a versatile button component that integrates multiple elements into a single
- * interactive component. It allows for advanced customization and interaction, making it suitable for complex
- * interfaces where combining various elements into one button is beneficial. The button supports various states
- * and can be styled extensively through CSS variables.
+ * Combines primary and secondary content areas within a single interactive button, allowing for complex
+ * information presentation with main labels, sub-labels, icons, and additional content slots. Ideal
+ * for navigation buttons, action cards, or any interface requiring rich button content.
  *
- * @name Compound Button
+ * @name CompoundButtonElement
  * @element mosaik-compound-button
  * @category Buttons
  *
- * @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
  *
- * @csspart button - The button part.
- * @csspart focusRing - The focus ring part.
- * @csspart ripple - The ripple part.
- * @csspart icon - The icon part.
- * @csspart label - The label part.
- * @csspart progressRing - The progress ring part.
- * @csspart subLabel - The sub label part.
- * @csspart icon nav - The navigation icon part.
+ * @csspart button - Main button element container
+ * @csspart focusRing - Focus ring indicator for accessibility
+ * @csspart ripple - Ripple effect animation container
+ * @csspart icon - Icon content styling container
+ * @csspart label - Primary label styling container
+ * @csspart progressRing - Loading state progress indicator
+ * @csspart subLabel - Secondary label styling container
+ * @csspart icon-nav - Navigation icon styling container
  *
+ * @cssprop --compound-button-font-family - Font family for button text content
+ * @cssprop --compound-button-font-size - Font size for primary button text
+ * @cssprop --compound-button-font-weight - Font weight for primary button text
+ * @cssprop --compound-button-line-height - Line height for button text
+ * @cssprop --compound-button-letter-spacing - Letter spacing for button text
+ * @cssprop --compound-button-padding - Internal padding for button content
+ * @cssprop --compound-button-gap - Gap between button content elements
+ * @cssprop --compound-button-border-radius - Border radius for button styling
+ * @cssprop --compound-button-background - Background color for the button
+ * @cssprop --compound-button-sub-font-size - Font size for secondary label text
+ * @cssprop --compound-button-sub-font-weight - Font weight for secondary label text
  *
- * @cssprop {String} --compound-button-font-family - The font family for the Compound Button.
- * @cssprop {String} --compound-button-font-size - The font size for the Compound Button.
- * @cssprop {String} --compound-button-font-line-height - The line height for the Compound Button font.
- * @cssprop {String} --compound-button-font-weight - The font weight for the Compound Button.
- * @cssprop {String} --compound-button-font-letter-spacing - The letter spacing for the Compound Button font.
- * @cssprop {String} --compound-button-font-text-decoration - The text decoration for the Compound Button font.
- * @cssprop {String} --compound-button-font-text-transform - The text transform for the Compound Button font.
- * @cssprop {String} --compound-button-padding-top - The top padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-right - The right padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-bottom - The bottom padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-left - The left padding for the Compound Button.
- * @cssprop {String} --compound-button-gap - The gap between Compound Button elements.
- * @cssprop {String} --compound-button-transition-duration - The transition duration for the Compound Button.
- * @cssprop {String} --compound-button-transition-mode - The transition mode for the Compound Button.
- * @cssprop {String} --compound-button-transition-property - The transition property for the Compound Button.
- * @cssprop {String} --compound-button-background-color - The background color of the Compound Button.
- * @cssprop {String} --compound-button-border-color - The border color of the Compound Button.
- * @cssprop {String} --compound-button-foreground-color - The foreground color of the Compound Button.
- * @cssprop {String} --compound-button-border-width - The border width of the Compound Button.
- * @cssprop {String} --compound-button-border-radius - The border radius of the Compound Button.
- * @cssprop {String} --compound-button-border-style - The border style of the Compound Button.
- * @cssprop {String} --compound-button-shadow - The shadow of the Compound Button.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset for the focus ring.
- * @cssprop {String} --compound-button-line-height - The line height for the Compound Button text.
+ * @fires click - Dispatched when the button is clicked or activated
+ * @fires focus - Dispatched when the button receives focus
+ * @fires blur - Dispatched when the button loses focus
  *
- * @dependency {StackElement} - The Stack element.
- * @dependency {IconElement} - The Icon element.
- * @dependency {RippleElement} - The Ripple element.
- * @dependency {FocusRingElement} - The Focus Ring element.
- * @dependency {TextElement} - The Text element.
- * @dependency {ProgressRingElement} - The Progress Ring element.
+ * @dependency RippleElement - For interactive ripple effects on user interaction
+ * @dependency StackElement - For layout management of multiple content areas
+ * @dependency IconElement - For displaying icons and visual indicators
+ * @dependency FocusRingElement - For accessibility focus indicators
+ * @dependency TextElement - For rendering primary and secondary text content
+ * @dependency ProgressRingElement - For loading state visualization
  *
  * @example
  * ```html
- * <mosaik-compound-button>
- *   <mosaik-icon name="check"></mosaik-icon>
- *   <mosaik-text>Click Me</mosaik-text>
+ * <!-- Navigation compound button -->
+ * <mosaik-compound-button onclick="navigateToSettings()">
+ *   <mosaik-icon slot="icon" data="cog"></mosaik-icon>
+ *   <mosaik-text slot="label">Settings</mosaik-text>
+ *   <mosaik-text slot="subLabel">Manage your preferences</mosaik-text>
+ *   <mosaik-icon slot="suffix" data="chevron-right"></mosaik-icon>
+ * </mosaik-compound-button>
+ *
+ * <!-- Profile compound button -->
+ * <mosaik-compound-button appearance="soft">
+ *   <mosaik-avatar slot="icon" src="user-avatar.jpg"></mosaik-avatar>
+ *   <mosaik-text slot="label">John Smith</mosaik-text>
+ *   <mosaik-text slot="subLabel">Admin User</mosaik-text>
+ *   <mosaik-badge slot="overlay" value="5"></mosaik-badge>
+ * </mosaik-compound-button>
+ *
+ * <!-- Action compound button with status -->
+ * <mosaik-compound-button appearance="primary">
+ *   <mosaik-icon slot="prefix" data="upload"></mosaik-icon>
+ *   <mosaik-text slot="label">Upload Files</mosaik-text>
+ *   <mosaik-text slot="subLabel">Drag & drop or click to select</mosaik-text>
+ * </mosaik-compound-button>
+ *
+ * <!-- Busy compound button -->
+ * <mosaik-compound-button busy="true">
+ *   <mosaik-text slot="label">Processing...</mosaik-text>
+ *   <mosaik-text slot="subLabel">Please wait while we save your changes</mosaik-text>
+ * </mosaik-compound-button>
+ *
+ * <!-- Feature compound button -->
+ * <mosaik-compound-button orientation="vertical">
+ *   <mosaik-icon slot="icon" data="shield-check" size="large"></mosaik-icon>
+ *   <mosaik-text slot="label">Security Center</mosaik-text>
+ *   <mosaik-text slot="subLabel">Protect your account with advanced security features</mosaik-text>
  * </mosaik-compound-button>
  * ```
  *

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AASjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBAqBa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;CAIJ;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}
+{"version":3,"file":"CompoundButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AASjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,qBAqBa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;CAIJ;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.js

@@ -32,73 +32,92 @@ import { compoundButtonElementJoyStyle } from './Themes/CompoundButtonElement.Jo
 import { Iconable } from '../../../Behaviors/Iconable';
 // #endregion
 /**
- * Compound Button - A button component that combines different elements for extended functionality.
+ * CompoundButton - An enhanced button component that supports multiple content areas and hierarchical information display.
  *
- * @description
- * The Compound Button is a versatile button component that integrates multiple elements into a single
- * interactive component. It allows for advanced customization and interaction, making it suitable for complex
- * interfaces where combining various elements into one button is beneficial. The button supports various states
- * and can be styled extensively through CSS variables.
+ * Combines primary and secondary content areas within a single interactive button, allowing for complex
+ * information presentation with main labels, sub-labels, icons, and additional content slots. Ideal
+ * for navigation buttons, action cards, or any interface requiring rich button content.
  *
- * @name Compound Button
+ * @name CompoundButtonElement
  * @element mosaik-compound-button
  * @category Buttons
  *
- * @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
  *
- * @csspart button - The button part.
- * @csspart focusRing - The focus ring part.
- * @csspart ripple - The ripple part.
- * @csspart icon - The icon part.
- * @csspart label - The label part.
- * @csspart progressRing - The progress ring part.
- * @csspart subLabel - The sub label part.
- * @csspart icon nav - The navigation icon part.
+ * @csspart button - Main button element container
+ * @csspart focusRing - Focus ring indicator for accessibility
+ * @csspart ripple - Ripple effect animation container
+ * @csspart icon - Icon content styling container
+ * @csspart label - Primary label styling container
+ * @csspart progressRing - Loading state progress indicator
+ * @csspart subLabel - Secondary label styling container
+ * @csspart icon-nav - Navigation icon styling container
  *
+ * @cssprop --compound-button-font-family - Font family for button text content
+ * @cssprop --compound-button-font-size - Font size for primary button text
+ * @cssprop --compound-button-font-weight - Font weight for primary button text
+ * @cssprop --compound-button-line-height - Line height for button text
+ * @cssprop --compound-button-letter-spacing - Letter spacing for button text
+ * @cssprop --compound-button-padding - Internal padding for button content
+ * @cssprop --compound-button-gap - Gap between button content elements
+ * @cssprop --compound-button-border-radius - Border radius for button styling
+ * @cssprop --compound-button-background - Background color for the button
+ * @cssprop --compound-button-sub-font-size - Font size for secondary label text
+ * @cssprop --compound-button-sub-font-weight - Font weight for secondary label text
  *
- * @cssprop {String} --compound-button-font-family - The font family for the Compound Button.
- * @cssprop {String} --compound-button-font-size - The font size for the Compound Button.
- * @cssprop {String} --compound-button-font-line-height - The line height for the Compound Button font.
- * @cssprop {String} --compound-button-font-weight - The font weight for the Compound Button.
- * @cssprop {String} --compound-button-font-letter-spacing - The letter spacing for the Compound Button font.
- * @cssprop {String} --compound-button-font-text-decoration - The text decoration for the Compound Button font.
- * @cssprop {String} --compound-button-font-text-transform - The text transform for the Compound Button font.
- * @cssprop {String} --compound-button-padding-top - The top padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-right - The right padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-bottom - The bottom padding for the Compound Button.
- * @cssprop {String} --compound-button-padding-left - The left padding for the Compound Button.
- * @cssprop {String} --compound-button-gap - The gap between Compound Button elements.
- * @cssprop {String} --compound-button-transition-duration - The transition duration for the Compound Button.
- * @cssprop {String} --compound-button-transition-mode - The transition mode for the Compound Button.
- * @cssprop {String} --compound-button-transition-property - The transition property for the Compound Button.
- * @cssprop {String} --compound-button-background-color - The background color of the Compound Button.
- * @cssprop {String} --compound-button-border-color - The border color of the Compound Button.
- * @cssprop {String} --compound-button-foreground-color - The foreground color of the Compound Button.
- * @cssprop {String} --compound-button-border-width - The border width of the Compound Button.
- * @cssprop {String} --compound-button-border-radius - The border radius of the Compound Button.
- * @cssprop {String} --compound-button-border-style - The border style of the Compound Button.
- * @cssprop {String} --compound-button-shadow - The shadow of the Compound Button.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset for the focus ring.
- * @cssprop {String} --compound-button-line-height - The line height for the Compound Button text.
+ * @fires click - Dispatched when the button is clicked or activated
+ * @fires focus - Dispatched when the button receives focus
+ * @fires blur - Dispatched when the button loses focus
  *
- * @dependency {StackElement} - The Stack element.
- * @dependency {IconElement} - The Icon element.
- * @dependency {RippleElement} - The Ripple element.
- * @dependency {FocusRingElement} - The Focus Ring element.
- * @dependency {TextElement} - The Text element.
- * @dependency {ProgressRingElement} - The Progress Ring element.
+ * @dependency RippleElement - For interactive ripple effects on user interaction
+ * @dependency StackElement - For layout management of multiple content areas
+ * @dependency IconElement - For displaying icons and visual indicators
+ * @dependency FocusRingElement - For accessibility focus indicators
+ * @dependency TextElement - For rendering primary and secondary text content
+ * @dependency ProgressRingElement - For loading state visualization
  *
  * @example
  * ```html
- * <mosaik-compound-button>
- *   <mosaik-icon name="check"></mosaik-icon>
- *   <mosaik-text>Click Me</mosaik-text>
+ * <!-- Navigation compound button -->
+ * <mosaik-compound-button onclick="navigateToSettings()">
+ *   <mosaik-icon slot="icon" data="cog"></mosaik-icon>
+ *   <mosaik-text slot="label">Settings</mosaik-text>
+ *   <mosaik-text slot="subLabel">Manage your preferences</mosaik-text>
+ *   <mosaik-icon slot="suffix" data="chevron-right"></mosaik-icon>
+ * </mosaik-compound-button>
+ *
+ * <!-- Profile compound button -->
+ * <mosaik-compound-button appearance="soft">
+ *   <mosaik-avatar slot="icon" src="user-avatar.jpg"></mosaik-avatar>
+ *   <mosaik-text slot="label">John Smith</mosaik-text>
+ *   <mosaik-text slot="subLabel">Admin User</mosaik-text>
+ *   <mosaik-badge slot="overlay" value="5"></mosaik-badge>
+ * </mosaik-compound-button>
+ *
+ * <!-- Action compound button with status -->
+ * <mosaik-compound-button appearance="primary">
+ *   <mosaik-icon slot="prefix" data="upload"></mosaik-icon>
+ *   <mosaik-text slot="label">Upload Files</mosaik-text>
+ *   <mosaik-text slot="subLabel">Drag & drop or click to select</mosaik-text>
+ * </mosaik-compound-button>
+ *
+ * <!-- Busy compound button -->
+ * <mosaik-compound-button busy="true">
+ *   <mosaik-text slot="label">Processing...</mosaik-text>
+ *   <mosaik-text slot="subLabel">Please wait while we save your changes</mosaik-text>
+ * </mosaik-compound-button>
+ *
+ * <!-- Feature compound button -->
+ * <mosaik-compound-button orientation="vertical">
+ *   <mosaik-icon slot="icon" data="shield-check" size="large"></mosaik-icon>
+ *   <mosaik-text slot="label">Security Center</mosaik-text>
+ *   <mosaik-text slot="subLabel">Protect your account with advanced security features</mosaik-text>
  * </mosaik-compound-button>
  * ```
  *

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CompoundButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.d.ts

@@ -2,66 +2,84 @@ import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement';
 import type { IFloatingActionButtonElementProps } from './IFloatingActionButtonElementProps';
 declare const FloatingActionButtonElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Busyable").IBusyableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Iconable").IIconableProps) & typeof ButtonBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Floating Action Button - A prominent UI button that triggers a primary action in an application.
+ * FloatingActionButton - A prominent circular button designed for primary actions with elevated visual prominence.
  *
- * @description
- * The Floating Action Button (FAB) is a prominent, circular UI element often used in user interfaces to initiate
- * a primary or high-priority action. It is designed to be visually distinctive and easily accessible, typically
- * positioned in a fixed or floating location on the screen for quick access. FABs are commonly employed for actions
- * such as creating new content, sharing, or navigation in mobile and web applications.
+ * Creates a distinctive, floating circular button optimized for triggering the most important action
+ * on a screen. Features elevated styling, ripple effects, and optional labeling to draw user attention
+ * to critical functionality like creating content, composing messages, or initiating workflows.
  *
- * @name Floating Action Button
+ * @name FloatingActionButtonElement
  * @element mosaik-fab
  * @category Buttons
  *
- * @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
  *
- * @csspart button - The button part.
- * @csspart focusRing - The focus ring part.
- * @csspart ripple - The ripple part.
- * @csspart icon - The icon part.
- * @csspart label - The label part.
- * @csspart progressRing - The progress ring part.
- * @csspart elevation - The elevation part.
+ * @csspart button - Main button element container
+ * @csspart focusRing - Focus ring indicator for accessibility
+ * @csspart ripple - Ripple effect animation container
+ * @csspart icon - Icon content styling container
+ * @csspart label - Text label styling container
+ * @csspart progressRing - Loading state progress indicator
+ * @csspart elevation - Shadow and elevation styling container
  *
- * @cssprop {String} --fab-font-family - The font family for the FAB.
- * @cssprop {String} --fab-font-size - The font size for the FAB.
- * @cssprop {String} --fab-font-line-height - The line height for the FAB font.
- * @cssprop {String} --fab-font-weight - The font weight for the FAB.
- * @cssprop {String} --fab-font-letter-spacing - The letter spacing for the FAB font.
- * @cssprop {String} --fab-font-text-decoration - The text decoration for the FAB font.
- * @cssprop {String} --fab-font-text-transform - The text transform for the FAB font.
- * @cssprop {String} --fab-padding-top - The top padding for the FAB.
- * @cssprop {String} --fab-padding-right - The right padding for the FAB.
- * @cssprop {String} --fab-padding-bottom - The bottom padding for the FAB.
- * @cssprop {String} --fab-padding-left - The left padding for the FAB.
- * @cssprop {String} --fab-gap - The gap between FAB elements.
- * @cssprop {String} --fab-transition-duration - The transition duration for the FAB.
- * @cssprop {String} --fab-transition-mode - The transition mode for the FAB.
- * @cssprop {String} --fab-transition-property - The transition property for the FAB.
- * @cssprop {String} --fab-background-color - The background color of the FAB.
- * @cssprop {String} --fab-border-color - The border color of the FAB.
- * @cssprop {String} --fab-foreground-color - The foreground color of the FAB.
- * @cssprop {String} --fab-border-width - The border width of the FAB.
- * @cssprop {String} --fab-border-radius - The border radius of the FAB.
- * @cssprop {String} --fab-border-style - The border style of the FAB.
- * @cssprop {String} --fab-shadow - The shadow of the FAB.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset for the focus ring.
- * @cssprop {String} --fab-line-height - The line height for the FAB text.
+ * @cssprop --fab-font-family - Font family for button text and label
+ * @cssprop --fab-font-size - Font size for button text
+ * @cssprop --fab-font-line-height - Line height for button text
+ * @cssprop --fab-font-weight - Font weight for button text
+ * @cssprop --fab-font-letter-spacing - Letter spacing for button text
+ * @cssprop --fab-font-text-decoration - Text decoration for button text
+ * @cssprop --fab-font-text-transform - Text transform for button text
+ * @cssprop --fab-padding-top - Top padding for button content
+ * @cssprop --fab-padding-right - Right padding for button content
+ * @cssprop --fab-padding-bottom - Bottom padding for button content
+ * @cssprop --fab-padding-left - Left padding for button content
+ * @cssprop --fab-gap - Gap between icon and label elements
+ * @cssprop --fab-elevation - Elevation shadow level for the button
+ * @cssprop --fab-background-color - Background color for the button
+ * @cssprop --fab-border-radius - Border radius for circular styling
  *
- * @dependency {StackElement} - The Stack element.
- * @dependency {IconElement} - The Icon element.
- * @dependency {RippleElement} - The Ripple element.
- * @dependency {FocusRingElement} - The Focus Ring element.
- * @dependency {TextElement} - The Text element.
- * @dependency {ProgressRingElement} - The Progress Ring element.
- * @dependency {ElevationElement} - The Elevation element.
+ * @fires click - Dispatched when the button is clicked or activated
+ * @fires focus - Dispatched when the button receives focus
+ * @fires blur - Dispatched when the button loses focus
+ *
+ * @dependency RippleElement - For interactive ripple effects on user interaction
+ * @dependency StackElement - For layout management of icon and label
+ * @dependency IconElement - For displaying primary action icons
+ * @dependency ElevationElement - For creating elevated shadow effects
+ * @dependency FocusRingElement - For accessibility focus indicators
+ * @dependency TextElement - For optional text labels
+ * @dependency ProgressRingElement - For loading state visualization
  *
  * @example
  * ```html
- * <mosaik-fab label="Action" icon="add"></mosaik-fab>
+ * <!-- Primary action FAB -->
+ * <mosaik-fab onclick="createNew()">
+ *   <mosaik-icon slot="icon" data="plus"></mosaik-icon>
+ * </mosaik-fab>
+ *
+ * <!-- FAB with label (extended) -->
+ * <mosaik-fab appearance="primary">
+ *   <mosaik-icon slot="icon" data="edit"></mosaik-icon>
+ *   <mosaik-text slot="label">Compose</mosaik-text>
+ * </mosaik-fab>
+ *
+ * <!-- FAB with notification badge -->
+ * <mosaik-fab>
+ *   <mosaik-icon slot="icon" data="message-circle"></mosaik-icon>
+ *   <mosaik-badge slot="overlay" value="3"></mosaik-badge>
+ * </mosaik-fab>
+ *
+ * <!-- Loading state FAB -->
+ * <mosaik-fab busy="true">
+ *   <mosaik-icon slot="icon" data="upload"></mosaik-icon>
+ * </mosaik-fab>
+ *
+ * <!-- Secondary action FAB -->
+ * <mosaik-fab appearance="soft" size="small">
+ *   <mosaik-icon slot="icon" data="heart"></mosaik-icon>
+ * </mosaik-fab>
  * ```
  *
  * @public

package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingActionButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;;AAS7F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBAsBa,2BACT,SAAQ,gCACR,YAAW,iCAAiC;IAI5C;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;GAEG;AACH,yBAAiB,2BAA2B,CAAC;IACzC,KAAY,KAAK,GAAG,iCAAiC,CAAC;CACzD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,2BAA2B,CAAC;KAC7C;CACJ"}
+{"version":3,"file":"FloatingActionButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;;AAS7F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBAsBa,2BACT,SAAQ,gCACR,YAAW,iCAAiC;IAI5C;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;GAEG;AACH,yBAAiB,2BAA2B,CAAC;IACzC,KAAY,KAAK,GAAG,iCAAiC,CAAC;CACzD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,2BAA2B,CAAC;KAC7C;CACJ"}

package/Controls/Components/Buttons/FloatingActionButton/FloatingActionButtonElement.js

@@ -27,66 +27,84 @@ import { Themeable } from '../../../Behaviors/Themeable';
 import { Iconable } from '../../../Behaviors/Iconable';
 // #endregion
 /**
- * Floating Action Button - A prominent UI button that triggers a primary action in an application.
+ * FloatingActionButton - A prominent circular button designed for primary actions with elevated visual prominence.
  *
- * @description
- * The Floating Action Button (FAB) is a prominent, circular UI element often used in user interfaces to initiate
- * a primary or high-priority action. It is designed to be visually distinctive and easily accessible, typically
- * positioned in a fixed or floating location on the screen for quick access. FABs are commonly employed for actions
- * such as creating new content, sharing, or navigation in mobile and web applications.
+ * Creates a distinctive, floating circular button optimized for triggering the most important action
+ * on a screen. Features elevated styling, ripple effects, and optional labeling to draw user attention
+ * to critical functionality like creating content, composing messages, or initiating workflows.
  *
- * @name Floating Action Button
+ * @name FloatingActionButtonElement
  * @element mosaik-fab
  * @category Buttons
  *
- * @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
  *
- * @csspart button - The button part.
- * @csspart focusRing - The focus ring part.
- * @csspart ripple - The ripple part.
- * @csspart icon - The icon part.
- * @csspart label - The label part.
- * @csspart progressRing - The progress ring part.
- * @csspart elevation - The elevation part.
+ * @csspart button - Main button element container
+ * @csspart focusRing - Focus ring indicator for accessibility
+ * @csspart ripple - Ripple effect animation container
+ * @csspart icon - Icon content styling container
+ * @csspart label - Text label styling container
+ * @csspart progressRing - Loading state progress indicator
+ * @csspart elevation - Shadow and elevation styling container
  *
- * @cssprop {String} --fab-font-family - The font family for the FAB.
- * @cssprop {String} --fab-font-size - The font size for the FAB.
- * @cssprop {String} --fab-font-line-height - The line height for the FAB font.
- * @cssprop {String} --fab-font-weight - The font weight for the FAB.
- * @cssprop {String} --fab-font-letter-spacing - The letter spacing for the FAB font.
- * @cssprop {String} --fab-font-text-decoration - The text decoration for the FAB font.
- * @cssprop {String} --fab-font-text-transform - The text transform for the FAB font.
- * @cssprop {String} --fab-padding-top - The top padding for the FAB.
- * @cssprop {String} --fab-padding-right - The right padding for the FAB.
- * @cssprop {String} --fab-padding-bottom - The bottom padding for the FAB.
- * @cssprop {String} --fab-padding-left - The left padding for the FAB.
- * @cssprop {String} --fab-gap - The gap between FAB elements.
- * @cssprop {String} --fab-transition-duration - The transition duration for the FAB.
- * @cssprop {String} --fab-transition-mode - The transition mode for the FAB.
- * @cssprop {String} --fab-transition-property - The transition property for the FAB.
- * @cssprop {String} --fab-background-color - The background color of the FAB.
- * @cssprop {String} --fab-border-color - The border color of the FAB.
- * @cssprop {String} --fab-foreground-color - The foreground color of the FAB.
- * @cssprop {String} --fab-border-width - The border width of the FAB.
- * @cssprop {String} --fab-border-radius - The border radius of the FAB.
- * @cssprop {String} --fab-border-style - The border style of the FAB.
- * @cssprop {String} --fab-shadow - The shadow of the FAB.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset for the focus ring.
- * @cssprop {String} --fab-line-height - The line height for the FAB text.
+ * @cssprop --fab-font-family - Font family for button text and label
+ * @cssprop --fab-font-size - Font size for button text
+ * @cssprop --fab-font-line-height - Line height for button text
+ * @cssprop --fab-font-weight - Font weight for button text
+ * @cssprop --fab-font-letter-spacing - Letter spacing for button text
+ * @cssprop --fab-font-text-decoration - Text decoration for button text
+ * @cssprop --fab-font-text-transform - Text transform for button text
+ * @cssprop --fab-padding-top - Top padding for button content
+ * @cssprop --fab-padding-right - Right padding for button content
+ * @cssprop --fab-padding-bottom - Bottom padding for button content
+ * @cssprop --fab-padding-left - Left padding for button content
+ * @cssprop --fab-gap - Gap between icon and label elements
+ * @cssprop --fab-elevation - Elevation shadow level for the button
+ * @cssprop --fab-background-color - Background color for the button
+ * @cssprop --fab-border-radius - Border radius for circular styling
  *
- * @dependency {StackElement} - The Stack element.
- * @dependency {IconElement} - The Icon element.
- * @dependency {RippleElement} - The Ripple element.
- * @dependency {FocusRingElement} - The Focus Ring element.
- * @dependency {TextElement} - The Text element.
- * @dependency {ProgressRingElement} - The Progress Ring element.
- * @dependency {ElevationElement} - The Elevation element.
+ * @fires click - Dispatched when the button is clicked or activated
+ * @fires focus - Dispatched when the button receives focus
+ * @fires blur - Dispatched when the button loses focus
+ *
+ * @dependency RippleElement - For interactive ripple effects on user interaction
+ * @dependency StackElement - For layout management of icon and label
+ * @dependency IconElement - For displaying primary action icons
+ * @dependency ElevationElement - For creating elevated shadow effects
+ * @dependency FocusRingElement - For accessibility focus indicators
+ * @dependency TextElement - For optional text labels
+ * @dependency ProgressRingElement - For loading state visualization
  *
  * @example
  * ```html
- * <mosaik-fab label="Action" icon="add"></mosaik-fab>
+ * <!-- Primary action FAB -->
+ * <mosaik-fab onclick="createNew()">
+ *   <mosaik-icon slot="icon" data="plus"></mosaik-icon>
+ * </mosaik-fab>
+ *
+ * <!-- FAB with label (extended) -->
+ * <mosaik-fab appearance="primary">
+ *   <mosaik-icon slot="icon" data="edit"></mosaik-icon>
+ *   <mosaik-text slot="label">Compose</mosaik-text>
+ * </mosaik-fab>
+ *
+ * <!-- FAB with notification badge -->
+ * <mosaik-fab>
+ *   <mosaik-icon slot="icon" data="message-circle"></mosaik-icon>
+ *   <mosaik-badge slot="overlay" value="3"></mosaik-badge>
+ * </mosaik-fab>
+ *
+ * <!-- Loading state FAB -->
+ * <mosaik-fab busy="true">
+ *   <mosaik-icon slot="icon" data="upload"></mosaik-icon>
+ * </mosaik-fab>
+ *
+ * <!-- Secondary action FAB -->
+ * <mosaik-fab appearance="soft" size="small">
+ *   <mosaik-icon slot="icon" data="heart"></mosaik-icon>
+ * </mosaik-fab>
  * ```
  *
  * @public