@iyulab/components 1.39.0 → 1.40.0

package/dist/components/input/UInput.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
@@ -30,8 +30,8 @@ var UInput = class UInput extends UFormControlElement {
 			const slot = e.target;
 			this.options = slot.assignedElements({ flatten: true }).filter((el) => el instanceof UOption);
 			this.setup(this.options);
-			if (this.options.length > 0) this.popoverEl?.show(this.containerEl);
-			else this.popoverEl?.hide();
+			if (this.options.length === 0) this.popoverEl?.hide();
+			else if (this.matches(":focus-within")) this.popoverEl?.show(this.containerEl);
 		};
 		this.composing = false;
 		this.handleCompositionStart = () => {
@@ -60,6 +60,10 @@ var UInput = class UInput extends UFormControlElement {
 			}));
 		};
 		this.handleInputKeydown = (e) => {
+			if (e.key === "Enter") {
+				this.handleImplicitSubmission(e);
+				return;
+			}
 			if (this.options.length === 0) return;
 			switch (e.key) {
 				case "ArrowDown":
@@ -148,9 +152,6 @@ var UInput = class UInput extends UFormControlElement {
 		this.handlePopoverShow = (e) => {
 			if (this.options.length === 0) e.preventDefault();
 		};
-		this.handlePopoverHide = (e) => {
-			if (this.options.length === 0) e.preventDefault();
-		};
 	}
 	static {
 		this.styles = [super.styles, styles];
@@ -160,6 +161,10 @@ var UInput = class UInput extends UFormControlElement {
 		super.disconnectedCallback();
 	}
 	render() {
+		const editable = !this.disabled && !this.readonly;
+		const showToggle = this.type === "password" && editable;
+		const showClear = this.clearable && editable && !!this.value;
+		const showStepper = this.type === "number" && editable;
 		return html`
       <u-field part="field"
         ?required=${this.required}
@@ -209,7 +214,7 @@ var UInput = class UInput extends UFormControlElement {
           <slot name="suffix"></slot>
 
           <u-icon class="suffix-item"
-            ?hidden=${this.type !== "password" || this.disabled || this.readonly}
+            ?hidden=${!showToggle}
             role="button"
             tabindex="0"
             aria-label=${Locale.getValue(this.showPassword ? "hidePassword" : "showPassword")}
@@ -219,7 +224,7 @@ var UInput = class UInput extends UFormControlElement {
             @keydown=${this.handleSuffixIconKeydown(this.handlePasswordTogglerClick)}
           ></u-icon>
           <u-icon class="suffix-item"
-            ?hidden=${!this.clearable || this.disabled || this.readonly || !this.value}
+            ?hidden=${!showClear}
             role="button"
             tabindex="0"
             aria-label=${Locale.getValue("clear")}
@@ -229,7 +234,7 @@ var UInput = class UInput extends UFormControlElement {
             @keydown=${this.handleSuffixIconKeydown(this.handleClearButtonClick)}
           ></u-icon>
           <u-icon class="suffix-item stepper-btn"
-            ?hidden=${this.type !== "number" || this.disabled || this.readonly}
+            ?hidden=${!showStepper}
             role="button"
             tabindex="0"
             aria-disabled=${!this.canDecrement}
@@ -240,7 +245,7 @@ var UInput = class UInput extends UFormControlElement {
             @keydown=${this.handleSuffixIconKeydown(this.handleStepperClick(-1))}
           ></u-icon>
           <u-icon class="suffix-item stepper-btn"
-            ?hidden=${this.type !== "number" || this.disabled || this.readonly}
+            ?hidden=${!showStepper}
             role="button"
             tabindex="0"
             aria-disabled=${!this.canIncrement}
@@ -262,7 +267,6 @@ var UInput = class UInput extends UFormControlElement {
         placement="bottom-start"
         offset="1"
         @show=${this.handlePopoverShow}
-        @hide=${this.handlePopoverHide}
       >
         <slot @slotchange=${this.handleSlotChange}></slot>
       </u-popover>
@@ -335,6 +339,29 @@ var UInput = class UInput extends UFormControlElement {
 			option.removeEventListener("keydown", this.handleOptionKeydown);
 		}
 	}
+	/**
+	* 네이티브 단일 행 `<input>` 의 **암묵 제출**(HTML «implicit submission»)을 흉내 낸다 — 내부 `<input>` 은 섀도
+	* 안에 있어 바깥 `<form>` 의 폼 소유자가 아니므로, 흉내 내지 않으면 Enter 가 아무것도 하지 않는다.
+	*
+	* - **한 틱(태스크) 뒤에 판정한다.** 이 리스너는 내부 입력에서 가장 먼저 돌므로, 소비자가 호스트나 폼에서
+	*   `keydown` 을 취소했는지는 디스패치가 끝난 뒤에야 안다(마이크로태스크는 다음 리스너보다 먼저 돈다).
+	*   취소됐으면 제출하지 않는다 — 네이티브와 같다.
+	* - IME 조합을 확정하는 Enter 와 수정 키가 붙은 Enter 는 제출하지 않는다.
+	* - 명세의 순서 그대로: 폼에 제출 버튼이 있으면 **첫 제출 버튼을 누른다**(비활성이면 버튼이 스스로 거른다 ·
+	*   네이티브 버튼이면 `submitter` 도 그것이 된다). 없으면 암묵 제출을 막는 필드가 둘 이상일 때 제출하지 않고,
+	*   아니면 `requestSubmit()` 한다(검증도 그 안에서 돈다).
+	*/
+	handleImplicitSubmission(e) {
+		if (e.isComposing || this.composing || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
+		setTimeout(() => {
+			const form = this.form;
+			if (e.defaultPrevented || !form || !this.isConnected) return;
+			const elements = Array.from(form.elements);
+			const submitter = elements.find(isSubmitButton);
+			if (submitter) submitter.click();
+			else if (elements.filter(blocksImplicitSubmission).length <= 1) form.requestSubmit();
+		});
+	}
 	/** 경계(min/max)에 걸리면 시각적으로 흐리고 마우스 클릭을 막는다(CSS `pointer-events:
 	*  none`) — 네이티브 stepUp/stepDown 자체가 경계에서 조용히 no-op이라 값이 튀지는
 	*  않지만, 헛클릭 피드백을 준다. 키보드 Enter/Space는 `pointer-events`의 영향을 받지
@@ -381,5 +408,28 @@ __decorate([query("input", true), __decorateMetadata("design:type", typeof HTMLI
 __decorate([query("u-popover", true), __decorateMetadata("design:type", typeof UPopover === "undefined" ? Object : UPopover)], UInput.prototype, "popoverEl", void 0);
 __decorate([state(), __decorateMetadata("design:type", Boolean)], UInput.prototype, "showPassword", void 0);
 UInput = __decorate([customElement("u-input")], UInput);
+/** HTML 명세의 «암묵 제출을 막는 필드» — 네이티브 단일 행 입력의 이 type 들. `u-input` 의 type 은 전부 여기에 든다. */
+var BLOCKING_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"email",
+	"url",
+	"tel",
+	"password",
+	"date",
+	"month",
+	"week",
+	"time",
+	"datetime-local",
+	"number"
+]);
+/** 제출 버튼 — 네이티브 `<button>`(기본 type 이 submit)·`<input type=submit|image>`, 그리고 `type` 이 submit 인 폼 연동 커스텀 버튼. */
+function isSubmitButton(el) {
+	const type = el.type;
+	return type === "submit" || el instanceof HTMLInputElement && type === "image";
+}
+function blocksImplicitSubmission(el) {
+	return (el instanceof HTMLInputElement || el instanceof UInput) && BLOCKING_TYPES.has(el.type);
+}
 //#endregion
 export { UInput };

package/dist/components/input/UInput.styles.js

@@ -114,13 +114,16 @@ var styles = css`
   /* 네이티브 input */
   input {
     all: unset;
-    flex: 1 0 auto;
+    /* 줄어들 수 있어야 한다 — 수축 0 이면 min-width: 0 이 무력해 입력이 자기 고유 폭(size 속성 기본 20자)
+       아래로 줄지 않고, 좁은 필드에서는 뒤따르는 접미 아이콘(지우기·토글·스테퍼)이 컨테이너 밖으로 밀려나
+       overflow 에 잘린다 — 보이지도 눌리지도 않는다. */
+    flex: 1 1 auto;
     min-width: 0;
     font-size: 1em;
     line-height: 1.5;
   }
   input::placeholder {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
   input:disabled {
     cursor: not-allowed;
@@ -152,7 +155,8 @@ var styles = css`
     margin-left: 0.25em;
   }
 
-  /* 아이콘 영역 (clear, password toggle 등) */
+  /* 아이콘 영역 (clear, password toggle 등). ⚠포인터를 받는 아이콘(role=button)의 간격은 이 값이 아니라 아래
+     [role="button"] 규칙이 정한다 — 그 규칙의 margin 단축 선언이 이 margin-left 를 덮는다. */
   .suffix-item {
     margin-left: 0.25em;
     color: var(--u-icon-color, #616161);
@@ -166,14 +170,29 @@ var styles = css`
   .suffix-item:active {
     color: var(--u-icon-color-active, #1565C0);
   }
-  .stepper-btn {
-    font-size: 0.85em;
-  }
   .stepper-btn[aria-disabled="true"] {
     opacity: 0.35;
     pointer-events: none;
   }
 
+  /* 포인터를 받는 접미 아이콘(지우기 · 비밀번호 토글 · 스테퍼) — 글리프는 1em 그대로, 받는 영역은 **모두** 24px(1.5em)다
+     (WCAG 2.2 SC 2.5.8 · 사람 결정 HD-57 ⒜). 기전: 좌우 0.25em 패딩으로 1em 글리프를 1.5em(24px) 상자로 감싸고,
+     왼쪽 여백 0.25em · 오른쪽 여백 -0.25em 으로 이웃과 **맞닿되 겹치지 않게** 놓는다 — 그 결과 글리프 사이가 0.5em(8px)이 된다.
+     세로는 음수 여백으로 컨테이너 높이를 그대로 둔다.
+     ⚠종전에는 간격이 0.25em 이라 «맨 뒤 아이콘만» 24 였고 나란히 놓인 쌍·스테퍼는 24 에 못 미쳤다 — 그것을 고치는 대가가
+     아이콘 사이가 4px 벌어지는 것이다(스테퍼 글리프도 0.85em → 1em).
+     content-box 는 아이콘 자신의 box-sizing 과 무관하게 글리프를 1em 로 둔다. */
+  .suffix-item[role="button"] {
+    box-sizing: content-box;
+    margin: -0.25em -0.25em -0.25em 0.25em;
+    padding: 0.25em;
+  }
+  /* 좌우 여백이 0 인 변형(underlined · borderless)은 맨 뒤 아이콘이 오른쪽으로 넓힐 자리가 없다 — 컨테이너에 0.25em 을 준다(그만큼만). */
+  :host([variant="underlined"]) .container,
+  :host([variant="borderless"]) .container {
+    padding-right: 0.25em;
+  }
+
   u-popover {
     width: var(--input-popover-width, var(--anchor-width, 100%));
     min-height: var(--input-popover-min-height);

package/dist/components/menu/UMenu.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UMenuItem } from "../menu-item/UMenuItem.js";
 import { styles } from "./UMenu.styles.js";
 import { html } from "lit";

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import "../popover/UPopover.js";
 import { UDivider } from "../divider/UDivider.js";

package/dist/components/option/UOption.js

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

package/dist/components/panel/UPanel.js

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

package/dist/components/popover/UPopover.js

@@ -1,6 +1,6 @@
 import { isCoarsePointer } from "../../utilities/elements.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFloatingElement } from "../UFloatingElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UPopover.styles.js";
@@ -8,6 +8,24 @@ import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/components/popover/UPopover.ts
 var _UPopover;
+var FOCUSABLE = "a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/**
+* 슬롯에 꽂힌 요소와 **그 자손**(안쪽 `<slot>` 에 다시 꽂힌 요소까지)에서 포커스 가능한 것을 문서 순서로 모은다 —
+* `autofocus`·`focusTo()` 가 약속하는 «내부의» 포커스 가능한 요소. 종전에는 꽂힌 요소 자신만 봐서, 감싼 요소
+* (`<div>`) 안의 입력은 찾지 못하고 팝오버 자신에 포커스했다. `disabled`·`hidden` 인 요소는 하위 전체를 건너뛴다.
+*/
+function collectFocusables(elements, out) {
+	for (const el of elements) {
+		if (!(el instanceof HTMLElement)) continue;
+		if (el.hasAttribute("disabled") || el.hasAttribute("hidden")) continue;
+		if (el instanceof HTMLSlotElement) {
+			collectFocusables(el.assignedElements({ flatten: true }), out);
+			continue;
+		}
+		if (el.matches(FOCUSABLE)) out.push(el);
+		collectFocusables(Array.from(el.children), out);
+	}
+}
 var UPopover = class UPopover extends UFloatingElement {
 	static {
 		_UPopover = this;
@@ -141,11 +159,9 @@ var UPopover = class UPopover extends UFloatingElement {
 		return html`<slot></slot>`;
 	}
 	focusTo(index) {
-		const focusables = this.renderRoot.querySelector("slot")?.assignedElements({ flatten: true }).filter((el) => {
-			if (!(el instanceof HTMLElement)) return false;
-			if (el.hasAttribute("disabled") || el.hasAttribute("hidden")) return false;
-			return el.matches("a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
-		});
+		const slot = this.renderRoot.querySelector("slot");
+		const focusables = [];
+		if (slot) collectFocusables(slot.assignedElements({ flatten: true }), focusables);
 		if (!focusables || focusables.length === 0) {
 			this.focus();
 			return;

package/dist/components/progress-bar/UProgressBar.js

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

package/dist/components/progress-ring/UProgressRing.js

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

package/dist/components/radio/URadio.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";

package/dist/components/rating/URating.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import { Locale } from "../../utilities/Locale.js";

package/dist/components/rating/URating.styles.js

@@ -26,6 +26,12 @@ var styles = css`
     align-items: center;
     justify-content: center;
     font-size: 1.2em;
+    /* WCAG 2.2 SC 2.5.8 — 심볼은 «각각이» 포인터 타깃이고 서로 인접해 있어
+       간격 예외를 받지 못한다(중심 간 24px 미만). ⚠글리프 크기(font-size)는
+       그대로 두고 **패딩으로 타깃만** 24×24 이상으로 만든다 — 별이 커지면
+       평점 위젯의 시각적 무게가 달라지고, 그것은 이 처방이 피하려는 것이다.
+       패딩이 늘면 중심 간 거리도 함께 벌어져 겹침도 생기지 않는다. */
+    padding: 0.16em;
     outline: none;
     border-radius: 0.15em;
     color: var(--rating-symbol-off-color);

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

@@ -21,6 +21,10 @@ export type SelectVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  * @csspart popover - 옵션 목록이 표시되는 팝오버 요소
  * @csspart search-input - 검색 입력 영역
  *
+ * @cssprop --u-select-display - 호스트의 display (기본값: inline-block). 폼/그리드 셀에서
+ *   컨테이너 폭을 채우려면 `block`으로 지정한다.
+ * @cssprop --u-select-width - 호스트의 width (기본값: auto). flex 컨테이너처럼 block만으로는
+ *   늘어나지 않는 맥락에서 `100%`로 지정한다.
  * @cssprop --select-popover-width - 팝오버의 너비 (기본값: 앵커(트리거) 너비, strategy와 무관하게 동일).
  *   옵션 텍스트가 길어도 이 값을 넘겨 넓어지지 않으며, 넘치는 텍스트는 UOption에서 ellipsis 처리된다.
  * @cssprop --select-popover-min-height - 팝오버의 최소 높이 (기본값: 0px)
@@ -57,8 +61,10 @@ export declare class USelect extends UFormControlElement<string | string[]> {
     private options;
     /** aria-expanded 배선용 팝오버 열림 상태 */
     private open;
-    /** combobox → listbox 연결용 고유 id (aria-controls) */
+    /** combobox → 팝업 연결용 고유 id (aria-controls). 검색 가능이면 팝업은 dialog 이고 그 안에 listbox 가 있다. */
+    private readonly idBase;
     private readonly listboxId;
+    private readonly popupId;
     protected shouldValidate(changed: PropertyValues): boolean;
     private get valueAsString();
     private get valueAsArray();

package/dist/components/select/USelect.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
@@ -22,7 +22,9 @@ var USelect = class USelect extends UFormControlElement {
 		this.loading = false;
 		this.options = [];
 		this.open = false;
-		this.listboxId = `u-select-listbox-${Math.random().toString(36).slice(2, 8)}`;
+		this.idBase = `u-select-${Math.random().toString(36).slice(2, 8)}`;
+		this.listboxId = `${this.idBase}-listbox`;
+		this.popupId = `${this.idBase}-popup`;
 		this.handleSlotChange = (e) => {
 			this.cleanup(this.options);
 			const slot = e.target;
@@ -173,9 +175,9 @@ var USelect = class USelect extends UFormControlElement {
           role="combobox"
           aria-label=${ifDefined(this.label)}
           aria-description=${ifDefined(this.description)}
-          aria-haspopup="listbox"
+          aria-haspopup=${this.searchable ? "dialog" : "listbox"}
           aria-expanded=${this.open}
-          aria-controls=${this.listboxId}>
+          aria-controls=${this.searchable ? this.popupId : this.listboxId}>
           <slot name="prefix"></slot>
           <slot name="display">${this.renderContent()}</slot>
           <slot name="suffix"></slot>
@@ -201,9 +203,13 @@ var USelect = class USelect extends UFormControlElement {
         </div>
       </u-field>
 
+      <!-- listbox 는 option(과 group)만 담는다 — 검색 입력은 그 밖에 둔다. 검색 가능이면 입력과 목록을 함께 담는
+           팝업이 dialog 가 된다(WAI-ARIA APG «combobox with dialog popup» — 포커스가 팝업 안으로 들어가는 지금의
+           키보드 모델 그대로다). 검색 불가면 팝업은 역할 없는 컨테이너이고 목록만 담는다. -->
       <u-popover part="popover"
-        id=${this.listboxId}
-        role="listbox"
+        id=${this.popupId}
+        role=${ifDefined(this.searchable ? "dialog" : void 0)}
+        aria-label=${ifDefined(this.searchable ? this.label || Locale.getValue("search") : void 0)}
         scrollable
         autofocus
         for=".container"
@@ -219,11 +225,16 @@ var USelect = class USelect extends UFormControlElement {
           <u-icon lib="internal" name="search"></u-icon>
           <input
             type="text"
+            aria-label=${Locale.getValue("search")}
+            aria-controls=${this.listboxId}
             @input=${this.handleSearchInput}
             @keydown=${this.handleSearchKeydown}
           />
         </div>
-        <slot @slotchange=${this.handleSlotChange}></slot>
+        <div class="listbox" role="listbox" id=${this.listboxId}
+          aria-multiselectable=${ifDefined(this.multiple ? "true" : void 0)}>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
       </u-popover>
     `;
 	}

package/dist/components/select/USelect.styles.js

@@ -10,7 +10,10 @@ var styles = css`
 
   :host {
     position: relative;
-    display: inline-block;
+    /* 폼/그리드 셀에서 컨테이너 폭을 채우려면 소비자가 --u-select-display: block 을 준다.
+       flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
+    display: var(--u-select-display, inline-block);
+    width: var(--u-select-width, auto);
     color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
@@ -118,7 +121,7 @@ var styles = css`
   }
 
   .count {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     line-height: 1.25;
     /* n / m 은 제자리에서 n 이 바뀐다 — 비례폭이면 선택할 때마다 라벨 줄이 흔들린다 */
     font-variant-numeric: tabular-nums;
@@ -133,7 +136,7 @@ var styles = css`
     text-overflow: ellipsis;
   }
   .text-content.placeholder {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 
   .chips-content {
@@ -165,6 +168,16 @@ var styles = css`
     color: var(--u-icon-color-active, #1565C0);
   }
 
+  /* 지우기 «x» — 글리프는 1em 그대로, 받는 영역만 24px(1.5em)로 넓힌다(WCAG 2.2 SC 2.5.8). 왼쪽은 자기 앞
+     간격을 패딩으로, 오른쪽은 뒤따르는 펼침 화살표(트리거의 일부인 장식 — 별도 타깃이 아니다)의 간격으로,
+     위아래는 컨테이너 여백(0.3em) 쪽으로 넓힌다. 음수 여백이라 배치·트리거 높이는 그대로다 — 트리거의 줄은
+     1em 이라 세로 패딩만 주면 트리거가 8px 커진다. */
+  .suffix-item[role="button"] {
+    box-sizing: content-box;
+    margin: -0.25em -0.25em -0.25em 0;
+    padding: 0.25em;
+  }
+
   /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
      맞춘다(긴 텍스트는 UOption 자체의 ellipsis로 처리). */
   u-popover {
@@ -185,7 +198,7 @@ var styles = css`
     align-items: center;
     gap: 0.4em;
     padding: 0.3em 0.6em;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .search-input input {
@@ -195,7 +208,7 @@ var styles = css`
     line-height: 1.5;
   }
   .search-input input::placeholder {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 `;
 //#endregion

package/dist/components/skeleton/USkeleton.js

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

package/dist/components/slider/USlider.d.ts

@@ -25,7 +25,9 @@ export type SliderFormatter = (value: number) => string;
  * @cssprop --slider-fill-color - 활성화 영역 색상
  * @cssprop --slider-track-height - 트랙 높이
  * @cssprop --slider-track-color - 트랙 배경 색상
- * @cssprop --slider-thumb-size - thumb 크기
+ * @cssprop --slider-thumb-size - thumb 크기 (**보이는 원의 지름**. 잡히는 영역은 이것과
+ *   별개로 24×24 하한을 가진다 — WCAG 2.2 SC 2.5.8. 이 값을 24px 아래로 낮춰도 포인터 타깃은
+ *   줄지 않는다.)
  * @cssprop --slider-thumb-color - thumb 색상
  * @cssprop --slider-thumb-border-color - thumb 테두리 색상
  * @cssprop --slider-mark-size - 마크 크기

package/dist/components/slider/USlider.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import "../tooltip/UTooltip.js";

package/dist/components/slider/USlider.styles.js

@@ -31,7 +31,11 @@ var styles = css`
 
   .container {
     position: relative;
-    height: var(--slider-thumb-size);
+    /* ⚠실제 포인터 타깃은 thumb 이 아니라 이 컨테이너다 — pointerdown 이 여기 걸려 있고
+       트랙 어디를 눌러도 값이 바뀐다. WCAG 2.2 SC 2.5.8 의 24px 하한은 그래서 여기에도 든다.
+       보이는 트랙(6px)·thumb 치수는 그대로이고, 늘어나는 것은 «잡히는 높이»뿐이다.
+       ⚠주석에 백틱을 쓰지 말 것 — 태그드 템플릿이 그 자리에서 끝난다. */
+    height: max(var(--slider-thumb-size), 24px);
     touch-action: none;
     user-select: none;
     -webkit-user-select: none;
@@ -64,6 +68,19 @@ var styles = css`
     top: 50%;
     transform: translate(-50%, -50%);
     outline: none;
+    /* 🔴히트·포커스 영역만 24px 하한으로 넓힌다 — 보이는 원은 .thumb-content 가 그대로 그린다
+       (WCAG 2.2 SC 2.5.8). 박스가 커져도 중심은 그대로다: 콘텐츠를 가운데 놓으므로
+       left:% + translate(-50%) 가 가리키는 점이 곧 보이는 원의 중심이다.
+       ⚠**여백(padding)으로 넓히지 않는다** — 24px 은 여백 스케일의 2xl 과 같은 값이라
+       「축 B 는 스케일 리터럴을 여백에 쓰지 않는다」 규칙(space-scale)에 걸리고, 그렇다고
+       --u-space-2xl 로 배선하면 ***접근성 하한이 여백 스케일을 손볼 때 따라 움직인다.***
+       하한은 여백이 아니므로 여백이 아닌 자리에 적는다.
+       ⚠툴팁은 이 박스의 레이아웃에 참여하지 않는다(플로팅이라 흐름 밖) — 그래서 grid 로
+       바꿔도 콘텐츠와 겹치지 않는다. */
+    display: grid;
+    place-items: center;
+    min-width: 24px;
+    min-height: 24px;
   }
 
   .thumb-content {
@@ -125,7 +142,7 @@ var styles = css`
     position: absolute;
     transform: translateX(-50%);
     font-size: 0.75em;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     white-space: nowrap;
   }
 `;

package/dist/components/spinner/USpinner.js

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