@iyulab/components 1.32.0 → 1.33.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [1.33.1] - 2026-08-25
+
+### Fixed
+
+- **`aria-label` set on `<u-button>` never reached the accessibility tree.** The host
+  attribute was present, but the actual interactive node exposed to assistive technology is
+  the native `<button>`/`<a>` rendered inside the shadow root — ARIA content attributes on a
+  shadow host do not cross the shadow boundary to label a descendant. Icon-only buttons using
+  `aria-label` for their accessible name were announced as unnamed controls. `render()` now
+  forwards the host's `aria-label` onto the internal element, and attribute changes made after
+  connection are observed and re-rendered (previously only the initial value would have had
+  any chance of being picked up).
+
+## [1.33.0] - 2026-08-21
+
+### Added
+
+- **`u-radio` and `u-rating` now support `.focus()`/`.blur()` on the host element too**,
+  completing the same contract added to the rest of the form controls in `1.32.0`. Both are
+  option/symbol *groups* rather than a single target, so `.focus()` delegates to the first
+  option (`u-radio`) or the first symbol (`u-rating`) regardless of the current selection —
+  the same "one fixed delegation target" contract every other control in this library now
+  shares, rather than adding value-aware branching.
+
 ## [1.32.0] - 2026-08-21
 
 ### Added

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

@@ -93,6 +93,19 @@ export declare class UButton extends UElement {
     get form(): HTMLFormElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 호스트에 세팅된 `aria-label`은 실제 접근 가능한(포커스 대상) 엘리먼트가 아니라 —
+     * 그 안쪽 shadow DOM 의 네이티브 `<a>`/`<button>`이다. 섀도우 경계를 넘지 않으므로
+     * 접근성 트리에 자동 반영되지 않는다(docket #75 실측 — 속성은 붙어 있는데
+     * 접근성 이름이 비어 있음). `render()`가 이 값을 읽어 내부 엘리먼트에 직접 옮긴다.
+     *
+     * `aria-label`은 Lit 리액티브 프로퍼티로 선언돼 있지 않아 `observedAttributes`에
+     * 없다 — 그 목록에 없는 속성은 `attributeChangedCallback` 자체가 호출되지 않는다
+     * (커스텀 엘리먼트 표준 동작). 초기 렌더는 되지만 연결 후 동적 변경은 반영되지
+     * 않았다 — 목록에 명시적으로 추가해야 한다.
+     */
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     render(): TemplateResult<1>;
     private renderContent;
     private renderMask;

package/dist/components/button/UButton.js

@@ -53,9 +53,29 @@ var UButton = class UButton extends UElement {
 		this.removeEventListener("click", this.handleClick);
 		super.disconnectedCallback();
 	}
+	/**
+	* 호스트에 세팅된 `aria-label`은 실제 접근 가능한(포커스 대상) 엘리먼트가 아니라 —
+	* 그 안쪽 shadow DOM 의 네이티브 `<a>`/`<button>`이다. 섀도우 경계를 넘지 않으므로
+	* 접근성 트리에 자동 반영되지 않는다(docket #75 실측 — 속성은 붙어 있는데
+	* 접근성 이름이 비어 있음). `render()`가 이 값을 읽어 내부 엘리먼트에 직접 옮긴다.
+	*
+	* `aria-label`은 Lit 리액티브 프로퍼티로 선언돼 있지 않아 `observedAttributes`에
+	* 없다 — 그 목록에 없는 속성은 `attributeChangedCallback` 자체가 호출되지 않는다
+	* (커스텀 엘리먼트 표준 동작). 초기 렌더는 되지만 연결 후 동적 변경은 반영되지
+	* 않았다 — 목록에 명시적으로 추가해야 한다.
+	*/
+	static get observedAttributes() {
+		return [...super.observedAttributes, "aria-label"];
+	}
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "aria-label") this.requestUpdate();
+	}
 	render() {
+		const ariaLabel = this.getAttribute("aria-label") ?? void 0;
 		if (this.href) return html`
         <a part="link"
+          aria-label=${ifDefined(ariaLabel)}
           ?disabled=${this.disabled || this.loading}
           tabindex=${this.disabled || this.loading ? -1 : 0}
           href=${ifDefined(this.disabled || this.loading ? void 0 : this.href)}
@@ -69,6 +89,7 @@ var UButton = class UButton extends UElement {
       `;
 		return html`
       <button part="button"
+        aria-label=${ifDefined(ariaLabel)}
         type=${this.type}
         ?disabled=${this.disabled || this.loading}
       >

package/dist/components/radio/URadio.d.ts

@@ -31,6 +31,11 @@ export declare class URadio extends UFormControlElement<string> {
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;
+    /** 그룹의 첫 포커스 가능 옵션으로 위임한다(선택된 값과 무관 — 나머지 폼 컨트롤과
+     *  같은 "위임 대상이 하나로 고정된 단순 계약"을 유지한다). 옵션 자신이 host에
+     *  실제 tabindex를 갖는 커스텀 엘리먼트라 `UOption.focus()`가 이미 동작한다. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private setup;
     private cleanup;
     private onChangeValue;

package/dist/components/radio/URadio.js

@@ -108,6 +108,15 @@ var URadio = class URadio extends UFormControlElement {
 		this.value = void 0;
 		this.invalid = false;
 	}
+	/** 그룹의 첫 포커스 가능 옵션으로 위임한다(선택된 값과 무관 — 나머지 폼 컨트롤과
+	*  같은 "위임 대상이 하나로 고정된 단순 계약"을 유지한다). 옵션 자신이 host에
+	*  실제 tabindex를 갖는 커스텀 엘리먼트라 `UOption.focus()`가 이미 동작한다. */
+	focus(options) {
+		this.options.find((o) => !o.disabled)?.focus(options);
+	}
+	blur() {
+		(this.shadowRoot?.activeElement)?.blur();
+	}
 	setup(options) {
 		for (const option of options) {
 			option.removeEventListener("click", this.handleOptionClick);

package/dist/components/rating/URating.d.ts

@@ -37,6 +37,13 @@ export declare class URating extends UFormControlElement<number> {
     protected setValidity(): void;
     private isStepMismatch;
     reset(): void;
+    /** 첫(최저 점수) 심볼로 위임한다(선택된 값과 무관 — 나머지 폼 컨트롤과 같은
+     *  "위임 대상이 하나로 고정된 단순 계약"을 유지한다). 심볼은 shadow DOM 안의
+     *  `<span>`이라 disabled/readonly일 때 `tabindex="-1"`(=`!interactive`)이고,
+     *  다른 컴포넌트의 `.container`/thumb와 같은 이유로 프로그램적 focus는 여전히
+     *  통과하므로 직접 가드한다. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private onChangeValue;
     /** 사용자 상호작용으로 값이 바뀐 경로에서만 호출한다 — 프로그램적 value 세팅은
      *  네이티브 폼 컨트롤과 동일하게 change를 발화하지 않는다.

package/dist/components/rating/URating.js

@@ -175,6 +175,18 @@ var URating = class URating extends UFormControlElement {
 		this.value = 0;
 		this.invalid = false;
 	}
+	/** 첫(최저 점수) 심볼로 위임한다(선택된 값과 무관 — 나머지 폼 컨트롤과 같은
+	*  "위임 대상이 하나로 고정된 단순 계약"을 유지한다). 심볼은 shadow DOM 안의
+	*  `<span>`이라 disabled/readonly일 때 `tabindex="-1"`(=`!interactive`)이고,
+	*  다른 컴포넌트의 `.container`/thumb와 같은 이유로 프로그램적 focus는 여전히
+	*  통과하므로 직접 가드한다. */
+	focus(options) {
+		if (!this.interactive) return;
+		this.renderRoot.querySelector(".symbol")?.focus(options);
+	}
+	blur() {
+		(this.shadowRoot?.activeElement)?.blur();
+	}
 	onChangeValue() {
 		this.buffer = -1;
 		this.internals?.setFormValue(this.value?.toString() || "");

package/package.json

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

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

@@ -72,3 +72,20 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | `link` | Inner `<a>` element (when `href` is set) |
 | `content` | Content wrapper (prefix + label + suffix) |
 | `mask` | Loading overlay mask |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-primary-color` | Base color when `color="neutral"` — set it and hover/active/surface tones auto-derive via `color-mix()` |
+| `--btn-color` | The button's **fill** color. Every derived token below is `color-mix()`'d from this one — usually the only one you need to override |
+| `--btn-txt-color` | Text color on the fill, read by `variant="solid"` (default `#fff`, or `--u-{role}-txt-color` when a semantic `color` is set) |
+| `--btn-color-strong` | Text color on the surrounding page background, read by `variant="link"` — opposite contrast need from the fill, so it's a separate token (default: same as `--btn-color`, or `--u-{role}-color-strong` for a semantic `color`) |
+| `--btn-color-hover` / `--btn-color-active` | `solid` background hover/active (default: `--btn-color` at 85%/70% + black) |
+| `--btn-color-surface` / `-hover` / `-active` | `surface` background states (default: `--btn-color` at 12%/22%/32%) |
+| `--btn-color-border` / `-hover` / `-active` | Border states (default: `--btn-color` at 45%/60%/75%) |
+| `--btn-color-outline-hover` / `-active` | `outlined`/`ghost` background hover/active (default: 6%/12%) |
+| `--btn-color-strong-hover` / `-active` | `link` text hover/active — the role value itself doesn't move; hover adds an underline instead (default: `--btn-color-strong` at 85%/70% + black) |
+| `--btn-border-color` | Border color read by variant/hover/active rules (default: `transparent`) |
+| `--btn-padding-block` | Vertical inner padding (default `0.5em`) |
+| `--btn-padding-inline` | Horizontal inner padding (default `1em`, `0` for `variant="link"`) — overriding it does not change the min-height, which is derived from `--btn-padding-block` instead |

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

@@ -51,3 +51,10 @@ Content card with optional media, header, body, and footer sections.
 | `header` | Header slot wrapper |
 | `body` | Body (default slot) wrapper |
 | `footer` | Footer slot wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--card-border-width` | Border thickness (`0` when `borderless`) |
+| `--card-border-color` | Border color |

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

@@ -62,6 +62,12 @@ Side panel that slides in from any screen edge. Extends `UOverlayElement` (focus
 | `body` | Body area |
 | `close-btn` | Close button |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--drawer-size` | Panel size along the slide axis — width for `placement="left"`/`"right"` (default `28rem`), height for `"top"`/`"bottom"` (default `16rem`). Auto-shrinks to `max-width`/`max-height: 100%` on narrow viewports |
+
 ---
 
 ## Edit-panel pattern

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

@@ -58,6 +58,8 @@ Radio group built from `u-option` children. Form-associated.
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset selection |
+| `focus(options?)` | Focus the first option (regardless of selection) |
+| `blur()` | Blur the currently focused option, if any |
 
 ## CSS Parts
 
@@ -65,3 +67,10 @@ Radio group built from `u-option` children. Form-associated.
 |------|-------------|
 | `field` | Outer field wrapper |
 | `container` | Options container |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--radio-color` | Base color of the selected state (default `--u-primary-color`) |
+| `--radio-color-active` | Selected-state active tone (default `--radio-color` at 85% + black) |

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

@@ -56,6 +56,8 @@ Star/custom-symbol rating input. Supports fractional precision and custom symbol
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset value |
+| `focus(options?)` | Focus the first symbol (regardless of value) |
+| `blur()` | Blur the currently focused symbol, if any |
 
 ## CSS Parts