npm - @melodicdev/components - Versions diffs - 1.0.3 → 1.0.5 - Mend

@melodicdev/components 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md CHANGED Viewed

@@ -26,7 +26,7 @@ Add a single `<link>` tag to your HTML. It includes design tokens (light + dark
 > **Production tip:** Pin to a specific version and use the minified build to avoid unexpected changes:
 > ```html
 > <link melodic-styles rel="stylesheet"
->       href="https://unpkg.com/@melodicdev/components@1.0.3/assets/melodic-components.min.css">
+>       href="https://unpkg.com/@melodicdev/components@1.0.4/assets/melodic-components.min.css">
 > ```
 The `melodic-styles` attribute has no special browser meaning — it's just a convenient selector if you ever need to find or replace the element from JavaScript:
@@ -80,9 +80,9 @@ If you're not using a bundler, you can load everything — styles, fonts, and al
 <html data-theme="light">
 <head>
   <link melodic-styles rel="stylesheet"
-        href="https://unpkg.com/@melodicdev/components@1.0.3/assets/melodic-components.min.css">
+        href="https://unpkg.com/@melodicdev/components@1.0.4/assets/melodic-components.min.css">
   <script type="module"
-          src="https://unpkg.com/@melodicdev/components@1.0.3/assets/melodic-components.min.js"></script>
+          src="https://unpkg.com/@melodicdev/components@1.0.4/assets/melodic-components.min.js"></script>
 </head>
 <body>
   <ml-button>Hello</ml-button>
@@ -97,7 +97,7 @@ The theme API is available as a named export from the module:
 ```html
 <script type="module">
-  import { applyTheme } from 'https://unpkg.com/@melodicdev/components@1.0.3/assets/melodic-components.min.js';
+  import { applyTheme } from 'https://unpkg.com/@melodicdev/components@1.0.4/assets/melodic-components.min.js';
   applyTheme('dark');
 </script>
 ```

package/assets/melodic-components.js CHANGED Viewed

@@ -5564,7 +5564,7 @@ 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`
@@ -5743,7 +5743,7 @@ var InputComponent = class InputComponent$1 {
 		this.readonly = false;
 		this.required = false;
 		this.autocomplete = "off";
-		this._focused = false;
+		this.focused = false;
 		this.handleInput = (event) => {
 			this.value = event.target.value;
 			this.elementRef.dispatchEvent(new CustomEvent("ml:input", {
@@ -5761,14 +5761,14 @@ var InputComponent = class InputComponent$1 {
 			}));
 		};
 		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
@@ -5806,7 +5806,7 @@ 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
 	})}
 		>
@@ -5971,7 +5971,7 @@ var TextareaComponent = class TextareaComponent$1 {
 		this.readonly = false;
 		this.required = false;
 		this.resize = false;
-		this._focused = false;
+		this.focused = false;
 		this.handleInput = (event) => {
 			this.value = event.target.value;
 			this.elementRef.dispatchEvent(new CustomEvent("ml:input", {
@@ -5989,14 +5989,14 @@ var TextareaComponent = class TextareaComponent$1 {
 			}));
 		};
 		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
@@ -12348,6 +12348,7 @@ const dataGridStyles = () => css`
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-width: 0;
 		font-family: var(--ml-font-sans);
 	}
@@ -12400,6 +12401,7 @@ const dataGridStyles = () => css`
 		overflow: auto;
 		position: relative;
 		min-height: 0;
+		min-width: 0;
 	}
 	.ml-data-grid__viewport::-webkit-scrollbar {
@@ -15892,7 +15894,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,
@@ -15906,7 +15908,7 @@ function renderNavItem(c, item, level) {
 		if (item.disabled) return;
 		if (hasChildren) {
 			event.preventDefault();
-			c.handleConfigToggle(item, c._expandedItems);
+			c.handleConfigToggle(item);
 			return;
 		}
 		c.handleConfigItemClick(item.value, item.href);
@@ -16271,10 +16273,11 @@ var SidebarComponent = class SidebarComponent$1 {
 		this.handleConfigItemClick = (value, href) => {
 			this.activateItem(value, href);
 		};
-		this.handleConfigToggle = (item, expandedItems) => {
-			if (expandedItems.has(item.value)) expandedItems.delete(item.value);
-			else expandedItems.add(item.value);
-			this.elementRef.dispatchEvent(new Event("ml:internal-update"));
+		this.handleConfigToggle = (item) => {
+			const next = new Set(this.expandedItems);
+			if (next.has(item.value)) next.delete(item.value);
+			else next.add(item.value);
+			this.expandedItems = next;
 		};
 		this.handleKeyDown = (event) => {
 			const sidebar = this.elementRef.shadowRoot?.querySelector(".ml-sidebar__main");
@@ -16303,7 +16306,7 @@ var SidebarComponent = class SidebarComponent$1 {
 			}
 			if (newIndex !== currentIndex && focusable[newIndex]) focusable[newIndex].focus();
 		};
-		this._expandedItems = /* @__PURE__ */ new Set();
+		this.expandedItems = /* @__PURE__ */ new Set();
 	}
 	get hasSearch() {
 		return this.elementRef?.querySelector("[slot=\"search\"]") !== null;
@@ -19695,8 +19698,8 @@ 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({
@@ -19943,29 +19946,28 @@ var AppShellComponent = class AppShellComponent$1 {
 		this["sidebar-position"] = "left";
 		this["sidebar-collapsed"] = false;
 		this["header-fixed"] = false;
-		this._mobileOpen = false;
+		this.mobile = false;
+		this.mobileOpen = false;
 		this._mediaQuery = null;
 		this._handleMediaChange = this.onMediaChange.bind(this);
 		this.toggleMobileSidebar = () => {
-			this._mobileOpen = !this._mobileOpen;
+			this.mobileOpen = !this.mobileOpen;
 		};
 		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);
-		if (!this.isMobile) this._mobileOpen = false;
+		this.mobile = !this._mediaQuery.matches;
 	}
 	onDestroy() {
 		this._mediaQuery?.removeEventListener("change", this._handleMediaChange);
 	}
 	onMediaChange(event) {
-		if (event.matches) this._mobileOpen = false;
+		this.mobile = !event.matches;
+		if (event.matches) this.mobileOpen = false;
 	}
 };
 AppShellComponent = __decorate([MelodicComponent({