@breadstone/mosaik-elements-foundation 0.0.146 → 0.0.148

package/Controls/Components/Forms/FormElement.js

@@ -24,31 +24,90 @@ import { HTMLElementEventEmitter, on } from '@breadstone/mosaik-elements';
 import { Slottable } from '../../Behaviors/Slottable';
 // #endregion
 /**
- * Form - A component that represents a form container.
+ * Form - A structured container for collecting and validating user input data.
  *
- * @description
- * This element serves as a container for form inputs and buttons. *
+ * Provides form submission handling, validation coordination, and data collection across
+ * multiple form controls. Supports custom form data serialization and validation workflows.
+ * Essential for user registration, settings panels, and data entry interfaces.
  *
- * @name Form
+ * @name FormElement
  * @element mosaik-form
  * @category Forms
  *
- * @fires submitted {CustomEvent<IFormSubmitEventDetail>} - Fired when the form is submitted.
- * @fires reseted {CustomEvent<IFormResetEventDetail>} - Fired when the form is reseted.
+ * @slot - Default content area for form controls and layout elements
  *
- * @slot - The default slot where form controls can be placed.
+ * @csspart form - The main form container element
  *
- * @csspart form - The part representing the form container itself.
+ * @cssprop --form-background-color - Background color of the form container
+ * @cssprop --form-padding - Internal padding for form content
+ * @cssprop --form-gap - Spacing between form elements
+ * @cssprop --form-border-radius - Border radius for form container
+ * @cssprop --form-border-color - Border color around the form
+ * @cssprop --form-max-width - Maximum width constraint for the form
+ *
+ * @dependency FormFieldElement - Provides structured form field layout and validation
  *
  * @example
  * ```html
- * <mosaik-form>
- *   <input type="text" name="username" placeholder="Username">
- *   <input type="password" name="password" placeholder="Password">
- *   <button type="submit">Submit</button>
+ * <!-- User registration form -->
+ * <mosaik-form id="registrationForm">
+ *   <mosaik-form-field label="Full Name" required>
+ *     <mosaik-text-field name="fullName" required></mosaik-text-field>
+ *   </mosaik-form-field>
+ *
+ *   <mosaik-form-field label="Email" required>
+ *     <mosaik-text-field name="email" type="email" required></mosaik-text-field>
+ *   </mosaik-form-field>
+ *
+ *   <mosaik-form-field label="Password" required>
+ *     <mosaik-text-field name="password" type="password" required></mosaik-text-field>
+ *   </mosaik-form-field>
+ *
+ *   <div class="form-actions">
+ *     <mosaik-button type="reset">Reset</mosaik-button>
+ *     <mosaik-button type="submit" appearance="primary">Register</mosaik-button>
+ *   </div>
+ * </mosaik-form>
+ *
+ * <!-- Settings form with validation -->
+ * <mosaik-form novalidate>
+ *   <mosaik-form-field label="Theme Preference">
+ *     <mosaik-select name="theme">
+ *       <option value="light">Light</option>
+ *       <option value="dark">Dark</option>
+ *       <option value="auto">System</option>
+ *     </mosaik-select>
+ *   </mosaik-form-field>
+ *
+ *   <mosaik-form-field label="Notifications">
+ *     <mosaik-checkbox name="emailNotifications">Email notifications</mosaik-checkbox>
+ *     <mosaik-checkbox name="pushNotifications">Push notifications</mosaik-checkbox>
+ *   </mosaik-form-field>
+ *
+ *   <mosaik-button type="submit">Save Settings</mosaik-button>
+ * </mosaik-form>
+ *
+ * <!-- Multi-step form -->
+ * <mosaik-form method="post" action="/api/submit">
+ *   <div class="form-step" data-step="1">
+ *     <h3>Personal Information</h3>
+ *     <mosaik-form-field label="First Name">
+ *       <mosaik-text-field name="firstName"></mosaik-text-field>
+ *     </mosaik-form-field>
+ *     <mosaik-form-field label="Last Name">
+ *       <mosaik-text-field name="lastName"></mosaik-text-field>
+ *     </mosaik-form-field>
+ *   </div>
+ *
+ *   <div class="form-actions">
+ *     <mosaik-button type="button">Next Step</mosaik-button>
+ *   </div>
  * </mosaik-form>
  * ```
  *
+ * @fires submitted - Emitted when the form is submitted with form data
+ * @fires reseted - Emitted when the form is reset to initial values
+ *
  * @public
  */
 let FormElement = class FormElement extends Themeable(Slottable(CustomElement)) {

package/Controls/Components/Forms/FormElement.js.map

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

package/Controls/Components/Grouping/Card/CardElement.d.ts

@@ -4,76 +4,81 @@ import type { ICardElementProps } from './ICardElementProps';
 import { ISelectable } from '../../../Behaviors/Selectable';
 declare const CardElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Insetable").IInsetableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Selectable").ISelectableProps & import("../../../Behaviors/Selectable").ISelectableEvents & ISelectable) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Card - A component that represents a card UI element for displaying related content.
+ * Card - A versatile container component for organizing related content in a visually distinct layout.
  *
- * @description This component is designed to encapsulate related information within a visually distinct container. Cards can include various sections such as a title, subtitle, content, actions, and footers, making them versatile for many use cases in a user interface.
+ * Provides structured sections for media, headers, content, and actions within a cohesive container.
+ * Supports elevation effects, selectable states, and flexible content arrangement.
+ * Essential for displaying information hierarchies like product listings, user profiles, and content previews.
  *
- * @name Card
+ * @name CardElement
  * @element mosaik-card
- * @category UI Components
+ * @category Grouping
  *
- * @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
  *
- * @csspart elevation - The part representing the elevation effect of the card.
- * @csspart cover - The part representing the cover area of the card.
- * @csspart heading - The part representing the heading area of the card.
- * @csspart media - The part representing the media content area of the card.
- * @csspart header - The part representing the header section of the card.
- * @csspart content - The part representing the main content area of the card.
- * @csspart actions - The part representing the actions area of the card.
- * @csspart footer - The part representing the footer area of the card.
+ * @csspart elevation - Container for card elevation and shadow effects
+ * @csspart cover - Cover image or media container at the top of the card
+ * @csspart heading - Header section container for titles and subtitles
+ * @csspart content - Main content area container
+ * @csspart actions - Actions section container for buttons and controls
+ * @csspart footer - Footer section container for additional content
  *
- * @cssprop {unknown} --card-font-family - The font-family property for the card text.
- * @cssprop {unknown} --card-font-size - The font-size property for the card text.
- * @cssprop {unknown} --card-font-line-height - The line-height property for the card text.
- * @cssprop {unknown} --card-font-weight - The font-weight property for the card text.
- * @cssprop {unknown} --card-font-letter-spacing - The letter-spacing property for the card text.
- * @cssprop {unknown} --card-font-text-decoration - The text-decoration property for the card text.
- * @cssprop {unknown} --card-font-text-transform - The text-transform property for the card text.
- * @cssprop {unknown} --card-background-color - The background-color property for the card.
- * @cssprop {unknown} --card-border-color - The border-color property for the card.
- * @cssprop {unknown} --card-foreground-color - The foreground-color property for the card.
- * @cssprop {unknown} --card-border-width - The border-width property for the card.
- * @cssprop {unknown} --card-border-radius - The border-radius property for the card.
- * @cssprop {unknown} --card-border-style - The border-style property for the card.
- * @cssprop {unknown} --card-transition-duration - The transition duration for card animations.
- * @cssprop {unknown} --card-transition-mode - The transition mode for card animations.
- * @cssprop {unknown} --card-transition-property - The transition property for the card animations.
- * @cssprop {unknown} --card-shadow - The shadow property for the card.
- * @cssprop {unknown} --card-divider-height - The height of any dividers within the card.
- * @cssprop {unknown} --_has-header - Indicates if the card has a header.
- * @cssprop {unknown} --_has-content - Indicates if the card has content.
- * @cssprop {unknown} --_has-actions - Indicates if the card has actions.
- * @cssprop {unknown} --_has-footer - Indicates if the card has a footer.
- * @cssprop {unknown} --card-content-padding-top - The top padding for the card content area.
+ * @cssprop --card-background-color - Background color of the card container
+ * @cssprop --card-border-radius - Border radius for card corners
+ * @cssprop --card-padding - Internal padding for card content
+ * @cssprop --card-elevation - Elevation level for shadow effects
+ * @cssprop --card-border-color - Border color around the card
+ * @cssprop --card-border-width - Border width for card outline
  *
- * @dependency {CardContentElement} - The Card Content element used within the card.
- * @dependency {CardHeaderElement} - The Card Header element used within the card.
- * @dependency {CardSubTitleElement} - The Card Sub Title element used within the card.
- * @dependency {CardTitleElement} - The Card Title element used within the card.
- * @dependency {CardActionsElement} - The Card Actions element used within the card.
- * @dependency {ElevationElement} - The Elevation element for visual depth.
+ * @dependency ElevationElement - Provides elevation and shadow effects
+ * @dependency CardHeaderElement - Structured header layout component
+ * @dependency CardContentElement - Main content area component
+ * @dependency CardActionsElement - Actions section layout component
+ * @dependency CardTitleElement - Title text component
+ * @dependency CardSubTitleElement - Subtitle text component
  *
  * @example
  * ```html
+ * <!-- Basic content card -->
  * <mosaik-card>
- *   <div slot="cover"><img src="cover-image.jpg" alt="Cover Image"></div>
- *   <div slot="media"><img src="media-image.jpg" alt="Media"></div>
- *   <mosaik-card-header>
- *     <mosaik-card-title>Card Title</mosaik-card-title>
- *     <mosaik-card-sub-title>Card Subtitle</mosaik-card-sub-title>
+ *   <mosaik-card-header slot="header">
+ *     <mosaik-card-title>Product Name</mosaik-card-title>
+ *     <mosaik-card-sub-title>Premium Edition</mosaik-card-sub-title>
  *   </mosaik-card-header>
- *   <mosaik-card-content>Content goes here.</mosaik-card-content>
- *   <mosaik-card-actions>
- *     <mosaik-button>Action 1</mosaik-button>
- *     <mosaik-button>Action 2</mosaik-button>
+ *   <mosaik-card-content slot="content">
+ *     <p>Detailed product description and features.</p>
+ *   </mosaik-card-content>
+ *   <mosaik-card-actions slot="actions">
+ *     <mosaik-button>Learn More</mosaik-button>
+ *     <mosaik-button appearance="primary">Buy Now</mosaik-button>
  *   </mosaik-card-actions>
- *   <mosaik-card-footer>Footer content goes here.</mosaik-card-footer>
+ * </mosaik-card>
+ *
+ * <!-- Media card with cover -->
+ * <mosaik-card elevation="2">
+ *   <img slot="cover" src="hero.jpg" alt="Product image">
+ *   <div slot="content">
+ *     <h3>Article Title</h3>
+ *     <p>Article summary and preview content.</p>
+ *   </div>
+ *   <div slot="footer">
+ *     <span>Published: March 2024</span>
+ *   </div>
+ * </mosaik-card>
+ *
+ * <!-- Selectable card -->
+ * <mosaik-card selectable selected>
+ *   <div slot="header">
+ *     <h4>Option A</h4>
+ *   </div>
+ *   <div slot="content">
+ *     <p>This option provides the best value.</p>
+ *   </div>
  * </mosaik-card>
  * ```
  *

package/Controls/Components/Grouping/Card/CardElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Card/CardElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM1E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,EAAE,WAAW,EAAc,MAAM,+BAA+B,CAAC;;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,qBAiBa,WACT,SAAQ,gBACR,YAAW,iBAAiB,EAAE,UAAU,EAAE,WAAW;IAIrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAU;IAM9B;;OAEG;;IAmBH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAED;;;;;OAKG;IACH,IAIW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAKpC;CAIJ;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,aAAa,EAAE,WAAW,CAAC;KAC9B;CACJ"}
+{"version":3,"file":"CardElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Card/CardElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM1E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,EAAE,WAAW,EAAc,MAAM,+BAA+B,CAAC;;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAiBa,WACT,SAAQ,gBACR,YAAW,iBAAiB,EAAE,UAAU,EAAE,WAAW;IAIrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAU;IAM9B;;OAEG;;IAmBH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAED;;;;;OAKG;IACH,IAIW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAKpC;CAIJ;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,aAAa,EAAE,WAAW,CAAC;KAC9B;CACJ"}

package/Controls/Components/Grouping/Card/CardElement.js

@@ -35,76 +35,81 @@ import { cardElementRetroStyle } from './Themes/CardElement.Retro';
 import { Selectable } from '../../../Behaviors/Selectable';
 // #endregion
 /**
- * Card - A component that represents a card UI element for displaying related content.
+ * Card - A versatile container component for organizing related content in a visually distinct layout.
  *
- * @description This component is designed to encapsulate related information within a visually distinct container. Cards can include various sections such as a title, subtitle, content, actions, and footers, making them versatile for many use cases in a user interface.
+ * Provides structured sections for media, headers, content, and actions within a cohesive container.
+ * Supports elevation effects, selectable states, and flexible content arrangement.
+ * Essential for displaying information hierarchies like product listings, user profiles, and content previews.
  *
- * @name Card
+ * @name CardElement
  * @element mosaik-card
- * @category UI Components
+ * @category Grouping
  *
- * @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
  *
- * @csspart elevation - The part representing the elevation effect of the card.
- * @csspart cover - The part representing the cover area of the card.
- * @csspart heading - The part representing the heading area of the card.
- * @csspart media - The part representing the media content area of the card.
- * @csspart header - The part representing the header section of the card.
- * @csspart content - The part representing the main content area of the card.
- * @csspart actions - The part representing the actions area of the card.
- * @csspart footer - The part representing the footer area of the card.
+ * @csspart elevation - Container for card elevation and shadow effects
+ * @csspart cover - Cover image or media container at the top of the card
+ * @csspart heading - Header section container for titles and subtitles
+ * @csspart content - Main content area container
+ * @csspart actions - Actions section container for buttons and controls
+ * @csspart footer - Footer section container for additional content
  *
- * @cssprop {unknown} --card-font-family - The font-family property for the card text.
- * @cssprop {unknown} --card-font-size - The font-size property for the card text.
- * @cssprop {unknown} --card-font-line-height - The line-height property for the card text.
- * @cssprop {unknown} --card-font-weight - The font-weight property for the card text.
- * @cssprop {unknown} --card-font-letter-spacing - The letter-spacing property for the card text.
- * @cssprop {unknown} --card-font-text-decoration - The text-decoration property for the card text.
- * @cssprop {unknown} --card-font-text-transform - The text-transform property for the card text.
- * @cssprop {unknown} --card-background-color - The background-color property for the card.
- * @cssprop {unknown} --card-border-color - The border-color property for the card.
- * @cssprop {unknown} --card-foreground-color - The foreground-color property for the card.
- * @cssprop {unknown} --card-border-width - The border-width property for the card.
- * @cssprop {unknown} --card-border-radius - The border-radius property for the card.
- * @cssprop {unknown} --card-border-style - The border-style property for the card.
- * @cssprop {unknown} --card-transition-duration - The transition duration for card animations.
- * @cssprop {unknown} --card-transition-mode - The transition mode for card animations.
- * @cssprop {unknown} --card-transition-property - The transition property for the card animations.
- * @cssprop {unknown} --card-shadow - The shadow property for the card.
- * @cssprop {unknown} --card-divider-height - The height of any dividers within the card.
- * @cssprop {unknown} --_has-header - Indicates if the card has a header.
- * @cssprop {unknown} --_has-content - Indicates if the card has content.
- * @cssprop {unknown} --_has-actions - Indicates if the card has actions.
- * @cssprop {unknown} --_has-footer - Indicates if the card has a footer.
- * @cssprop {unknown} --card-content-padding-top - The top padding for the card content area.
+ * @cssprop --card-background-color - Background color of the card container
+ * @cssprop --card-border-radius - Border radius for card corners
+ * @cssprop --card-padding - Internal padding for card content
+ * @cssprop --card-elevation - Elevation level for shadow effects
+ * @cssprop --card-border-color - Border color around the card
+ * @cssprop --card-border-width - Border width for card outline
  *
- * @dependency {CardContentElement} - The Card Content element used within the card.
- * @dependency {CardHeaderElement} - The Card Header element used within the card.
- * @dependency {CardSubTitleElement} - The Card Sub Title element used within the card.
- * @dependency {CardTitleElement} - The Card Title element used within the card.
- * @dependency {CardActionsElement} - The Card Actions element used within the card.
- * @dependency {ElevationElement} - The Elevation element for visual depth.
+ * @dependency ElevationElement - Provides elevation and shadow effects
+ * @dependency CardHeaderElement - Structured header layout component
+ * @dependency CardContentElement - Main content area component
+ * @dependency CardActionsElement - Actions section layout component
+ * @dependency CardTitleElement - Title text component
+ * @dependency CardSubTitleElement - Subtitle text component
  *
  * @example
  * ```html
+ * <!-- Basic content card -->
  * <mosaik-card>
- *   <div slot="cover"><img src="cover-image.jpg" alt="Cover Image"></div>
- *   <div slot="media"><img src="media-image.jpg" alt="Media"></div>
- *   <mosaik-card-header>
- *     <mosaik-card-title>Card Title</mosaik-card-title>
- *     <mosaik-card-sub-title>Card Subtitle</mosaik-card-sub-title>
+ *   <mosaik-card-header slot="header">
+ *     <mosaik-card-title>Product Name</mosaik-card-title>
+ *     <mosaik-card-sub-title>Premium Edition</mosaik-card-sub-title>
  *   </mosaik-card-header>
- *   <mosaik-card-content>Content goes here.</mosaik-card-content>
- *   <mosaik-card-actions>
- *     <mosaik-button>Action 1</mosaik-button>
- *     <mosaik-button>Action 2</mosaik-button>
+ *   <mosaik-card-content slot="content">
+ *     <p>Detailed product description and features.</p>
+ *   </mosaik-card-content>
+ *   <mosaik-card-actions slot="actions">
+ *     <mosaik-button>Learn More</mosaik-button>
+ *     <mosaik-button appearance="primary">Buy Now</mosaik-button>
  *   </mosaik-card-actions>
- *   <mosaik-card-footer>Footer content goes here.</mosaik-card-footer>
+ * </mosaik-card>
+ *
+ * <!-- Media card with cover -->
+ * <mosaik-card elevation="2">
+ *   <img slot="cover" src="hero.jpg" alt="Product image">
+ *   <div slot="content">
+ *     <h3>Article Title</h3>
+ *     <p>Article summary and preview content.</p>
+ *   </div>
+ *   <div slot="footer">
+ *     <span>Published: March 2024</span>
+ *   </div>
+ * </mosaik-card>
+ *
+ * <!-- Selectable card -->
+ * <mosaik-card selectable selected>
+ *   <div slot="header">
+ *     <h4>Option A</h4>
+ *   </div>
+ *   <div slot="content">
+ *     <p>This option provides the best value.</p>
+ *   </div>
  * </mosaik-card>
  * ```
  *

package/Controls/Components/Grouping/Card/CardElement.js.map

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

package/Controls/Components/Grouping/Toolbar/ToolbarElement.d.ts

@@ -2,60 +2,71 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IToolbarElementProps } from './IToolbarElementProps';
 declare const ToolbarElement_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/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Toolbar - A component that represents a toolbar with various controls and title elements.
+ * Toolbar - A horizontal container for organizing actions, controls, and navigation elements.
  *
- * @name Toolbar
+ * Provides structured layout for application toolbars with dedicated slots for start/end content,
+ * titles, and main actions. Supports flexible content arrangement and consistent styling.
+ * Essential for application headers, action bars, and control panels.
+ *
+ * @name ToolbarElement
  * @element mosaik-toolbar
  * @category Grouping
  *
- * @description
- * This element provides a container for toolbar controls, titles, and other interactive elements.
+ * @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
  *
- * @example
- * ```html
- * <toolbar-element>
- *   <div slot="start">Start content</div>
- *   <div slot="default">Default content</div>
- *   <div slot="title">Toolbar Title</div>
- *   <div slot="subTitle">Toolbar SubTitle</div>
- *   <div slot="end">End content</div>
- * </toolbar-element>
- * ```
+ * @csspart root - Root container for the entire toolbar
+ * @csspart main - Main content section container
+ * @csspart title - Title section container
+ * @csspart subTitle - Subtitle section container
  *
- * @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.
+ * @cssprop --toolbar-background-color - Background color of the toolbar
+ * @cssprop --toolbar-height - Height of the toolbar container
+ * @cssprop --toolbar-padding - Internal padding for toolbar content
+ * @cssprop --toolbar-gap - Spacing between toolbar sections
+ * @cssprop --toolbar-border-color - Border color for toolbar edges
+ * @cssprop --toolbar-title-font-size - Font size for toolbar title
+ * @cssprop --toolbar-title-font-weight - Font weight for toolbar title
  *
- * @csspart root - The root part of the toolbar.
- * @csspart main - The main section of the toolbar.
- * @csspart title - The title section of the toolbar.
- * @csspart subTitle - The subtitle section of the toolbar.
+ * @dependency TextElement - For rendering title and subtitle text
  *
- * @cssprop {unknown} --toolbar-font-family - The font family used in the toolbar.
- * @cssprop {unknown} --toolbar-font-size - The font size used in the toolbar.
- * @cssprop {unknown} --toolbar-font-weight - The font weight used in the toolbar.
- * @cssprop {unknown} --toolbar-line-height - The line height used in the toolbar.
- * @cssprop {unknown} --toolbar-background-color - The background color of the toolbar.
- * @cssprop {unknown} --toolbar-foreground-color - The foreground color of the toolbar.
- * @cssprop {unknown} --toolbar-border-color - The border color of the toolbar.
- * @cssprop {unknown} --toolbar-border-width - The border width of the toolbar.
- * @cssprop {unknown} --toolbar-border-radius - The border radius of the toolbar.
- * @cssprop {unknown} --toolbar-border-style - The border style of the toolbar.
- * @cssprop {unknown} --toolbar-transition-duration - The transition duration for toolbar animations.
- * @cssprop {unknown} --toolbar-transition-mode - The transition mode for toolbar animations.
- * @cssprop {unknown} --toolbar-transition-property - The transition property for toolbar animations.
- * @cssprop {unknown} --toolbar-transition - The transition shorthand for toolbar animations.
- * @cssprop {unknown} --toolbar-shadow - The shadow applied to the toolbar.
- * @cssprop {unknown} --toolbar-padding-top - The padding-top of the toolbar.
- * @cssprop {unknown} --toolbar-padding-left - The padding-left of the toolbar.
- * @cssprop {unknown} --toolbar-padding-right - The padding-right of the toolbar.
- * @cssprop {unknown} --toolbar-padding-bottom - The padding-bottom of the toolbar.
- * @cssprop {unknown} --toolbar-gap - The gap between items in the toolbar.
- * @cssprop {unknown} --toolbar-height - The height of the toolbar.
+ * @example
+ * ```html
+ * <!-- Application header toolbar -->
+ * <mosaik-toolbar>
+ *   <mosaik-button slot="start" appearance="ghost">
+ *     <mosaik-icon data="menu-icon"></mosaik-icon>
+ *   </mosaik-button>
+ *   <h1 slot="title">Application Name</h1>
+ *   <div slot="end">
+ *     <mosaik-button appearance="ghost">Settings</mosaik-button>
+ *     <mosaik-avatar slot="end" src="user.jpg"></mosaik-avatar>
+ *   </div>
+ * </mosaik-toolbar>
  *
- * @dependency {TextElement} - The Text element used within the toolbar.
+ * <!-- Document toolbar with actions -->
+ * <mosaik-toolbar>
+ *   <div slot="start">
+ *     <mosaik-button>Save</mosaik-button>
+ *     <mosaik-button>Export</mosaik-button>
+ *   </div>
+ *   <span slot="title">Document.pdf</span>
+ *   <span slot="subTitle">Last modified: Today</span>
+ *   <div slot="end">
+ *     <mosaik-button appearance="danger">Delete</mosaik-button>
+ *   </div>
+ * </mosaik-toolbar>
+ *
+ * <!-- Simple toolbar with centered title -->
+ * <mosaik-toolbar>
+ *   <mosaik-button slot="start">Back</mosaik-button>
+ *   <h2 slot="title">Page Settings</h2>
+ *   <mosaik-button slot="end">Done</mosaik-button>
+ * </mosaik-toolbar>
+ * ```
  *
  * @public
  */

package/Controls/Components/Grouping/Toolbar/ToolbarElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Toolbar/ToolbarElement.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAQnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBAYa,cACT,SAAQ,mBACR,YAAW,oBAAoB;IAI/B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAS;IAM1B;;OAEG;;IAYH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACoB,KAAK,IAAI,MAAM,CAElC;IAED,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;CAIJ;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}
+{"version":3,"file":"ToolbarElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Toolbar/ToolbarElement.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAQnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAYa,cACT,SAAQ,mBACR,YAAW,oBAAoB;IAI/B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAS;IAM1B;;OAEG;;IAYH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACoB,KAAK,IAAI,MAAM,CAElC;IAED,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;CAIJ;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}