@iyulab/components 1.45.1 → 1.46.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [1.46.0] - 2026-09-24
+
+### Changed
+
+- **`u-icon` takes its 1em box before the SVG arrives.** Icons resolve asynchronously and draw
+  nothing until they do; the host had no size of its own, so its box was 0 × 0 until the SVG
+  landed and everything around it moved — a layout shift wherever an icon appears (a collapsed
+  sidebar item jumped from 16px to 36px tall on load). The host is now `1em` square from the first
+  paint, and `font-size` still sets the size.
+  ⚠An empty `<u-icon>` (no `name`, no `src`) now also takes that box. If you rendered one as an
+  invisible placeholder, render nothing instead.
+
+### Fixed
+
+- **A selectable `u-chip` is a keyboard-operable toggle button.** It had a click handler and
+  nothing else — no role, no tab stop, no key — so keyboard users could not reach it and assistive
+  tech did not know it toggles. It is now in the tab order with `role="button"` and `aria-pressed`,
+  and `Enter` / `Space` toggle it and fire `pick` like a click. A chip that is not selectable stays a
+  status label, out of the tab order; a `tabindex` you set is kept.
+- **`focus()` now reaches the control inside `u-icon-button`, `u-copy-button` and
+  `u-breadcrumb-item`** (with `href`) — the same defect `u-button` had in 1.45.2: the host is not
+  focusable, so calling `focus()` on it did nothing.
+
+## [1.45.2] - 2026-09-24
+
+### Fixed
+
+- **`u-button.focus()` now focuses the button.** The host itself is not focusable, so calling
+  `focus()` on a `u-button` did nothing — no error, no focus. Anything that moves focus to a
+  button (initial focus when a panel opens, returning focus when it closes) failed silently. The
+  host now delegates focus to the inner native `<button>` (or `<a>` when `href` is set), and the
+  host matches `:focus` while it holds it. A disabled button still cannot take focus.
+
 ## [1.45.1] - 2026-09-24
 
 ### Fixed

package/dist/components/breadcrumb-item/UBreadcrumbItem.d.ts

@@ -12,6 +12,8 @@ import { UElement } from '../UElement.js';
  */
 export declare class UBreadcrumbItem extends UElement {
     static styles: import('lit').CSSResultGroup[];
+    /** 호스트의 `.focus()` 를 안쪽 컨트롤로 위임한다 — `UButton` 과 같은 계약(호스트는 포커스 가능하지 않다). */
+    static shadowRootOptions: ShadowRootInit;
     /** 비활성화 상태 */
     disabled: boolean;
     /** 링크 URL */

package/dist/components/breadcrumb-item/UBreadcrumbItem.js

@@ -21,6 +21,12 @@ var UBreadcrumbItem = class UBreadcrumbItem extends UElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	static {
+		this.shadowRootOptions = {
+			...UElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
 	render() {
 		if (this.href) return html`
         <a part="link"

package/dist/components/button/UButton.d.ts

@@ -57,6 +57,12 @@ export type ButtonSize = "sm" | "md" | "lg";
 export declare class UButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
     static formAssociated: boolean;
+    /**
+     * 호스트의 `.focus()` 를 섀도 안의 네이티브 `<button>`/`<a>` 로 위임한다. 호스트는 포커스
+     * 가능하지 않으므로 위임이 없으면 `el.focus()` 가 오류 없이 아무 일도 하지 않는다 —
+     * 네이티브 버튼을 대체하는 요소가 잃으면 안 되는 계약이다.
+     */
+    static shadowRootOptions: ShadowRootInit;
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
     /**

package/dist/components/button/UButton.js

@@ -37,6 +37,12 @@ var UButton = class UButton extends UElement {
 	static {
 		this.formAssociated = true;
 	}
+	static {
+		this.shadowRootOptions = {
+			...UElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
 	set form(val) {
 		if (val) this.setAttribute("form", val);
 		else this.removeAttribute("form");

package/dist/components/chip/UChip.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UElement } from '../UElement.js';
 import { TagVariant, TagColor } from '../tag/UTag.js';
 /**
@@ -33,7 +34,20 @@ export declare class UChip extends UElement {
     /** 칩의 고유값 */
     value: string;
     render(): import('lit-html').TemplateResult<1>;
+    /** 이 요소가 스스로 붙인 `tabindex` 인가 — 소비자가 준 값은 건드리지 않는다. */
+    private ownsTabindex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * `selectable` 칩은 토글 버튼이다(WAI-ARIA APG «Button» · `aria-pressed`) — 역할·포커스·키가
+     * 없으면 키보드로 닿지 못하고 보조기기는 토글인지 모른다. 선택할 수 없는 칩은 상태 표시라
+     * 탭 순서에 들어오지 않는다.
+     */
+    protected updated(changed: PropertyValues): void;
+    /** Enter 와 Space 는 클릭과 같다 — 안쪽 삭제 버튼에서 온 키는 그 버튼의 몫이다. */
+    private handleKeydown;
     private handleTagClick;
+    private toggle;
     private handleRemoveClick;
 }
 declare global {

package/dist/components/chip/UChip.js

@@ -20,16 +20,15 @@ var UChip = class UChip extends UElement {
 		this.selectable = false;
 		this.selected = false;
 		this.value = "";
+		this.ownsTabindex = false;
+		this.handleKeydown = (e) => {
+			if (!this.selectable || e.composedPath()[0] !== this) return;
+			if (e.key !== "Enter" && e.key !== " ") return;
+			e.preventDefault();
+			this.toggle(e);
+		};
 		this.handleTagClick = (e) => {
-			if (!this.selectable) return;
-			this.selected = !this.selected;
-			this.fire("pick", { detail: {
-				value: this.value,
-				selected: this.selected,
-				shiftKey: e.shiftKey,
-				metaKey: e.metaKey,
-				ctrlKey: e.ctrlKey
-			} });
+			this.toggle(e);
 		};
 		this.handleRemoveClick = (e) => {
 			e.stopImmediatePropagation();
@@ -75,6 +74,49 @@ var UChip = class UChip extends UElement {
       </u-tooltip>
     `;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keydown", this.handleKeydown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this.handleKeydown);
+		super.disconnectedCallback();
+	}
+	/**
+	* `selectable` 칩은 토글 버튼이다(WAI-ARIA APG «Button» · `aria-pressed`) — 역할·포커스·키가
+	* 없으면 키보드로 닿지 못하고 보조기기는 토글인지 모른다. 선택할 수 없는 칩은 상태 표시라
+	* 탭 순서에 들어오지 않는다.
+	*/
+	updated(changed) {
+		super.updated(changed);
+		if (!changed.has("selectable") && !changed.has("selected")) return;
+		if (this.selectable) {
+			this.setAttribute("role", "button");
+			this.setAttribute("aria-pressed", String(this.selected));
+			if (!this.hasAttribute("tabindex")) {
+				this.setAttribute("tabindex", "0");
+				this.ownsTabindex = true;
+			}
+		} else if (changed.has("selectable")) {
+			this.removeAttribute("role");
+			this.removeAttribute("aria-pressed");
+			if (this.ownsTabindex) {
+				this.removeAttribute("tabindex");
+				this.ownsTabindex = false;
+			}
+		}
+	}
+	toggle(e) {
+		if (!this.selectable) return;
+		this.selected = !this.selected;
+		this.fire("pick", { detail: {
+			value: this.value,
+			selected: this.selected,
+			shiftKey: e.shiftKey,
+			metaKey: e.metaKey,
+			ctrlKey: e.ctrlKey
+		} });
+	}
 };
 __decorate([property({
 	type: String,

package/dist/components/copy-button/UCopyButton.d.ts

@@ -20,6 +20,8 @@ import { ButtonVariant } from '../button/UButton.js';
  */
 export declare class UCopyButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
+    /** 호스트의 `.focus()` 를 안쪽 컨트롤로 위임한다 — `UButton` 과 같은 계약(호스트는 포커스 가능하지 않다). */
+    static shadowRootOptions: ShadowRootInit;
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
     /** 원형 표시 여부 */

package/dist/components/copy-button/UCopyButton.js

@@ -48,6 +48,12 @@ var UCopyButton = class UCopyButton extends UElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	static {
+		this.shadowRootOptions = {
+			...UElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
 	render() {
 		const iconName = this.copied ? "check" : "copy";
 		if (this.label != null && this.label !== "") return html`

package/dist/components/icon/UIcon.styles.js

@@ -1,8 +1,15 @@
 import { css } from "lit";
 //#region src/components/icon/UIcon.styles.ts
 var styles = css`
+  /*
+   * 상자는 SVG 가 도착하기 «전» 부터 1em × 1em 이다 — 아이콘은 비동기로 해석되고 그 전에는
+   * 아무것도 그리지 않으므로, 고유 크기가 없으면 로드 순간 주변이 밀린다(레이아웃 이동).
+   * 크기는 여전히 font-size 로 정한다.
+   */
   :host {
     display: inline-flex;
+    width: 1em;
+    height: 1em;
     color: inherit;
     font-size: inherit;
   }

package/dist/components/icon-button/UIconButton.d.ts

@@ -14,6 +14,8 @@ import { IconLibrary } from '../icon/UIcon.js';
  */
 export declare class UIconButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
+    /** 호스트의 `.focus()` 를 안쪽 컨트롤로 위임한다 — `UButton` 과 같은 계약(호스트는 포커스 가능하지 않다). */
+    static shadowRootOptions: ShadowRootInit;
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
     /** 원형 표시 여부 */

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

@@ -22,6 +22,12 @@ var UIconButton = class UIconButton extends UElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	static {
+		this.shadowRootOptions = {
+			...UElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
 	/**
 	* 호스트에 세팅된 `aria-label`을 내부 `<u-button>`으로 옮긴다 — `UButton`과 같은 이유
 	* (섀도우 경계 안쪽 엘리먼트가 실제 접근 가능한 이름 대상). 아이콘 전용

package/package.json

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

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

@@ -54,6 +54,13 @@ Interactive chip tag. Supports selectable toggle, removable button, and tooltip.
 | `pick` | Fires when the chip is selected/deselected |
 | `remove` | Fires when the remove button is clicked |
 
+## Keyboard and accessibility
+
+A `selectable` chip is a toggle button: it is a stop in the tab order, carries `role="button"` and
+`aria-pressed`, and `Enter` / `Space` toggle it and fire `pick` exactly like a click. A chip that is
+not selectable is a status label — no role, not in the tab order. A `tabindex` you set yourself is
+kept. The remove button of a `removable` chip is its own tab stop.
+
 ## CSS Parts
 
 | Part | Description |