@iyulab/modern-app 0.18.5 → 0.18.7

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.18.7] - 2026-08-27
+
+### Fixed
+
+- **`SidebarButton`, `SidebarLink`, and `SidebarGroup` lost their accessible
+  name entirely in compact (icon-only) sidebar mode.** Compact mode hides the
+  visible text label (`part="label"`), and hiding it also removes it from the
+  accessibility tree — with no fallback, a screen reader announced these as
+  unnamed buttons/links. When `label` is a plain string, it is now promoted to
+  `aria-label` while compact; the visible label still drives the name when
+  expanded, so nothing changes there.
+
+## [0.18.6] - 2026-08-24
+
+### Fixed
+
+- **`SidebarLayout`'s sidebar and mobile-header backgrounds now fall back to
+  `--u-bg-color-raised` instead of `--u-panel-bg-color`.** The sidebar is persistent chrome, not
+  a floating overlay (card/menu/dialog) — `--u-panel-bg-color`'s light value is the same white as
+  the page background, so an app that never set `--app-sidebar-bg` got a sidebar visually
+  indistinguishable from the page (and, since `u-group-box` also read `--u-panel-bg-color`, from
+  its own cards too — a three-way collapse). `--u-bg-color-raised` is the token this library
+  already documents for chrome surfaces adjacent to the page background, and `u-group-box`
+  switched to it in `0.18.2`; the sidebar now matches. Visual change for any consumer relying on
+  the unset default — light: sidebar goes from `#FFFFFF` to `#FAFAFA`; dark: `#1E1E1E` to
+  `#2A2A2A`, which also fixes the reported card/input collapse (`u-input`'s background stayed on
+  `--u-panel-bg-color`, so the sidebar now reads one step lighter than form fields instead of
+  identical to them). `--app-sidebar-bg`/`--app-header-bg` overrides still take precedence
+  exactly as before.
+
 ## [0.18.5] - 2026-08-23
 
 ### Fixed

package/dist/_virtual/{_@oxc-project_runtime@0.146.0 → _@oxc-project_runtime@0.147.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.146.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.146.0 → _@oxc-project_runtime@0.147.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.146.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./ActionBar.styles.js";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoSection.styles.js";
 import { html as i } from "lit";

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/SidebarButton.js

@@ -1,13 +1,13 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarButton.styles.js";
-import { html as a } from "lit";
-import { customElement as o, property as s } from "lit/decorators.js";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarButton.ts
-var c = class extends n {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1;
 	}
@@ -15,8 +15,9 @@ var c = class extends n {
 		this.styles = [super.styles, i];
 	}
 	render() {
+		let e = this.compact && typeof this.label == "string" ? this.label : o;
 		return a`
-      <button part="base" ?compact=${this.compact}>
+      <button part="base" ?compact=${this.compact} aria-label=${e}>
         <u-icon part="icon"
           .lib=${this.lib}
           .name=${this.icon}
@@ -29,9 +30,9 @@ var c = class extends n {
     `;
 	}
 };
-t([s({
+t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
+}), e("design:type", Object)], l.prototype, "compact", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-button")], l);
 //#endregion
-export { c as SidebarButton };
+export { l as SidebarButton };

package/dist/components/SidebarGroup.js

@@ -1,14 +1,14 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { SidebarLink as i } from "./SidebarLink.js";
 import { styles as a } from "./SidebarGroup.styles.js";
-import { html as o } from "lit";
-import { customElement as s, property as c } from "lit/decorators.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarGroup.ts
-var l = class extends n {
+var u = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1, this.selected = !1, this.collapsed = !0, this.handleButtonClick = (e) => {
 			this.compact ? ((this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((e) => e instanceof i))?.renderRoot.querySelector("u-link"))?.click() : this.collapsed = !this.collapsed;
@@ -18,10 +18,12 @@ var l = class extends n {
 		this.styles = [super.styles, a];
 	}
 	render() {
+		let e = this.compact && typeof this.label == "string" ? this.label : s;
 		return o`
       <button part="header"
         ?compact=${this.compact}
         ?selected=${this.selected}
+        aria-label=${e}
         @click=${this.handleButtonClick}>
         <!--
           ⚠ ?hidden 을 걸지 않는다. 접힌 상태에서는 라벨과 캐럿이 모두 숨으므로,
@@ -51,15 +53,15 @@ var l = class extends n {
     `;
 	}
 };
-t([c({
+t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "compact", void 0), t([c({
+}), e("design:type", Boolean)], u.prototype, "compact", void 0), t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
+}), e("design:type", Boolean)], u.prototype, "selected", void 0), t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
+}), e("design:type", Boolean)], u.prototype, "collapsed", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "icon", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "lib", void 0), t([l({ type: String }), e("design:type", Object)], u.prototype, "label", void 0), u = t([c("u-sidebar-group")], u);
 //#endregion
-export { l as SidebarGroup };
+export { u as SidebarGroup };

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarLink.styles.js";
@@ -15,12 +15,14 @@ var l = class extends n {
 		this.styles = [super.styles, i];
 	}
 	render() {
+		let e = this.compact && typeof this.label == "string" ? this.label : o;
 		return a`
       <u-link
         .href=${this.href || "#"}
         .navigate=${this.navigate}
         .target=${this.target}
         aria-current=${this.selected ? "page" : o}
+        aria-label=${e}
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.styles.js";

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import "../components/SidebarSection.js";

package/dist/layouts/SidebarLayout.styles.js

@@ -76,7 +76,11 @@ var t = e`
     justify-content: space-between;
     gap: 8px;
     height: 100%;
-    background: var(--app-sidebar-bg, var(--u-panel-bg-color, #FFFFFF));
+    /* --u-panel-bg-color 가 아니라 --u-bg-color-raised — 사이드바는 카드·메뉴류의
+       "떠 있는 패널"이 아니라 상시 크롬이고, 그 구분이 정확히 두 토큰이 갈리는 지점이다
+       (light.css 293~298행 참조). 미설정 시 페이지(--u-bg-color)와 같은 흰색으로 앉아
+       사이드바·페이지·카드 삼중 무구분을 만들던 종전 폴백을 대체한다. */
+    background: var(--app-sidebar-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     border-right: 1px solid var(--u-border-color, #E0E0E0);
     transition: all 0.3s ease;
@@ -124,7 +128,7 @@ var t = e`
     justify-content: space-between;
     gap: 12px;
     padding: 16px;
-    background: var(--app-header-bg, var(--u-panel-bg-color, #FFFFFF));
+    background: var(--app-header-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-header-fg, var(--u-txt-color, #212121));
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     user-select: none;

package/package.json

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

package/skills/modern-app/references/components/action-bar.md

@@ -33,6 +33,15 @@ destructive ones separated on the trailing edge.
 | `main` | Primary action group |
 | `danger` | Destructive action group |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-bg-color` | Background when `sticky` |
+| `--u-border-color-weak` | Top border when `sticky` |
+| `--u-space-sm` | Gap between actions within a group |
+| `--u-space-md` | Host and sticky-mode vertical padding |
+
 ⚠ `sticky` adds **vertical** padding only. It deliberately does not stretch to the container
 edges with negative margins — that would assume the parent has exactly that much horizontal
 padding, and when the assumption is wrong the bar overflows and clips its own buttons.

package/skills/modern-app/references/components/empty-state.md

@@ -39,5 +39,20 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 |------|-------------|
 | `icon` · `title` · `description` · `actions` | The four regions |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--empty-state-icon-size` | Icon slot font size |
+| `--u-txt-color` | Title color |
+| `--u-txt-color-weak` | Host and description text color |
+| `--u-text-subtitle-size` / `-weight` / `-leading` | Title typography |
+| `--u-text-caption-size` / `-leading` | Description typography |
+| `--u-space-4xl` / `--u-space-xl` | Host padding (vertical / horizontal) |
+| `--u-space-md` | Icon-to-title spacing |
+| `--u-space-2xs` | Title-to-description spacing |
+| `--u-space-lg` | Actions row top spacing |
+| `--u-space-sm` | Gap between actions |
+
 ⚠ Default wording is **English** — register others with `registerLocale('ko', …)`, or pass
 `title`/`description` per screen.

package/skills/modern-app/references/components/group-box.md

@@ -39,3 +39,17 @@ a left edge without any consumer CSS.
 |------|-------------|
 | `header` · `title` · `actions` | Header row |
 | `body` | Body wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-text-subtitle-size` | Title font size |
+| `--u-text-subtitle-weight` | Title font weight |
+| `--u-text-subtitle-leading` | Title line height |
+| `--u-text-subtitle-tracking` | Title letter spacing |
+| `--u-bg-color-raised` | Surface background |
+| `--u-border-color-weak` | Border and header divider color |
+| `--u-radius-2xl` | Corner radius |
+| `--u-shadow-sm` | Drop shadow |
+| `--u-space-sm` / `--u-space-md` / `--u-space-xl` | Header/body spacing |

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

@@ -53,3 +53,18 @@ lone field it just pushes the value away from its label.
 | Part | Description |
 |------|-------------|
 | `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-text-caption-size` / `-weight` / `-leading` | Label typography |
+| `--u-txt-color-weak` | Label color, and blank-value (`—`) color |
+| `--u-space-3xs` | Label-to-value spacing |
+| `--u-text-body-size` / `-leading` | Value typography at default `size` |
+| `--u-text-label-weight` | Value font weight at default `size` |
+| `--u-text-body-weight` | Value font weight when `blank` |
+| `--u-txt-color` | Value color |
+| `--u-text-title-size` / `-weight` | Value typography when `size="lg"` |
+| `--u-success-color-strong` | `tone="positive"` color (value and trend) |
+| `--u-danger-color-strong` | `tone="negative"` color (value and trend) |

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

@@ -33,3 +33,12 @@ markup works inside a side panel.
 | Part | Description |
 |------|-------------|
 | `grid` | Grid container |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-space-lg` / `--u-space-xl` | Grid gap (row / column) |
+
+⚠ Column width is set via the `min` property, not a custom property — it's applied as an inline
+style per instance, so a `--info-min` override in a stylesheet would lose to it.

package/skills/modern-app/references/components/master-detail-layout.md

@@ -64,3 +64,15 @@ configurable breakpoint means measuring the host's own width in JavaScript and r
 | `divider` | Hairline between panes — hidden when there's no detail, or in overlay mode |
 | `detail` | Detail pane |
 | `detail-close` | Overlay-mode close button — hidden outside overlay mode |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-border-color-weak` | Divider color |
+| `--u-panel-bg-color` | Detail pane background in overlay mode |
+| `--u-shadow-lg` | Detail pane shadow in overlay mode |
+| `--u-space-sm` | Close-button offset from the overlay edge |
+
+⚠ The master pane's fixed width comes from the `masterSize` property (a CSS length, applied as
+an inline style), not a custom property.

package/skills/modern-app/references/components/page-header.md

@@ -42,5 +42,21 @@ screens nobody opens.
 | `title` · `subtitle` | Text elements |
 | `status` · `actions` | Slot wrappers |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-text-display-size` / `-weight` / `-leading` / `-tracking` | Title typography |
+| `--u-txt-color` | Title color |
+| `--u-text-caption-size` / `-weight` / `-leading` | Subtitle typography |
+| `--u-txt-color-weak` | Subtitle color |
+| `--u-link-txt-color` | Back-link color |
+| `--u-text-label-size` / `-weight` | Back-link typography |
+| `--u-space-2xl` | Host bottom margin |
+| `--u-space-md` | Row gap (heading vs. actions) |
+| `--u-space-sm` | Title-row and actions internal gap |
+| `--u-space-2xs` | Title-to-subtitle spacing |
+| `--u-space-3xs` | Back-arrow-to-label spacing |
+
 ⚠ Built-in strings default to **English** — this package is a generic layer and cannot pick a
 language. Register others with `registerLocale('ko', { back: '뒤로' })`.

package/skills/modern-app/references/components/wizard.md

@@ -82,3 +82,21 @@ clicked directly (a non-linear/"editable" stepper).
 | `step` | Each step button (`role="tab"`) |
 | `panel` | Wrapper around the active step's slotted content (`role="tabpanel"`) |
 | `actions` | Back/Next (or overridden) action row |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-space-xl` | Indicator-to-content gap |
+| `--u-space-lg` | Gap between content rows |
+| `--u-space-sm` | Indicator step gap, marker-to-label gap, actions row gap |
+| `--u-space-2xs` | Step button vertical padding |
+| `--u-txt-color-weak` | Step label color (default state) |
+| `--u-txt-color-disabled` | Step label color (`disabled`) |
+| `--u-border-color-strong` | Marker border (default state) |
+| `--u-primary-color` | Marker border/text and label color (`active`, `state-done`) |
+| `--u-danger-color` | Marker border/text and label color (`state-error`) |
+| `--u-txt-color-inverse` | Marker text color (`state-done`) |
+| `--u-text-caption-size` | Marker font size |
+| `--u-text-label-weight` | Marker font weight |
+| `--u-text-label-size` | Step label font size |