@iyulab/components 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [1.37.0] - 2026-09-06
+
+### Added
+
+- **`u-date-picker` and `u-select` expose a `:state(open)` custom state.**
+  Both already tracked their popover's open/closed state privately; it is now
+  surfaced through `ElementInternals.states` so consumers can style the trigger
+  while the popover is showing — `u-date-picker:state(open)::part(container)`,
+  `u-select:state(open)::part(container)`. Deliberately not a reflected
+  attribute: the state stays private to the component and exists only as a CSS
+  hook, so no new public attribute enters the API surface.
+
+### Documentation
+
+- **`UFloatingElement.placement` documents that `flip` is always applied.**
+  Whenever `placement` is set, floating-ui's `flip` middleware runs (switching
+  to the opposite side when the placed side has no room) — this has always been
+  the behavior but was undocumented, and `shift`'s description ("keeps the
+  element on screen") over-promised, since `shift` only corrects the cross axis
+  *within* a side. Both properties now describe the split, and a regression test
+  covers the flip fallback.
+
 ## [1.36.0] - 2026-09-04
 
 ### Added

package/dist/components/UFloatingElement.d.ts

@@ -51,6 +51,12 @@ export declare class UFloatingElement extends UElement {
      * 대상 엘리먼트로부터의 배치 위치입니다.
      * 지정하지 않으면 자동으로 가장 적절한 위치가 선택됩니다.
      *
+     * @remarks
+     * 지정한 변(side)에 공간이 없으면 반대 변으로 자동 전환됩니다(floating-ui의
+     * `flip` 미들웨어가 `placement`를 지정했을 때 항상 함께 적용됩니다 — 별도
+     * 옵션으로 끌 수 없습니다). `shift`는 이 전환과 별개로, 전환된(또는 지정된)
+     * 변 **안에서** 교차축 위치만 보정합니다.
+     *
      * @default undefined
      */
     placement?: Placement;
@@ -62,7 +68,9 @@ export declare class UFloatingElement extends UElement {
      */
     offset: OffsetOptions;
     /**
-     * 엘리먼트가 화면 안에 머물도록 자동으로 위치를 조정할지 여부입니다.
+     * 지정된(또는 `flip`으로 전환된) 배치 변 **안에서** 교차축 위치를 자동으로
+     * 보정할지 여부입니다 — 그 변 자체에 공간이 없어 반대 변으로 넘어가는 것은
+     * `placement` 설명의 `flip` 동작이 담당합니다.
      *
      * @default false
      */

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

@@ -16,6 +16,11 @@ export type DatePickerMode = 'date' | 'datetime';
  * first day of week from `Intl.Locale(locale).weekInfo?.firstDay`, falling back to Sunday
  * where unsupported.
  *
+ * Exposes a `:state(open)` custom state (via `ElementInternals.states`) while the calendar
+ * popover is showing — style with `u-date-picker:state(open)::part(container)`. Unlike
+ * `mode`/`clearable`, this state is never reflected as a public attribute — it exists purely
+ * as a CSS hook for consumers who want to react to the open/closed state from outside.
+ *
  * @csspart field - the u-field element
  * @csspart container - the element wrapping the trigger area
  * @csspart popover - the popover element showing the calendar

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

@@ -178,6 +178,7 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 	updated(changed) {
 		super.updated(changed);
 		if (changed.has("value")) this.internals?.setFormValue(this.value ?? "");
+		if (changed.has("open")) this.internals?.states[this.open ? "add" : "delete"]("open");
 		if (changed.has("open") && this.open || changed.has("focusedDate") && this.open && this.grabFocusOnUpdate) {
 			this.grabFocusOnUpdate = false;
 			this.popoverEl?.updateComplete.then(() => this.focusDayButton(this.focusedDate));

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

@@ -12,6 +12,10 @@ export type SelectVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  *   팝오버 목록에서 사라지기 때문. 리치 콘텐츠가 필요하면 이 slot에 별도 마크업을 할당하고
  *   `change` 이벤트에서 직접 갱신한다.)
  *
+ * 옵션 목록 팝오버가 열려 있는 동안 `:state(open)` 커스텀 상태를 노출한다(via
+ * `ElementInternals.states`) — `u-select:state(open)::part(container)`로 스타일링할 수
+ * 있다. 공개 속성으로 반사되지 않는다.
+ *
  * @csspart field - u-field 요소
  * @csspart container - 트리거 영역을 감싸는 요소
  * @csspart popover - 옵션 목록이 표시되는 팝오버 요소

package/dist/components/select/USelect.js

@@ -153,6 +153,7 @@ var USelect = class USelect extends UFormControlElement {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (["value", "options"].some((k) => changedProperties.has(k))) this.onChangeValue();
+		if (changedProperties.has("open")) this.internals?.states[this.open ? "add" : "delete"]("open");
 	}
 	render() {
 		return html`

package/package.json

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

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

@@ -40,7 +40,7 @@ Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floa
 | `disabled` | `boolean` | `false` | ✓ | Disable opening |
 | `placement` | `Placement` | — | — | Preferred placement (`top`, `bottom`, `left`, `right`, `*-start`, `*-end`) |
 | `offset` | `OffsetOptions` | `0` | — | Distance from anchor |
-| `shift` | `boolean` | `false` | — | Auto-shift to stay in viewport |
+| `shift` | `boolean` | `false` | — | Correct the cross-axis position *within* the placed side (see note below) |
 | `arrow` | `boolean` | `false` | — | Show arrow pointing to anchor |
 | `showDelay` | `number` | `0` | — | Open delay in ms |
 | `hideDelay` | `number` | `0` | — | Close delay in ms |
@@ -48,6 +48,12 @@ Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floa
 | `dismiss` | `string[]` | `['click','escape','scroll','resize']` | ✓ | Close triggers — see note below |
 | `autofocus` | `boolean` | `false` | ✓ | Focus first focusable element on open |
 
+> **Placement fallback**: whenever `placement` is set, floating-ui's `flip` middleware is
+> always applied — if the placed side has no room, the element switches to the opposite side.
+> `shift` is a separate, narrower correction: it nudges the element along the cross axis
+> *within* whichever side ended up being used. Neither can be turned off independently.
+
+
 ### `dismiss` semantics
 
 `click` and `escape` express user intent and always close the popover.

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

@@ -43,13 +43,19 @@ Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floa
 | `open` | `boolean` | `false` | ✓ | Visibility state |
 | `placement` | `Placement` | — | — | Preferred placement |
 | `offset` | `OffsetOptions` | `0` | — | Gap from target |
-| `shift` | `boolean` | `false` | — | Auto-shift to stay in viewport |
+| `shift` | `boolean` | `false` | — | Correct the cross-axis position *within* the placed side (see note below) |
 | `arrow` | `boolean` | `false` | — | Show pointing arrow |
 | `showDelay` | `number` | `0` | — | Open delay in ms |
 | `hideDelay` | `number` | `0` | — | Close delay in ms |
 | `interactive` | `boolean` | `false` | ✓ | Keep open when mouse is over tooltip |
 | `tracking` | `boolean` | `false` | ✓ | Follow mouse cursor position |
 
+> **Placement fallback**: whenever `placement` is set, floating-ui's `flip` middleware is
+> always applied — if the placed side has no room, the element switches to the opposite side.
+> `shift` is a separate, narrower correction: it nudges the element along the cross axis
+> *within* whichever side ended up being used. Neither can be turned off independently.
+
+
 ## Events
 
 | Event | Cancelable | Description |