@melodicdev/components 1.6.1 → 1.6.3

package/README.md

@@ -231,6 +231,12 @@ type ThemeMode = 'light' | 'dark' | 'system';
 
 ---
 
+## Working with timezones
+
+For datetime fields that need to round-trip a real UTC instant — multi-tenant SaaS, calendar/scheduling apps, anything stored as UTC server-side — use [`<ml-date-time-picker>`](./docs/components/forms.md#ml-date-time-picker) with its `timezone` attribute. The picker anchors the wall-clock the user types to the named IANA zone, surfaces a `valueUtc` field on the `ml:change` event detail, and renders a trailing zone label so users know what zone they're entering. Without `timezone`, the component is a plain naive datetime input — no behavior change for existing consumers. Elsewhere in the app, the right primitive for displaying the same instant in another zone is `Intl.DateTimeFormat(..., { timeZone })`.
+
+---
+
 ## Theme System
 
 Override tokens globally via CSS:

package/assets/melodic-components.js

@@ -13593,6 +13593,7 @@ function tableTemplate(c) {
 							`)}
 							${repeat(c.columns, (col) => col.key, (col) => html`
 								<th
+									part="header-cell"
 									class=${classMap({
 		"ml-table__th": true,
 		"ml-table__th--sortable": !!col.sortable,
@@ -13625,6 +13626,7 @@ function tableTemplate(c) {
 		const absoluteIndex = c.startIndex + i;
 		return html`
 								<tr
+									part="row"
 									class=${classMap({
 			"ml-table__row": true,
 			"ml-table__row--selected": c.isRowSelected(absoluteIndex)
@@ -13644,10 +13646,13 @@ function tableTemplate(c) {
 										</td>
 									`)}
 									${repeat(c.columns, (col) => col.key, (col) => html`
-										<td class=${classMap({
+										<td
+											part="cell"
+											class=${classMap({
 			"ml-table__td": true,
 			[`ml-table__td--${col.align ?? "left"}`]: true
-		})}>
+		})}
+										>
 											${renderCell$1(col, row, absoluteIndex)}
 										</td>
 									`)}
@@ -13720,6 +13725,16 @@ const tableStyles = () => css`
 
 		/* ── Table: cells ── */
 		--ml-table-cell-color: var(--ml-color-text);
+		--ml-table-cell-padding-y: var(--ml-space-4);
+		--ml-table-cell-padding-x: var(--ml-space-6);
+		--ml-table-cell-padding-y-sm: var(--ml-space-2-5);
+		--ml-table-cell-padding-x-sm: var(--ml-space-4);
+
+		/* ── Table: header cells ── */
+		--ml-table-header-padding-y: var(--ml-space-3);
+		--ml-table-header-padding-x: var(--ml-space-6);
+		--ml-table-header-padding-y-sm: var(--ml-space-2);
+		--ml-table-header-padding-x-sm: var(--ml-space-4);
 
 		/* ── Table: checkbox ── */
 		--ml-table-checkbox-accent: var(--ml-color-primary);
@@ -13791,7 +13806,7 @@ const tableStyles = () => css`
 	}
 
 	.ml-table__th {
-		padding: var(--ml-space-3) var(--ml-space-6);
+		padding: var(--ml-table-header-padding-y) var(--ml-table-header-padding-x);
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
 		color: var(--ml-table-header-color);
@@ -13803,7 +13818,7 @@ const tableStyles = () => css`
 	}
 
 	.ml-table--sm .ml-table__th {
-		padding: var(--ml-space-2) var(--ml-space-4);
+		padding: var(--ml-table-header-padding-y-sm) var(--ml-table-header-padding-x-sm);
 	}
 
 	.ml-table__th--center { text-align: center; }
@@ -13881,14 +13896,14 @@ const tableStyles = () => css`
 
 	/* ── Body cells ── */
 	.ml-table__td {
-		padding: var(--ml-space-4) var(--ml-space-6);
+		padding: var(--ml-table-cell-padding-y) var(--ml-table-cell-padding-x);
 		font-size: var(--ml-text-sm);
 		color: var(--ml-table-cell-color);
 		vertical-align: middle;
 	}
 
 	.ml-table--sm .ml-table__td {
-		padding: var(--ml-space-2-5) var(--ml-space-4);
+		padding: var(--ml-table-cell-padding-y-sm) var(--ml-table-cell-padding-x-sm);
 		font-size: var(--ml-text-xs);
 	}