@eui/eds-react 22.0.0-alpha.14 → 22.0.0-alpha.16

package/showcase/doc-page.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { type JsxToStringOptions } from './jsx-to-string.js';
+/**
+ * Shared port of the Angular showcase `doc-page` primitives
+ * (`packages/eui/packages/showcase/src/lib/components/doc-page`), reused by BOTH standalone
+ * showcase hosts (`eui-showcase-react` and `eui-showcase-webcomponents`). Two pieces:
+ *
+ *  - `ShowcaseDocPage` — the page frame: a title header plus a right-hand "On this page"
+ *    navigation generated from the samples projected inside it (a flat list, deduped by
+ *    label, in registration order), with click-to-scroll.
+ *  - `ShowcaseDocSample` — one sample block: a title, a copy-link button, and a per-sample
+ *    **Code / Hide Code** toggle that reveals the auto-generated code snippet beneath the
+ *    live preview (mirrors the Angular per-sample code button).
+ *
+ * Samples register themselves with the page through `DocPageContext` (the React analog of
+ * the Angular `contentChildren(DocSampleComponent)` query) so the nav can list them without
+ * the author hand-maintaining a second list.
+ *
+ * The two hosts differ only in the snippet dialect (React JSX vs. HTML custom elements); a
+ * host sets it once via `ShowcaseDocPage`'s `codeDialect` prop, which flows to every sample.
+ */
+/** Preview layout for a sample. `bare`/`block` both mean "no flex wrapper" (host owns layout). */
+export type ShowcaseSampleLayout = 'row' | 'column' | 'bare' | 'block';
+/**
+ * `ShowcaseDocPage` — the doc-page frame. Renders the component title, the projected samples
+ * (its `children`), and a sticky "On this page" nav built from the samples that registered
+ * themselves. Clicking a nav item scrolls to that sample.
+ */
+export declare function ShowcaseDocPage({ id, label, subLabel, codeDialect, children }: {
+    id: string;
+    label?: string;
+    subLabel?: string;
+    /** Snippet dialect for this page's samples: `'jsx'` (React) or `'html'` (WC). */
+    codeDialect?: NonNullable<JsxToStringOptions['dialect']>;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * `ShowcaseDocSample` — one titled sample with a per-sample **Code / Hide Code** toggle.
+ *
+ * The code snippet is auto-generated by serializing `children` back to source (see
+ * `jsxToString`, in the enclosing page's dialect); pass `code` to override it (e.g. to show a
+ * `.map(...)` loop instead of its expanded elements). `layout` toggles the preview between a
+ * wrapping row (default), a column, or `bare`/`block` (no flex wrapper at all — the sample's
+ * own top-level element controls the layout, mirroring the Angular doc-sample's bare
+ * `<ng-content/>`). `category` groups the sample in the page nav (matching the Angular
+ * `category` input); omit it or use `Base` for the primary group.
+ */
+export declare function ShowcaseDocSample({ id, label, category, code, layout, children }: {
+    id?: string;
+    label?: string;
+    category?: string;
+    code?: string;
+    layout?: ShowcaseSampleLayout;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=doc-page.d.ts.map

package/showcase/doc-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doc-page.d.ts","sourceRoot":"","sources":["../../src/showcase/doc-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE1E;;;;;;;;;;;;;;;;;;GAkBG;AAEH,kGAAkG;AAClG,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAoCvE;;;;GAIG;AACH,wBAAgB,eAAe,CAC3B,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAmB,EAAE,QAAQ,EAAE,EAAE;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,WAAW,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GACF,KAAK,CAAC,GAAG,CAAC,OAAO,CAsEnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAc,EAAE,QAAQ,EAAE,EAAE;IACrD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GACF,KAAK,CAAC,GAAG,CAAC,OAAO,CAuEnB"}

package/showcase/doc-page.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createContext, useContext, useId, useMemo, useRef, useState, useCallback } from 'react';
+import { jsxToString } from './jsx-to-string.js';
+const DocPageContext = createContext(null);
+/**
+ * Collapse repeated labels to a single nav entry (the first sample with that label) — a
+ * section with several untitled sub-samples should show one nav item per label, not one per
+ * block. The nav item scrolls to the first occurrence.
+ */
+function dedupeByLabel(list) {
+    const seen = new Set();
+    return list.filter((s) => {
+        const key = s.label || s.id;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+/**
+ * `ShowcaseDocPage` — the doc-page frame. Renders the component title, the projected samples
+ * (its `children`), and a sticky "On this page" nav built from the samples that registered
+ * themselves. Clicking a nav item scrolls to that sample.
+ */
+export function ShowcaseDocPage({ id, label, subLabel, codeDialect = 'jsx', children }) {
+    const [samples, setSamples] = useState([]);
+    const [activeId, setActiveId] = useState(undefined);
+    const orderRef = useRef([]);
+    const register = useCallback((sample) => {
+        setSamples((prev) => {
+            if (prev.some(s => s.id === sample.id)) {
+                return prev.map(s => (s.id === sample.id ? sample : s));
+            }
+            if (!orderRef.current.includes(sample.id))
+                orderRef.current.push(sample.id);
+            return [...prev, sample];
+        });
+    }, []);
+    const unregister = useCallback((sampleId) => {
+        setSamples(prev => prev.filter(s => s.id !== sampleId));
+        orderRef.current = orderRef.current.filter(x => x !== sampleId);
+    }, []);
+    const ctx = useMemo(() => ({ register, unregister, activeId, setActiveId, codeDialect }), [register, unregister, activeId, codeDialect]);
+    // Flat nav list in registration order (no category grouping), deduped by label.
+    const navSamples = useMemo(() => {
+        const order = orderRef.current;
+        const ordered = [...samples].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+        return dedupeByLabel(ordered);
+    }, [samples]);
+    const onNavClick = (sampleId) => {
+        setActiveId(sampleId);
+        document.getElementById(sampleId)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    };
+    return (_jsx(DocPageContext.Provider, { value: ctx, children: _jsxs("div", { className: "doc-page", children: [_jsxs("div", { className: "doc-page__main", children: [_jsxs("header", { className: "doc-page__header", children: [_jsx("h1", { className: "doc-page__title", children: label || id }), subLabel ? _jsx("p", { className: "doc-page__sublabel", children: subLabel }) : null] }), _jsx("div", { className: "doc-page__samples", children: children })] }), _jsxs("nav", { className: "doc-page__nav", "aria-label": "On this page", children: [_jsx("div", { className: "doc-page__nav-heading", children: "On this page" }), _jsx("ul", { className: "doc-page__nav-list", children: navSamples.map(s => (_jsx("li", { children: _jsx("button", { type: "button", className: 'doc-page__nav-item' +
+                                        (activeId === s.id ? ' doc-page__nav-item--selected' : ''), onClick: () => onNavClick(s.id), children: s.label || s.id }) }, s.id))) })] })] }) }));
+}
+/**
+ * `ShowcaseDocSample` — one titled sample with a per-sample **Code / Hide Code** toggle.
+ *
+ * The code snippet is auto-generated by serializing `children` back to source (see
+ * `jsxToString`, in the enclosing page's dialect); pass `code` to override it (e.g. to show a
+ * `.map(...)` loop instead of its expanded elements). `layout` toggles the preview between a
+ * wrapping row (default), a column, or `bare`/`block` (no flex wrapper at all — the sample's
+ * own top-level element controls the layout, mirroring the Angular doc-sample's bare
+ * `<ng-content/>`). `category` groups the sample in the page nav (matching the Angular
+ * `category` input); omit it or use `Base` for the primary group.
+ */
+export function ShowcaseDocSample({ id, label, category, code, layout = 'row', children }) {
+    const ctx = useContext(DocPageContext);
+    const reactId = useId();
+    // Stable, collision-free dom id: a slug of the id/label plus the React-generated id.
+    const slug = (id ?? label ?? 'sample').replace(/[^\w-]+/g, '-').replace(/^-+|-+$/g, '').toLowerCase() || 'sample';
+    const domId = `${slug}-${reactId.replace(/[^\w-]+/g, '')}`;
+    const [expanded, setExpanded] = useState(false);
+    const displayLabel = label ?? id ?? '';
+    const snippet = code ?? jsxToString(children, { dialect: ctx?.codeDialect ?? 'jsx' });
+    // Register with the page so it appears in the "On this page" nav.
+    React.useEffect(() => {
+        if (!ctx)
+            return;
+        ctx.register({ id: domId, label: displayLabel, category });
+        return () => ctx.unregister(domId);
+    }, [ctx, domId, displayLabel, category]);
+    // `bare`/`block` apply no flex layout — the sample's own top-level element (a flex/grid
+    // wrapper, matching the Angular sample template) owns the layout. `row`/`column` keep the
+    // convenience flex wrapper for simple samples that render their variants as direct children.
+    const previewClass = layout === 'bare' || layout === 'block'
+        ? ''
+        : layout === 'column'
+            ? 'eds-u-d-flex eds-u-flex-column eds-u-flex-align-items-start eds-u-flex-gap-s'
+            : 'eds-u-d-flex eds-u-flex-wrap eds-u-flex-align-items-center eds-u-flex-gap-m';
+    const copyLink = () => {
+        try {
+            const url = `${window.location.origin}${window.location.pathname}${window.location.hash.split('#').slice(0, 2).join('#')}#${domId}`;
+            void navigator.clipboard?.writeText(url);
+        }
+        catch {
+            /* clipboard unavailable — non-critical */
+        }
+    };
+    return (_jsxs("section", { id: domId, className: "doc-sample", onMouseEnter: () => ctx?.setActiveId(domId), children: [_jsxs("div", { className: "doc-sample__title", children: [_jsx("span", { className: "doc-sample__label", children: displayLabel }), displayLabel ? (_jsx("button", { type: "button", className: "doc-sample__link", "aria-label": "Copy link to this sample", onClick: copyLink, children: "#" })) : null, _jsx("span", { className: "doc-sample__spacer" }), _jsx("button", { type: "button", className: "doc-sample__code-toggle", "aria-expanded": expanded, onClick: () => setExpanded(v => !v), children: expanded ? 'Hide code' : 'Code' })] }), _jsx("div", { className: previewClass ? `${previewClass} sample-preview` : 'sample-preview', children: children }), expanded ? (_jsx("pre", { className: "sample-code", children: _jsx("code", { children: snippet }) })) : null] }));
+}
+//# sourceMappingURL=doc-page.js.map

package/showcase/doc-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"doc-page.js","sourceRoot":"","sources":["../../src/showcase/doc-page.tsx"],"names":[],"mappings":"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"}

package/showcase/index.d.ts

@@ -0,0 +1,7 @@
+export { ShowcaseDocPage, ShowcaseDocSample } from './doc-page.js';
+export type { ShowcaseSampleLayout } from './doc-page.js';
+export { Section, Sample, DEMO_GROUPS } from './shared.js';
+export type { DemoEntry, DemoGroup } from './shared.js';
+export { jsxToString, registerComponentName } from './jsx-to-string.js';
+export type { JsxToStringOptions } from './jsx-to-string.js';
+//# sourceMappingURL=index.d.ts.map

package/showcase/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/showcase/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/showcase/index.js

@@ -0,0 +1,7 @@
+// Shared showcase doc-page scaffolding, reused by both standalone showcase hosts
+// (eui-showcase-react and eui-showcase-webcomponents). Import the component styles alongside:
+//   import '@eui/eds-react/showcase/showcase.css';
+export { ShowcaseDocPage, ShowcaseDocSample } from './doc-page.js';
+export { Section, Sample, DEMO_GROUPS } from './shared.js';
+export { jsxToString, registerComponentName } from './jsx-to-string.js';
+//# sourceMappingURL=index.js.map

package/showcase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/showcase/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,8FAA8F;AAC9F,mDAAmD;AACnD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/showcase/jsx-to-string.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/** Register a component's tag name so the serializer prints it (not `Unknown`). */
+export declare function registerComponentName(type: unknown, name: string): void;
+/** Output conventions that differ between the JSX (React) and HTML (Web Component) hosts. */
+export interface JsxToStringOptions {
+    /**
+     * How to close an element with no children:
+     *  - `'jsx'` (default) → `<tag />`, numeric props as `{n}`, empty-string prop omitted.
+     *  - `'html'` → `<tag></tag>`, numeric props as `"n"`, empty-string prop as a bare `name`.
+     */
+    dialect?: 'jsx' | 'html';
+}
+/** Serialize a node (typically a `<Sample>`'s children) to a source string. */
+export declare function jsxToString(node: React.ReactNode, options?: JsxToStringOptions): string;
+//# sourceMappingURL=jsx-to-string.d.ts.map

package/showcase/jsx-to-string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-to-string.d.ts","sourceRoot":"","sources":["../../src/showcase/jsx-to-string.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,mFAAmF;AACnF,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAEvE;AAED,6FAA6F;AAC7F,MAAM,WAAW,kBAAkB;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CAC5B;AAsED,+EAA+E;AAC/E,wBAAgB,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAG3F"}

package/showcase/jsx-to-string.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+/**
+ * Serializes a React node tree back into readable source, so a `<Sample>` can display the
+ * exact code that produced its live rendering — no hand-maintained `code` string.
+ *
+ * Scope: this handles the subset used by showcase samples (intrinsic tags like `span` /
+ * `eds-wc-icon`, components like `EdsBadge`, string/number/boolean props, and text / element
+ * children). It is a documentation aid, not a general-purpose serializer.
+ *
+ * Both showcase hosts share this serializer; they differ only in cosmetic output conventions
+ * (React JSX prints self-closing `<tag />` and numeric props as `{n}`; the Web Component host
+ * prints HTML `<tag></tag>` and numeric props as `"n"`). Pass {@link JsxToStringOptions} to
+ * select the convention.
+ */
+const INDENT = '    ';
+/** Explicit component → tag names, for components without a stable runtime name. */
+const NAME_REGISTRY = new Map();
+/** Register a component's tag name so the serializer prints it (not `Unknown`). */
+export function registerComponentName(type, name) {
+    NAME_REGISTRY.set(type, name);
+}
+/** Component display name → tag (e.g. EdsBadge → "EdsBadge", 'span' → "span"). */
+function tagName(type) {
+    if (typeof type === 'string')
+        return type;
+    const registered = NAME_REGISTRY.get(type);
+    if (registered)
+        return registered;
+    if (typeof type === 'function') {
+        const fn = type;
+        if (fn.displayName || fn.name)
+            return fn.displayName || fn.name || 'Unknown';
+    }
+    // React.forwardRef components are objects with a render fn — read its name.
+    if (type && typeof type === 'object') {
+        const obj = type;
+        if (obj.displayName)
+            return obj.displayName;
+        if (obj.render?.name)
+            return obj.render.name;
+    }
+    return 'Unknown';
+}
+/** Render one prop as ` name`, ` name="v"`, or ` name={expr}`. `key`/`ref` are dropped. */
+function serializeProp(name, value, dialect) {
+    if (name === 'children' || name === 'key' || name === 'ref')
+        return '';
+    if (value === true)
+        return ` ${name}`;
+    // HTML treats an empty-string attribute as a bare boolean-style attribute (` name`).
+    if (dialect === 'html' && value === '')
+        return ` ${name}`;
+    if (value === false || value === null || value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return ` ${name}="${value}"`;
+    if (typeof value === 'number')
+        return dialect === 'html' ? ` ${name}="${value}"` : ` ${name}={${value}}`;
+    return ` ${name}={${String(value)}}`;
+}
+function serializeNode(node, depth, dialect) {
+    const pad = INDENT.repeat(depth);
+    if (node === null || node === undefined || node === false || node === true)
+        return '';
+    if (typeof node === 'string' || typeof node === 'number') {
+        const text = String(node).trim();
+        return text ? pad + text : '';
+    }
+    if (Array.isArray(node)) {
+        return node.map(n => serializeNode(n, depth, dialect)).filter(Boolean).join('\n');
+    }
+    if (React.isValidElement(node)) {
+        const el = node;
+        const tag = tagName(el.type);
+        const props = el.props ?? {};
+        const attrs = Object.keys(props)
+            .map(k => serializeProp(k, props[k], dialect))
+            .join('');
+        const children = props.children;
+        const hasChildren = children !== undefined && children !== null && children !== false;
+        if (!hasChildren) {
+            return dialect === 'html' ? `${pad}<${tag}${attrs}></${tag}>` : `${pad}<${tag}${attrs} />`;
+        }
+        const inner = serializeNode(children, depth + 1, dialect);
+        // Inline a single short text child (e.g. <EdsBadge>9</EdsBadge>).
+        if ((typeof children === 'string' || typeof children === 'number') && inner.trim().length <= 20) {
+            return `${pad}<${tag}${attrs}>${String(children).trim()}</${tag}>`;
+        }
+        return `${pad}<${tag}${attrs}>\n${inner}\n${pad}</${tag}>`;
+    }
+    return '';
+}
+/** Serialize a node (typically a `<Sample>`'s children) to a source string. */
+export function jsxToString(node, options = {}) {
+    const dialect = options.dialect ?? 'jsx';
+    return serializeNode(node, 0, dialect).replace(/\n{2,}/g, '\n');
+}
+//# sourceMappingURL=jsx-to-string.js.map

package/showcase/jsx-to-string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-to-string.js","sourceRoot":"","sources":["../../src/showcase/jsx-to-string.ts"],"names":[],"mappings":"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"}

package/showcase/shared.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type ShowcaseSampleLayout } from './doc-page.js';
+/**
+ * Shared showcase authoring wrappers, reused by BOTH standalone showcase hosts
+ * (`eui-showcase-react` and `eui-showcase-webcomponents`). `Section` + `Sample` are thin
+ * compat wrappers over the `doc-page` primitives so a samples file authors with familiar
+ * section/sample blocks and gets the doc-page frame + per-sample code toggle for free.
+ */
+/**
+ * A demo entry: one migrated EDS component rendered through its projection (`Eds*` React
+ * component in the React host, `eds-wc-*` Web Component in the WC host). `id` is the hash
+ * route segment (e.g. `#/eds-badge`).
+ */
+export interface DemoEntry {
+    /** Route segment, matches the Angular `eds-COMPONENT` folder. */
+    id: string;
+    /** Human-readable name shown in the demo's own header/nav. */
+    label: string;
+    /** The samples component rendering that component's variants. */
+    Samples: React.ComponentType;
+    /**
+     * When true, the demo renders full-bleed (no `<main>` padding / page header), for
+     * full-viewport components like `eds-shell` and the `home` landing page. (React host.)
+     */
+    fullBleed?: boolean;
+    /**
+     * When true, the entry is routable but omitted from the sidebar navigation (e.g. the
+     * `home` landing page, reached via `/` and the toolbar logo). (React host.)
+     */
+    hideFromNav?: boolean;
+    /**
+     * Sidebar grouping bucket, mirroring the Angular EDS showcase top-level categories
+     * (`eds-links.ts`): `'Shell' | 'EDS validated' | 'Components' | 'Utilities' | 'Patterns'
+     * | 'Templates'`. The sidebar renders one expandable group per bucket (in
+     * `DEMO_GROUPS` order); entries without a `group` fall into `'Components'`.
+     */
+    group?: DemoGroup;
+}
+/** Top-level sidebar categories, in display order (mirrors the Angular EDS showcase). */
+export type DemoGroup = 'Shell' | 'EDS validated' | 'Components' | 'Utilities' | 'Patterns' | 'Templates';
+/** Sidebar group order — the sidebar renders groups in this sequence, skipping empty ones. */
+export declare const DEMO_GROUPS: readonly DemoGroup[];
+/**
+ * `Sample` — a titled sample block with a per-sample **Code / Hide code** toggle, delegating
+ * to `ShowcaseDocSample`. The code snippet is auto-generated from `children` (or overridden
+ * via `code`). Its nav category comes from the enclosing `<Section>`; a sample with no title
+ * falls back to the section title as its label so it still appears in the nav.
+ */
+export declare function Sample({ title, code, layout, children }: {
+    title?: string;
+    code?: string;
+    layout?: ShowcaseSampleLayout;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * `Section` — a titled group. Provides its title as the nav category for nested `<Sample>`s
+ * (via `SectionContext`), mirroring the Angular doc-page `category` grouping. It renders no
+ * visible heading — the sample's own title bar is the heading.
+ */
+export declare function Section({ title, children }: {
+    title: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=shared.d.ts.map

package/showcase/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/showcase/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE7E;;;;;GAKG;AAEH;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACtB,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,yFAAyF;AACzF,MAAM,MAAM,SAAS,GACf,OAAO,GACP,eAAe,GACf,YAAY,GACZ,WAAW,GACX,UAAU,GACV,WAAW,CAAC;AAElB,8FAA8F;AAC9F,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAO3C,CAAC;AAWF;;;;;GAKG;AACH,wBAAgB,MAAM,CAClB,EAAE,KAAK,EAAE,IAAI,EAAE,MAAc,EAAE,QAAQ,EAAE,EAAE;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GACF,KAAK,CAAC,GAAG,CAAC,OAAO,CAWnB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAM5G"}

package/showcase/shared.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { ShowcaseDocSample } from './doc-page.js';
+/** Sidebar group order — the sidebar renders groups in this sequence, skipping empty ones. */
+export const DEMO_GROUPS = [
+    'Shell',
+    'EDS validated',
+    'Components',
+    'Utilities',
+    'Patterns',
+    'Templates',
+];
+/**
+ * The current `<Section>` title, propagated to nested `<Sample>`s as their nav category —
+ * so the `Section` + `Sample` authoring maps onto the doc-page's category-grouped "On this
+ * page" nav without editing every samples file. A `<Sample title="…">` inside a
+ * `<Section title="Sizes">` registers under the `Sizes` category with label `…` (or the
+ * section title when the sample has none).
+ */
+const SectionContext = createContext(undefined);
+/**
+ * `Sample` — a titled sample block with a per-sample **Code / Hide code** toggle, delegating
+ * to `ShowcaseDocSample`. The code snippet is auto-generated from `children` (or overridden
+ * via `code`). Its nav category comes from the enclosing `<Section>`; a sample with no title
+ * falls back to the section title as its label so it still appears in the nav.
+ */
+export function Sample({ title, code, layout = 'row', children }) {
+    const section = useContext(SectionContext);
+    // Category = the section title (so the nav groups by section). Base group when no section.
+    const category = section ?? 'Base';
+    // Label = the sample's own title, else the section title.
+    const label = title ?? section ?? '';
+    return (_jsx(ShowcaseDocSample, { label: label, category: category, code: code, layout: layout, children: children }));
+}
+/**
+ * `Section` — a titled group. Provides its title as the nav category for nested `<Sample>`s
+ * (via `SectionContext`), mirroring the Angular doc-page `category` grouping. It renders no
+ * visible heading — the sample's own title bar is the heading.
+ */
+export function Section({ title, children }) {
+    return (_jsx(SectionContext.Provider, { value: title, children: _jsx("section", { className: "eds-u-mb-xl", children: children }) }));
+}
+//# sourceMappingURL=shared.js.map

package/showcase/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/showcase/shared.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAA6B,MAAM,eAAe,CAAC;AAiD7E,8FAA8F;AAC9F,MAAM,CAAC,MAAM,WAAW,GAAyB;IAC7C,OAAO;IACP,eAAe;IACf,YAAY;IACZ,WAAW;IACX,UAAU;IACV,WAAW;CACd,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,cAAc,GAAG,aAAa,CAAqB,SAAS,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAClB,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAKtC;IAED,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,2FAA2F;IAC3F,MAAM,QAAQ,GAAG,OAAO,IAAI,MAAM,CAAC;IACnC,0DAA0D;IAC1D,MAAM,KAAK,GAAG,KAAK,IAAI,OAAO,IAAI,EAAE,CAAC;IACrC,OAAO,CACH,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAC1E,QAAQ,GACO,CACvB,CAAC;AACN,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAgD;IACrF,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,kBAAS,SAAS,EAAC,aAAa,YAAE,QAAQ,GAAW,GAC/B,CAC7B,CAAC;AACN,CAAC"}