@iyulab/modern-app 0.41.1 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.42.0] - 2026-10-07
+
+### Added
+
+- **`u-info-field` names the widget it labels** — an unnamed progress bar or meter in its slot (`u-progress-bar`,
+  `u-progress-ring`, native `<progress>`/`<meter>`) takes `label` as its accessible name and follows it when it
+  changes. The label sat next to the widget on screen with nothing tying them together, so a "Completion" field
+  held an unnamed progressbar (axe `aria-progressbar-name`, WCAG 1.3.1). A widget with its own name — including the
+  spinner's default — keeps it; text values are unchanged (they are read right after the label).
+
 ## [0.41.1] - 2026-10-07
 
 ### Documentation

package/dist/components/InfoField.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'label' | 'value' | 'unit' | 'trend';
 export type InfoFieldFormat = 'number' | 'currency' | 'date';
@@ -96,6 +97,17 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * `--u-success|danger|warning-color-strong`.
      */
     tone?: InfoFieldTone;
+    /** 라벨을 이름으로 준 슬롯 위젯과 그때의 라벨 — 소비자가 바꾼 이름은 우리 것이 아니다. */
+    private readonly namedWidgets;
+    /**
+     * 슬롯에 든 **이름 없는** 진행 막대·계량기(`progressbar`·`meter`, 네이티브 `<progress>`·`<meter>`)에 라벨을 이름으로 준다.
+     *
+     * 글자 값은 읽는 순서로 라벨 바로 뒤에 들리지만, 이 역할들은 자기 이름이 없으면 «이름 없는 위젯» 이다(axe
+     * `aria-progressbar-name` · WCAG 1.3.1 — 화면에서 짝지은 관계는 프로그램으로도 이어져야 한다). 이미 이름을 가진
+     * 위젯(`aria-label`·`aria-labelledby` — 스피너의 기본 이름 포함)은 건드리지 않는다.
+     */
+    private nameSlottedWidgets;
+    protected updated(changed: PropertyValues): void;
     private get hasSlotted();
     private formatValue;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/InfoField.js

@@ -14,11 +14,28 @@ function d(e) {
 }
 var f = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default";
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.namedWidgets = /* @__PURE__ */ new WeakMap();
 	}
 	static {
 		this.styles = [super.styles, r];
 	}
+	async nameSlottedWidgets() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (e) for (let t of e.assignedElements({ flatten: !0 })) {
+			await t.updateComplete;
+			let e = t.getAttribute("role") ?? (t.localName === "progress" ? "progressbar" : t.localName === "meter" ? "meter" : null);
+			if (e !== "progressbar" && e !== "meter") continue;
+			let n = this.namedWidgets.get(t), r = t.getAttribute("aria-label");
+			if (t.hasAttribute("aria-labelledby") || r !== null && r !== n) {
+				this.namedWidgets.delete(t);
+				continue;
+			}
+			this.label ? (t.setAttribute("aria-label", this.label), this.namedWidgets.set(t, this.label)) : n !== void 0 && (t.removeAttribute("aria-label"), this.namedWidgets.delete(t));
+		}
+	}
+	updated(e) {
+		super.updated(e), e.has("label") && this.nameSlottedWidgets();
+	}
 	get hasSlotted() {
 		return this.childNodes.length > 0 && [...this.childNodes].some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
 	}
@@ -29,7 +46,7 @@ var f = class extends n {
 		let e = !this.hasSlotted && d(this.value), t = this.numeric || this.format === "number" || this.format === "currency", n = this.trend !== void 0 || this.trendLabel !== void 0, r = this.tone ?? u(this.trend), a = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", o = !e && this.unit ? i`<span class="unit" part="unit">${this.unit}</span>` : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}${o}</div>
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${o}</div>
       ${n ? i`
         <div class="trend tone-${r}" part="trend">
           ${a ? i`<span aria-hidden="true">${a}</span> ` : ""}${this.trendLabel ?? ""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/components/info-field.md

@@ -24,7 +24,7 @@ and those are different states of the business. So the component owns the rule.
 
 | Name | Description |
 |------|-------------|
-| *(default)* | Value content; takes precedence over `value` |
+| *(default)* | Value content; takes precedence over `value`. An unnamed progress bar or meter here (`u-progress-bar`, `u-progress-ring`, `<progress>`, `<meter>`) is named by `label`; one that has its own `aria-label`/`aria-labelledby` keeps it |
 
 ## Properties