@breadstone/mosaik-elements-foundation 0.0.226 → 0.0.228

package/Controls/Components/Grouping/Region/RegionElement.js

@@ -8,41 +8,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { regionElementTemplate } from './RegionElementTemplate';
 import { RegionViewElement } from './RegionViewElement';
-import { Themeable } from '../../../Behaviors/Themeable';
 import { regionElementCosmopolitanStyle } from './Themes/RegionElement.Cosmopolitan';
 import { regionElementJoyStyle } from './Themes/RegionElement.Joy';
 import { regionElementMemphisStyle } from './Themes/RegionElement.Memphis';
 // #endregion
 /**
- * Region - A container that hosts multiple view definitions with exclusive activation.
- *
- * Manages the lifecycle of views within it, ensuring only one view is instantiated and rendered at a time.
- * Views are lazily instantiated when activated and cleanly destroyed when deactivated,
- * providing efficient memory usage and proper lifecycle management for complex multi-view layouts.
+ * Region - A container component that manages multiple view definitions with exclusive activation and lazy instantiation.
  *
- * Perfect for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states
- * without manual DOM manipulation or conditional rendering logic in templates.
+ * @description
+ * The Region component manages the lifecycle of views within it, ensuring only one view is instantiated and
+ * rendered at a time. Views are lazily instantiated when activated and cleanly destroyed when deactivated,
+ * providing efficient memory usage and proper lifecycle management for complex multi-view layouts. Perfect
+ * for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states without
+ * manual DOM manipulation. Supports programmatic view activation and emits events on view transitions.
  *
- * @name RegionElement
+ * @name Region
  * @element mosaik-region
  * @category Grouping
  *
- * @slot default - Contains mosaik-region-view definitions to be managed by the region
+ * @slot - Contains mosaik-region-view definitions to be managed by the region
  *
  * @csspart host - The container element that renders the active view's content
  *
- * @fires activeChanged - Fired when the active view changes, with detail { active: string, previous?: string }
+ * @fires activeChanged {CustomEvent<{active: string, previous?: string}>} - Fired when the active view changes
  *
- * @dependency RegionViewElement - View definition component
+ * @dependency {RegionViewElement} - View definition component for defining individual views
  *
  * @example
+ * Basic wizard with three steps:
  * ```html
- * <!-- Basic region with navigation -->
  * <mosaik-region id="wizard" active="step1">
  *   <mosaik-region-view name="step1" default>
  *     <div>Welcome to Step 1</div>
@@ -62,9 +62,21 @@ import { regionElementMemphisStyle } from './Themes/RegionElement.Memphis';
  * ```
  *
  * @example
+ * Tabbed interface with navigation:
  * ```html
- * <!-- Tabbed interface -->
- * <mosaik-region active="overview">
+ * <mosaik-button-group>
+ *   <mosaik-button onclick="document.querySelector('#tabs').activate('overview')">
+ *     Overview
+ *   </mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('#tabs').activate('details')">
+ *     Details
+ *   </mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('#tabs').activate('settings')">
+ *     Settings
+ *   </mosaik-button>
+ * </mosaik-button-group>
+ *
+ * <mosaik-region id="tabs" active="overview">
  *   <mosaik-region-view name="overview" default>
  *     <my-overview-component></my-overview-component>
  *   </mosaik-region-view>
@@ -75,12 +87,41 @@ import { regionElementMemphisStyle } from './Themes/RegionElement.Memphis';
  *     <my-settings-component></my-settings-component>
  *   </mosaik-region-view>
  * </mosaik-region>
+ * ```
  *
- * <mosaik-button-group>
- *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('overview')">Overview</mosaik-button>
- *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('details')">Details</mosaik-button>
- *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('settings')">Settings</mosaik-button>
- * </mosaik-button-group>
+ * @example
+ * Form stepper with validation:
+ * ```html
+ * <mosaik-region id="formStepper">
+ *   <mosaik-region-view name="personal" default>
+ *     <h3>Personal Information</h3>
+ *     <form><!-- personal details --></form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="address">
+ *     <h3>Address Details</h3>
+ *     <form><!-- address fields --></form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="review">
+ *     <h3>Review & Submit</h3>
+ *     <div><!-- summary --></div>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Event handling for view changes:
+ * ```html
+ * <mosaik-region id="eventRegion">
+ *   <mosaik-region-view name="view1" default>View 1 Content</mosaik-region-view>
+ *   <mosaik-region-view name="view2">View 2 Content</mosaik-region-view>
+ * </mosaik-region>
+ *
+ * <script>
+ *   const region = document.getElementById('eventRegion');
+ *   region.addEventListener('activeChanged', (e) => {
+ *     console.log(`Changed from ${e.detail.previous} to ${e.detail.active}`);
+ *   });
+ * </script>
  * ```
  *
  * @public
@@ -90,7 +131,6 @@ let RegionElement = class RegionElement extends Themeable(CustomElement) {
     _viewDefinitions;
     _active;
     _currentActiveName;
-    _hostContainer;
     _isInitialized;
     // #endregion
     // #region Ctor
@@ -101,7 +141,6 @@ let RegionElement = class RegionElement extends Themeable(CustomElement) {
         super();
         this._active = '';
         this._currentActiveName = null;
-        this._hostContainer = null;
         this._isInitialized = false;
         this._viewDefinitions = new Map();
     }
@@ -151,25 +190,8 @@ let RegionElement = class RegionElement extends Themeable(CustomElement) {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        // Get the host container reference
-        this._hostContainer = this.shadowRoot?.querySelector('[part="host"]') ?? null;
-        // Wait for all child views to be ready before rendering
-        void this.waitForViewsAndRender();
-    }
-    /**
-     * Waits for all child RegionViewElements to complete their firstUpdated
-     * and capture their templates before rendering the active view.
-     *
-     * @private
-     */
-    async waitForViewsAndRender() {
-        // Wait for all view elements to complete their update cycle
-        const viewElements = Array.from(this._viewDefinitions.values());
-        await Promise.all(viewElements.map((view) => view.updateComplete));
-        // Now render the active view
-        if (this._active) {
-            this.renderActiveView();
-        }
+        // Apply initial active state to views
+        this.renderActiveView();
     }
     /**
      * @public
@@ -238,41 +260,35 @@ let RegionElement = class RegionElement extends Themeable(CustomElement) {
         }
     }
     /**
-     * Renders the currently active view by cloning its template content.
+     * Toggles the active state on child RegionViewElements.
+     * Sets `active` on the matching view and removes it from all others.
      *
      * @private
      */
     renderActiveView() {
-        if (!this._hostContainer) {
-            return;
-        }
         const previousActive = this._currentActiveName;
-        // Clear the current view (triggers disconnectedCallback on child components)
-        while (this._hostContainer.firstChild) {
-            this._hostContainer.removeChild(this._hostContainer.firstChild);
-        }
-        // Validate and render the new active view
-        const viewDefinition = this._viewDefinitions.get(this._active);
-        if (!viewDefinition) {
+        // Validate the active view exists
+        if (!this._viewDefinitions.has(this._active)) {
             const availableViews = Array.from(this._viewDefinitions.keys()).join(', ');
             console.warn(`mosaik-region: active view "${this._active}" not found. Available views: ${availableViews || 'none'}`, this);
             // Fallback to first view if current active is invalid
             const fallbackView = Array.from(this._viewDefinitions.keys())[0];
             if (fallbackView && fallbackView !== this._active) {
                 this._active = fallbackView;
-                this.renderActiveView();
             }
-            return;
+            else {
+                return;
+            }
         }
-        // Clone the template content and append to host
-        const template = viewDefinition.getTemplate();
-        if (template) {
-            const clone = template.content.cloneNode(true);
-            this._hostContainer.appendChild(clone);
+        // Toggle active attribute on all view definitions
+        for (const [name, view] of this._viewDefinitions) {
+            view.active = (name === this._active);
         }
         this._currentActiveName = this._active;
         // Dispatch active-changed event
-        this._dispatchActiveChangedEvent(previousActive);
+        if (previousActive !== this._active) {
+            this.dispatchActiveChangedEvent(previousActive);
+        }
     }
     /**
      * Dispatches the active-changed event.
@@ -280,7 +296,7 @@ let RegionElement = class RegionElement extends Themeable(CustomElement) {
      * @param previousActive - The previously active view name
      * @private
      */
-    _dispatchActiveChangedEvent(previousActive) {
+    dispatchActiveChangedEvent(previousActive) {
         const detail = {
             active: this._active,
             previous: previousActive

package/Controls/Components/Grouping/Region/RegionElement.js.map

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

package/Controls/Components/Grouping/Region/RegionElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,cAAc,CAKpF"}
+{"version":3,"file":"RegionElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,cAAc,CAMpF"}

package/Controls/Components/Grouping/Region/RegionElementTemplate.js

@@ -8,8 +8,9 @@ import { html } from '../../../../Dom/Html';
  */
 export function regionElementTemplate(_e) {
     return html `
-        <div part="host"></div>
-        <slot hidden></slot>
+        <div part="host">
+            <slot></slot>
+        </div>
     `;
 }
 //# sourceMappingURL=RegionElementTemplate.js.map

package/Controls/Components/Grouping/Region/RegionElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,EAAK;IAChE,OAAO,IAAI,CAAA;;;KAGV,CAAC;AACN,CAAC"}
+{"version":3,"file":"RegionElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,EAAK;IAChE,OAAO,IAAI,CAAA;;;;KAIV,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Region/RegionViewElement.d.ts

@@ -2,27 +2,77 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IRegionViewElementProps } from './IRegionViewElementProps2';
 declare const RegionViewElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * View - A view definition component for use within a Region.
+ * RegionView - A view definition component for lazy content instantiation within a Region container.
  *
- * Acts as a template container that stores its content for lazy instantiation.
- * The view's children are not instantiated until the view becomes active within its parent region.
- * This enables efficient memory usage and clean lifecycle management for complex view hierarchies.
+ * @description
+ * The RegionView component acts as a template container that stores its content for lazy instantiation.
+ * The view's children are not instantiated until the view becomes active within its parent Region element,
+ * enabling efficient memory usage and clean lifecycle management for complex view hierarchies. When a view
+ * is deactivated, its content is removed from the DOM, and all component lifecycle hooks are properly called.
+ * This pattern is essential for managing large applications with multiple exclusive views.
  *
- * @name ViewElement
+ * @name RegionView
  * @element mosaik-region-view
  * @category Grouping
  *
- * @slot default - The content to be rendered when this view becomes active
+ * @slot - The content to be rendered when this view becomes active in its parent region
  *
  * @example
+ * Basic view definition:
  * ```html
  * <mosaik-region active="home">
  *   <mosaik-region-view name="home" default>
- *     <my-home-component></my-home-component>
+ *     <h1>Welcome Home</h1>
+ *     <p>This content is only instantiated when the view is active.</p>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Multiple views with components:
+ * ```html
+ * <mosaik-region active="dashboard">
+ *   <mosaik-region-view name="dashboard" default>
+ *     <my-dashboard-component></my-dashboard-component>
  *   </mosaik-region-view>
  *   <mosaik-region-view name="profile">
  *     <my-profile-component></my-profile-component>
  *   </mosaik-region-view>
+ *   <mosaik-region-view name="settings">
+ *     <my-settings-component></my-settings-component>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Wizard step definition:
+ * ```html
+ * <mosaik-region id="wizard">
+ *   <mosaik-region-view name="step1" default>
+ *     <h2>Step 1: Account Details</h2>
+ *     <mosaik-form><!-- account form fields --></mosaik-form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step2">
+ *     <h2>Step 2: Preferences</h2>
+ *     <mosaik-form><!-- preferences form --></mosaik-form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step3">
+ *     <h2>Step 3: Confirmation</h2>
+ *     <div><!-- summary content --></div>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Complex nested content:
+ * ```html
+ * <mosaik-region>
+ *   <mosaik-region-view name="reports" default>
+ *     <mosaik-card>
+ *       <mosaik-chart slot="content" type="bar"></mosaik-chart>
+ *     </mosaik-card>
+ *     <mosaik-data-grid></mosaik-data-grid>
+ *   </mosaik-region-view>
  * </mosaik-region>
  * ```
  *
@@ -31,7 +81,7 @@ declare const RegionViewElement_base: (abstract new (...args: Array<any>) => imp
 export declare class RegionViewElement extends RegionViewElement_base implements IRegionViewElementProps {
     private _name;
     private _default;
-    private _template;
+    private _active;
     /**
      * @public
      */
@@ -60,24 +110,13 @@ export declare class RegionViewElement extends RegionViewElement_base implements
     get default(): boolean;
     set default(value: boolean);
     /**
-     * @public
-     * @override
-     */
-    firstUpdated(changedProperties: Map<keyof this, unknown>): void;
-    /**
-     * Gets the template containing the view's content.
+     * Whether this view is currently active (visible).
      *
-     * @returns The template element or null if not yet captured
      * @public
+     * @attr
      */
-    getTemplate(): HTMLTemplateElement | null;
-    /**
-     * Captures the light DOM children as a template and removes them from the DOM.
-     * This prevents custom elements from being instantiated until the view is activated.
-     *
-     * @private
-     */
-    private captureContentAsTemplate;
+    get active(): boolean;
+    set active(value: boolean);
 }
 /**
  * @public

package/Controls/Components/Grouping/Region/RegionViewElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionViewElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionViewElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;;AAQ1E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBASa,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,SAAS,CAA6B;IAM9C;;OAEG;;IAaH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IAIW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED;;;;OAIG;IACH,IAIW,OAAO,IAAI,OAAO,CAE5B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAEhC;IAMD;;;OAGG;IACa,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI;IAS/E;;;;;OAKG;IACI,WAAW,IAAI,mBAAmB,GAAG,IAAI;IAIhD;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;CA+BnC;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}
+{"version":3,"file":"RegionViewElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionViewElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;;AAQ1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBASa,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,OAAO,CAAU;IAMzB;;OAEG;;IAaH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IAIW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED;;;;OAIG;IACH,IAIW,OAAO,IAAI,OAAO,CAE5B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAEhC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;CAIJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}

package/Controls/Components/Grouping/Region/RegionViewElement.js

@@ -8,37 +8,87 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { viewElementTemplate } from './RegionViewElementTemplate';
-import { Themeable } from '../../../Behaviors/Themeable';
 import { regionViewElementCosmopolitanStyle } from './Themes/RegionViewElement.Cosmopolitan';
 import { regionViewElementJoyStyle } from './Themes/RegionViewElement.Joy';
 import { regionViewElementMemphisStyle } from './Themes/RegionViewElement.Memphis';
 // #endregion
 /**
- * View - A view definition component for use within a Region.
+ * RegionView - A view definition component for lazy content instantiation within a Region container.
  *
- * Acts as a template container that stores its content for lazy instantiation.
- * The view's children are not instantiated until the view becomes active within its parent region.
- * This enables efficient memory usage and clean lifecycle management for complex view hierarchies.
+ * @description
+ * The RegionView component acts as a template container that stores its content for lazy instantiation.
+ * The view's children are not instantiated until the view becomes active within its parent Region element,
+ * enabling efficient memory usage and clean lifecycle management for complex view hierarchies. When a view
+ * is deactivated, its content is removed from the DOM, and all component lifecycle hooks are properly called.
+ * This pattern is essential for managing large applications with multiple exclusive views.
  *
- * @name ViewElement
+ * @name RegionView
  * @element mosaik-region-view
  * @category Grouping
  *
- * @slot default - The content to be rendered when this view becomes active
+ * @slot - The content to be rendered when this view becomes active in its parent region
  *
  * @example
+ * Basic view definition:
  * ```html
  * <mosaik-region active="home">
  *   <mosaik-region-view name="home" default>
- *     <my-home-component></my-home-component>
+ *     <h1>Welcome Home</h1>
+ *     <p>This content is only instantiated when the view is active.</p>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Multiple views with components:
+ * ```html
+ * <mosaik-region active="dashboard">
+ *   <mosaik-region-view name="dashboard" default>
+ *     <my-dashboard-component></my-dashboard-component>
  *   </mosaik-region-view>
  *   <mosaik-region-view name="profile">
  *     <my-profile-component></my-profile-component>
  *   </mosaik-region-view>
+ *   <mosaik-region-view name="settings">
+ *     <my-settings-component></my-settings-component>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Wizard step definition:
+ * ```html
+ * <mosaik-region id="wizard">
+ *   <mosaik-region-view name="step1" default>
+ *     <h2>Step 1: Account Details</h2>
+ *     <mosaik-form><!-- account form fields --></mosaik-form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step2">
+ *     <h2>Step 2: Preferences</h2>
+ *     <mosaik-form><!-- preferences form --></mosaik-form>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step3">
+ *     <h2>Step 3: Confirmation</h2>
+ *     <div><!-- summary content --></div>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @example
+ * Complex nested content:
+ * ```html
+ * <mosaik-region>
+ *   <mosaik-region-view name="reports" default>
+ *     <mosaik-card>
+ *       <mosaik-chart slot="content" type="bar"></mosaik-chart>
+ *     </mosaik-card>
+ *     <mosaik-data-grid></mosaik-data-grid>
+ *   </mosaik-region-view>
  * </mosaik-region>
  * ```
  *
@@ -48,7 +98,7 @@ let RegionViewElement = class RegionViewElement extends Themeable(CustomElement)
     // #region Fields
     _name;
     _default;
-    _template;
+    _active;
     // #endregion
     // #region Ctor
     /**
@@ -58,7 +108,7 @@ let RegionViewElement = class RegionViewElement extends Themeable(CustomElement)
         super();
         this._name = '';
         this._default = false;
-        this._template = null;
+        this._active = false;
     }
     // #endregion
     // #region Properties
@@ -71,7 +121,7 @@ let RegionViewElement = class RegionViewElement extends Themeable(CustomElement)
      * @readonly
      */
     static get is() {
-        return 'mosaik-region';
+        return 'mosaik-region-view';
     }
     /**
      * The unique name identifier for this view within a region.
@@ -95,57 +145,20 @@ let RegionViewElement = class RegionViewElement extends Themeable(CustomElement)
     set default(value) {
         this._default = value;
     }
-    // #endregion
-    // #region Methods
-    /**
-     * @public
-     * @override
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        // Capture content after Lit has rendered and slotted the children
-        if (!this._template) {
-            this.captureContentAsTemplate();
-        }
-    }
     /**
-     * Gets the template containing the view's content.
+     * Whether this view is currently active (visible).
      *
-     * @returns The template element or null if not yet captured
      * @public
+     * @attr
      */
-    getTemplate() {
-        return this._template;
+    get active() {
+        return this._active;
     }
-    /**
-     * Captures the light DOM children as a template and removes them from the DOM.
-     * This prevents custom elements from being instantiated until the view is activated.
-     *
-     * @private
-     */
-    captureContentAsTemplate() {
-        if (!this.name) {
-            console.warn('mosaik-region-view requires a unique name attribute', this);
-            return;
-        }
-        // Get the slot element from shadow DOM
-        const slot = this.shadowRoot?.querySelector('slot');
-        if (!slot) {
-            return;
-        }
-        // Get the assigned nodes from the slot
-        const assignedNodes = slot.assignedNodes({ flatten: true });
-        if (assignedNodes.length === 0) {
-            return;
+    set active(value) {
+        if (this._active !== value) {
+            this._active = value;
+            this.requestUpdate('active');
         }
-        // Create template element to store the content
-        this._template = document.createElement('template');
-        // Move all assigned nodes into the template
-        assignedNodes.forEach((node) => {
-            if (this._template) {
-                this._template.content.appendChild(node);
-            }
-        });
     }
 };
 __decorate([
@@ -164,6 +177,14 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], RegionViewElement.prototype, "default", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], RegionViewElement.prototype, "active", null);
 RegionViewElement = __decorate([
     Component({
         selector: 'mosaik-region-view',

package/Controls/Components/Grouping/Region/RegionViewElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionViewElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionViewElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RegionViewElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionViewElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAUI,IAAM,iBAAiB,GAAvB,MAAM,iBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,KAAK,CAAS;IACd,QAAQ,CAAU;IAClB,OAAO,CAAU;IAEzB,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,oBAAoB,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAIW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IAED;;;;OAIG;IACH,IAIW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,OAAO,CAAC,KAAc;QAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED;;;;;OAKG;IACH,IAIW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAc;QAC5B,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;AApDG;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI;KACnB,CAAC;;;6CAGD;AAWD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;gDAGD;AAYD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;+CAGD;AAvFQ,iBAAiB;IAT7B,SAAS,CAAC;QACP,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE;YACJ,GAAG,EAAE,yBAAyB;YAC9B,OAAO,EAAE,6BAA6B;YACtC,YAAY,EAAE,kCAAkC;SACnD;KACJ,CAAC;;GACW,iBAAiB,CAkG7B"}

package/Controls/Components/Grouping/Region/Themes/RegionViewElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionViewElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Region/Themes/RegionViewElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kCAAkC,IAAI,SAAS,CAoD9D"}
+{"version":3,"file":"RegionViewElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Region/Themes/RegionViewElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kCAAkC,IAAI,SAAS,CA4D9D"}