@melodicdev/components 1.0.3 → 1.0.5

package/assets/melodic-components.min.js

@@ -4571,7 +4571,7 @@ function oa(e) {
     "ml-input--disabled": e.disabled,
     "ml-input--readonly": e.readonly,
     "ml-input--error": !!e.error,
-    "ml-input--focused": e._focused
+    "ml-input--focused": e.focused
   })}
 		>
 			${d(!!e.label, () => i`
@@ -4739,7 +4739,7 @@ const ia = () => y`
 `;
 var it = class {
   constructor() {
-    this.type = "text", this.value = "", this.placeholder = "", this.label = "", this.hint = "", this.error = "", this.size = "md", this.disabled = !1, this.readonly = !1, this.required = !1, this.autocomplete = "off", this._focused = !1, this.handleInput = (t) => {
+    this.type = "text", this.value = "", this.placeholder = "", this.label = "", this.hint = "", this.error = "", this.size = "md", this.disabled = !1, this.readonly = !1, this.required = !1, this.autocomplete = "off", this.focused = !1, this.handleInput = (t) => {
       this.value = t.target.value, this.elementRef.dispatchEvent(new CustomEvent("ml:input", {
         bubbles: !0,
         composed: !0,
@@ -4752,12 +4752,12 @@ var it = class {
         detail: { value: this.value }
       }));
     }, this.handleFocus = () => {
-      this._focused = !0, this.elementRef.dispatchEvent(new CustomEvent("ml:focus", {
+      this.focused = !0, this.elementRef.dispatchEvent(new CustomEvent("ml:focus", {
         bubbles: !0,
         composed: !0
       }));
     }, this.handleBlur = () => {
-      this._focused = !1, this.elementRef.dispatchEvent(new CustomEvent("ml:blur", {
+      this.focused = !1, this.elementRef.dispatchEvent(new CustomEvent("ml:blur", {
         bubbles: !0,
         composed: !0
       }));
@@ -4794,7 +4794,7 @@ function sa(e) {
     "ml-textarea--disabled": e.disabled,
     "ml-textarea--readonly": e.readonly,
     "ml-textarea--error": !!e.error,
-    "ml-textarea--focused": e._focused,
+    "ml-textarea--focused": e.focused,
     "ml-textarea--resize": e.resize
   })}
 		>
@@ -4947,7 +4947,7 @@ const na = () => y`
 `;
 var st = class {
   constructor() {
-    this.value = "", this.placeholder = "", this.label = "", this.hint = "", this.error = "", this.size = "md", this.rows = 3, this.maxLength = 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.resize = !1, this._focused = !1, this.handleInput = (t) => {
+    this.value = "", this.placeholder = "", this.label = "", this.hint = "", this.error = "", this.size = "md", this.rows = 3, this.maxLength = 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.resize = !1, this.focused = !1, this.handleInput = (t) => {
       this.value = t.target.value, this.elementRef.dispatchEvent(new CustomEvent("ml:input", {
         bubbles: !0,
         composed: !0,
@@ -4960,12 +4960,12 @@ var st = class {
         detail: { value: this.value }
       }));
     }, this.handleFocus = () => {
-      this._focused = !0, this.elementRef.dispatchEvent(new CustomEvent("ml:focus", {
+      this.focused = !0, this.elementRef.dispatchEvent(new CustomEvent("ml:focus", {
         bubbles: !0,
         composed: !0
       }));
     }, this.handleBlur = () => {
-      this._focused = !1, this.elementRef.dispatchEvent(new CustomEvent("ml:blur", {
+      this.focused = !1, this.elementRef.dispatchEvent(new CustomEvent("ml:blur", {
         bubbles: !0,
         composed: !0
       }));
@@ -10956,6 +10956,7 @@ const Co = () => y`
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-width: 0;
 		font-family: var(--ml-font-sans);
 	}
 
@@ -11008,6 +11009,7 @@ const Co = () => y`
 		overflow: auto;
 		position: relative;
 		min-height: 0;
+		min-width: 0;
 	}
 
 	.ml-data-grid__viewport::-webkit-scrollbar {
@@ -14215,7 +14217,7 @@ function hi(e, t) {
 	`;
 }
 function Pe(e, t, r) {
-  const l = e.active === t.value, a = !!t.children && t.children.length > 0, o = e._expandedItems.has(t.value), s = e.collapsed, n = v({
+  const l = e.active === t.value, a = !!t.children && t.children.length > 0, o = e.expandedItems.has(t.value), s = e.collapsed, n = v({
     "ml-sidebar__item-link": !0,
     "ml-sidebar__item-link--active": l,
     "ml-sidebar__item-link--disabled": !!t.disabled,
@@ -14225,7 +14227,7 @@ function Pe(e, t, r) {
   }), c = (u) => {
     if (!t.disabled) {
       if (a) {
-        u.preventDefault(), e.handleConfigToggle(t, e._expandedItems);
+        u.preventDefault(), e.handleConfigToggle(t);
         return;
       }
       e.handleConfigItemClick(t.value, t.href);
@@ -14577,8 +14579,9 @@ var Zt = class {
       this._slottedItems = t.target.assignedElements({ flatten: !0 }), this.updateItemStates();
     }, this.handleConfigItemClick = (t, r) => {
       this.activateItem(t, r);
-    }, this.handleConfigToggle = (t, r) => {
-      r.has(t.value) ? r.delete(t.value) : r.add(t.value), this.elementRef.dispatchEvent(new Event("ml:internal-update"));
+    }, this.handleConfigToggle = (t) => {
+      const r = new Set(this.expandedItems);
+      r.has(t.value) ? r.delete(t.value) : r.add(t.value), this.expandedItems = r;
     }, this.handleKeyDown = (t) => {
       const r = this.elementRef.shadowRoot?.querySelector(".ml-sidebar__main");
       if (!r) return;
@@ -14601,7 +14604,7 @@ var Zt = class {
           return;
       }
       o !== a && l[o] && l[o].focus();
-    }, this._expandedItems = /* @__PURE__ */ new Set();
+    }, this.expandedItems = /* @__PURE__ */ new Set();
   }
   /** Check if search slot has content */
   get hasSearch() {
@@ -17744,7 +17747,7 @@ hr = g([_({
   ]
 })], hr);
 function Zi(e) {
-  const t = e["sidebar-position"] === "right", r = e["sidebar-collapsed"], l = e["header-fixed"], a = e._mobileOpen, o = e.isMobile;
+  const t = e["sidebar-position"] === "right", r = e["sidebar-collapsed"], l = e["header-fixed"], a = e.mobileOpen, o = e.mobile;
   return i`
 		<div
 			class=${v({
@@ -17988,23 +17991,20 @@ const es = () => y`
 `;
 var pr = class {
   constructor() {
-    this["sidebar-position"] = "left", this["sidebar-collapsed"] = !1, this["header-fixed"] = !1, this._mobileOpen = !1, this._mediaQuery = null, this._handleMediaChange = this.onMediaChange.bind(this), this.toggleMobileSidebar = () => {
-      this._mobileOpen = !this._mobileOpen;
+    this["sidebar-position"] = "left", this["sidebar-collapsed"] = !1, this["header-fixed"] = !1, this.mobile = !1, this.mobileOpen = !1, this._mediaQuery = null, this._handleMediaChange = this.onMediaChange.bind(this), this.toggleMobileSidebar = () => {
+      this.mobileOpen = !this.mobileOpen;
     }, this.closeMobileSidebar = () => {
-      this._mobileOpen = !1;
+      this.mobileOpen = !1;
     };
   }
-  get isMobile() {
-    return this._mediaQuery?.matches === !1;
-  }
   onCreate() {
-    this._mediaQuery = window.matchMedia("(min-width: 768px)"), this._mediaQuery.addEventListener("change", this._handleMediaChange), this.isMobile || (this._mobileOpen = !1);
+    this._mediaQuery = window.matchMedia("(min-width: 768px)"), this._mediaQuery.addEventListener("change", this._handleMediaChange), this.mobile = !this._mediaQuery.matches;
   }
   onDestroy() {
     this._mediaQuery?.removeEventListener("change", this._handleMediaChange);
   }
   onMediaChange(t) {
-    t.matches && (this._mobileOpen = !1);
+    this.mobile = !t.matches, t.matches && (this.mobileOpen = !1);
   }
 };
 pr = g([_({

package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAwe1B,CAAC"}
+{"version":3,"file":"data-grid.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA0e1B,CAAC"}

package/lib/components/data-display/data-grid/data-grid.styles.js

@@ -4,6 +4,7 @@ export const dataGridStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-width: 0;
 		font-family: var(--ml-font-sans);
 	}
 
@@ -56,6 +57,7 @@ export const dataGridStyles = () => css `
 		overflow: auto;
 		position: relative;
 		min-height: 0;
+		min-width: 0;
 	}
 
 	.ml-data-grid__viewport::-webkit-scrollbar {

package/lib/components/forms/input/input.component.d.ts

@@ -45,7 +45,7 @@ export declare class InputComponent implements IElementRef, OnInit {
     /** Autocomplete attribute */
     autocomplete: string;
     /** Internal focus state */
-    _focused: boolean;
+    focused: boolean;
     onInit(): void;
     handleInput: (event: Event) => void;
     handleChange: (event: Event) => void;

package/lib/components/forms/input/input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IACzD,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,IAAI,EAAE,SAAS,CAAU;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,kCAAkC;IAClC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,wBAAwB;IACxB,QAAQ,UAAS;IAEjB,0BAA0B;IAC1B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,YAAY,SAAS;IAErB,2BAA2B;IAC3B,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IACzD,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,IAAI,EAAE,SAAS,CAAU;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,kCAAkC;IAClC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,wBAAwB;IACxB,QAAQ,UAAS;IAEjB,0BAA0B;IAC1B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,YAAY,SAAS;IAErB,2BAA2B;IAC3B,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}

package/lib/components/forms/input/input.component.js

@@ -51,7 +51,7 @@ let InputComponent = class InputComponent {
         /** Autocomplete attribute */
         this.autocomplete = 'off';
         /** Internal focus state */
-        this._focused = false;
+        this.focused = false;
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -71,14 +71,14 @@ let InputComponent = class InputComponent {
             }));
         };
         this.handleFocus = () => {
-            this._focused = true;
+            this.focused = true;
             this.elementRef.dispatchEvent(new CustomEvent('ml:focus', {
                 bubbles: true,
                 composed: true
             }));
         };
         this.handleBlur = () => {
-            this._focused = false;
+            this.focused = false;
             this.elementRef.dispatchEvent(new CustomEvent('ml:blur', {
                 bubbles: true,
                 composed: true

package/lib/components/forms/input/input.template.js

@@ -8,7 +8,7 @@ export function inputTemplate(c) {
         'ml-input--disabled': c.disabled,
         'ml-input--readonly': c.readonly,
         'ml-input--error': !!c.error,
-        'ml-input--focused': c._focused
+        'ml-input--focused': c.focused
     })}
 		>
 			${when(!!c.label, () => html `

package/lib/components/forms/textarea/textarea.component.d.ts

@@ -42,7 +42,7 @@ export declare class TextareaComponent implements IElementRef, OnInit {
     /** Allow vertical resize */
     resize: boolean;
     /** Internal focus state */
-    _focused: boolean;
+    focused: boolean;
     onInit(): void;
     handleInput: (event: Event) => void;
     handleChange: (event: Event) => void;

package/lib/components/forms/textarea/textarea.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IAC5D,UAAU,EAAG,WAAW,CAAC;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,qCAAqC;IACrC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,mCAAmC;IACnC,IAAI,SAAK;IAET,+BAA+B;IAC/B,SAAS,SAAK;IAEd,2BAA2B;IAC3B,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,4BAA4B;IAC5B,MAAM,UAAS;IAEf,2BAA2B;IAC3B,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}
+{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IAC5D,UAAU,EAAG,WAAW,CAAC;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,qCAAqC;IACrC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,mCAAmC;IACnC,IAAI,SAAK;IAET,+BAA+B;IAC/B,SAAS,SAAK;IAEd,2BAA2B;IAC3B,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,4BAA4B;IAC5B,MAAM,UAAS;IAEf,2BAA2B;IAC3B,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}

package/lib/components/forms/textarea/textarea.component.js

@@ -49,7 +49,7 @@ let TextareaComponent = class TextareaComponent {
         /** Allow vertical resize */
         this.resize = false;
         /** Internal focus state */
-        this._focused = false;
+        this.focused = false;
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -69,14 +69,14 @@ let TextareaComponent = class TextareaComponent {
             }));
         };
         this.handleFocus = () => {
-            this._focused = true;
+            this.focused = true;
             this.elementRef.dispatchEvent(new CustomEvent('ml:focus', {
                 bubbles: true,
                 composed: true
             }));
         };
         this.handleBlur = () => {
-            this._focused = false;
+            this.focused = false;
             this.elementRef.dispatchEvent(new CustomEvent('ml:blur', {
                 bubbles: true,
                 composed: true

package/lib/components/forms/textarea/textarea.template.js

@@ -8,7 +8,7 @@ export function textareaTemplate(c) {
         'ml-textarea--disabled': c.disabled,
         'ml-textarea--readonly': c.readonly,
         'ml-textarea--error': !!c.error,
-        'ml-textarea--focused': c._focused,
+        'ml-textarea--focused': c.focused,
         'ml-textarea--resize': c.resize
     })}
 		>

package/lib/components/navigation/sidebar/sidebar.component.d.ts

@@ -62,11 +62,11 @@ export declare class SidebarComponent implements IElementRef, OnCreate, OnDestro
     /** Handle config item click */
     handleConfigItemClick: (value: string, href?: string) => void;
     /** Handle config submenu toggle */
-    handleConfigToggle: (item: SidebarNavItem, expandedItems: Set<string>) => void;
+    handleConfigToggle: (item: SidebarNavItem) => void;
     /** Keyboard navigation */
     handleKeyDown: (event: KeyboardEvent) => void;
     /** Track expanded config items */
-    _expandedItems: Set<string>;
+    expandedItems: Set<string>;
     /** Activate an item */
     private activateItem;
     /** Handle item click from slotted children */

package/lib/components/navigation/sidebar/sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAI1F;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAMa,gBAAiB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAClF,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,OAAO,EAAE,cAAc,CAAa;IAEpC,kCAAkC;IAClC,MAAM,SAAM;IAEZ,yDAAyD;IACzD,SAAS,UAAS;IAElB,yDAAyD;IACzD,UAAU,EAAE,eAAe,EAAE,CAAM;IAEnC,+BAA+B;IAC/B,gBAAgB,EAAE,cAAc,EAAE,CAAM;IAExC,yCAAyC;IACzC,aAAa,EAAE,WAAW,EAAE,CAAM;IAElC,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAA8C;IAEjE,2BAA2B;IAC3B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA+B;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAElE,uCAAuC;IACvC,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,wCAAwC;IACxC,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,qCAAqC;IACrC,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAUjB,kCAAkC;IAClC,uBAAuB,GAAI,OAAO,KAAK,KAAG,IAAI,CAI5C;IAEF,+BAA+B;IAC/B,qBAAqB,GAAI,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAE1D;IAEF,mCAAmC;IACnC,kBAAkB,GAAI,MAAM,cAAc,EAAE,eAAe,GAAG,CAAC,MAAM,CAAC,KAAG,IAAI,CAQ3E;IAEF,0BAA0B;IAC1B,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmC1C;IAEF,kCAAkC;IAClC,cAAc,cAAqB;IAEnC,uBAAuB;IACvB,OAAO,CAAC,YAAY;IAqBpB,8CAA8C;IAC9C,OAAO,CAAC,WAAW;IAKnB,0CAA0C;IAC1C,OAAO,CAAC,YAAY;IASpB,0CAA0C;IAC1C,OAAO,CAAC,YAAY;IASpB,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;CAexB"}
+{"version":3,"file":"sidebar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAI1F;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAMa,gBAAiB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAClF,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,OAAO,EAAE,cAAc,CAAa;IAEpC,kCAAkC;IAClC,MAAM,SAAM;IAEZ,yDAAyD;IACzD,SAAS,UAAS;IAElB,yDAAyD;IACzD,UAAU,EAAE,eAAe,EAAE,CAAM;IAEnC,+BAA+B;IAC/B,gBAAgB,EAAE,cAAc,EAAE,CAAM;IAExC,yCAAyC;IACzC,aAAa,EAAE,WAAW,EAAE,CAAM;IAElC,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAA8C;IAEjE,2BAA2B;IAC3B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA+B;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAElE,uCAAuC;IACvC,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,wCAAwC;IACxC,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,qCAAqC;IACrC,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAUjB,kCAAkC;IAClC,uBAAuB,GAAI,OAAO,KAAK,KAAG,IAAI,CAI5C;IAEF,+BAA+B;IAC/B,qBAAqB,GAAI,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAE1D;IAEF,mCAAmC;IACnC,kBAAkB,GAAI,MAAM,cAAc,KAAG,IAAI,CAQ/C;IAEF,0BAA0B;IAC1B,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmC1C;IAEF,kCAAkC;IAClC,aAAa,cAAqB;IAElC,uBAAuB;IACvB,OAAO,CAAC,YAAY;IAqBpB,8CAA8C;IAC9C,OAAO,CAAC,WAAW;IAKnB,0CAA0C;IAC1C,OAAO,CAAC,YAAY;IASpB,0CAA0C;IAC1C,OAAO,CAAC,YAAY;IASpB,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;CAexB"}

package/lib/components/navigation/sidebar/sidebar.component.js

@@ -66,15 +66,15 @@ let SidebarComponent = class SidebarComponent {
             this.activateItem(value, href);
         };
         /** Handle config submenu toggle */
-        this.handleConfigToggle = (item, expandedItems) => {
-            if (expandedItems.has(item.value)) {
-                expandedItems.delete(item.value);
+        this.handleConfigToggle = (item) => {
+            const next = new Set(this.expandedItems);
+            if (next.has(item.value)) {
+                next.delete(item.value);
             }
             else {
-                expandedItems.add(item.value);
+                next.add(item.value);
             }
-            // Trigger re-render
-            this.elementRef.dispatchEvent(new Event('ml:internal-update'));
+            this.expandedItems = next;
         };
         /** Keyboard navigation */
         this.handleKeyDown = (event) => {
@@ -109,7 +109,7 @@ let SidebarComponent = class SidebarComponent {
             }
         };
         /** Track expanded config items */
-        this._expandedItems = new Set();
+        this.expandedItems = new Set();
     }
     /** Check if search slot has content */
     get hasSearch() {

package/lib/components/navigation/sidebar/sidebar.template.js

@@ -73,7 +73,7 @@ function renderNavGroup(c, group) {
 function renderNavItem(c, item, level) {
     const isActive = c.active === item.value;
     const hasChildren = !!item.children && item.children.length > 0;
-    const isExpanded = c._expandedItems.has(item.value);
+    const isExpanded = c.expandedItems.has(item.value);
     const isCollapsed = c.collapsed;
     const linkClasses = classMap({
         'ml-sidebar__item-link': true,
@@ -88,7 +88,7 @@ function renderNavItem(c, item, level) {
             return;
         if (hasChildren) {
             event.preventDefault();
-            c.handleConfigToggle(item, c._expandedItems);
+            c.handleConfigToggle(item);
             return;
         }
         c.handleConfigItemClick(item.value, item.href);

package/lib/components/sections/app-shell/app-shell.component.d.ts

@@ -26,12 +26,13 @@ export declare class AppShellComponent implements IElementRef, OnCreate, OnDestr
     'sidebar-collapsed': boolean;
     /** Whether the header is fixed/sticky */
     'header-fixed': boolean;
-    /** Internal: tracks if mobile drawer is open */
-    _mobileOpen: boolean;
+    /** Whether the viewport is mobile-sized (<768px) */
+    mobile: boolean;
+    /** Whether the mobile sidebar drawer is open */
+    mobileOpen: boolean;
     /** Media query for responsive behavior */
     private _mediaQuery;
     private readonly _handleMediaChange;
-    get isMobile(): boolean;
     onCreate(): void;
     onDestroy(): void;
     /** Toggle mobile sidebar drawer */

package/lib/components/sections/app-shell/app-shell.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACzE,UAAU,EAAG,WAAW,CAAC;IAEzB,iDAAiD;IACjD,kBAAkB,EAAE,eAAe,CAAU;IAE7C,uCAAuC;IACvC,mBAAmB,UAAS;IAE5B,yCAAyC;IACzC,cAAc,UAAS;IAEvB,gDAAgD;IAChD,WAAW,UAAS;IAEpB,0CAA0C;IAC1C,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;IAEpE,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,QAAQ,IAAI,IAAI;IAUhB,SAAS,IAAI,IAAI;IAIjB,mCAAmC;IACnC,mBAAmB,QAAO,IAAI,CAE5B;IAEF,2BAA2B;IAC3B,kBAAkB,QAAO,IAAI,CAE3B;IAEF,OAAO,CAAC,aAAa;CAMrB"}
+{"version":3,"file":"app-shell.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACzE,UAAU,EAAG,WAAW,CAAC;IAEzB,iDAAiD;IACjD,kBAAkB,EAAE,eAAe,CAAU;IAE7C,uCAAuC;IACvC,mBAAmB,UAAS;IAE5B,yCAAyC;IACzC,cAAc,UAAS;IAEvB,oDAAoD;IACpD,MAAM,UAAS;IAEf,gDAAgD;IAChD,UAAU,UAAS;IAEnB,0CAA0C;IAC1C,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;IAEpE,QAAQ,IAAI,IAAI;IAMhB,SAAS,IAAI,IAAI;IAIjB,mCAAmC;IACnC,mBAAmB,QAAO,IAAI,CAE5B;IAEF,2BAA2B;IAC3B,kBAAkB,QAAO,IAAI,CAE3B;IAEF,OAAO,CAAC,aAAa;CAOrB"}

package/lib/components/sections/app-shell/app-shell.component.js

@@ -33,38 +33,35 @@ let AppShellComponent = class AppShellComponent {
         this['sidebar-collapsed'] = false;
         /** Whether the header is fixed/sticky */
         this['header-fixed'] = false;
-        /** Internal: tracks if mobile drawer is open */
-        this._mobileOpen = false;
+        /** Whether the viewport is mobile-sized (<768px) */
+        this.mobile = false;
+        /** Whether the mobile sidebar drawer is open */
+        this.mobileOpen = false;
         /** Media query for responsive behavior */
         this._mediaQuery = null;
         this._handleMediaChange = this.onMediaChange.bind(this);
         /** Toggle mobile sidebar drawer */
         this.toggleMobileSidebar = () => {
-            this._mobileOpen = !this._mobileOpen;
+            this.mobileOpen = !this.mobileOpen;
         };
         /** Close mobile sidebar */
         this.closeMobileSidebar = () => {
-            this._mobileOpen = false;
+            this.mobileOpen = false;
         };
     }
-    get isMobile() {
-        return this._mediaQuery?.matches === false;
-    }
     onCreate() {
         this._mediaQuery = window.matchMedia('(min-width: 768px)');
         this._mediaQuery.addEventListener('change', this._handleMediaChange);
-        // Close mobile drawer on initial desktop
-        if (!this.isMobile) {
-            this._mobileOpen = false;
-        }
+        this.mobile = !this._mediaQuery.matches;
     }
     onDestroy() {
         this._mediaQuery?.removeEventListener('change', this._handleMediaChange);
     }
     onMediaChange(event) {
+        this.mobile = !event.matches;
         if (event.matches) {
             // Switched to desktop: close mobile drawer
-            this._mobileOpen = false;
+            this.mobileOpen = false;
         }
     }
 };

package/lib/components/sections/app-shell/app-shell.template.js

@@ -3,8 +3,8 @@ export function appShellTemplate(c) {
     const sidebarRight = c['sidebar-position'] === 'right';
     const collapsed = c['sidebar-collapsed'];
     const headerFixed = c['header-fixed'];
-    const mobileOpen = c._mobileOpen;
-    const isMobile = c.isMobile;
+    const mobileOpen = c.mobileOpen;
+    const isMobile = c.mobile;
     return html `
 		<div
 			class=${classMap({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",
@@ -242,6 +242,8 @@
 		"build": "tsc -p tsconfig.build.json && node scripts/generate-css.mjs && vite build --config vite.config.bundle.ts --mode development && vite build --config vite.config.bundle.ts --mode production",
 		"build:watch": "tsc -p tsconfig.build.json --watch",
 		"prepublishOnly": "npm run build",
+		"test": "vitest run",
+		"test:watch": "vitest",
 		"docs": "vite --config vite.config.docs.ts",
 		"docs:build": "vite build --config vite.config.docs.ts"
 	},