@iyulab/components 1.33.4 → 1.35.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [1.35.0] - 2026-08-28
+
+### Added
+
+- **`USelect` fires a `search` event on every search-input change when
+  `searchable`.** The search text was already computed internally to drive
+  the built-in local option filtering, but never surfaced — a consumer
+  binding `USelect` to a large server-paginated dataset had no way to hook
+  into it and had to rebuild the search UI from scratch to do remote
+  search. `search` (`detail: { query: string }`, non-cancelable) fires
+  alongside the existing local filtering, so a consumer can subscribe and
+  drive remote search without losing the built-in search input. Mapped
+  through to the React wrapper as `onSearch`.
+
+## [1.34.0] - 2026-08-28
+
+### Added
+
+- **`UDatePicker` gains a `mode="datetime"` option for combined date+time
+  selection.** Previously the component had no concept of time of day at
+  all, so a date+time field had no picker UI and consumers fell back to
+  free-text input with no format guarantee. `mode="datetime"` adds a native
+  time input to the calendar popover; the resulting `value` is always a
+  complete ISO-8601 `DateTimeOffset` string — seconds and the local UTC
+  offset are filled in automatically regardless of how coarse the time
+  input was. Picking a day preserves whatever time was already set; only
+  the "today" quick action overwrites both to right now. 12/24-hour display
+  is left to the browser's native time input rather than a custom widget.
+  Adds the `time` locale key (14 locales).
+- **`UDatePicker`'s calendar popover gains visible "today"/"clear"
+  quick-action buttons.** The calendar already computed today's date (for
+  the today-cell highlight) and already exposed value clearing via the
+  trigger's clear icon — these buttons just surface both as visible,
+  keyboard-accessible controls in the popover footer. Adds the `today`
+  locale key (14 locales), reusing the existing `clear` key for the reset
+  button label.
+
 ## [1.33.4] - 2026-08-27
 
 ### Fixed

package/dist/assets/locales/ar.json.js

@@ -11,6 +11,8 @@ var tooLong = "يجب ألا تتجاوز {max}";
 var increment = "زيادة القيمة";
 var decrement = "إنقاص القيمة";
 var clear = "مسح القيمة";
+var today = "اليوم";
+var time = "الوقت";
 var showPassword = "إظهار كلمة المرور";
 var hidePassword = "إخفاء كلمة المرور";
 var previousSlide = "الشريحة السابقة";
@@ -29,6 +31,8 @@ var ar_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var ar_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, ar_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, ar_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/de.json.js

@@ -11,6 +11,8 @@ var tooLong = "Darf höchstens {max} betragen";
 var increment = "Wert erhöhen";
 var decrement = "Wert verringern";
 var clear = "Wert löschen";
+var today = "Heute";
+var time = "Uhrzeit";
 var showPassword = "Passwort anzeigen";
 var hidePassword = "Passwort verbergen";
 var previousSlide = "Vorherige Folie";
@@ -29,6 +31,8 @@ var de_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var de_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, de_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, de_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/en.json.js

@@ -11,6 +11,8 @@ var tooLong = "Must be at most {max}";
 var increment = "Increase value";
 var decrement = "Decrease value";
 var clear = "Clear value";
+var today = "Today";
+var time = "Time";
 var showPassword = "Show password";
 var hidePassword = "Hide password";
 var previousSlide = "Previous slide";
@@ -29,6 +31,8 @@ var en_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var en_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, en_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, en_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/es.json.js

@@ -11,6 +11,7 @@ var tooLong = "Debe ser como máximo {max}";
 var increment = "Aumentar valor";
 var decrement = "Disminuir valor";
 var clear = "Borrar valor";
+var time = "Hora";
 var showPassword = "Mostrar contraseña";
 var hidePassword = "Ocultar contraseña";
 var previousSlide = "Diapositiva anterior";
@@ -29,6 +30,8 @@ var es_default = {
 	increment,
 	decrement,
 	clear,
+	today: "Hoy",
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +39,4 @@ var es_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, es_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, es_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/fr.json.js

@@ -11,6 +11,8 @@ var tooLong = "Doit être au plus {max}";
 var increment = "Augmenter la valeur";
 var decrement = "Diminuer la valeur";
 var clear = "Effacer la valeur";
+var today = "Aujourd’hui";
+var time = "Heure";
 var showPassword = "Afficher le mot de passe";
 var hidePassword = "Masquer le mot de passe";
 var previousSlide = "Diapositive précédente";
@@ -29,6 +31,8 @@ var fr_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var fr_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, fr_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, fr_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/id.json.js

@@ -11,6 +11,8 @@ var tooLong = "Harus maksimal {max}";
 var increment = "Tambah nilai";
 var decrement = "Kurangi nilai";
 var clear = "Hapus nilai";
+var today = "Hari ini";
+var time = "Waktu";
 var showPassword = "Tampilkan kata sandi";
 var hidePassword = "Sembunyikan kata sandi";
 var previousSlide = "Slide sebelumnya";
@@ -29,6 +31,8 @@ var id_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var id_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, id_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, id_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ja.json.js

@@ -11,6 +11,8 @@ var tooLong = "{max}以下である必要があります";
 var increment = "値を増やす";
 var decrement = "値を減らす";
 var clear = "値をクリア";
+var today = "今日";
+var time = "時刻";
 var showPassword = "パスワードを表示";
 var hidePassword = "パスワードを隠す";
 var previousSlide = "前のスライド";
@@ -29,6 +31,8 @@ var ja_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var ja_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, ja_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, ja_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ko.json.js

@@ -11,6 +11,8 @@ var tooLong = "최대 {max} 이하여야 합니다";
 var increment = "값 증가";
 var decrement = "값 감소";
 var clear = "값 지우기";
+var today = "오늘";
+var time = "시간";
 var showPassword = "비밀번호 표시";
 var hidePassword = "비밀번호 숨기기";
 var previousSlide = "이전 슬라이드";
@@ -29,6 +31,8 @@ var ko_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var ko_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, ko_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, ko_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/pt-BR.json.js

@@ -11,6 +11,8 @@ var tooLong = "Deve ser no máximo {max}";
 var increment = "Aumentar valor";
 var decrement = "Diminuir valor";
 var clear = "Limpar valor";
+var today = "Hoje";
+var time = "Hora";
 var showPassword = "Mostrar senha";
 var hidePassword = "Ocultar senha";
 var previousSlide = "Slide anterior";
@@ -29,6 +31,8 @@ var pt_BR_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var pt_BR_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, pt_BR_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, pt_BR_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ru.json.js

@@ -11,6 +11,8 @@ var tooLong = "Должно быть не более {max}";
 var increment = "Увеличить значение";
 var decrement = "Уменьшить значение";
 var clear = "Очистить значение";
+var today = "Сегодня";
+var time = "Время";
 var showPassword = "Показать пароль";
 var hidePassword = "Скрыть пароль";
 var previousSlide = "Предыдущий слайд";
@@ -29,6 +31,8 @@ var ru_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var ru_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, ru_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, ru_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/th.json.js

@@ -11,6 +11,8 @@ var tooLong = "ต้องไม่เกิน {max}";
 var increment = "เพิ่มค่า";
 var decrement = "ลดค่า";
 var clear = "ล้างค่า";
+var today = "วันนี้";
+var time = "เวลา";
 var showPassword = "แสดงรหัสผ่าน";
 var hidePassword = "ซ่อนรหัสผ่าน";
 var previousSlide = "สไลด์ก่อนหน้า";
@@ -29,6 +31,8 @@ var th_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var th_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, th_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, th_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/vi.json.js

@@ -11,6 +11,8 @@ var tooLong = "Phải nhỏ hơn hoặc bằng {max}";
 var increment = "Tăng giá trị";
 var decrement = "Giảm giá trị";
 var clear = "Xóa giá trị";
+var today = "Hôm nay";
+var time = "Giờ";
 var showPassword = "Hiện mật khẩu";
 var hidePassword = "Ẩn mật khẩu";
 var previousSlide = "Slide trước";
@@ -29,6 +31,8 @@ var vi_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var vi_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, vi_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, vi_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/zh-CN.json.js

@@ -11,6 +11,8 @@ var tooLong = "最多不能超过{max}";
 var increment = "增加值";
 var decrement = "减少值";
 var clear = "清除值";
+var today = "今天";
+var time = "时间";
 var showPassword = "显示密码";
 var hidePassword = "隐藏密码";
 var previousSlide = "上一张幻灯片";
@@ -29,6 +31,8 @@ var zh_CN_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var zh_CN_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, zh_CN_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, zh_CN_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/zh-TW.json.js

@@ -11,6 +11,8 @@ var tooLong = "最多不能超過{max}";
 var increment = "增加值";
 var decrement = "減少值";
 var clear = "清除值";
+var today = "今天";
+var time = "時間";
 var showPassword = "顯示密碼";
 var hidePassword = "隱藏密碼";
 var previousSlide = "上一張投影片";
@@ -29,6 +31,8 @@ var zh_TW_default = {
 	increment,
 	decrement,
 	clear,
+	today,
+	time,
 	showPassword,
 	hidePassword,
 	previousSlide,
@@ -36,4 +40,4 @@ var zh_TW_default = {
 	goToSlide
 };
 //#endregion
-export { badInput, clear, decrement, zh_TW_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing };
+export { badInput, clear, decrement, zh_TW_default as default, goToSlide, hidePassword, increment, nextSlide, patternMismatch, previousSlide, rangeOverflow, rangeUnderflow, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

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

@@ -1,9 +1,14 @@
 import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 import { UPopover } from '../popover/UPopover.js';
+export type DatePickerMode = 'date' | 'datetime';
 /**
- * A single-date-selection form control. The value follows the same convention as the
- * native `input[type=date]`: an ISO `YYYY-MM-DD` string.
+ * A single-date(-time)-selection form control. In `mode="date"` (default) the value follows
+ * the same convention as the native `input[type=date]`: an ISO `YYYY-MM-DD` string. In
+ * `mode="datetime"` the value is a complete ISO-8601 `DateTimeOffset` string
+ * (`YYYY-MM-DDTHH:mm:ss±HH:mm`) — the component always fills in seconds and the browser's
+ * local UTC offset, so the value is unconditionally valid regardless of how coarse the time
+ * input was.
  *
  * 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
@@ -20,17 +25,25 @@ import { UPopover } from '../popover/UPopover.js';
  * @csspart calendar-weekdays - the weekday header row
  * @csspart calendar-grid - the date grid
  * @csspart day - a date cell button
+ * @csspart calendar-footer - the row holding the "today"/"clear" quick-action buttons
+ * @csspart calendar-time - the row holding the time-of-day input (datetime mode only)
  *
  * @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).
+ * @event change - fires when the user clicks a date cell, confirms via keyboard, changes the
+ *   time input (datetime mode, once a date is set), 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. */
+    /** `date` (default) selects a calendar day only. `datetime` also captures a time-of-day and
+     *  the value becomes a complete ISO-8601 `DateTimeOffset` string. */
+    mode: DatePickerMode;
+    /** Minimum value (ISO YYYY-MM-DD) — dates before this cannot be selected. Date-only even in
+     *  `mode="datetime"`; time-of-day is never range-checked. */
     min?: string;
-    /** Maximum value (ISO YYYY-MM-DD) — dates after this cannot be selected. */
+    /** Maximum value (ISO YYYY-MM-DD) — dates after this cannot be selected. Date-only even in
+     *  `mode="datetime"`; time-of-day is never range-checked. */
     max?: string;
     /** Whether to show the clear button */
     clearable: boolean;
@@ -43,14 +56,28 @@ export declare class UDatePicker extends UFormControlElement<string> {
     private open;
     private viewDate;
     private focusedDate;
+    /** Time-of-day for the next selection while no `value` exists yet (`mode="datetime"` only) —
+     *  once `value` is set, the time input reads/writes its time portion directly instead. */
+    private pendingTime;
     private grabFocusOnUpdate;
     protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     private renderCalendar;
+    private renderTimeRow;
+    private renderFooter;
     private renderDay;
     private isOutOfRange;
     private focusDayButton;
+    /** `timeOverride` lets a caller force the time-of-day (the "today" quick action wants
+     *  "right now", overriding whatever time was previously set) — a plain day-cell click omits
+     *  it, which preserves the existing time-of-day (or `pendingTime`) so switching the date
+     *  alone doesn't clobber a time the user already picked. */
     private selectDay;
+    /** Time input change — only commits into `value` once a date already exists (matches native
+     *  `datetime-local`: a time alone isn't a complete value). Before that, it just remembers
+     *  `pendingTime` for whenever a day gets picked. Doesn't close the popover or refocus the
+     *  trigger — unlike selecting a day, adjusting the time doesn't conclude the interaction. */
+    private handleTimeChange;
     private handlePrevMonth;
     private handleNextMonth;
     private navigateMonth;
@@ -59,6 +86,16 @@ export declare class UDatePicker extends UFormControlElement<string> {
     private handlePopoverShow;
     private handlePopoverHide;
     private handleClearClick;
+    /** "오늘" 퀵액션 — `today` 셀이 이미 렌더에서 계산해 표시 중인 값(`renderDay`의
+     *  `isSameDay(date, new Date())`)을 실제로 선택하는 것뿐이라 `selectDay`를 그대로 탄다
+     *  (범위 밖이면 `selectDay`가 조용히 no-op — 클릭 불가 상태인 day 셀과 동일 규약).
+     *  datetime 모드에서는 "지금"을 통째로 채우는 것이 요청의 본질(§D-28 항목 2 docket 코멘트)
+     *  이라 시간까지 `now`로 덮어쓴다 — 평범한 day 셀 클릭과 달리 기존 시각을 보존하지 않는다. */
+    private handleTodayClick;
+    /** 캘린더 팝오버 안 "초기화" 퀵액션 — 트리거의 clear 아이콘(`handleClearClick`)과 값을
+     *  비우는 로직은 같지만, 팝오버가 열린 채로 눌렸으므로 선택 완료와 동일하게 닫아 준다. */
+    private handleFooterResetClick;
+    private resetValue;
     /** suffix `u-icon`은 순수 표시 요소(버튼 아님)라 네이티브 키보드 활성화가 없다 —
      *  `role="button"`+`tabindex="0"`로 포커스 가능하게 한 뒤, Enter/Space를 같은 클릭
      *  핸들러로 릴레이한다(`UInput`/`USelect`의 동일 패턴과 일치). */

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

@@ -1,6 +1,7 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
+import "../button/UButton.js";
 import "../icon/UIcon.js";
 import "../icon-button/UIconButton.js";
 import { Locale } from "../../utilities/Locale.js";
@@ -34,6 +35,31 @@ function addDays(date, delta) {
 function daysInMonth(date) {
 	return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
 }
+/** `±HH:mm` for the browser's local timezone at `date` (DST-aware — recomputed per date,
+*  not cached — `getTimezoneOffset()`'s sign is the inverse of the ISO-8601 offset sign). */
+function getLocalOffset(date) {
+	const minutes = -date.getTimezoneOffset();
+	const sign = minutes >= 0 ? "+" : "-";
+	const abs = Math.abs(minutes);
+	return `${sign}${String(Math.floor(abs / 60)).padStart(2, "0")}:${String(abs % 60).padStart(2, "0")}`;
+}
+/** Builds the `value` for the given mode — `datetime` always emits seconds + local offset so
+*  the result is unconditionally a valid, unambiguous ISO-8601 `DateTimeOffset` regardless of
+*  how coarse the UI input was (this is the guarantee the datetime mode request asked for). */
+function buildValue(date, mode, time) {
+	return mode === "datetime" ? `${toISODate(date)}T${time}:00${getLocalOffset(date)}` : toISODate(date);
+}
+/** Splits a `value` into its date portion (as a `Date`, via the local `parseISODate` above —
+*  date-only, no timezone conversion) and its `HH:mm` time-of-day (`'00:00'` if absent —
+*  covers both plain date-mode values and a datetime value with no time captured yet). */
+function splitValue(value) {
+	const [datePart, rest] = value.split("T");
+	const match = rest?.match(/^(\d{2}:\d{2})/);
+	return {
+		date: parseISODate(datePart),
+		time: match ? match[1] : "00:00"
+	};
+}
 /** 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();
@@ -58,12 +84,23 @@ function getWeekdayLabels(locale) {
 var UDatePicker = class UDatePicker extends UFormControlElement {
 	constructor(..._args) {
 		super(..._args);
+		this.mode = "date";
 		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.pendingTime = "00:00";
 		this.grabFocusOnUpdate = false;
+		this.handleTimeChange = (e) => {
+			const time = e.target.value || "00:00";
+			this.pendingTime = time;
+			if (!this.value) return;
+			const iso = buildValue(splitValue(this.value).date, this.mode, time);
+			const changed = iso !== this.value;
+			this.value = iso;
+			if (changed) this.emitChange();
+		};
 		this.handlePrevMonth = () => this.navigateMonth(-1);
 		this.handleNextMonth = () => this.navigateMonth(1);
 		this.handleDayKeydown = (e, date) => {
@@ -106,7 +143,7 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		this.handlePopoverShow = () => {
 			this.open = true;
 			this.grabFocusOnUpdate = true;
-			const base = this.value ? parseISODate(this.value) : /* @__PURE__ */ new Date();
+			const base = this.value ? splitValue(this.value).date : /* @__PURE__ */ new Date();
 			this.viewDate = startOfMonth(base);
 			this.focusedDate = base;
 		};
@@ -116,9 +153,17 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		this.handleClearClick = (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			const hadValue = !!this.value;
-			this.value = void 0;
-			if (hadValue) this.emitChange();
+			this.resetValue();
+			this.containerEl?.focus();
+		};
+		this.handleTodayClick = () => {
+			const now = /* @__PURE__ */ new Date();
+			const time = this.mode === "datetime" ? `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}` : void 0;
+			this.selectDay(now, time);
+		};
+		this.handleFooterResetClick = () => {
+			this.resetValue();
+			this.popoverEl?.hide();
 			this.containerEl?.focus();
 		};
 		this.handleClearKeydown = (e) => {
@@ -139,7 +184,10 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		}
 	}
 	render() {
-		const displayText = this.value ? formatDate(this.value) : "";
+		const displayText = this.value ? formatDate(this.value, this.mode === "datetime" ? {
+			dateStyle: "medium",
+			timeStyle: "short"
+		} : void 0) : "";
 		return html`
       <u-field part="field"
         ?required=${this.required}
@@ -216,11 +264,37 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
             </div>
           `)}
         </div>
+        ${this.renderTimeRow()}
+        ${this.renderFooter()}
+      </div>
+    `;
+	}
+	renderTimeRow() {
+		if (this.mode !== "datetime") return "";
+		const time = this.value ? splitValue(this.value).time : this.pendingTime;
+		return html`
+      <div class="calendar-time" part="calendar-time">
+        <input type="time" class="time-input" part="time-input"
+          aria-label=${Locale.getValue("time")}
+          .value=${time}
+          @change=${this.handleTimeChange}
+        />
+      </div>
+    `;
+	}
+	renderFooter() {
+		const todayDisabled = this.isOutOfRange(/* @__PURE__ */ new Date());
+		return html`
+      <div class="calendar-footer" part="calendar-footer">
+        <u-button variant="ghost" size="sm" ?disabled=${todayDisabled} @click=${this.handleTodayClick}>${Locale.getValue("today")}</u-button>
+        ${this.clearable && this.value ? html`
+          <u-button variant="ghost" size="sm" @click=${this.handleFooterResetClick}>${Locale.getValue("clear")}</u-button>
+        ` : ""}
       </div>
     `;
 	}
 	renderDay(date) {
-		const selected = this.value ? isSameDay(date, parseISODate(this.value)) : false;
+		const selected = this.value ? isSameDay(date, splitValue(this.value).date) : false;
 		const focused = isSameDay(date, this.focusedDate);
 		const today = isSameDay(date, /* @__PURE__ */ new Date());
 		const outOfRange = this.isOutOfRange(date);
@@ -249,11 +323,17 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		const iso = toISODate(date);
 		this.renderRoot.querySelector(`button.day[data-iso="${iso}"]`)?.focus();
 	}
-	selectDay(date) {
+	/** `timeOverride` lets a caller force the time-of-day (the "today" quick action wants
+	*  "right now", overriding whatever time was previously set) — a plain day-cell click omits
+	*  it, which preserves the existing time-of-day (or `pendingTime`) so switching the date
+	*  alone doesn't clobber a time the user already picked. */
+	selectDay(date, timeOverride) {
 		if (this.isOutOfRange(date)) return;
-		const iso = toISODate(date);
+		const time = timeOverride ?? (this.value ? splitValue(this.value).time : this.pendingTime);
+		const iso = buildValue(date, this.mode, time);
 		const changed = iso !== this.value;
 		this.value = iso;
+		if (this.mode === "datetime") this.pendingTime = time;
 		if (changed) this.emitChange();
 		this.popoverEl?.hide();
 		this.containerEl?.focus();
@@ -271,6 +351,11 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		if (next.getMonth() !== this.viewDate.getMonth() || next.getFullYear() !== this.viewDate.getFullYear()) this.viewDate = startOfMonth(next);
 		this.focusedDate = next;
 	}
+	resetValue() {
+		const hadValue = !!this.value;
+		this.value = void 0;
+		if (hadValue) this.emitChange();
+	}
 	emitChange() {
 		if (!this.novalidate) this.validate();
 		this.dispatchEvent(new Event("change", {
@@ -284,10 +369,10 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		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()) {
+		} else if (this.value && this.min && splitValue(this.value).date.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()) {
+		} else if (this.value && this.max && splitValue(this.value).date.getTime() > parseISODate(this.max).getTime()) {
 			flags = { rangeOverflow: true };
 			message = Locale.getValue("rangeOverflow", { max: this.max });
 		}
@@ -308,6 +393,10 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		this.containerEl?.blur();
 	}
 };
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDatePicker.prototype, "mode", void 0);
 __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({
@@ -320,6 +409,7 @@ __decorate([query("u-popover", true), __decorateMetadata("design:type", typeof U
 __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);
+__decorate([state(), __decorateMetadata("design:type", String)], UDatePicker.prototype, "pendingTime", void 0);
 UDatePicker = __decorate([customElement("u-date-picker")], UDatePicker);
 //#endregion
 export { UDatePicker };

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

@@ -142,6 +142,35 @@ var styles = css`
     color: var(--u-txt-color-disabled, #BDBDBD);
     cursor: not-allowed;
   }
+
+  .calendar-time {
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 4px 0;
+  }
+  .time-input {
+    font-family: inherit;
+    font-size: 0.9em;
+    padding: 2px 6px;
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
+    border-radius: 0.25em;
+    background-color: var(--u-input-bg-color, #FFFFFF);
+    color: var(--u-txt-color, #212121);
+  }
+  .time-input:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1565C0);
+  }
+
+  .calendar-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    padding-top: 8px;
+    margin-top: 4px;
+    border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
+  }
 `;
 //#endregion
 export { styles };

package/dist/components/select/USelect.d.ts

@@ -24,6 +24,9 @@ export type SelectVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  *
  * @event change - 사용자 상호작용(옵션 클릭·칩 제거·지우기)으로 선택 값이 변경될 때 발생.
  *   네이티브 select와 동일하게 프로그램적 value 세팅·옵션 등록으로는 발화하지 않는다.
+ * @event search - `searchable`일 때 검색 입력이 바뀔 때마다 발생(`detail: { query: string }`).
+ *   로컬 필터링(이미 렌더된 `u-option`의 `hidden` 토글)과 별개로 발행되므로, 서버/원격 검색이
+ *   필요한 소비자는 이 이벤트를 구독해 자체적으로 옵션을 갱신할 수 있다.
  */
 export declare class USelect extends UFormControlElement<string | string[]> {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/select/USelect.js

@@ -86,6 +86,10 @@ var USelect = class USelect extends UFormControlElement {
 				const value = option.value.toLowerCase();
 				option.hidden = !label.includes(query) && !value.includes(query);
 			}
+			this.fire("search", {
+				detail: { query },
+				cancelable: false
+			});
 		};
 		this.handleSearchKeydown = (e) => {
 			const options = this.options.filter((o) => !o.hidden && !o.disabled);

package/dist/react/USelect.d.ts

@@ -3,10 +3,11 @@ import { USelect as USelectElement } from '../components/select/USelect';
 
 export declare const USelect: React.ForwardRefExoticComponent<
   Omit<Partial<USelectElement>, keyof React.HTMLAttributes<USelectElement>>
-    & Omit<React.HTMLAttributes<USelectElement>, 'onChange'>
+    & Omit<React.HTMLAttributes<USelectElement>, 'onChange' | 'onSearch'>
     & React.RefAttributes<USelectElement>
     & {
   onChange?: (event: CustomEvent) => void;
+  onSearch?: (event: CustomEvent<{ query: string }>) => void;
   }
 >;
 

package/dist/react/USelect.js

@@ -8,5 +8,6 @@ export const USelect = createComponent({
   elementClass: USelectElement,
   events: {
     onChange: 'change',
+    onSearch: 'search',
   },
 });

package/dist/utilities/Locale.d.ts

@@ -12,7 +12,7 @@ export type SupportedLocale = 'en' | 'ko' | 'ja' | 'zh-CN' | 'zh-TW' | 'es' | 'f
 /** 내장 로케일은 자동완성되지만, 임의의 BCP47 태그도 그대로 받는다. */
 export type LocaleTag = SupportedLocale | (string & {});
 /** 라이브러리가 제공하는 chrome 문자열 키. 지금은 검증 메시지뿐이지만 이후 다른 UI 문구도 추가될 수 있다. */
-export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong' | 'increment' | 'decrement' | 'clear' | 'showPassword' | 'hidePassword' | 'previousSlide' | 'nextSlide' | 'goToSlide';
+export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong' | 'increment' | 'decrement' | 'clear' | 'today' | 'time' | 'showPassword' | 'hidePassword' | 'previousSlide' | 'nextSlide' | 'goToSlide';
 type LocaleTable = Record<LocaleMessageKey, string>;
 /**
  * 한 패키지(또는 앱 영역)의 문자열 묶음.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.33.4",
+  "version": "1.35.0",
   "keywords": [
     "iyulab",
     "components",

package/skills/iyulab-components/references/components/date-picker.md

@@ -6,15 +6,28 @@ import '@iyulab/components/dist/components/date-picker/UDatePicker.js';
 
 **Tag:** `u-date-picker`
 
-Single-date selection with a popover calendar. The value follows the same convention as the native `input[type=date]`: an ISO `YYYY-MM-DD` string. Form-associated.
+Single-date(-time) selection with a popover calendar. `mode="date"` (default) follows the same
+convention as the native `input[type=date]`: an ISO `YYYY-MM-DD` string. `mode="datetime"` adds
+a time-of-day input and the value becomes a complete ISO-8601 `DateTimeOffset` string
+(`YYYY-MM-DDTHH:mm:ss±HH:mm`, seconds and the browser's local UTC offset always filled in — the
+value is unconditionally valid regardless of how coarse the time input was). Form-associated.
 
 > The calendar week always starts on Sunday, regardless of locale.
 
+The calendar popover has a footer with a "Today" quick-action button (selects today's date —
+in `mode="datetime"` this also sets the time to right now — disabled when today falls outside
+`min`/`max`) and, when `clearable` and a value is set, a "Clear" button next to it. Picking a
+day preserves whatever time-of-day was already set; only the "Today" button overrides the time.
+`min`/`max` are always date-only, even in `mode="datetime"` — time-of-day is never range-checked.
+
 ```html
 <u-date-picker name="start-date" label="Start date"></u-date-picker>
 
 <!-- Clearable with a bounded range -->
 <u-date-picker name="due-date" label="Due date" clearable min="2026-01-01" max="2026-12-31"></u-date-picker>
+
+<!-- Date + time, value is a full ISO-8601 DateTimeOffset string -->
+<u-date-picker name="sent-at" label="Sent at" mode="datetime"></u-date-picker>
 ```
 
 ---
@@ -23,9 +36,10 @@ Single-date selection with a popover calendar. The value follows the same conven
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `value` | `string` | — | — | Selected date (ISO `YYYY-MM-DD`) |
-| `min` | `string` | — | — | Minimum selectable date (ISO `YYYY-MM-DD`) |
-| `max` | `string` | — | — | Maximum selectable date (ISO `YYYY-MM-DD`) |
+| `mode` | `'date' \| 'datetime'` | `'date'` | ✓ | `datetime` adds a time input; value becomes a full ISO-8601 `DateTimeOffset` string |
+| `value` | `string` | — | — | Selected date (ISO `YYYY-MM-DD`), or full ISO-8601 datetime in `mode="datetime"` |
+| `min` | `string` | — | — | Minimum selectable date (ISO `YYYY-MM-DD`, date-only in both modes) |
+| `max` | `string` | — | — | Maximum selectable date (ISO `YYYY-MM-DD`, date-only in both modes) |
 | `clearable` | `boolean` | `false` | ✓ | Show clear button |
 | `placeholder` | `string` | — | — | Placeholder text |
 | `disabled` | `boolean` | `false` | ✓ | Disable |
@@ -41,7 +55,7 @@ Single-date selection with a popover calendar. The value follows the same conven
 
 | Event | Description |
 |-------|-------------|
-| `change` | Fires when the user clicks a date cell, confirms via keyboard, or clicks the clear button. Programmatic value assignment does not fire it. |
+| `change` | Fires when the user clicks a date cell, confirms via keyboard, changes the time input (`mode="datetime"`, once a date is set), or clicks the clear button. Programmatic value assignment does not fire it. |
 
 ## Methods
 
@@ -65,6 +79,8 @@ Single-date selection with a popover calendar. The value follows the same conven
 | `calendar-weekdays` | The weekday header row |
 | `calendar-grid` | The date grid |
 | `day` | A date cell button |
+| `calendar-footer` | The row holding the "Today"/"Clear" quick-action buttons |
+| `calendar-time` | The row holding the time-of-day input (`mode="datetime"` only) |
 
 ## CSS Custom Properties
 

package/skills/iyulab-components/references/components/select.md

@@ -59,6 +59,7 @@ Dropdown select with single or multiple selection, search, and clear support. Fo
 | Event | Description |
 |-------|-------------|
 | `change` | Fires when selection changes |
+| `search` | Fires on every search input change when `searchable` (`detail: { query: string }`). Fires alongside the built-in local filtering — subscribe to it to drive remote/server-side search instead of (or in addition to) the local filter |
 
 ## Methods