@iyulab/modern-app 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## [0.21.0] - 2026-09-17
+
+### Added
+
+- **`translate()` — a reactive translation directive**, exported from `@iyulab/modern-app`. It is
+  bound to the i18next instance `app.load({ i18n })` initializes and re-renders its part when the
+  language changes, when resources arrive later, and once i18next finishes initializing (until then
+  it renders an empty string rather than the key). A disconnected template stops listening and
+  catches up when reconnected. Sidebar item labels already accept a directive result, so
+  `label: translate('nav::home')` now works without a third-party package; the documentation
+  previously pointed to `lit-i18n` for this. Migrating is an import swap plus dropping
+  `initLitI18n` from `i18n.plugins`.
+
+### Fixed
+
+- **A collapsed sidebar no longer leaves translated items without an accessible name.** In the
+  collapsed state the item label was removed with `hidden`, which also removes it from the
+  accessibility tree; an `aria-label` was substituted only when the label was a plain string, so an
+  item labelled with a directive was announced with no name. The label is now hidden visually and
+  stays in the accessibility tree, so it names the link, button or group whatever its type. Items
+  no longer carry an `aria-label` in the collapsed state.
+
+## [0.20.1] - 2026-09-17
+
+### Fixed
+
+- **`u-master-detail-layout` no longer adds a trailing blank page when a single pane is printed.**
+  The layout is a flex row with scrolling panes, and both keep the bottom margin of a pane's last
+  block inside the layout, so the layout grew by that margin; content ending just short of a page
+  boundary then spilled onto a page holding only the margin. When a single pane is showing
+  (overlay mode, or no detail) the layout now prints as block flow, which lets the margin collapse
+  past it and be truncated at the page break. Side-by-side printing is unchanged: two columns are
+  flex items and each keeps its own margin.
+
+### Added
+
+- `u-master-detail-layout` exposes a `:state(detail)` custom state while its `detail` slot has
+  content.
+
+### Changed
+
+- Requires `@iyulab/router` `^0.15.1`, which prints the route outlet as a block box. The shell's
+  guarantee that a screen's trailing margin collapses out of the page in print depends on it.
+
 ## [0.20.0] - 2026-09-16
 
 ### Added

package/README.md

@@ -113,8 +113,8 @@ await app.load({
 app.i18n.t('common::greeting');
 app.i18n.changeLanguage('ko');
 
-// Reactive translations in Lit templates
-import { translate } from 'lit-i18n';
+// Reactive translations in Lit templates — and in shell labels
+import { translate } from '@iyulab/modern-app';
 html`<p>${translate('common::greeting')}</p>`;
 ```
 
@@ -263,7 +263,7 @@ contrast likewise comes from that package's tokens.
 | [layout.md](./docs/layout.md) | Sidebar layout, all menu item types, responsive behaviour |
 | [theme.md](./docs/theme.md) | Theme init, runtime switching, token layers, shell surface tokens |
 | [notifications.md](./docs/notifications.md) | Toast methods and options |
-| [i18n.md](./docs/i18n.md) | i18next setup, plugins, lit-i18n usage |
+| [i18n.md](./docs/i18n.md) | i18next setup, plugins, the `translate()` directive |
 | [configuration.md](./docs/configuration.md) | Full TypeScript interface reference |
 
 ## License

package/dist/components/MasterDetailLayout.d.ts

@@ -32,6 +32,9 @@ type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
  *   `PageHeader`/`GroupBox`/`ActionBar` 의 고정 중단점 관행을 벗어나려는 것이 아니다.
  *
  * 오버라이드: `part`(host·master·divider·detail·detail-close) + slot 치환.
+ *
+ * detail 슬롯이 채워져 있는 동안 `:state(detail)` 커스텀 상태를 노출한다
+ * (`ElementInternals.states`) — 속성으로 반사하지 않는다(`u-select:state(open)` 과 같은 관례).
  */
 export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -50,6 +53,13 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     locale: string;
     /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasDetail;
+    /**
+     * `:state(detail)` 을 싣는 자리. 인쇄 규칙이 «한 판만 보이는가» 를 호스트에서 갈라야 해서
+     * 생겼다(styles 의 인쇄 절 참조).
+     * ⚠생성자에서 한 번만 붙인다 — `attachInternals()` 는 같은 인스턴스에 두 번 부르면
+     *   `NotSupportedError` 이고, `connectedCallback` 은 재연결마다 다시 돈다.
+     */
+    private readonly internals;
     private resizeObserver?;
     connectedCallback(): void;
     /**

package/dist/components/MasterDetailLayout.js

@@ -11,7 +11,7 @@ import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/MasterDetailLayout.ts
 var u = class extends n {
 	constructor(...e) {
-		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.handleDetailClose = () => {
+		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = i(e.target);
@@ -32,7 +32,7 @@ var u = class extends n {
 		super.disconnectedCallback(), this.resizeObserver?.disconnect();
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
 		return o`

package/dist/components/MasterDetailLayout.styles.js

@@ -74,8 +74,33 @@ var t = e`
    * 되돌려 전부 인쇄한다 — 덮여 있던 master 는 찍지 않는다. detail 이 비어 있으면 master 가
    * 화면 그대로 인쇄된다(covered 는 detail 이 채워졌을 때만 붙는다).
    * 나란히 배치 모드는 바꾸지 않는다 — 두 판이 부모 높이를 따라 풀린다.
+   *
+   * 🔴**한 판만 보일 때는 flex 뼈대를 걷는다**(오버레이 모드 · detail 없음). flex 호스트와
+   *   overflow: auto 판은 둘 다 독립 서식 문맥이라, 화면 마지막 블록의 아래 여백이 레이아웃
+   *   «안» 에 갇혀 그만큼 높이가 는다 — 내용 끝이 쪽 경계에서 그 여백 이내에 있으면 여백만 담긴
+   *   빈 꼬리 쪽이 찍힌다(router 아웃렛의 인쇄 수정과 같은 기전). 한 판뿐이면 flex 가 인쇄에서
+   *   할 일이 없으므로 블록 흐름으로 돌려 여백이 문서 끝까지 접히게 한다(쪽 경계에서 잘린다).
+   * ⚠**나란히 배치(detail 있음 · 오버레이 아님)는 원리적으로 가둔다** — 두 열은 flex 항목이고
+   *   flex 항목은 항상 독립 서식 문맥이다. 화면에 보인 두 열을 그대로 찍는 것이 계약이다.
+   * ⚠:state() 를 모르는 엔진에서는 그 선택자만 무효가 되도록 **규칙을 나눴다** — 선택자 목록에
+   *   섞으면 목록 전체가 버려져 오버레이 규칙까지 사라진다.
    */
   @media print {
+    :host([overlay]) {
+      display: block;
+      height: auto;
+    }
+    :host(:not(:state(detail))) {
+      display: block;
+      height: auto;
+    }
+    :host([overlay]) .master,
+    :host([overlay]) .detail {
+      overflow: visible;
+    }
+    :host(:not(:state(detail))) .master {
+      overflow: visible;
+    }
     .detail-close,
     :host([overlay]) .detail-close,
     :host([overlay]) .master.covered {

package/dist/components/SidebarButton.js

@@ -3,11 +3,11 @@ import t from "../_virtual/_@oxc-project_runtime@0.150.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, nothing as o } from "lit";
-import { customElement as s, property as c } from "lit/decorators.js";
+import { html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarButton.ts
-var l = class extends n {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1;
 	}
@@ -15,24 +15,23 @@ var l = 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} aria-label=${e}>
+      <button part="base" ?compact=${this.compact}>
         <u-icon part="icon"
           .lib=${this.lib}
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
-        <span part="label" ?hidden=${this.compact}>
+        <span part="label" ?compact=${this.compact}>
           ${this.label}
         </span>
       </button>
     `;
 	}
 };
-t([c({
+t([s({
 	type: Boolean,
 	reflect: !0
-}), 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);
+}), 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);
 //#endregion
-export { l as SidebarButton };
+export { c as SidebarButton };

package/dist/components/SidebarButton.styles.js

@@ -55,6 +55,22 @@ var t = e`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /*
+   * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
+   * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
+   */
+  [part~='label'][compact] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/SidebarGroup.js

@@ -4,11 +4,11 @@ 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, nothing as s } from "lit";
-import { customElement as c, property as l } from "lit/decorators.js";
+import { html 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/SidebarGroup.ts
-var u = class extends n {
+var l = 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,12 +18,10 @@ var u = 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 을 걸지 않는다. 접힌 상태에서는 라벨과 캐럿이 모두 숨으므로,
@@ -36,7 +34,7 @@ var u = class extends n {
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
-        <span class="label" part="label" ?hidden=${this.compact}>
+        <span class="label" part="label" ?compact=${this.compact}>
           ${this.label}
         </span>
         <u-icon class="caret" part="caret" ?hidden=${this.compact}
@@ -53,15 +51,15 @@ var u = class extends n {
     `;
 	}
 };
-t([l({
+t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], u.prototype, "compact", void 0), t([l({
+}), e("design:type", Boolean)], l.prototype, "compact", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], u.prototype, "selected", void 0), t([l({
+}), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), 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);
+}), 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);
 //#endregion
-export { u as SidebarGroup };
+export { l as SidebarGroup };

package/dist/components/SidebarGroup.styles.js

@@ -93,6 +93,22 @@ var t = e`
     height: 0;
     opacity: 0;
   }
+
+  /*
+   * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
+   * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
+   */
+  [part~='label'][compact] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/SidebarLink.js

@@ -15,14 +15,12 @@ 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"
@@ -30,7 +28,7 @@ var l = class extends n {
             .name=${this.icon}
             .fallback=${r}
           ></u-icon>
-          <span part="label" ?hidden=${this.compact}>
+          <span part="label" ?compact=${this.compact}>
             ${this.label}
           </span>
         </div>

package/dist/components/SidebarLink.styles.js

@@ -69,6 +69,22 @@ var t = e`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /*
+   * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
+   * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
+   */
+  [part~='label'][compact] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { ActionBar } from './components/ActionBar.js';
 export { MasterDetailLayout } from './components/MasterDetailLayout.js';
 export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
+export { translate } from './translate.js';
 export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
 export type { ModernAppLocaleStrings } from './internals/locale.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';

package/dist/index.js

@@ -10,7 +10,8 @@ import { EmptyState as f } from "./components/EmptyState.js";
 import { ActionBar as p } from "./components/ActionBar.js";
 import { MasterDetailLayout as m } from "./components/MasterDetailLayout.js";
 import { Wizard as h } from "./components/Wizard.js";
+import { translate as g } from "./translate.js";
 //#region src/index.ts
-var g = t;
+var _ = t;
 //#endregion
-export { p as ActionBar, f as EmptyState, c as GroupBox, u as InfoField, l as InfoSection, m as MasterDetailLayout, s as PageHeader, e as ScreenObserver, h as Wizard, t as app, g as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, d as isBlank, a as registerLocale, o as setDefaultLocale };
+export { p as ActionBar, f as EmptyState, c as GroupBox, u as InfoField, l as InfoSection, m as MasterDetailLayout, s as PageHeader, e as ScreenObserver, h as Wizard, t as app, _ as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, d as isBlank, a as registerLocale, o as setDefaultLocale, g as translate };

package/dist/translate.d.ts

@@ -0,0 +1,39 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { TOptions } from 'i18next';
+/**
+ * `app.load({ i18n })` 가 초기화하는 i18next 에 붙는 반응형 번역 디렉티브.
+ *
+ * ★**왜 이 패키지가 갖는가**: i18next 를 초기화하고(`app.load`) 노출하는(`app.i18n`) 것이 이미 이
+ *   패키지이고, 셸 설정의 `label` 은 `string | DirectiveResult` 로 **디렉티브를 받도록** 설계돼 있다.
+ *   그런데 그 디렉티브가 없어서 소비자는 서드파티를 따로 들여와야 했다 — 이미 소유한 개념의
+ *   프리미티브를 내놓지 않은 자리다.
+ *
+ * ★**구독은 Lit 의 연결 수명 주기로 관리한다** — `disconnected()` 에서 풀고 `reconnected()` 에서 다시
+ *   붙으며 그 사이의 변경을 따라잡는다. 주기적으로 끊긴 파트를 훑는 레지스트리가 필요 없다.
+ *
+ * 갱신 계기는 셋이다: 언어 변경 · 나중에 도착한 리소스(백엔드가 네임스페이스를 늦게 싣는 경우) ·
+ * 초기화 완료(셸 설정은 초기화 **전에** 만들어진다 — 그때는 빈 문자열을 그린다. 키를 그리면
+ * 번역 전 키가 화면에 잠깐 비친다).
+ *
+ * @example
+ * ```ts
+ * import { translate } from '@iyulab/modern-app';
+ * html`<h1>${translate('common::title')}</h1>`;
+ * app.load({ layout: { type: 'sidebar', main: [{ type: 'link', label: translate('nav::home'), href: '/' }] } });
+ * ```
+ */
+declare class TranslateDirective extends AsyncDirective {
+    private keys;
+    private options?;
+    private subscribed;
+    render(keys: string | string[], options?: TOptions): string;
+    protected disconnected(): void;
+    protected reconnected(): void;
+    private translate;
+    private readonly refresh;
+    private subscribe;
+    private unsubscribe;
+}
+/** 현재 언어의 번역을 그리고, 언어·리소스가 바뀌면 그 자리를 다시 그린다. */
+export declare const translate: (keys: string | string[], options?: TOptions | undefined) => import('lit-html/directive.js').DirectiveResult<typeof TranslateDirective>;
+export {};

package/dist/translate.js

@@ -0,0 +1,31 @@
+import e from "i18next";
+import { AsyncDirective as t, directive as n } from "lit/async-directive.js";
+var r = n(class extends t {
+	constructor(...e) {
+		super(...e), this.keys = "", this.subscribed = !1, this.refresh = () => {
+			this.setValue(this.translate());
+		};
+	}
+	render(e, t) {
+		return this.keys = e, this.options = t, this.isConnected && this.subscribe(), this.translate();
+	}
+	disconnected() {
+		this.unsubscribe();
+	}
+	reconnected() {
+		this.subscribe(), this.refresh();
+	}
+	translate() {
+		if (!e.isInitialized) return "";
+		let t = e.t(this.keys, this.options);
+		return typeof t == "string" ? t : "";
+	}
+	subscribe() {
+		this.subscribed || (this.subscribed = !0, e.on("languageChanged", this.refresh), e.on("initialized", this.refresh), e.store?.on("added", this.refresh));
+	}
+	unsubscribe() {
+		this.subscribed && (this.subscribed = !1, e.off("languageChanged", this.refresh), e.off("initialized", this.refresh), e.store?.off("added", this.refresh));
+	}
+});
+//#endregion
+export { r as translate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -59,7 +59,7 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.15.0",
+    "@iyulab/router": "^0.15.1",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },

package/skills/modern-app/SKILL.md

@@ -131,11 +131,14 @@ await app.load({
 app.i18n.t('namespace::key');
 ```
 
-Use in Lit templates with `lit-i18n`:
+Use in Lit templates — and as a sidebar item `label` — with the `translate()` directive. It
+re-renders when the language changes or resources arrive, and renders an empty string until i18next
+is initialized:
 
 ```typescript
-import { translate } from 'lit-i18n';
+import { translate } from '@iyulab/modern-app';
 html`<p>${translate('namespace::greeting')}</p>`;
+// layout: { main: [{ type: 'link', label: translate('nav::home'), href: '/' }] }
 ```
 
 ---

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

@@ -59,6 +59,14 @@ In overlay mode, a filled detail prints in full, in flow, instead of the covered
 close button is not printed; with the detail empty, the master prints. The overlay state is the
 one measured on screen when printing starts.
 
+When a single pane is showing (overlay mode, or no detail), the layout prints as ordinary block
+flow rather than a flex row with scrolling panes. Both of those create an independent formatting
+context, which would keep the bottom margin of the pane's last block inside the layout and make
+the layout that much taller — enough, when content ends just short of a page boundary, to print
+a trailing page holding nothing but the margin. In block flow the margin collapses past the layout
+and is truncated at the page break. Side by side, the two panes are flex items and each keeps its
+own margin; that is inherent to printing two columns.
+
 ## Slots
 
 | Name | Description |
@@ -80,6 +88,16 @@ one measured on screen when printing starts.
 |-------|--------|------------|--------------|
 | `detail-close` | — | No | Overlay-mode close button clicked. Clear the `detail` slot's content in response — the component does not do this for you |
 
+## Custom States
+
+| State | Description |
+|-------|-------------|
+| `:state(detail)` | Present while the `detail` slot has content |
+
+```css
+u-master-detail-layout:state(detail)::part(master) { border-inline-end: 0; }
+```
+
 ## CSS Parts
 
 | Part | Description |