@breadstone/mosaik-elements-foundation 0.0.147 → 0.0.149

package/Controls/Components/Buttons/Anchor/AnchorElement.d.ts

@@ -3,44 +3,70 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IAnchorElementProps } from './IAnchorElementProps';
 declare const AnchorElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Anchor - A component representing a hyperlink or clickable element that navigates to a different location.
+ * Anchor - A hyperlink component for navigation between pages or external resources.
  *
  * @description
- * The Anchor component provides a customizable hyperlink element that can be used for navigation or as a clickable link
- * in a user interface. It supports extensive styling options through CSS properties and can be used in various
- * contexts where linking or navigation is required.
+ * The Anchor component provides a customizable hyperlink element that functions as a clickable link
+ * for navigation. It extends the native anchor element functionality with enhanced styling,
+ * accessibility features, and consistent visual appearance across the design system.
+ * The component supports various underline styles, target configurations, and download attributes.
  *
  * @name Anchor
  * @element mosaik-anchor
  * @category Links
  *
- * @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
  *
- * @csspart link - The link part of the Anchor component.
- * @csspart label - The label part of the Anchor component.
- * @csspart focusRing - The focus ring part.
+ * @csspart link - The main link element wrapper
+ * @csspart label - The text label area of the anchor
+ * @csspart focusRing - The focus indicator ring that appears during keyboard navigation
  *
- * @cssprop {String} --anchor-font-family - The font family for the Anchor component.
- * @cssprop {String} --anchor-font-size - The font size for the Anchor component.
- * @cssprop {String} --anchor-font-line-height - The line height for the Anchor component font.
- * @cssprop {String} --anchor-font-weight - The font weight for the Anchor component.
- * @cssprop {String} --anchor-font-letter-spacing - The letter spacing for the Anchor component font.
- * @cssprop {String} --anchor-font-text-decoration - The text decoration for the Anchor component font.
- * @cssprop {String} --anchor-font-text-transform - The text transform for the Anchor component font.
- * @cssprop {String} --anchor-background-color - The background color of the Anchor component.
- * @cssprop {String} --anchor-border-color - The border color of the Anchor component.
- * @cssprop {String} --anchor-foreground-color - The foreground color of the Anchor component.
- * @cssprop {unknown} --anchor-transition-duration - The transition duration for the Anchor component.
+ * @cssprop {String} --anchor-font-family - The font family for the anchor text
+ * @cssprop {String} --anchor-font-size - The font size of the anchor text
+ * @cssprop {String} --anchor-font-line-height - The line height for anchor text
+ * @cssprop {String} --anchor-font-weight - The font weight for anchor text
+ * @cssprop {String} --anchor-font-letter-spacing - The letter spacing for anchor text
+ * @cssprop {String} --anchor-font-text-decoration - The text decoration style (underline, none, etc.)
+ * @cssprop {String} --anchor-font-text-transform - The text transformation (uppercase, lowercase, etc.)
+ * @cssprop {String} --anchor-background-color - The background color of the anchor
+ * @cssprop {String} --anchor-border-color - The border color of the anchor
+ * @cssprop {String} --anchor-foreground-color - The text color of the anchor
+ * @cssprop {String} --anchor-transition-duration - The duration of hover and focus transitions
  *
- * @dependency {TextElement} - The Text element.
+ * @dependency {TextElement} - Text component for rendering the anchor label
  *
  * @example
+ * Basic external link:
  * ```html
- * <mosaik-anchor href="https://example.com">
+ * <mosaik-anchor href="https://example.com" target="_blank" rel="noopener">
  *   <span slot="label">Visit Example.com</span>
  * </mosaik-anchor>
  * ```
  *
+ * @example
+ * Navigation link with custom underline:
+ * ```html
+ * <mosaik-anchor href="/about" underline="hover">
+ *   <span slot="label">About Us</span>
+ * </mosaik-anchor>
+ * ```
+ *
+ * @example
+ * Download link:
+ * ```html
+ * <mosaik-anchor href="/files/document.pdf" download="document.pdf">
+ *   <span slot="label">Download PDF</span>
+ * </mosaik-anchor>
+ * ```
+ *
+ * @example
+ * Disabled anchor:
+ * ```html
+ * <mosaik-anchor href="/disabled" disabled>
+ *   <span slot="label">Unavailable Link</span>
+ * </mosaik-anchor>
+ * ```
+ *
  * @public
  */
 export declare class AnchorElement extends AnchorElement_base implements IAnchorElementProps {

package/Controls/Components/Buttons/Anchor/AnchorElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Anchor/AnchorElement.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAqB;IAMvC;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IAED,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAK3B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,kBAAkB,CAEzC;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAK7C;CAIJ;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"AnchorElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Anchor/AnchorElement.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAqB;IAMvC;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IAED,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAK3B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,kBAAkB,CAEzC;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAK7C;CAIJ;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Buttons/Anchor/AnchorElement.js

@@ -24,44 +24,70 @@ import { anchorElementRetroStyle } from './Themes/AnchorElement.Retro';
 import { anchorElementCosmopolitanStyle } from './Themes/AnchorElement.Cosmopolitan';
 // #endregion
 /**
- * Anchor - A component representing a hyperlink or clickable element that navigates to a different location.
+ * Anchor - A hyperlink component for navigation between pages or external resources.
  *
  * @description
- * The Anchor component provides a customizable hyperlink element that can be used for navigation or as a clickable link
- * in a user interface. It supports extensive styling options through CSS properties and can be used in various
- * contexts where linking or navigation is required.
+ * The Anchor component provides a customizable hyperlink element that functions as a clickable link
+ * for navigation. It extends the native anchor element functionality with enhanced styling,
+ * accessibility features, and consistent visual appearance across the design system.
+ * The component supports various underline styles, target configurations, and download attributes.
  *
  * @name Anchor
  * @element mosaik-anchor
  * @category Links
  *
- * @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
  *
- * @csspart link - The link part of the Anchor component.
- * @csspart label - The label part of the Anchor component.
- * @csspart focusRing - The focus ring part.
+ * @csspart link - The main link element wrapper
+ * @csspart label - The text label area of the anchor
+ * @csspart focusRing - The focus indicator ring that appears during keyboard navigation
  *
- * @cssprop {String} --anchor-font-family - The font family for the Anchor component.
- * @cssprop {String} --anchor-font-size - The font size for the Anchor component.
- * @cssprop {String} --anchor-font-line-height - The line height for the Anchor component font.
- * @cssprop {String} --anchor-font-weight - The font weight for the Anchor component.
- * @cssprop {String} --anchor-font-letter-spacing - The letter spacing for the Anchor component font.
- * @cssprop {String} --anchor-font-text-decoration - The text decoration for the Anchor component font.
- * @cssprop {String} --anchor-font-text-transform - The text transform for the Anchor component font.
- * @cssprop {String} --anchor-background-color - The background color of the Anchor component.
- * @cssprop {String} --anchor-border-color - The border color of the Anchor component.
- * @cssprop {String} --anchor-foreground-color - The foreground color of the Anchor component.
- * @cssprop {unknown} --anchor-transition-duration - The transition duration for the Anchor component.
+ * @cssprop {String} --anchor-font-family - The font family for the anchor text
+ * @cssprop {String} --anchor-font-size - The font size of the anchor text
+ * @cssprop {String} --anchor-font-line-height - The line height for anchor text
+ * @cssprop {String} --anchor-font-weight - The font weight for anchor text
+ * @cssprop {String} --anchor-font-letter-spacing - The letter spacing for anchor text
+ * @cssprop {String} --anchor-font-text-decoration - The text decoration style (underline, none, etc.)
+ * @cssprop {String} --anchor-font-text-transform - The text transformation (uppercase, lowercase, etc.)
+ * @cssprop {String} --anchor-background-color - The background color of the anchor
+ * @cssprop {String} --anchor-border-color - The border color of the anchor
+ * @cssprop {String} --anchor-foreground-color - The text color of the anchor
+ * @cssprop {String} --anchor-transition-duration - The duration of hover and focus transitions
  *
- * @dependency {TextElement} - The Text element.
+ * @dependency {TextElement} - Text component for rendering the anchor label
  *
  * @example
+ * Basic external link:
  * ```html
- * <mosaik-anchor href="https://example.com">
+ * <mosaik-anchor href="https://example.com" target="_blank" rel="noopener">
  *   <span slot="label">Visit Example.com</span>
  * </mosaik-anchor>
  * ```
  *
+ * @example
+ * Navigation link with custom underline:
+ * ```html
+ * <mosaik-anchor href="/about" underline="hover">
+ *   <span slot="label">About Us</span>
+ * </mosaik-anchor>
+ * ```
+ *
+ * @example
+ * Download link:
+ * ```html
+ * <mosaik-anchor href="/files/document.pdf" download="document.pdf">
+ *   <span slot="label">Download PDF</span>
+ * </mosaik-anchor>
+ * ```
+ *
+ * @example
+ * Disabled anchor:
+ * ```html
+ * <mosaik-anchor href="/disabled" disabled>
+ *   <span slot="label">Unavailable Link</span>
+ * </mosaik-anchor>
+ * ```
+ *
  * @public
  */
 let AnchorElement = class AnchorElement extends Themeable(Variantable(Disableable(Labelable(CustomElement)))) {

package/Controls/Components/Buttons/Anchor/AnchorElement.js.map

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

package/Controls/Components/Buttons/Button/ButtonElement.d.ts

@@ -3,67 +3,107 @@ import type { IButtonElementProps } from './IButtonElementProps';
 import type { IButtonLinkElementProps } from './IButtonLinkElementProps';
 declare const ButtonElement_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;
 /**
- * Button - An interactive UI element typically used to trigger actions or user interactions.
+ * Button - A versatile interactive element for triggering actions and user interactions.
  *
  * @description
- * The Button component is a fundamental user interface element used to create interactive elements within a web application.
- * Buttons are often labeled with text or icons and are used to initiate actions when clicked or pressed. They can trigger
- * various actions, such as form submissions, navigation, or user interactions.
+ * The Button component is a fundamental user interface element that provides interactive
+ * functionality within applications. It supports various configurations including text labels,
+ * icons, busy states, different orientations, and content alignment options. The button can
+ * function as a traditional button, a link, or a download trigger, making it highly versatile
+ * for different use cases. It includes advanced features like ripple effects, focus rings,
+ * progress indicators, and comprehensive accessibility support.
  *
  * @name Button
  * @element mosaik-button
  * @category Buttons
  *
- * @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
  *
- * @csspart button - the button part.
- * @csspart link - the link 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 button - The main button element container
+ * @csspart link - The link element when href is provided
+ * @csspart focusRing - The focus indicator ring for keyboard navigation
+ * @csspart ripple - The touch feedback ripple effect container
+ * @csspart icon - The icon display area within the button
+ * @csspart label - The text label display area within the button
+ * @csspart progressRing - The busy state progress indicator
  *
- * @cssprop {String} --button-font-family - The font family.
- * @cssprop {String} --button-font-size - The font size.
- * @cssprop {String} --button-font-line-height - The font line height.
- * @cssprop {String} --button-font-weight - The font weight.
- * @cssprop {String} --button-font-letter-spacing - The font letter spacing.
- * @cssprop {String} --button-font-text-decoration - The font text decoration.
- * @cssprop {String} --button-font-text-transform - The font text transform.
- * @cssprop {String} --button-padding-top - The padding top.
- * @cssprop {String} --button-padding-right - The padding right.
- * @cssprop {String} --button-padding-bottom - The padding bottom.
- * @cssprop {String} --button-padding-left - The padding left.
- * @cssprop {String} --button-gap - The gap.
- * @cssprop {String} --button-transition-duration - The transition duration.
- * @cssprop {String} --button-transition-mode - The transition mode.
- * @cssprop {String} --button-transition-property - The transition property.
- * @cssprop {String} --button-foreground-color - The foreground color.
- * @cssprop {String} --button-background-color - The background color.
- * @cssprop {String} --button-border-color - The border color.
- * @cssprop {String} --button-border-width - The border width.
- * @cssprop {String} --button-border-radius - The border radius.
- * @cssprop {String} --button-border-style - The border style.
- * @cssprop {String} --button-shadow - The shadow.
- * @cssprop {String} --button-width - The width.
- * @cssprop {String} --button-height - The height.
- * @cssprop {String} --focus-ring-outward-offset - The focus ring outward offset.
- * @cssprop {String} --button-focus-ring-color - The focus ring color.
- * @cssprop {String} --button-progress-thickness - The progress ring thickness.
+ * @cssprop {String} --button-font-family - The font family for button text
+ * @cssprop {String} --button-font-size - The font size for button text
+ * @cssprop {String} --button-font-line-height - The line height for button text
+ * @cssprop {String} --button-font-weight - The font weight for button text
+ * @cssprop {String} --button-font-letter-spacing - The letter spacing for button text
+ * @cssprop {String} --button-font-text-decoration - The text decoration style
+ * @cssprop {String} --button-font-text-transform - The text transformation style
+ * @cssprop {String} --button-padding-top - The top padding inside the button
+ * @cssprop {String} --button-padding-right - The right padding inside the button
+ * @cssprop {String} --button-padding-bottom - The bottom padding inside the button
+ * @cssprop {String} --button-padding-left - The left padding inside the button
+ * @cssprop {String} --button-gap - The spacing between icon and label elements
+ * @cssprop {String} --button-transition-duration - The duration of hover/focus transitions
+ * @cssprop {String} --button-transition-mode - The timing function for transitions
+ * @cssprop {String} --button-transition-property - The CSS properties to transition
+ * @cssprop {String} --button-foreground-color - The text and icon color
+ * @cssprop {String} --button-background-color - The background fill color
+ * @cssprop {String} --button-border-color - The border outline color
+ * @cssprop {String} --button-border-width - The border thickness
+ * @cssprop {String} --button-border-radius - The corner rounding radius
+ * @cssprop {String} --button-border-style - The border line style
+ * @cssprop {String} --button-shadow - The drop shadow or elevation effect
+ * @cssprop {String} --button-width - The button width (when not using fit behavior)
+ * @cssprop {String} --button-height - The button height
+ * @cssprop {String} --focus-ring-outward-offset - The focus ring distance from button edge
+ * @cssprop {String} --button-focus-ring-color - The focus ring color
+ * @cssprop {String} --button-progress-thickness - The busy state progress ring thickness
  *
- * @dependency {StackElement} mosaik-stack - The stack element.
- * @dependency {IconElement} mosaik-icon - The icon element.
- * @dependency {RippleElement} mosaik-ripple - The ripple element.
- * @dependency {FocusRingElement} mosaik-focus-ring - The focus ring element.
- * @dependency {TextElement} mosaik-text - The text element.
- * @dependency {ProgressRingElement} mosaik-progress-ring - The progress ring element.
+ * @dependency {StackElement} - Layout container for organizing button content
+ * @dependency {IconElement} - Icon display component for button graphics
+ * @dependency {RippleElement} - Touch feedback effect component
+ * @dependency {FocusRingElement} - Keyboard focus indicator component
+ * @dependency {TextElement} - Text rendering component for button labels
+ * @dependency {ProgressRingElement} - Progress indicator for busy states
  *
  * @example
+ * Basic button with label:
  * ```html
- * <mosaik-button label="Button"></mosaik-button>
+ * <mosaik-button label="Click Me"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Button with icon and label:
+ * ```html
+ * <mosaik-button label="Save" icon="save-icon-path" variant="primary"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Icon-only button:
+ * ```html
+ * <mosaik-button icon="menu-icon-path" aria-label="Open menu"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Button as a link:
+ * ```html
+ * <mosaik-button label="Visit Site" href="https://example.com" target="_blank"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Busy/loading button:
+ * ```html
+ * <mosaik-button label="Processing..." busy disabled></mosaik-button>
+ * ```
+ *
+ * @example
+ * Download button:
+ * ```html
+ * <mosaik-button label="Download PDF" href="/document.pdf" download="document.pdf"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Vertical button layout:
+ * ```html
+ * <mosaik-button label="Upload" icon="upload-icon-path" orientation="vertical"></mosaik-button>
  * ```
  *
  * @public

package/Controls/Components/Buttons/Button/ButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Button/ButtonElement.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAOzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBAqBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,uBAAuB;IAIvD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAS;IAMxB;;;;OAIG;;IAcH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IAED,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAK3B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAMD;;OAEG;IAEH,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAUrE;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Button/ButtonElement.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAOzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGG;AACH,qBAqBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,uBAAuB;IAIvD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAS;IAMxB;;;;OAIG;;IAcH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IAED,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAK3B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAMD;;OAEG;IAEH,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAUrE;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Buttons/Button/ButtonElement.js

@@ -33,67 +33,107 @@ import { Themeable } from '../../../../Controls/Behaviors/Themeable';
 import { buttonElementCosmopolitanStyle } from './Themes/ButtonElement.Cosmopolitan';
 // #endregion
 /**
- * Button - An interactive UI element typically used to trigger actions or user interactions.
+ * Button - A versatile interactive element for triggering actions and user interactions.
  *
  * @description
- * The Button component is a fundamental user interface element used to create interactive elements within a web application.
- * Buttons are often labeled with text or icons and are used to initiate actions when clicked or pressed. They can trigger
- * various actions, such as form submissions, navigation, or user interactions.
+ * The Button component is a fundamental user interface element that provides interactive
+ * functionality within applications. It supports various configurations including text labels,
+ * icons, busy states, different orientations, and content alignment options. The button can
+ * function as a traditional button, a link, or a download trigger, making it highly versatile
+ * for different use cases. It includes advanced features like ripple effects, focus rings,
+ * progress indicators, and comprehensive accessibility support.
  *
  * @name Button
  * @element mosaik-button
  * @category Buttons
  *
- * @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
  *
- * @csspart button - the button part.
- * @csspart link - the link 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 button - The main button element container
+ * @csspart link - The link element when href is provided
+ * @csspart focusRing - The focus indicator ring for keyboard navigation
+ * @csspart ripple - The touch feedback ripple effect container
+ * @csspart icon - The icon display area within the button
+ * @csspart label - The text label display area within the button
+ * @csspart progressRing - The busy state progress indicator
  *
- * @cssprop {String} --button-font-family - The font family.
- * @cssprop {String} --button-font-size - The font size.
- * @cssprop {String} --button-font-line-height - The font line height.
- * @cssprop {String} --button-font-weight - The font weight.
- * @cssprop {String} --button-font-letter-spacing - The font letter spacing.
- * @cssprop {String} --button-font-text-decoration - The font text decoration.
- * @cssprop {String} --button-font-text-transform - The font text transform.
- * @cssprop {String} --button-padding-top - The padding top.
- * @cssprop {String} --button-padding-right - The padding right.
- * @cssprop {String} --button-padding-bottom - The padding bottom.
- * @cssprop {String} --button-padding-left - The padding left.
- * @cssprop {String} --button-gap - The gap.
- * @cssprop {String} --button-transition-duration - The transition duration.
- * @cssprop {String} --button-transition-mode - The transition mode.
- * @cssprop {String} --button-transition-property - The transition property.
- * @cssprop {String} --button-foreground-color - The foreground color.
- * @cssprop {String} --button-background-color - The background color.
- * @cssprop {String} --button-border-color - The border color.
- * @cssprop {String} --button-border-width - The border width.
- * @cssprop {String} --button-border-radius - The border radius.
- * @cssprop {String} --button-border-style - The border style.
- * @cssprop {String} --button-shadow - The shadow.
- * @cssprop {String} --button-width - The width.
- * @cssprop {String} --button-height - The height.
- * @cssprop {String} --focus-ring-outward-offset - The focus ring outward offset.
- * @cssprop {String} --button-focus-ring-color - The focus ring color.
- * @cssprop {String} --button-progress-thickness - The progress ring thickness.
+ * @cssprop {String} --button-font-family - The font family for button text
+ * @cssprop {String} --button-font-size - The font size for button text
+ * @cssprop {String} --button-font-line-height - The line height for button text
+ * @cssprop {String} --button-font-weight - The font weight for button text
+ * @cssprop {String} --button-font-letter-spacing - The letter spacing for button text
+ * @cssprop {String} --button-font-text-decoration - The text decoration style
+ * @cssprop {String} --button-font-text-transform - The text transformation style
+ * @cssprop {String} --button-padding-top - The top padding inside the button
+ * @cssprop {String} --button-padding-right - The right padding inside the button
+ * @cssprop {String} --button-padding-bottom - The bottom padding inside the button
+ * @cssprop {String} --button-padding-left - The left padding inside the button
+ * @cssprop {String} --button-gap - The spacing between icon and label elements
+ * @cssprop {String} --button-transition-duration - The duration of hover/focus transitions
+ * @cssprop {String} --button-transition-mode - The timing function for transitions
+ * @cssprop {String} --button-transition-property - The CSS properties to transition
+ * @cssprop {String} --button-foreground-color - The text and icon color
+ * @cssprop {String} --button-background-color - The background fill color
+ * @cssprop {String} --button-border-color - The border outline color
+ * @cssprop {String} --button-border-width - The border thickness
+ * @cssprop {String} --button-border-radius - The corner rounding radius
+ * @cssprop {String} --button-border-style - The border line style
+ * @cssprop {String} --button-shadow - The drop shadow or elevation effect
+ * @cssprop {String} --button-width - The button width (when not using fit behavior)
+ * @cssprop {String} --button-height - The button height
+ * @cssprop {String} --focus-ring-outward-offset - The focus ring distance from button edge
+ * @cssprop {String} --button-focus-ring-color - The focus ring color
+ * @cssprop {String} --button-progress-thickness - The busy state progress ring thickness
  *
- * @dependency {StackElement} mosaik-stack - The stack element.
- * @dependency {IconElement} mosaik-icon - The icon element.
- * @dependency {RippleElement} mosaik-ripple - The ripple element.
- * @dependency {FocusRingElement} mosaik-focus-ring - The focus ring element.
- * @dependency {TextElement} mosaik-text - The text element.
- * @dependency {ProgressRingElement} mosaik-progress-ring - The progress ring element.
+ * @dependency {StackElement} - Layout container for organizing button content
+ * @dependency {IconElement} - Icon display component for button graphics
+ * @dependency {RippleElement} - Touch feedback effect component
+ * @dependency {FocusRingElement} - Keyboard focus indicator component
+ * @dependency {TextElement} - Text rendering component for button labels
+ * @dependency {ProgressRingElement} - Progress indicator for busy states
  *
  * @example
+ * Basic button with label:
  * ```html
- * <mosaik-button label="Button"></mosaik-button>
+ * <mosaik-button label="Click Me"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Button with icon and label:
+ * ```html
+ * <mosaik-button label="Save" icon="save-icon-path" variant="primary"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Icon-only button:
+ * ```html
+ * <mosaik-button icon="menu-icon-path" aria-label="Open menu"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Button as a link:
+ * ```html
+ * <mosaik-button label="Visit Site" href="https://example.com" target="_blank"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Busy/loading button:
+ * ```html
+ * <mosaik-button label="Processing..." busy disabled></mosaik-button>
+ * ```
+ *
+ * @example
+ * Download button:
+ * ```html
+ * <mosaik-button label="Download PDF" href="/document.pdf" download="document.pdf"></mosaik-button>
+ * ```
+ *
+ * @example
+ * Vertical button layout:
+ * ```html
+ * <mosaik-button label="Upload" icon="upload-icon-path" orientation="vertical"></mosaik-button>
  * ```
  *
  * @public

package/Controls/Components/Buttons/Button/ButtonElement.js.map

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