@breadstone/mosaik-elements-foundation 0.0.147 → 0.0.148

package/Controls/Components/Cells/CellElement.d.ts

@@ -2,56 +2,89 @@ import { CustomElement } from '../Abstracts/CustomElement';
 import { ICellElementProps } from './ICellElementProps';
 declare const CellElement_base: (abstract new (...args: Array<any>) => import("../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array<any>) => import("../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Cell - A component representing a single cell in a grid or table layout.
+ * Cell - A flexible content container component optimized for structured data presentation in grids, lists, and tables.
  *
- * @description
- * The Cell component is designed to be used as a single cell within a grid or table. It provides styling and
- * layout capabilities for individual cells, allowing for padding and spacing customization. This component is useful
- * for building structured layouts where cells need to be uniformly styled and spaced.
+ * Provides a structured content cell with support for primary labels, secondary descriptions, and flexible
+ * content areas. Designed for consistent data presentation across various layout patterns including
+ * list items, table cells, grid components, and card content organization.
  *
- * @name Cell
+ * @name CellElement
  * @element mosaik-cell
- * @category Layout
+ * @category Cells
  *
- * @csspart root - The root part of the Cell that wraps the entire cell content.
- * @csspart text - The part of the Cell that contains the text content.
- * @csspart label - The part of the Cell that contains the primary label content.
- * @csspart subLabel - The part of the Cell that contains the sub label content.
+ * @slot start - Leading content area for icons, avatars, thumbnails, or visual indicators
+ * @slot label - Primary content area for main text, titles, or primary information
+ * @slot subLabel - Secondary content area for descriptions, metadata, or supplementary text
+ * @slot end - Trailing content area for actions, status indicators, or secondary controls
  *
- * @cssprop {unknown} --cell-padding-top - The padding at the top of the cell.
- * @cssprop {unknown} --cell-padding-right - The padding on the right side of the cell.
- * @cssprop {unknown} --cell-padding-bottom - The padding at the bottom of the cell.
- * @cssprop {unknown} --cell-padding-left - The padding on the left side of the cell.
- * @cssprop {unknown} --cell-gap - The gap between cells.
- * @cssprop {unknown} --cell-font-family
- * @cssprop {unknown} --cell-font-size
- * @cssprop {unknown} --cell-font-line-height
- * @cssprop {unknown} --cell-font-weight
- * @cssprop {unknown} --cell-font-letter-spacing
- * @cssprop {unknown} --cell-font-text-decoration
- * @cssprop {unknown} --cell-font-text-transform
- * @cssprop {unknown} --cell-sub-font-family
- * @cssprop {unknown} --cell-sub-font-size
- * @cssprop {unknown} --cell-sub-font-line-height
- * @cssprop {unknown} --cell-sub-font-weight
- * @cssprop {unknown} --cell-sub-font-letter-spacing
- * @cssprop {unknown} --cell-sub-font-text-decoration
- * @cssprop {unknown} --cell-sub-font-text-transform
+ * @csspart root - Root container wrapping the entire cell content and layout
+ * @csspart text - Text content wrapper for typography and text styling
+ * @csspart label - Primary label content styling container
+ * @csspart subLabel - Secondary label content styling container
+ * @csspart start - Leading content area styling container
+ * @csspart end - Trailing content area styling container
  *
- * @dependency {TextElement} - The Text element used within the cell for displaying text content.
+ * @cssprop --cell-padding-top - Top padding for cell content spacing
+ * @cssprop --cell-padding-right - Right padding for cell content spacing
+ * @cssprop --cell-padding-bottom - Bottom padding for cell content spacing
+ * @cssprop --cell-padding-left - Left padding for cell content spacing
+ * @cssprop --cell-gap - Gap between cell content elements
+ * @cssprop --cell-font-family - Font family for primary cell text
+ * @cssprop --cell-font-size - Font size for primary cell text
+ * @cssprop --cell-font-line-height - Line height for primary cell text
+ * @cssprop --cell-font-weight - Font weight for primary cell text
+ * @cssprop --cell-font-letter-spacing - Letter spacing for primary cell text
+ * @cssprop --cell-font-text-decoration - Text decoration for primary cell text
+ * @cssprop --cell-font-text-transform - Text transform for primary cell text
+ * @cssprop --cell-sub-font-family - Font family for secondary cell text
+ * @cssprop --cell-sub-font-size - Font size for secondary cell text
+ * @cssprop --cell-sub-font-line-height - Line height for secondary cell text
+ * @cssprop --cell-sub-font-weight - Font weight for secondary cell text
+ * @cssprop --cell-sub-font-letter-spacing - Letter spacing for secondary cell text
+ * @cssprop --cell-sub-font-text-decoration - Text decoration for secondary cell text
+ * @cssprop --cell-sub-font-text-transform - Text transform for secondary cell text
  *
- * @slot start - Slot for content to be displayed at the start of the cell.
- * @slot label - Slot for the primary label content of the cell.
- * @slot subLabel - Slot for additional label content or description.
- * @slot end - Slot for content to be displayed at the end of the cell.
+ * @dependency TextElement - For rendering primary and secondary text content
  *
  * @example
  * ```html
+ * <!-- Contact list cell -->
  * <mosaik-cell>
- *   <span slot="start">Start Content</span>
- *   <span slot="label">Primary Label</span>
- *   <span slot="subLabel">Sub Label</span>
- *   <span slot="end">End Content</span>
+ *   <mosaik-avatar slot="start" src="contact.jpg"></mosaik-avatar>
+ *   <mosaik-text slot="label">John Smith</mosaik-text>
+ *   <mosaik-text slot="subLabel">john.smith@company.com</mosaik-text>
+ *   <mosaik-button slot="end" appearance="ghost">
+ *     <mosaik-icon data="phone"></mosaik-icon>
+ *   </mosaik-button>
+ * </mosaik-cell>
+ *
+ * <!-- Product information cell -->
+ * <mosaik-cell>
+ *   <img slot="start" src="product-thumb.jpg" alt="Product" />
+ *   <mosaik-text slot="label">Premium Headphones</mosaik-text>
+ *   <mosaik-text slot="subLabel">High-quality audio experience</mosaik-text>
+ *   <mosaik-text slot="end">$299.99</mosaik-text>
+ * </mosaik-cell>
+ *
+ * <!-- Settings option cell -->
+ * <mosaik-cell>
+ *   <mosaik-icon slot="start" data="shield-check"></mosaik-icon>
+ *   <mosaik-text slot="label">Privacy & Security</mosaik-text>
+ *   <mosaik-text slot="subLabel">Manage your privacy settings</mosaik-text>
+ *   <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ * </mosaik-cell>
+ *
+ * <!-- Notification cell -->
+ * <mosaik-cell>
+ *   <mosaik-icon slot="start" data="bell" style="color: var(--primary-color);"></mosaik-icon>
+ *   <mosaik-text slot="label">New Message Received</mosaik-text>
+ *   <mosaik-text slot="subLabel">2 minutes ago</mosaik-text>
+ *   <mosaik-badge slot="end" value="1"></mosaik-badge>
+ * </mosaik-cell>
+ *
+ * <!-- Simple text cell -->
+ * <mosaik-cell>
+ *   <mosaik-text slot="label">Dashboard</mosaik-text>
  * </mosaik-cell>
  * ```
  *

package/Controls/Components/Cells/CellElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAOxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBAYa,WACT,SAAQ,gBACR,YAAW,iBAAiB;IAI5B,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,SAAS,CAAS;IAM1B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;CAIJ;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,WAAW,CAAC;KAC9B;CACJ"}
+{"version":3,"file":"CellElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAOxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,qBAYa,WACT,SAAQ,gBACR,YAAW,iBAAiB;IAI5B,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,SAAS,CAAS;IAM1B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;CAIJ;AAED;;GAEG;AACH,yBAAiB,WAAW,CAAC;IACzB,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACzC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,WAAW,CAAC;KAC9B;CACJ"}

package/Controls/Components/Cells/CellElement.js

@@ -22,56 +22,89 @@ import { cellElementRetroStyle } from './Themes/CellElement.Retro';
 import { cellElementCosmopolitanStyle } from './Themes/CellElement.Cosmopolitan';
 // #endregion
 /**
- * Cell - A component representing a single cell in a grid or table layout.
+ * Cell - A flexible content container component optimized for structured data presentation in grids, lists, and tables.
  *
- * @description
- * The Cell component is designed to be used as a single cell within a grid or table. It provides styling and
- * layout capabilities for individual cells, allowing for padding and spacing customization. This component is useful
- * for building structured layouts where cells need to be uniformly styled and spaced.
+ * Provides a structured content cell with support for primary labels, secondary descriptions, and flexible
+ * content areas. Designed for consistent data presentation across various layout patterns including
+ * list items, table cells, grid components, and card content organization.
  *
- * @name Cell
+ * @name CellElement
  * @element mosaik-cell
- * @category Layout
+ * @category Cells
  *
- * @csspart root - The root part of the Cell that wraps the entire cell content.
- * @csspart text - The part of the Cell that contains the text content.
- * @csspart label - The part of the Cell that contains the primary label content.
- * @csspart subLabel - The part of the Cell that contains the sub label content.
+ * @slot start - Leading content area for icons, avatars, thumbnails, or visual indicators
+ * @slot label - Primary content area for main text, titles, or primary information
+ * @slot subLabel - Secondary content area for descriptions, metadata, or supplementary text
+ * @slot end - Trailing content area for actions, status indicators, or secondary controls
  *
- * @cssprop {unknown} --cell-padding-top - The padding at the top of the cell.
- * @cssprop {unknown} --cell-padding-right - The padding on the right side of the cell.
- * @cssprop {unknown} --cell-padding-bottom - The padding at the bottom of the cell.
- * @cssprop {unknown} --cell-padding-left - The padding on the left side of the cell.
- * @cssprop {unknown} --cell-gap - The gap between cells.
- * @cssprop {unknown} --cell-font-family
- * @cssprop {unknown} --cell-font-size
- * @cssprop {unknown} --cell-font-line-height
- * @cssprop {unknown} --cell-font-weight
- * @cssprop {unknown} --cell-font-letter-spacing
- * @cssprop {unknown} --cell-font-text-decoration
- * @cssprop {unknown} --cell-font-text-transform
- * @cssprop {unknown} --cell-sub-font-family
- * @cssprop {unknown} --cell-sub-font-size
- * @cssprop {unknown} --cell-sub-font-line-height
- * @cssprop {unknown} --cell-sub-font-weight
- * @cssprop {unknown} --cell-sub-font-letter-spacing
- * @cssprop {unknown} --cell-sub-font-text-decoration
- * @cssprop {unknown} --cell-sub-font-text-transform
+ * @csspart root - Root container wrapping the entire cell content and layout
+ * @csspart text - Text content wrapper for typography and text styling
+ * @csspart label - Primary label content styling container
+ * @csspart subLabel - Secondary label content styling container
+ * @csspart start - Leading content area styling container
+ * @csspart end - Trailing content area styling container
  *
- * @dependency {TextElement} - The Text element used within the cell for displaying text content.
+ * @cssprop --cell-padding-top - Top padding for cell content spacing
+ * @cssprop --cell-padding-right - Right padding for cell content spacing
+ * @cssprop --cell-padding-bottom - Bottom padding for cell content spacing
+ * @cssprop --cell-padding-left - Left padding for cell content spacing
+ * @cssprop --cell-gap - Gap between cell content elements
+ * @cssprop --cell-font-family - Font family for primary cell text
+ * @cssprop --cell-font-size - Font size for primary cell text
+ * @cssprop --cell-font-line-height - Line height for primary cell text
+ * @cssprop --cell-font-weight - Font weight for primary cell text
+ * @cssprop --cell-font-letter-spacing - Letter spacing for primary cell text
+ * @cssprop --cell-font-text-decoration - Text decoration for primary cell text
+ * @cssprop --cell-font-text-transform - Text transform for primary cell text
+ * @cssprop --cell-sub-font-family - Font family for secondary cell text
+ * @cssprop --cell-sub-font-size - Font size for secondary cell text
+ * @cssprop --cell-sub-font-line-height - Line height for secondary cell text
+ * @cssprop --cell-sub-font-weight - Font weight for secondary cell text
+ * @cssprop --cell-sub-font-letter-spacing - Letter spacing for secondary cell text
+ * @cssprop --cell-sub-font-text-decoration - Text decoration for secondary cell text
+ * @cssprop --cell-sub-font-text-transform - Text transform for secondary cell text
  *
- * @slot start - Slot for content to be displayed at the start of the cell.
- * @slot label - Slot for the primary label content of the cell.
- * @slot subLabel - Slot for additional label content or description.
- * @slot end - Slot for content to be displayed at the end of the cell.
+ * @dependency TextElement - For rendering primary and secondary text content
  *
  * @example
  * ```html
+ * <!-- Contact list cell -->
  * <mosaik-cell>
- *   <span slot="start">Start Content</span>
- *   <span slot="label">Primary Label</span>
- *   <span slot="subLabel">Sub Label</span>
- *   <span slot="end">End Content</span>
+ *   <mosaik-avatar slot="start" src="contact.jpg"></mosaik-avatar>
+ *   <mosaik-text slot="label">John Smith</mosaik-text>
+ *   <mosaik-text slot="subLabel">john.smith@company.com</mosaik-text>
+ *   <mosaik-button slot="end" appearance="ghost">
+ *     <mosaik-icon data="phone"></mosaik-icon>
+ *   </mosaik-button>
+ * </mosaik-cell>
+ *
+ * <!-- Product information cell -->
+ * <mosaik-cell>
+ *   <img slot="start" src="product-thumb.jpg" alt="Product" />
+ *   <mosaik-text slot="label">Premium Headphones</mosaik-text>
+ *   <mosaik-text slot="subLabel">High-quality audio experience</mosaik-text>
+ *   <mosaik-text slot="end">$299.99</mosaik-text>
+ * </mosaik-cell>
+ *
+ * <!-- Settings option cell -->
+ * <mosaik-cell>
+ *   <mosaik-icon slot="start" data="shield-check"></mosaik-icon>
+ *   <mosaik-text slot="label">Privacy & Security</mosaik-text>
+ *   <mosaik-text slot="subLabel">Manage your privacy settings</mosaik-text>
+ *   <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ * </mosaik-cell>
+ *
+ * <!-- Notification cell -->
+ * <mosaik-cell>
+ *   <mosaik-icon slot="start" data="bell" style="color: var(--primary-color);"></mosaik-icon>
+ *   <mosaik-text slot="label">New Message Received</mosaik-text>
+ *   <mosaik-text slot="subLabel">2 minutes ago</mosaik-text>
+ *   <mosaik-badge slot="end" value="1"></mosaik-badge>
+ * </mosaik-cell>
+ *
+ * <!-- Simple text cell -->
+ * <mosaik-cell>
+ *   <mosaik-text slot="label">Dashboard</mosaik-text>
  * </mosaik-cell>
  * ```
  *

package/Controls/Components/Cells/CellElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEjF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAaI,IAAM,WAAW,GAAjB,MAAM,WACT,SAAQ,SAAS,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAGxD,iBAAiB;IAET,aAAa,CAAU;IACvB,SAAS,CAAS;IAE1B,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,aAAa,CAAC;IACzB,CAAC;IAED;;;;;OAKG;IACH,IAIW,YAAY;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,IAAW,YAAY,CAAC,KAAc;QAClC,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,QAAQ;QACf,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IAED,IAAW,QAAQ,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;CAIJ,CAAA;AAlCG;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;+CAGD;AAcD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;2CAG1B;AApEQ,WAAW;IAZvB,SAAS,CAAC;QACP,QAAQ,EAAE,aAAa;QACvB,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE;YACJ,GAAG,EAAE,mBAAmB;YACxB,KAAK,EAAE,qBAAqB;YAC5B,YAAY,EAAE,4BAA4B;SAC7C;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,WAAW,CA+EvB"}
+{"version":3,"file":"CellElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEjF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AAaI,IAAM,WAAW,GAAjB,MAAM,WACT,SAAQ,SAAS,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAGxD,iBAAiB;IAET,aAAa,CAAU;IACvB,SAAS,CAAS;IAE1B,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,aAAa,CAAC;IACzB,CAAC;IAED;;;;;OAKG;IACH,IAIW,YAAY;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,IAAW,YAAY,CAAC,KAAc;QAClC,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,QAAQ;QACf,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IAED,IAAW,QAAQ,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;CAIJ,CAAA;AAlCG;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;+CAGD;AAcD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;2CAG1B;AApEQ,WAAW;IAZvB,SAAS,CAAC;QACP,QAAQ,EAAE,aAAa;QACvB,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE;YACJ,GAAG,EAAE,mBAAmB;YACxB,KAAK,EAAE,qBAAqB;YAC5B,YAAY,EAAE,4BAA4B;SAC7C;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,WAAW,CA+EvB"}

package/Controls/Components/Cells/CellGroupElement.d.ts

@@ -2,32 +2,93 @@ import { CustomElement } from '../Abstracts/CustomElement';
 import { ICellGroupElementProps } from './ICellGroupElementProps';
 declare const CellGroupElement_base: (abstract new (...args: Array<any>) => import("../../../Controls/Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
- * Cell Group - A container element for grouping related cells.
+ * CellGroup - A logical container component for organizing related cells into cohesive sections with optional headers.
  *
- * @description
- * The `Cell Group` component serves as a container for organizing related cell components into a cohesive group. It provides options for headers and customizable styles, making it suitable for structured layouts in lists, tables, or forms.
+ * Groups multiple cell components together with consistent styling, optional section headers, and
+ * semantic organization for improved content structure. Ideal for creating organized lists,
+ * settings panels, form sections, and grouped data presentations.
  *
- * @name Cell Group
+ * @name CellGroupElement
  * @element mosaik-cell-group
- * @category Layout
+ * @category Cells
  *
- * @slot header - Slot for the group header.
- * @slot - Slot for the default content, typically cells.
+ * @slot header - Header content area for group titles, descriptions, or section labels
+ * @slot - Default content area for cell components and related content
  *
- * @csspart header - The header part of the cell group.
- * @csspart root - The root container of the cell group.
+ * @csspart header - Header section styling container for group titles
+ * @csspart root - Root container wrapping the entire cell group structure
+ * @csspart content - Content area containing the grouped cells
  *
- * @cssprop {unknown} --cell-group-border-color
- * @cssprop {unknown} --cell-group-border-radius
- * @cssprop {unknown} --cell-group-border-width
+ * @cssprop --cell-group-border-color - Border color for the group container
+ * @cssprop --cell-group-border-radius - Border radius for group container styling
+ * @cssprop --cell-group-border-width - Border width for group container outline
+ * @cssprop --cell-group-background - Background color for the group container
+ * @cssprop --cell-group-padding - Internal padding for group content
+ * @cssprop --cell-group-margin - External margin for group spacing
+ * @cssprop --cell-group-header-padding - Padding for the header section
+ * @cssprop --cell-group-header-font-size - Font size for header text
+ * @cssprop --cell-group-header-font-weight - Font weight for header text
  *
- * @dependency {TextElement} - The Text element.
+ * @dependency TextElement - For rendering header and label text content
  *
  * @example
  * ```html
+ * <!-- Settings group with header -->
  * <mosaik-cell-group>
- *   <mosaik-cell>Cell 1</mosaik-cell>
- *   <mosaik-cell>Cell 2</mosaik-cell>
+ *   <mosaik-text slot="header" variant="headline">Account Settings</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="user"></mosaik-icon>
+ *     <mosaik-text slot="label">Profile Information</mosaik-text>
+ *     <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="key"></mosaik-icon>
+ *     <mosaik-text slot="label">Change Password</mosaik-text>
+ *     <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Contact group -->
+ * <mosaik-cell-group>
+ *   <mosaik-text slot="header" variant="subtitle">Favorites</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-avatar slot="start" src="john.jpg"></mosaik-avatar>
+ *     <mosaik-text slot="label">John Smith</mosaik-text>
+ *     <mosaik-text slot="subLabel">Online</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-avatar slot="start" src="jane.jpg"></mosaik-avatar>
+ *     <mosaik-text slot="label">Jane Doe</mosaik-text>
+ *     <mosaik-text slot="subLabel">Away</mosaik-text>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Menu group -->
+ * <mosaik-cell-group>
+ *   <mosaik-text slot="header">Navigation</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="home"></mosaik-icon>
+ *     <mosaik-text slot="label">Dashboard</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="chart-bar"></mosaik-icon>
+ *     <mosaik-text slot="label">Analytics</mosaik-text>
+ *     <mosaik-badge slot="end" value="New"></mosaik-badge>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="cog"></mosaik-icon>
+ *     <mosaik-text slot="label">Settings</mosaik-text>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Simple grouped content -->
+ * <mosaik-cell-group>
+ *   <mosaik-cell>
+ *     <mosaik-text slot="label">General Information</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-text slot="label">Privacy Settings</mosaik-text>
+ *   </mosaik-cell>
  * </mosaik-cell-group>
  * ```
  *

package/Controls/Components/Cells/CellGroupElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellGroupElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellGroupElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;;AAOlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAYa,gBACT,SAAQ,qBACR,YAAW,sBAAsB;IAIjC,OAAO,CAAC,OAAO,CAAS;IAMxB;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,gBAAgB,CAAC;KACzC;CACJ"}
+{"version":3,"file":"CellGroupElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellGroupElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;;AAOlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG;AACH,qBAYa,gBACT,SAAQ,qBACR,YAAW,sBAAsB;IAIjC,OAAO,CAAC,OAAO,CAAS;IAMxB;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,gBAAgB,CAAC;KACzC;CACJ"}

package/Controls/Components/Cells/CellGroupElement.js

@@ -19,32 +19,93 @@ import { cellGroupElementRetroStyle } from './Themes/CellGroupElement.Retro';
 import { cellGroupElementCosmopolitanStyle } from './Themes/CellGroupElement.Cosmopolitan';
 // #endregion
 /**
- * Cell Group - A container element for grouping related cells.
+ * CellGroup - A logical container component for organizing related cells into cohesive sections with optional headers.
  *
- * @description
- * The `Cell Group` component serves as a container for organizing related cell components into a cohesive group. It provides options for headers and customizable styles, making it suitable for structured layouts in lists, tables, or forms.
+ * Groups multiple cell components together with consistent styling, optional section headers, and
+ * semantic organization for improved content structure. Ideal for creating organized lists,
+ * settings panels, form sections, and grouped data presentations.
  *
- * @name Cell Group
+ * @name CellGroupElement
  * @element mosaik-cell-group
- * @category Layout
+ * @category Cells
  *
- * @slot header - Slot for the group header.
- * @slot - Slot for the default content, typically cells.
+ * @slot header - Header content area for group titles, descriptions, or section labels
+ * @slot - Default content area for cell components and related content
  *
- * @csspart header - The header part of the cell group.
- * @csspart root - The root container of the cell group.
+ * @csspart header - Header section styling container for group titles
+ * @csspart root - Root container wrapping the entire cell group structure
+ * @csspart content - Content area containing the grouped cells
  *
- * @cssprop {unknown} --cell-group-border-color
- * @cssprop {unknown} --cell-group-border-radius
- * @cssprop {unknown} --cell-group-border-width
+ * @cssprop --cell-group-border-color - Border color for the group container
+ * @cssprop --cell-group-border-radius - Border radius for group container styling
+ * @cssprop --cell-group-border-width - Border width for group container outline
+ * @cssprop --cell-group-background - Background color for the group container
+ * @cssprop --cell-group-padding - Internal padding for group content
+ * @cssprop --cell-group-margin - External margin for group spacing
+ * @cssprop --cell-group-header-padding - Padding for the header section
+ * @cssprop --cell-group-header-font-size - Font size for header text
+ * @cssprop --cell-group-header-font-weight - Font weight for header text
  *
- * @dependency {TextElement} - The Text element.
+ * @dependency TextElement - For rendering header and label text content
  *
  * @example
  * ```html
+ * <!-- Settings group with header -->
  * <mosaik-cell-group>
- *   <mosaik-cell>Cell 1</mosaik-cell>
- *   <mosaik-cell>Cell 2</mosaik-cell>
+ *   <mosaik-text slot="header" variant="headline">Account Settings</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="user"></mosaik-icon>
+ *     <mosaik-text slot="label">Profile Information</mosaik-text>
+ *     <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="key"></mosaik-icon>
+ *     <mosaik-text slot="label">Change Password</mosaik-text>
+ *     <mosaik-icon slot="end" data="chevron-right"></mosaik-icon>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Contact group -->
+ * <mosaik-cell-group>
+ *   <mosaik-text slot="header" variant="subtitle">Favorites</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-avatar slot="start" src="john.jpg"></mosaik-avatar>
+ *     <mosaik-text slot="label">John Smith</mosaik-text>
+ *     <mosaik-text slot="subLabel">Online</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-avatar slot="start" src="jane.jpg"></mosaik-avatar>
+ *     <mosaik-text slot="label">Jane Doe</mosaik-text>
+ *     <mosaik-text slot="subLabel">Away</mosaik-text>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Menu group -->
+ * <mosaik-cell-group>
+ *   <mosaik-text slot="header">Navigation</mosaik-text>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="home"></mosaik-icon>
+ *     <mosaik-text slot="label">Dashboard</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="chart-bar"></mosaik-icon>
+ *     <mosaik-text slot="label">Analytics</mosaik-text>
+ *     <mosaik-badge slot="end" value="New"></mosaik-badge>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-icon slot="start" data="cog"></mosaik-icon>
+ *     <mosaik-text slot="label">Settings</mosaik-text>
+ *   </mosaik-cell>
+ * </mosaik-cell-group>
+ *
+ * <!-- Simple grouped content -->
+ * <mosaik-cell-group>
+ *   <mosaik-cell>
+ *     <mosaik-text slot="label">General Information</mosaik-text>
+ *   </mosaik-cell>
+ *   <mosaik-cell>
+ *     <mosaik-text slot="label">Privacy Settings</mosaik-text>
+ *   </mosaik-cell>
  * </mosaik-cell-group>
  * ```
  *

package/Controls/Components/Cells/CellGroupElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellGroupElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellGroupElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAE3F,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAaI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,OAAO,CAAS;IAExB,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;CAIJ,CAAA;AAdG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;8CAG1B;AA7CQ,gBAAgB;IAZ5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,gBAAgB,CAwD5B"}
+{"version":3,"file":"CellGroupElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Cells/CellGroupElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAE3F,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG;AAaI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,OAAO,CAAS;IAExB,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;CAIJ,CAAA;AAdG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;8CAG1B;AA7CQ,gBAAgB;IAZ5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,gBAAgB,CAwD5B"}