@q1travel/design-system 0.31.2 → 0.31.3

package/contracts/design.dark.md

@@ -541,7 +541,7 @@ CheckCircleFill accepts `tone?: 'default' | 'success'` (default `default`); succ
 **Status and feedback.** Banner, ProjectBanner, Note, ErrorCard, RegionErrorState, ErrorMessage, EmptyState, Badge, Pill, CheckCircleFill, StatusDot, ToastProvider, useToast, Feedback, PageFeedback, Spinner, LoadingDots, Skeleton, StatusPage, SkeletonIllustration, EmptyListIllustration.
 
 - Banner accepts a string `title` and paragraph-inline `children` (text and inline Link, no block elements). `action: BannerAction` is either `{ label, href }` or `{ label, onClick, loading?, disabled? }`, mutually exclusive. The exported `BannerAction` derives button events and states from ButtonProps. Buttons use `type="button"`, size sm, rounded, primary for announcements and secondary for tone strips, with layout class `banner__button-action`. Loading retains focus with aria-disabled and blocks activation; disabled takes priority and leaves the Tab order. Loading adds no aria-busy; Banner adds no role or live region. Progress ignores either action. Existing links and calls omitting new capabilities retain their complete markup; no existing consumer migration is required. Remove button calls and BannerAction imports before reverting this addition. Banner announces at page scope. Note is an inline aside. ErrorMessage sits against one field. ErrorCard replaces a region that failed to load. Picking the widest one available overstates the problem.
-- RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data: default `layout="center"` keeps the full empty view; `layout="inline"` is a small illustration or icon and regular secondary title row inside a section whose heading and actions belong to the host, without description, actions, or headingLevel. Inline accepts `illustration?: ReactNode`, using `--q1-space-16` (64px) for its width and preserving the artwork aspect ratio; illustration takes priority over icon with a development warning when both are supplied. Without illustration, existing icon-only and title-only calls stay unchanged. Center accepts a decorative `illustration?: ReactNode` in place of icon; when neither illustration nor icon is supplied, it renders `EmptyListIllustration variant="neutral"` inside the decorative `empty-state__illustration` slot. Explicit icons retain their slot with a transparent background in both themes. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly. Built-in `EmptyListIllustration` accepts `scene?: 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity'` and the compatible `variant?: 'complete' | 'neutral'`. Explicit scene takes priority; without scene, neutral maps to list and all other calls default to complete. Accepted #830 intentionally changes both standalone default complete and EmptyState default list artwork and internal SVG structure; the outer decorative span, class and 96×104 viewBox remain. Complete draws its own decorative check without depending on CheckCircleFill. All scenes use opaque neutral bodies, token radii, canonical stroke width, and exactly one brand-colored element (light primary-700, dark primary-900); geometry is identical across themes. Body contrast against the actual panel is at least 1.3:1. Both variants have no icon backplate. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
+- RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data: default `layout="center"` keeps the full empty view; `layout="inline"` is a small illustration or icon and regular primary-text title row inside a section whose heading and actions belong to the host, without description, actions, or headingLevel. Inline accepts `illustration?: ReactNode`, using `--q1-space-10` (40) for its width and preserving the artwork aspect ratio; illustration takes priority over icon with a development warning when both are supplied. Without illustration, icon-only and title-only calls use the same zero horizontal padding and primary title color. Center limits the decorative illustration slot to `--q1-space-16` (64), with no extra bottom margin: the existing `--q1-space-2` container gap gives 8 between illustration and title. Standalone artwork remains 96 wide; inline built-in scenes use simplified geometry with at most two narrative details, clear strokes, left alignment and vertical centering with the title. Standard inline usage pairs the 40-wide illustration with a visible title on its right in the same row (for example, 「还没有登录记录」). Use titleHidden only in the few contexts where the host already supplies a visible title. All inline variants use zero horizontal padding; illustration, icon and title-only content align with the host section body content edge. Hosts without padding supply their own inset. Inline titles use text-primary at the unchanged copy-14 size. Center accepts a decorative `illustration?: ReactNode` in place of icon; when neither illustration nor icon is supplied, it renders `EmptyListIllustration variant="neutral"` inside the decorative `empty-state__illustration` slot. Explicit icons retain their slot with a transparent background in both themes. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly. Built-in `EmptyListIllustration` accepts `scene?: 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity' | 'payment' | 'security' | 'integration'` and the compatible `variant?: 'complete' | 'neutral'`. Explicit scene takes priority; without scene, neutral maps to list and all other calls default to complete. Accepted #830 intentionally changes both standalone default complete and EmptyState default list artwork and internal SVG structure; the outer decorative span, class and 96×104 viewBox remain. Complete draws its own decorative check without depending on CheckCircleFill. The chart, inventory, orders, list, activity, task, product, purchase, supplier, store, team, search, complete, permission, notification, session, integration, payment and security scenes use white or background-100 surface bodies, gray-700 fine outlines, and low-saturation local color fills. Every internal detail contrasts at least 3:1 with each fill it crosses, without reduced opacity. Each illustration uses at most one brand-colored element, at a narrative position. Same-shape, unblurred offset shadows provide depth; rectangle corner radii use authored SVG geometry. Geometry is identical across themes. Both variants have no icon backplate. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
 - StatusPage defaults to a whole unavailable page with a caller-owned title, decorative SkeletonIllustration, plain-text description rendered as a paragraph, and actions. Its size="region" variant centers an icon or small illustration, title, description, and up to two actions inside a substantial content region, with a transparent background and content-driven height. ErrorCard covers a blocking compact failure; RegionErrorState is a compact retryable region message with its own status announcement; EmptyState means loading succeeded without content. StatusPage headingLevel accepts 1–6 (default 1); choose the next heading level under the host section. Existing omitted, 1 and 2 calls need no migration. StatusPage creates no live region; its host owns focus and announcements. StatusPage code is metadata only, never a message or spoken number.
 - RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
 - Toast is for non-blocking confirmation of something that already happened. It is not where an error the reader must act on belongs.

package/contracts/design.md

@@ -377,7 +377,9 @@ components:
     backgroundColor: "{semantic-colors.surface-panel}"
     hoverBackgroundColor: "{semantic-colors.surface-hover}"
     textColor: "{semantic-colors.text-primary}"
-    borderColor: "{semantic-colors.border}"
+    borderColor: "{semantic-colors.border-strong}"
+    hoverBorderColor: "{colors.gray-600}"
+    pressBorderColor: "{colors.gray-600}"
     typography: "{typography.label-14}"
     rounded: "{rounded.sm}"
     height: 40px
@@ -541,7 +543,7 @@ CheckCircleFill accepts `tone?: 'default' | 'success'` (default `default`); succ
 **Status and feedback.** Banner, ProjectBanner, Note, ErrorCard, RegionErrorState, ErrorMessage, EmptyState, Badge, Pill, CheckCircleFill, StatusDot, ToastProvider, useToast, Feedback, PageFeedback, Spinner, LoadingDots, Skeleton, StatusPage, SkeletonIllustration, EmptyListIllustration.
 
 - Banner accepts a string `title` and paragraph-inline `children` (text and inline Link, no block elements). `action: BannerAction` is either `{ label, href }` or `{ label, onClick, loading?, disabled? }`, mutually exclusive. The exported `BannerAction` derives button events and states from ButtonProps. Buttons use `type="button"`, size sm, rounded, primary for announcements and secondary for tone strips, with layout class `banner__button-action`. Loading retains focus with aria-disabled and blocks activation; disabled takes priority and leaves the Tab order. Loading adds no aria-busy; Banner adds no role or live region. Progress ignores either action. Existing links and calls omitting new capabilities retain their complete markup; no existing consumer migration is required. Remove button calls and BannerAction imports before reverting this addition. Banner announces at page scope. Note is an inline aside. ErrorMessage sits against one field. ErrorCard replaces a region that failed to load. Picking the widest one available overstates the problem.
-- RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data: default `layout="center"` keeps the full empty view; `layout="inline"` is a small illustration or icon and regular secondary title row inside a section whose heading and actions belong to the host, without description, actions, or headingLevel. Inline accepts `illustration?: ReactNode`, using `--q1-space-16` (64px) for its width and preserving the artwork aspect ratio; illustration takes priority over icon with a development warning when both are supplied. Without illustration, existing icon-only and title-only calls stay unchanged. Center accepts a decorative `illustration?: ReactNode` in place of icon; when neither illustration nor icon is supplied, it renders `EmptyListIllustration variant="neutral"` inside the decorative `empty-state__illustration` slot. Explicit icons retain their slot with a transparent background in both themes. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly. Built-in `EmptyListIllustration` accepts `scene?: 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity'` and the compatible `variant?: 'complete' | 'neutral'`. Explicit scene takes priority; without scene, neutral maps to list and all other calls default to complete. Accepted #830 intentionally changes both standalone default complete and EmptyState default list artwork and internal SVG structure; the outer decorative span, class and 96×104 viewBox remain. Complete draws its own decorative check without depending on CheckCircleFill. All scenes use opaque neutral bodies, token radii, canonical stroke width, and exactly one brand-colored element (light primary-700, dark primary-900); geometry is identical across themes. Body contrast against the actual panel is at least 1.3:1. Both variants have no icon backplate. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
+- RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data: default `layout="center"` keeps the full empty view; `layout="inline"` is a small illustration or icon and regular primary-text title row inside a section whose heading and actions belong to the host, without description, actions, or headingLevel. Inline accepts `illustration?: ReactNode`, using `--q1-space-10` (40) for its width and preserving the artwork aspect ratio; illustration takes priority over icon with a development warning when both are supplied. Without illustration, icon-only and title-only calls use the same zero horizontal padding and primary title color. Center limits the decorative illustration slot to `--q1-space-16` (64), with no extra bottom margin: the existing `--q1-space-2` container gap gives 8 between illustration and title. Standalone artwork remains 96 wide; inline built-in scenes use simplified geometry with at most two narrative details, clear strokes, left alignment and vertical centering with the title. Standard inline usage pairs the 40-wide illustration with a visible title on its right in the same row (for example, 「还没有登录记录」). Use titleHidden only in the few contexts where the host already supplies a visible title. All inline variants use zero horizontal padding; illustration, icon and title-only content align with the host section body content edge. Hosts without padding supply their own inset. Inline titles use text-primary at the unchanged copy-14 size. Center accepts a decorative `illustration?: ReactNode` in place of icon; when neither illustration nor icon is supplied, it renders `EmptyListIllustration variant="neutral"` inside the decorative `empty-state__illustration` slot. Explicit icons retain their slot with a transparent background in both themes. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly. Built-in `EmptyListIllustration` accepts `scene?: 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity' | 'payment' | 'security' | 'integration'` and the compatible `variant?: 'complete' | 'neutral'`. Explicit scene takes priority; without scene, neutral maps to list and all other calls default to complete. Accepted #830 intentionally changes both standalone default complete and EmptyState default list artwork and internal SVG structure; the outer decorative span, class and 96×104 viewBox remain. Complete draws its own decorative check without depending on CheckCircleFill. The chart, inventory, orders, list, activity, task, product, purchase, supplier, store, team, search, complete, permission, notification, session, integration, payment and security scenes use white or background-100 surface bodies, gray-700 fine outlines, and low-saturation local color fills. Every internal detail contrasts at least 3:1 with each fill it crosses, without reduced opacity. Each illustration uses at most one brand-colored element, at a narrative position. Same-shape, unblurred offset shadows provide depth; rectangle corner radii use authored SVG geometry. Geometry is identical across themes. Both variants have no icon backplate. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
 - StatusPage defaults to a whole unavailable page with a caller-owned title, decorative SkeletonIllustration, plain-text description rendered as a paragraph, and actions. Its size="region" variant centers an icon or small illustration, title, description, and up to two actions inside a substantial content region, with a transparent background and content-driven height. ErrorCard covers a blocking compact failure; RegionErrorState is a compact retryable region message with its own status announcement; EmptyState means loading succeeded without content. StatusPage headingLevel accepts 1–6 (default 1); choose the next heading level under the host section. Existing omitted, 1 and 2 calls need no migration. StatusPage creates no live region; its host owns focus and announcements. StatusPage code is metadata only, never a message or spoken number.
 - RegionErrorState replaces only the failed region in place (table body under a kept header, card body, page section) while the rest of the page stays usable: neutral surface, danger color on the icon only, polite `role=status` by default, built-in retry that keeps focus while `retrying`. ErrorCard is for a failure that blocks the current task (danger card, assertive `role=alert`). EmptyState is a successful load with no data. `layout="strip"` adds a full-width neutral strip for list failures and load-more rows, with retry always inside its right edge. See `implementation-map.md` for the retry and announcement boundary.
 - Toast is for non-blocking confirmation of something that already happened. It is not where an error the reader must act on belongs.

package/contracts/implementation-map.md

@@ -162,4 +162,12 @@ Accepted 2026-11-02 (#761): ThemeSwitcher keeps a single outer group border. Opt
 
 ## EmptyState title visibility
 
-Accepted #568: `EmptyState` supports `titleHidden?: boolean` in both center and inline layouts. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. Inline accepts `illustration?: ReactNode` with width `--q1-space-16` (64px), preserving the artwork aspect ratio; illustration takes priority over icon and supplying both emits a development warning. Description, actions and headingLevel remain center-only. Existing inline icon-only and title-only calls retain their exact rendering. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly.
+Accepted #568: `EmptyState` supports `titleHidden?: boolean` in both center and inline layouts. Both layouts accept `titleHidden?: boolean`: true adds `empty-state--title-hidden` to the existing root and `q1-sr-only` to the required title, preserving its p or h2–h6 tag, text and accessibility semantics. Center keeps illustration/icon, optional description and actions; inline keeps its small illustration or icon. Inline accepts `illustration?: ReactNode` with width `--q1-space-10` (40), with simplified geometry, left alignment and vertical centering with the title, preserving the artwork aspect ratio; illustration takes priority over icon and supplying both emits a development warning. Inline does not accept description, actions or headingLevel. Inline icon-only and title-only calls share zero horizontal padding and primary title color. The hidden title takes no layout space; remaining siblings keep the existing gap and margins, and an illustration/icon alone has no trailing margin. Omitted or false preserves the existing DOM, classes and styles exactly.
+
+Standard inline usage pairs the 40-wide illustration with a visible title on its right in the same row (for example, 「还没有登录记录」). Use titleHidden only in the few contexts where the host already supplies a visible title. All inline variants use zero horizontal padding; illustration, icon and title-only content align with the host section body content edge. Hosts without padding supply their own inset. Inline titles use text-primary at the unchanged copy-14 size.
+
+### EmptyState panel
+
+Accepted #860: `layout="panel"` is a full-width compact surface for empty tab or filter results. It requires a visible `title: string`; optional `description: string`, `actions: ReactNode` and `headingLevel: 2 | 3 | 4 | 5 | 6` (default `p`) retain text and native action semantics. `icon`, `illustration` and `titleHidden` are forbidden only in this branch. Center and inline types and byte-for-byte markup remain unchanged.
+
+DOM: `div.empty-state.empty-state--panel > div.empty-state__body` contains the title and optional `p.empty-state__desc`, followed by optional sibling `div.empty-state__actions`. Only `empty-state--panel` and `empty-state__body` are new classes. The static root has no live-region semantics. Existing subtle background, radius-3, space-4/6, copy-14, semibold primary title and regular secondary description tokens provide hierarchy in both themes, with text contrast at least 4.5:1. A one-pixel border uses the existing border-subtle token and space-1 divided by four; the edge remains distinguishable from the page in both themes without darkening the fill. Actions align vertically at the right on wide screens and below the text at the left on narrow screens; no horizontal overflow.

package/contracts/interface-guidelines.md

@@ -243,8 +243,18 @@ Component pages follow one skeleton so a reader who has used one page can find t
 
 ### Empty illustrations
 
-Accepted #830: decorative empty illustrations share a 96×104 viewBox, radius-3 outer frames, radius-1 clips, and ICON_STROKE_WIDTH round strokes. All scene geometry, including half the computed stroke width around each element, stays inside the viewBox. Inventory integrates the bell into the shelf; permission centers a complete padlock on the panel; product uses a front-facing label. No detached brand decorations. The family specimen uses one site-themed card per scene, four columns on wide screens and two on narrow screens. Opaque neutral bodies must contrast at least 1.3:1 against the actual card background. Use no gradients, shadows or particles; exactly one element uses primary-700 in light and primary-900 in dark, with identical geometry. Scene selects list, search, complete, chart, inventory, orders, product, permission, purchase, supplier, team, notification, store, task, session or activity. Scene takes precedence over the compatible variant; absent scene, neutral maps to list and all other calls to complete. Standalone complete and EmptyState list defaults intentionally receive new artwork and internal SVG structure. Keep the decorative outer span, aria-hidden=true, non-focusable SVG and text-owned state meaning. Complete owns its check; CheckCircleFill semantics are unchanged.
+Accepted #830: decorative empty illustrations share a 96×104 viewBox and ICON_STROKE_WIDTH round strokes. All scene geometry, including half the computed stroke width around each element, stays inside the viewBox. The family specimen uses one site-themed card per scene, four columns on wide screens and two on narrow screens. At most one element uses primary-700 in light and primary-900 in dark, with identical geometry. Scene selects list, search, complete, chart, inventory, orders, product, permission, purchase, supplier, team, notification, store, task, session, activity, payment, security or integration. Scene takes precedence over the compatible variant; absent scene, neutral maps to list and all other calls to complete. Keep the decorative outer span, aria-hidden=true, non-focusable SVG and text-owned state meaning. Complete owns its check; CheckCircleFill semantics are unchanged.
+
+Accepted #839: chart, inventory, orders, list, activity, task, product, purchase, supplier, store, team, search, complete, permission, notification, session, integration, payment and security use background-100 surfaces, gray-700 outlines, local teal/amber/green/blue-300 fills and matching hue-900 detail strokes in light; dark uses gray-700 detail strokes, with inventory blue-300 to avoid a brown cast; session and security use blue-300, payment uses green-300. Adjacent documentation gallery cells use distinct hues; reorder the gallery without changing individual scene assets. Every internal detail contrasts at least 3:1 with each fill it crosses, without reduced opacity. Local color covers 20–35% of the main geometric bounding rectangle; no opaque gray body or purple backplate. At most one primary element appears, at a functional narrative position. Same-shape, unblurred shadows offset by two viewBox units use gray-alpha-100 in light and gray-alpha-200 in dark. Internal rectangle radii remain authored SVG geometry. No gradients, blur or particles.
 
 ### EmptyState illustration-only presentation
 
-Accepted #568: `titleHidden` visually hides the required title using `q1-sr-only`, while retaining its original paragraph or heading semantics and accessible text. Illustration/icon remains decorative; description and actions are independent optional center content. Inline accepts a small decorative `illustration?: ReactNode` at `--q1-space-16` (64px) width, preserving its aspect ratio; illustration takes priority over icon, with a development warning when both are supplied. Inline description, actions and headingLevel remain unsupported. Omitted or false leaves the default presentation unchanged; existing inline calls without illustration retain their rendering.
+Accepted #568: `titleHidden` visually hides the required title using `q1-sr-only`, while retaining its original paragraph or heading semantics and accessible text. Illustration/icon remains decorative; description and actions are independent optional center content. Inline accepts a small decorative `illustration?: ReactNode` at `--q1-space-10` (40) width, preserving its aspect ratio; illustration takes priority over icon, with a development warning when both are supplied. Inline description, actions and headingLevel remain unsupported. Omitted or false leaves the default presentation unchanged; inline calls without illustration share the zero horizontal padding and primary title color.
+
+Inline built-in illustrations use space-10 (40), simplified geometry with at most two narrative details, clear strokes and no public size prop. The illustration aligns left and centers vertically with its title. Center geometry, space-16 and spacing remain unchanged. Standard inline usage pairs the 40-wide illustration with a visible title on its right in the same row (for example, 「还没有登录记录」). Use titleHidden only in the few contexts where the host already supplies a visible title. All inline variants use zero horizontal padding; illustration, icon and title-only content align with the host section body content edge. Hosts without padding supply their own inset. Inline titles use text-primary at the unchanged copy-14 size.
+
+### EmptyState panel
+
+Accepted #860: `layout="panel"` is a full-width compact surface for empty tab or filter results. It requires a visible `title: string`; optional `description: string`, `actions: ReactNode` and `headingLevel: 2 | 3 | 4 | 5 | 6` (default `p`) retain text and native action semantics. `icon`, `illustration` and `titleHidden` are forbidden only in this branch. Center and inline types and byte-for-byte markup remain unchanged.
+
+DOM: `div.empty-state.empty-state--panel > div.empty-state__body` contains the title and optional `p.empty-state__desc`, followed by optional sibling `div.empty-state__actions`. Only `empty-state--panel` and `empty-state__body` are new classes. The static root has no live-region semantics. Existing subtle background, radius-3, space-4/6, copy-14, semibold primary title and regular secondary description tokens provide hierarchy in both themes, with text contrast at least 4.5:1. A one-pixel border uses the existing border-subtle token and space-1 divided by four; the edge remains distinguishable from the page in both themes without darkening the fill. Actions align vertically at the right on wide screens and below the text at the left on narrow screens; no horizontal overflow.

package/dist-pkg/design-system.d.ts

@@ -168,7 +168,7 @@ export declare type BannerAction = {
 export declare type BannerProps = {
     /** 粗体导语，一眼点题。 */
     title: string;
-    /** 段落内文本或行内内容，可放 Link；组件统一用「 — 」与导语衔接。 */
+    /** 段落内文本或行内内容，可放 Link；非空白导语用「 — 」衔接，空白导语仅显示正文。 */
     children?: ReactNode;
     /** 未设 = 页顶公告形态；设值 = 页内卡条形态（neutral 为中性卡条）。 */
     tone?: BannerTone;
@@ -1118,9 +1118,9 @@ export declare type EmptyListIllustrationProps = {
     variant?: 'complete' | 'neutral';
 };
 
-export declare type EmptyListIllustrationScene = 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity';
+export declare type EmptyListIllustrationScene = 'list' | 'search' | 'complete' | 'chart' | 'inventory' | 'orders' | 'product' | 'permission' | 'purchase' | 'supplier' | 'team' | 'notification' | 'store' | 'task' | 'session' | 'activity' | 'payment' | 'security' | 'integration';
 
-export declare function EmptyState({ icon, illustration, title, titleHidden, description, actions, headingLevel, layout, }: {
+export declare function EmptyState({ icon, illustration, title, titleHidden, description, actions, headingLevel, layout, }: ({
     icon?: ReactNode;
     title: string;
     /** 仅视觉隐藏标题，保留原标签与可访问文本。 */
@@ -1139,6 +1139,15 @@ export declare function EmptyState({ icon, illustration, title, titleHidden, des
     description?: never;
     actions?: never;
     headingLevel?: never;
+}) | {
+    layout: 'panel';
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    icon?: never;
+    illustration?: never;
+    titleHidden?: never;
 })): JSX.Element;
 
 /** Public host for consumer-owned sibling portals. Package overlays share this Foundation root. */