@iyulab/components 1.25.0 → 1.27.0

package/dist/components/date-picker/UDatePicker.d.ts

@@ -0,0 +1,70 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+import { UPopover } from '../popover/UPopover.js';
+/**
+ * A single-date-selection form control. The value follows the same convention as the
+ * native `input[type=date]`: an ISO `YYYY-MM-DD` string.
+ *
+ * The calendar week always starts on Sunday, regardless of locale — harmless for the
+ * locales this library currently ships (en/ko), but not correct for locales where Monday
+ * (most of Europe) or Saturday is conventional. Fix when a consumer needs it: derive the
+ * first day of week from `Intl.Locale(locale).weekInfo?.firstDay`, falling back to Sunday
+ * where unsupported.
+ *
+ * @csspart field - the u-field element
+ * @csspart container - the element wrapping the trigger area
+ * @csspart popover - the popover element showing the calendar
+ * @csspart calendar - the calendar container
+ * @csspart calendar-header - the month navigation header
+ * @csspart calendar-title - the "Month Year" title
+ * @csspart calendar-weekdays - the weekday header row
+ * @csspart calendar-grid - the date grid
+ * @csspart day - a date cell button
+ *
+ * @cssprop --date-picker-popover-width - width of the calendar popover (default: 296px, independent of trigger width — a fixed-width calendar reads more naturally)
+ *
+ * @event change - fires when the user clicks a date cell, confirms via keyboard, or clicks the clear button.
+ *   Programmatic value assignment does not fire it (same contract as native form controls).
+ */
+export declare class UDatePicker extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** Minimum value (ISO YYYY-MM-DD) — dates before this cannot be selected. */
+    min?: string;
+    /** Maximum value (ISO YYYY-MM-DD) — dates after this cannot be selected. */
+    max?: string;
+    /** Whether to show the clear button */
+    clearable: boolean;
+    /** Placeholder text (shown on the trigger when there is no value) */
+    placeholder?: string;
+    containerEl?: HTMLElement;
+    popoverEl?: UPopover;
+    /** Unique id wiring the combobox's `aria-controls` to the calendar dialog — mirrors USelect's `listboxId`. */
+    private readonly calendarId;
+    private open;
+    private viewDate;
+    private focusedDate;
+    private grabFocusOnUpdate;
+    protected updated(changed: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderCalendar;
+    private renderDay;
+    private isOutOfRange;
+    private focusDayButton;
+    private selectDay;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private navigateMonth;
+    private handleDayKeydown;
+    private moveFocus;
+    private handlePopoverShow;
+    private handlePopoverHide;
+    private handleClearClick;
+    private emitChange;
+    protected setValidity(): void;
+    reset(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-date-picker': UDatePicker;
+    }
+}

package/dist/components/date-picker/UDatePicker.js

@@ -0,0 +1,306 @@
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { UFormControlElement } from "../UFormControlElement.js";
+import "../icon/UIcon.js";
+import "../icon-button/UIconButton.js";
+import { Locale } from "../../utilities/Locale.js";
+import "../field/UField.js";
+import { UPopover } from "../popover/UPopover.js";
+import { formatDate } from "../../utilities/format.js";
+import { styles } from "./UDatePicker.styles.js";
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/date-picker/UDatePicker.ts
+function parseISODate(iso) {
+	const [y, m, d] = iso.split("-").map(Number);
+	return new Date(y, m - 1, d);
+}
+function toISODate(date) {
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(date, delta) {
+	return new Date(date.getFullYear(), date.getMonth() + delta, 1);
+}
+function addDays(date, delta) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
+}
+function daysInMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+}
+/** Cells to render for the calendar grid — leading `null`s pad the previous month's weekday offset. */
+function buildMonthGrid(viewDate) {
+	const startOffset = startOfMonth(viewDate).getDay();
+	const total = daysInMonth(viewDate);
+	const cells = [];
+	for (let i = 0; i < startOffset; i++) cells.push(null);
+	for (let d = 1; d <= total; d++) cells.push(new Date(viewDate.getFullYear(), viewDate.getMonth(), d));
+	return cells;
+}
+/** Splits the flat cell list into 7-day weeks — the `role="row"` grouping the APG grid pattern expects. */
+function chunkWeeks(cells) {
+	const weeks = [];
+	for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
+	return weeks;
+}
+/** 2023-01-01 was a Sunday — a fixed reference date that always yields Sun..Sat order regardless of today. */
+function getWeekdayLabels(locale) {
+	const formatter = new Intl.DateTimeFormat(locale ?? Locale.get(), { weekday: "narrow" });
+	const sunday = new Date(2023, 0, 1);
+	return Array.from({ length: 7 }, (_, i) => formatter.format(addDays(sunday, i)));
+}
+var UDatePicker = class UDatePicker extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.clearable = false;
+		this.calendarId = `u-date-picker-calendar-${Math.random().toString(36).slice(2, 8)}`;
+		this.open = false;
+		this.viewDate = startOfMonth(/* @__PURE__ */ new Date());
+		this.focusedDate = /* @__PURE__ */ new Date();
+		this.grabFocusOnUpdate = false;
+		this.handlePrevMonth = () => this.navigateMonth(-1);
+		this.handleNextMonth = () => this.navigateMonth(1);
+		this.handleDayKeydown = (e, date) => {
+			switch (e.key) {
+				case "ArrowRight":
+					e.preventDefault();
+					this.moveFocus(date, 1);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					this.moveFocus(date, -1);
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					this.moveFocus(date, 7);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					this.moveFocus(date, -7);
+					break;
+				case "Home":
+					e.preventDefault();
+					this.moveFocus(date, -date.getDay());
+					break;
+				case "End":
+					e.preventDefault();
+					this.moveFocus(date, 6 - date.getDay());
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					this.selectDay(date);
+					break;
+				case "Escape":
+					e.preventDefault();
+					this.popoverEl?.hide();
+					this.containerEl?.focus();
+			}
+		};
+		this.handlePopoverShow = () => {
+			this.open = true;
+			this.grabFocusOnUpdate = true;
+			const base = this.value ? parseISODate(this.value) : /* @__PURE__ */ new Date();
+			this.viewDate = startOfMonth(base);
+			this.focusedDate = base;
+		};
+		this.handlePopoverHide = () => {
+			this.open = false;
+		};
+		this.handleClearClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			const hadValue = !!this.value;
+			this.value = void 0;
+			if (hadValue) this.emitChange();
+			this.containerEl?.focus();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("value")) this.internals?.setFormValue(this.value ?? "");
+		if (changed.has("open") && this.open || changed.has("focusedDate") && this.open && this.grabFocusOnUpdate) {
+			this.grabFocusOnUpdate = false;
+			this.popoverEl?.updateComplete.then(() => this.focusDayButton(this.focusedDate));
+		}
+	}
+	render() {
+		const displayText = this.value ? formatDate(this.value) : "";
+		return html`
+      <u-field part="field"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?invalid=${this.invalid}
+        .label=${this.label}
+        .description=${this.description}
+        .validationMessage=${this.validationMessage}
+      >
+        <div class="container" part="container"
+          tabindex=${this.disabled ? "-1" : "0"}
+          role="combobox"
+          aria-haspopup="dialog"
+          aria-expanded=${this.open}
+          aria-label=${ifDefined(this.label)}
+          aria-description=${ifDefined(this.description)}
+          aria-controls=${this.calendarId}
+        >
+          <span class="text-content ${!displayText ? "placeholder" : ""}">${displayText || this.placeholder || ""}</span>
+          <u-icon class="suffix-item"
+            ?hidden=${!this.clearable || !this.value || this.disabled || this.readonly}
+            lib="internal"
+            name="x"
+            @click=${this.handleClearClick}
+          ></u-icon>
+          <u-icon class="suffix-item"
+            lib="internal"
+            name="calendar"
+          ></u-icon>
+        </div>
+      </u-field>
+
+      <u-popover part="popover"
+        id=${this.calendarId}
+        role="dialog"
+        aria-label="Choose date"
+        for=".container"
+        trigger="click"
+        strategy="fixed"
+        placement="bottom-start"
+        offset="4"
+        @show=${this.handlePopoverShow}
+        @hide=${this.handlePopoverHide}
+      >
+        ${this.open ? this.renderCalendar() : ""}
+      </u-popover>
+    `;
+	}
+	renderCalendar() {
+		const cells = buildMonthGrid(this.viewDate);
+		const monthLabel = formatDate(this.viewDate, {
+			year: "numeric",
+			month: "long"
+		});
+		const weekdayLabels = getWeekdayLabels();
+		return html`
+      <div class="calendar" part="calendar">
+        <div class="calendar-header" part="calendar-header">
+          <u-icon-button lib="internal" name="chevron-left" aria-label="Previous month" @click=${this.handlePrevMonth}></u-icon-button>
+          <span class="calendar-title" part="calendar-title">${monthLabel}</span>
+          <u-icon-button lib="internal" name="chevron-right" aria-label="Next month" @click=${this.handleNextMonth}></u-icon-button>
+        </div>
+        <div class="calendar-weekdays" part="calendar-weekdays" role="row">
+          ${weekdayLabels.map((w) => html`<span class="weekday" role="columnheader">${w}</span>`)}
+        </div>
+        <div class="calendar-grid" part="calendar-grid" role="grid">
+          ${chunkWeeks(cells).map((week) => html`
+            <div class="calendar-week" part="calendar-week" role="row">
+              ${week.map((date) => date ? this.renderDay(date) : html`<span class="day-empty" role="gridcell" aria-hidden="true"></span>`)}
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+	}
+	renderDay(date) {
+		const selected = this.value ? isSameDay(date, parseISODate(this.value)) : false;
+		const focused = isSameDay(date, this.focusedDate);
+		const today = isSameDay(date, /* @__PURE__ */ new Date());
+		const outOfRange = this.isOutOfRange(date);
+		return html`
+      <button type="button" class="day" part="day"
+        role="gridcell"
+        data-iso=${toISODate(date)}
+        tabindex=${focused ? 0 : -1}
+        aria-selected=${selected}
+        aria-disabled=${outOfRange}
+        ?data-today=${today}
+        @click=${() => this.selectDay(date)}
+        @keydown=${(e) => this.handleDayKeydown(e, date)}
+        @focus=${() => {
+			this.focusedDate = date;
+		}}
+      >${date.getDate()}</button>
+    `;
+	}
+	isOutOfRange(date) {
+		if (this.min && date.getTime() < parseISODate(this.min).getTime()) return true;
+		if (this.max && date.getTime() > parseISODate(this.max).getTime()) return true;
+		return false;
+	}
+	focusDayButton(date) {
+		const iso = toISODate(date);
+		this.renderRoot.querySelector(`button.day[data-iso="${iso}"]`)?.focus();
+	}
+	selectDay(date) {
+		if (this.isOutOfRange(date)) return;
+		const iso = toISODate(date);
+		const changed = iso !== this.value;
+		this.value = iso;
+		if (changed) this.emitChange();
+		this.popoverEl?.hide();
+		this.containerEl?.focus();
+	}
+	navigateMonth(delta) {
+		this.grabFocusOnUpdate = false;
+		const next = addMonths(this.viewDate, delta);
+		this.viewDate = next;
+		const clampedDay = Math.min(this.focusedDate.getDate(), daysInMonth(next));
+		this.focusedDate = new Date(next.getFullYear(), next.getMonth(), clampedDay);
+	}
+	moveFocus(from, deltaDays) {
+		this.grabFocusOnUpdate = true;
+		const next = addDays(from, deltaDays);
+		if (next.getMonth() !== this.viewDate.getMonth() || next.getFullYear() !== this.viewDate.getFullYear()) this.viewDate = startOfMonth(next);
+		this.focusedDate = next;
+	}
+	emitChange() {
+		if (!this.novalidate) this.validate();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	setValidity() {
+		let flags = {};
+		let message = "";
+		if (this.required && !this.value) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (this.value && this.min && parseISODate(this.value).getTime() < parseISODate(this.min).getTime()) {
+			flags = { rangeUnderflow: true };
+			message = Locale.getValue("rangeUnderflow", { min: this.min });
+		} else if (this.value && this.max && parseISODate(this.value).getTime() > parseISODate(this.max).getTime()) {
+			flags = { rangeOverflow: true };
+			message = Locale.getValue("rangeOverflow", { max: this.max });
+		}
+		this.commit(flags, message, this.containerEl ?? void 0);
+	}
+	reset() {
+		this.value = void 0;
+		this.invalid = false;
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UDatePicker.prototype, "min", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UDatePicker.prototype, "max", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UDatePicker.prototype, "clearable", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UDatePicker.prototype, "placeholder", void 0);
+__decorate([query(".container", true), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], UDatePicker.prototype, "containerEl", void 0);
+__decorate([query("u-popover", true), __decorateMetadata("design:type", typeof UPopover === "undefined" ? Object : UPopover)], UDatePicker.prototype, "popoverEl", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UDatePicker.prototype, "open", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof Date === "undefined" ? Object : Date)], UDatePicker.prototype, "viewDate", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof Date === "undefined" ? Object : Date)], UDatePicker.prototype, "focusedDate", void 0);
+UDatePicker = __decorate([customElement("u-date-picker")], UDatePicker);
+//#endregion
+export { UDatePicker };

package/dist/components/date-picker/UDatePicker.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/date-picker/UDatePicker.styles.js

@@ -0,0 +1,147 @@
+import { css } from "lit";
+//#region src/components/date-picker/UDatePicker.styles.ts
+var styles = css`
+  :host {
+    --date-picker-popover-width: 296px;
+  }
+
+  :host {
+    position: relative;
+    display: var(--u-date-picker-display, inline-block);
+    width: var(--u-date-picker-width, auto);
+    color: var(--u-txt-color, #212121);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.3em 0.6em;
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
+    border-radius: 0.25em;
+    background-color: var(--u-input-bg-color, #FFFFFF);
+    cursor: pointer;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
+      box-shadow var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+  :host([readonly]) .container,
+  :host([disabled]) .container {
+    cursor: not-allowed;
+    border-color: var(--u-border-color-weak, #EEEEEE);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
+  }
+  :host(:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
+  }
+  :host(:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1565C0);
+  }
+  :host([invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #C62828);
+  }
+
+  .text-content {
+    flex: 1 0 auto;
+    min-width: 0;
+    font-size: 1em;
+    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .text-content.placeholder {
+    color: var(--u-txt-color-weak, #757575);
+  }
+
+  .suffix-item {
+    color: var(--u-icon-color, #616161);
+    font-size: 1em;
+    transition: color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+  .suffix-item:hover {
+    color: var(--u-icon-color-hover, #1565C0);
+  }
+
+  u-popover {
+    width: var(--date-picker-popover-width);
+    padding: 8px;
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-lg, 6px);
+    background-color: var(--u-panel-bg-color, #FFFFFF);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
+  }
+
+  .calendar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px 8px;
+  }
+  .calendar-title {
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-label-weight, 600);
+  }
+
+  .calendar-weekdays,
+  .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+  .calendar-weekdays {
+    padding-bottom: 4px;
+  }
+  /* role="row" wrapper for APG grid semantics — display:contents keeps it out of the
+     CSS grid track so its day cells still lay out as direct grid items. */
+  .calendar-week {
+    display: contents;
+  }
+  .weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--u-text-caption-size, 12px);
+    color: var(--u-txt-color-weak, #757575);
+  }
+
+  .day,
+  .day-empty {
+    aspect-ratio: 1;
+  }
+  .day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: var(--u-radius-circle, 50%);
+    background: transparent;
+    color: var(--u-txt-color, #212121);
+    font-size: 1em;
+    font-family: inherit;
+    cursor: pointer;
+  }
+  .day:hover:not([aria-disabled="true"]) {
+    background-color: var(--u-bg-color-hover, #F5F5F5);
+  }
+  .day:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--u-input-border-color-focus, #1565C0);
+  }
+  .day[data-today] {
+    font-weight: 700;
+    color: var(--u-primary-color, #1976D2);
+  }
+  .day[aria-selected="true"] {
+    background-color: var(--u-primary-color, #1976D2);
+    color: var(--u-primary-txt-color, #FFFFFF);
+  }
+  .day[aria-disabled="true"] {
+    color: var(--u-txt-color-disabled, #BDBDBD);
+    cursor: not-allowed;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/dialog/UDialog.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";

package/dist/components/divider/UDivider.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { styles } from "./UDivider.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/drawer/UDrawer.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";

package/dist/components/expander/UExpander.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { styles } from "./UExpander.styles.js";
 import { html } from "lit";

package/dist/components/field/UField.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { styles } from "./UField.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/form/UForm.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UForm.styles.js";

package/dist/components/form/UForm.styles.js

@@ -7,7 +7,8 @@ var styles = css`
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
-    font-size: 14px;
+    /* ★밀도 스위치 진입점 — 자식은 전부 font-size: inherit 라 여기 하나만 값이면 된다. */
+    font-size: var(--u-density, 14px);
   }
 
   :host > * {

package/dist/components/icon/UIcon.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
 import { styles } from "./UIcon.styles.js";
 import { nothing } from "lit";

package/dist/components/icon-button/UIconButton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import "../tooltip/UTooltip.js";

package/dist/components/input/UInput.js

@@ -1,12 +1,12 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
 import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
-import { UOption } from "../option/UOption.js";
 import { UPopover } from "../popover/UPopover.js";
+import { UOption } from "../option/UOption.js";
 import { styles } from "./UInput.styles.js";
 import { html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";

package/dist/components/menu/UMenu.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { UMenuItem } from "../menu-item/UMenuItem.js";
 import { styles } from "./UMenu.styles.js";
 import { html } from "lit";
@@ -81,8 +81,10 @@ var UMenu = class UMenu extends UElement {
 				}
 				case "ArrowRight":
 					e.preventDefault();
-					if (!focused.leaf) if (!focused.expanded) focused.expanded = true;
-					else focused.childItems.find((c) => !c.disabled)?.focus();
+					if (!focused.leaf) {
+						if (!focused.expanded) focused.expanded = true;
+						else focused.childItems.find((c) => !c.disabled)?.focus();
+					}
 					break;
 				case "ArrowLeft":
 					e.preventDefault();

package/dist/components/menu-item/UMenuItem.js

@@ -1,9 +1,9 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
-import { UDivider } from "../divider/UDivider.js";
 import "../popover/UPopover.js";
+import { UDivider } from "../divider/UDivider.js";
 import { styles } from "./UMenuItem.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";