namespace Rask.Site.Features;

public sealed partial class PrimitivesTextDemo : Component
{
    protected override Component? Render() => P.Class("mb-0")["1 < 2 && \"safe\""];
}

namespace Rask.Site.Features;

public sealed partial class PrimitivesRawDemo : Component
{
    protected override Component? Render() => P.Class("mb-0")[Raw.Value("Already <strong>safe</strong> HTML")];
}

namespace Rask.Site.Features;

public sealed partial class PrimitivesFragmentDemo : Component
{
    protected override Component? Render() => [
        H3.Class("text-lg font-semibold")["A heading"],
        P.Class("mb-0")["A paragraph"]
    ];
}

namespace Rask.Site.Features;

public sealed partial class PrimitivesDoctypeDemo : Component
{
    protected override Component? Render() => Span.Class("text-zinc-500 dark:text-white/70")["(emits ", Code["<!DOCTYPE html>"], ")"];
}

namespace Rask.Site.Features;

public sealed partial class PrimitivesChildrenDemo : Component
{
    protected override Component? Render() => Div.Class("mb-0")[
        "plain text, ",
        Strong["bold text, "],
        $"interpolated: {TimeProvider.System.GetLocalNow():yyyy-MM-dd}"
    ];
}

namespace Rask.Site.Features;

public sealed partial class TagsTextDemo : Component
{
    protected override Component? Render() => Article[
        H1.Class("text-xl font-semibold")["Tags are just methods."],
        P[
            "You can ", Strong["emphasize"], " or ", Em["italicize"],
            " by composing them."
        ],
        Blockquote.Class("border-l-4 border-zinc-200 dark:border-white/10 pl-4 text-base italic text-zinc-500 dark:text-white/70")["A small DSL, an honest day's HTML."]
    ];
}

namespace Rask.Site.Features;

public sealed partial class TagsFormDemo : Component
{
    // The elements below are plain HTML; `Form` binds a model, so this one holds their fields.
    private readonly Fields _fields = new();

    protected override Component? Render() => Form.Model(_fields)[
        Div.Class("mb-2")[
            Ui.Input.Of<string>().Label("Name")
                .Type(InputType.Text)
                .Id("n")
        ],
        Ui.Button.Primary.Submit["Submit"]
    ];

    public sealed class Fields
    {
        public string? Name { get; set; }
    }
}

namespace Rask.Site.Features;

public sealed partial class TagsTableDemo : Component
{
    protected override Component? Render() => Ui.Table[
        Ui.TableColumns[Ui.TableColumn["#"], Ui.TableColumn["Tag"]],
        Ui.TableRows[
            Ui.TableRow[Ui.TableCell["1"], Ui.TableCell[Code["Div"]]],
            Ui.TableRow[Ui.TableCell["2"], Ui.TableCell[Code["Span"]]]
        ]
    ];
}

using Rask.Core.Live;

namespace Rask.Site.Features;

public sealed partial class TagsMediaDemo : Component
{
    protected override Component? Render() => Img
        .Src(LiveOptions.PathBase + "/img/rask-placeholder.svg")
        .Alt("Rask")
        .Class("rounded shadow-sm");
}

namespace Rask.Site.Features;

public sealed partial class TagsVoidDemo : Component
{
    protected override Component? Render() => [
        P.Class("mb-2")["Above the rule"],
        Hr,
        P.Class("mb-0")["Below the rule"]
    ];
}

namespace Rask.Site.Features;

public sealed partial class PropsIdClassStyleDemo : Component
{
    protected override Component? Render() =>
        Ui.Text
            .Id("card-1")
            .Class("rounded-lg ring-2 ring-accent")
            .Style("padding: 0.6rem 0.8rem;")["Three attributes — id then class then style."];
}

namespace Rask.Site.Features;

public sealed partial class PropsDataDemo : Component
{
    protected override Component? Render() =>
        Div
            .Class("p-2 bg-zinc-50 dark:bg-zinc-900 rounded border")
            .Data(("role", "card"), ("index", "7"), ("new", null))[
            "Inspect the rendered HTML — data-role, data-index, and a bare data-new."];
}

namespace Rask.Site.Features;

public sealed partial class PropsAriaDemo : Component
{
    // Every aria-* attribute of the WAI-ARIA spec is a typed step, generated from the spec: a bool for true/false,
    // an enum for a keyword. AriaRole holds the roles; the Aria bag stays for anything the steps do not name.
    protected override Component? Render() =>
        Ui.Button.Icon(Ui.IconName.Moon)
            .Role(AriaRole.Switch)
            .AriaChecked(AriaChecked.False)
            .AriaLabel("Toggle dark mode")["Theme"];
}

namespace Rask.Site.Features;

public sealed partial class PropsAttributesDemo : Component
{
    // Two layers, and the order matters. `Lang` is a typed global property, and it is the case that
    // matters most — WCAG 3.1.2 asks for the element that CHANGES language to be marked, so a screen
    // reader switches pronunciation for the quoted phrase and not the whole page.
    //
    // `Attributes` sits underneath as the escape hatch, for what Element names no property for. Prefer
    // the typed property whenever one exists: it is checked, discoverable and documented, and nothing in
    // the bag is validated or de-duplicated. A null value renders the attribute bare.
    protected override Component? Render() =>
        P.Class("mb-0")[
            "The dish arrived with an air of ",
            Span.Class("italic").Lang("fr")["déjà vu"],
            " — and for what has no typed property, a bare ",
            Code.Attributes("data-demo", null)["data-demo"],
            ", written verbatim."];
}

namespace Rask.Site.Features;

public sealed partial class PropsCommandDemo : Component
{
    // command/commandfor generalise what popovertarget does for popovers: the button names the element
    // it acts on and the action to invoke, and the browser does the rest. There is no OnClick here and
    // no JavaScript anywhere — opening and closing the dialog is entirely declarative.
    //
    // `show-modal` and `close` are two of the built-in actions; a custom `--name` would dispatch a
    // CommandEvent instead of invoking one.
    protected override Component? Render() =>
        Div[
            Ui.Button
                .Command("show-modal")
                .CommandFor("props-command-dialog")["Open the dialog"],
            Dialog.Id("props-command-dialog").Class("p-3 border-0 rounded shadow")[
                P.Class("mb-3")["Opened by ", Code["command"], ", with no handler on either side."],
                Ui.Button.Filled
                    .Command("close")
                    .CommandFor("props-command-dialog")["Close"]]];
}

namespace Rask.Site.Features;

public sealed partial class PropsAttributeOrderDemo : Component
{
    protected override Component? Render() =>
        A
            .Href("/tags")
            .Id("out")
            .Class("font-medium text-accent-content underline underline-offset-4")
            .Data("external", "true")["See HTML order"];
}

namespace Rask.Site.Features;

public sealed partial class SvgShapesDemo : Component
{
    protected override Component? Render() =>
        Svg.Width("200").Height("80").ViewBox("0 0 200 80")[
            Rect.X("5").Y("5").Width("60").Height("70").Rx("8").Fill("#7C3AED"),
            Circle.Cx("105").Cy("40").R("35").Fill("#0D9488"),
            Line
                .X1("150")
                .Y1("10")
                .X2("195")
                .Y2("70")
                .Stroke("#D97706")
                .StrokeWidth("6")
                .StrokeLinecap("round")
        ];
}

namespace Rask.Site.Features;

public sealed partial class SvgGradientDemo : Component
{
    protected override Component? Render() =>
        RaskLogo.Size(120).GradientId("svgPageBolt");
}

using System.Globalization;

namespace Rask.Site.Features;

public sealed partial class SvgClickableDemo : Component
{
    private static readonly (string Name, string Hex)[] Swatches =
    [
        ("Violet", "#7C3AED"),
        ("Indigo", "#512BD4"),
        ("Teal", "#0D9488"),
        ("Amber", "#D97706")
    ];

    private int _selected;

    protected override Component? Render() =>
        [
            Svg.Width("240").Height("48").ViewBox("0 0 240 48")[Swatches.Select(Swatch)],
            P.Class("mt-2 mb-0 text-sm text-zinc-500 dark:text-white/70")[
                "Selected colour: ",
                Strong[Swatches[_selected].Name]
            ]
        ];

    // Keyed so the diff codec reconciles the swatches by identity rather than by position.
    private Component Swatch((string Name, string Hex) swatch, int index) =>
        Circle
            .Cx((24 + (index * 56)).ToString(CultureInfo.InvariantCulture))
            .Cy("24")
            .R("18")
            .Fill(index == _selected ? swatch.Hex : "#e5e7eb")
            .Stroke("#1f2937")
            .StrokeWidth("2")
            .PointerEvents("all")
            .Style("cursor: pointer;")
            .OnClick(() => _selected = index)
            .Key(swatch.Hex);
}

namespace Rask.Site.Features;

public sealed partial class SvgTextDemo : Component
{
    protected override Component? Render() =>
        Svg.Width("220").Height("60").ViewBox("0 0 220 60")[
            SvgText
                .X("10")
                .Y("38")
                .FontFamily("sans-serif")
                .FontSize("28")
                .FontWeight("bold")
                .Fill("#512BD4")[
                "Ra",
                Tspan.Fill("#0D9488")["sk"]
            ]
        ];
}

namespace Rask.Site.Features;

// SVG's own animation elements, straight from MDN's data: the browser runs them, so nothing re-renders.
public sealed partial class SvgAnimateDemo : Component
{
    protected override Component? Render() =>
        Svg.Width("200").Height("80").ViewBox("0 0 200 80")[
            Circle.Cx("40").Cy("40").R("20").Fill("#7C3AED")[
                Animate.AttributeName("r").Values("20;32;20").Dur("2s").RepeatCount("indefinite")
            ],
            Rect.X("120").Y("20").Width("40").Height("40").Rx("6").Fill("#0D9488")[
                AnimateTransform
                    .AttributeName("transform")
                    .Type("rotate")
                    .From("0 140 40")
                    .To("360 140 40")
                    .Dur("3s")
                    .RepeatCount("indefinite")
            ]
        ];
}

namespace Rask.Site.Features;

// Every text-level / inline element, live. Each is a chain entry generated from MDN,
// and its children go through the [...] indexer.
public sealed partial class ElementsTextDemo : Component
{
    protected override Component? Render() => Div.Class("flex flex-col gap-2")[
        P[
            "Link ", A.Href("https://example.com").Target("_blank").Rel("noopener")["an anchor"],
            ", ", Strong["strong"], ", ", B["bold"], ", ", Em["emphasis"], ", ", I["idiomatic"],
            ", ", U["underline"], ", ", S["struck"], ", ", Small["small"], ", ", Mark["highlight"],
            ", and ", Span.Class("text-accent-content")["a plain span"], "."
        ],
        P[
            "Inline code ", Code["Div[…]"], ", a key ", Kbd["Ctrl"], "+", Kbd["C"],
            ", sample output ", Samp["exit 0"], ", a variable ", Var["x"], Sub["1"], " to the n", Sup["2"], "."
        ],
        P[
            "Define a term: ", Dfn["Rask"], " is a full-stack C# web framework. Abbreviate a term: ", Abbr["API"],
            ", cite ", Cite["The Pragmatic Programmer"], ", quote ", Q.Cite("https://example.com")["inline quote"],
            ", machine-readable ", Data.Value("42")["forty-two"], ", and a ", Time.DateTime("2026-06-26")["date"], "."
        ],
        // Bidirectional + ruby annotations.
        P[
            "Isolated user text ", Bdi["إعلان"], "; overridden direction ", Bdo.Dir(Dir.Rtl)["this is RTL"], ". ",
            Ruby["漢", Rp["("], Rt["kan"], Rp[")"]], " annotates pronunciation."
        ],
        // A long word with a soft break opportunity, and a line break.
        P.Class("mb-0")[
            "Super", Wbr, "cali", Wbr, "fragilistic.", Br, "Edits: ",
            Ins.Cite("https://example.com").DateTime("2026-06-26")["added"], " and ",
            Del.DateTime("2026-06-25")["removed"], "."
        ]
    ];
}

namespace Rask.Site.Features;

// Grouping content + lists: p, hr, pre, blockquote, div, ol/ul/li, dl/dt/dd, figure/figcaption.
public sealed partial class ElementsGroupingDemo : Component
{
    protected override Component? Render() => Div.Class("flex flex-col gap-3")[
        P["A paragraph of flow content, grouped in a ", Code["Div"], "."],
        Pre.Class("bg-zinc-50 dark:bg-zinc-900 border rounded p-2 mb-0")["  preformatted\n  text  keeps   spacing"],
        Blockquote.Class("border-l-4 border-zinc-200 dark:border-white/10 ps-3 text-base italic text-zinc-500 dark:text-white/70").Cite("https://example.com")[
            "A small DSL, an honest day's HTML."],
        Hr,
        Div.Class("grid grid-cols-12 gap-4")[
            Div.Class("col-span-12")[
                P.Class("font-semibold mb-1")["Ordered (start=2, reversed)"],
                Ol.Class("mb-0").Start(2).Reversed()[
                    Li.Value(2)["Second"], Li["First-ish"], Li["Zeroth-ish"]
                ]
            ],
            Div.Class("col-span-12")[
                P.Class("font-semibold mb-1")["Unordered"],
                Ul.Class("mb-0")[Li["Alpha"], Li["Beta"], Li["Gamma"]]
            ],
            Div.Class("col-span-12")[
                P.Class("font-semibold mb-1")["Description"],
                Dl.Class("mb-0")[
                    Dt["Rask"], Dd.Class("mb-1")["A full-stack C# web framework."],
                    Dt["Tag"], Dd.Class("mb-0")["A generated chain entry."]
                ]
            ]
        ],
        Figure.Class("mb-0")[
            Pre.Class("bg-slate-900 text-slate-100 rounded p-2")["Div[Span[\"hi\"]]"],
            Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["Figure: a tiny component tree."]
        ]
    ];
}

namespace Rask.Site.Features;

// Sectioning + headings: the six headings, hgroup, and the semantic landmarks article/section/nav/
// aside/header/footer/main/address/search.
public sealed partial class ElementsSectionsDemo : Component
{
    protected override Component? Render() => Article.Class("border rounded p-3")[
        Header[
            Hgroup[
                H1.Class("text-xl font-semibold mb-1")["Article title"],
                P.Class("text-zinc-500 dark:text-white/70 mb-0")["A subtitle grouped with the heading"]
            ],
            Nav.Class("text-sm")[
                A.Href("#a").Class("me-2")["Intro"], A.Href("#b")["Details"]
            ]
        ],
        Search.Class("my-2")[
            Input.Of<string>().Type(InputType.Search).Class(ElementsFormsDemo.Field).Placeholder("Search…")
        ],
        Div.Class("grid grid-cols-12 gap-4")[
            Main.Class("col-span-8")[
                Section.Id("a")[H2.Class("text-base font-semibold")["Section heading levels"],
                    P.Class("mb-1")["Headings ", Code["H1"], "–", Code["H6"], ":"],
                    H3.Class("text-base font-semibold mb-0")["H3"], H4.Class("text-base font-semibold mb-0")["H4"],
                    H5.Class("text-base font-semibold mb-0")["H5"], H6.Class("text-base font-semibold mb-0")["H6"]
                ]
            ],
            Aside.Class("col-span-4 text-zinc-500 dark:text-white/70 text-sm")[
                "An ", Code["aside"], " — complementary content."
            ]
        ],
        Footer.Class("border-t pt-2 mt-2 text-sm text-zinc-500 dark:text-white/70")[
            "Footer · ", Address.Class("inline italic")["contact@example.com"]
        ]
    ];
}

namespace Rask.Site.Features;

// Form-associated elements: form, fieldset/legend, label, input, select/optgroup/option, textarea,
// datalist, output, progress, meter, button. (See the Forms page for binding/validation.)
//
// The raw tags ARE the subject here, so they stay raw — drawn with the utilities Flux's input, label and
// button are drawn with, rather than the kit's field components, which the Forms page shows.
public sealed partial class ElementsFormsDemo : Component
{
    // The elements below are plain HTML; `Form` binds a model, so this one holds their fields.
    private readonly Fields _fields = new();

    // Flux's input, select and textarea, as plain utilities on the raw tags.
    internal const string Field =
        "block w-full h-10 rounded-lg border border-zinc-200 border-b-zinc-300/80 bg-white px-3 text-base text-zinc-700 "
        + "shadow-xs placeholder-zinc-400 sm:text-sm dark:border-white/10 dark:bg-white/10 dark:text-zinc-300";

    private const string Area =
        "block w-full rounded-lg border border-zinc-200 border-b-zinc-300/80 bg-white p-3 text-base text-zinc-700 "
        + "shadow-xs placeholder-zinc-400 sm:text-sm dark:border-white/10 dark:bg-white/10 dark:text-zinc-300";

    private const string Caption = "mb-1 inline-block text-sm font-medium text-zinc-800 dark:text-white";

    private const string ResetButton =
        "inline-flex h-10 items-center rounded-lg border border-zinc-200 border-b-zinc-300/80 bg-white px-4 text-sm "
        + "font-medium text-zinc-800 shadow-xs hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-white "
        + "dark:hover:bg-zinc-600/75";

    protected override Component? Render() => Form.Model(_fields).Class("flex flex-col gap-3")[
        Fieldset.Class("border rounded p-3")[
            Legend.Class("text-base float-none w-auto px-2")["Profile"],
            Div.Class("mb-2")[
                Label.For("nm").Class(Caption)["Name"],
                Input.Of<string>()
                    .Type(InputType.Text)
                    .Id("nm")
                    .Class(Field)
                    .Placeholder("Jane Doe")
                    .List("suggestions"),
                Datalist.Id("suggestions")[Option.Value("Jane Doe"), Option.Value("Ada Lovelace")]
            ],
            Div.Class("mb-2")[
                Label.For("fruit").Class(Caption)["Favourite"],
                Select.Of<string>().Id("fruit").Name("fruit").Class(Field)[
                    Optgroup.Label("Fruit")[Option.Value("apple")["Apple"], Option.Value("pear").Selected()["Pear"]],
                    Optgroup.Label("Veg")[Option.Value("kale")["Kale"]]
                ]
            ],
            Div.Class("mb-0")[
                Label.For("bio").Class(Caption)["Bio"],
                Textarea.Of<string>().Id("bio").Class(Area).Placeholder("About you…")
            ]
        ],
        Div.Class("grid grid-cols-12 gap-4 items-center")[
            Div.Class("col-auto")[
                Label.Class(Caption)["Progress"], Br,
                Progress.Value(0.6).Max(1.0)
            ],
            Div.Class("col-auto")[
                Label.Class(Caption)["Meter"], Br,
                Meter.Value(0.8).Min(0).Max(1).Low(0.2).High(0.9).Optimum(1)
            ],
            Div.Class("col-auto")[
                Label.Class(Caption)["Output"], Br,
                Output.For("fruit")["Pear"]
            ]
        ],
        Div[
            Ui.Button.Primary.Submit["Submit"], " ",
            Button.Type(ButtonType.Reset).Class(ResetButton)["Reset"]
        ]
    ];

    public sealed class Fields
    {
        public string? Name { get; set; }
    }
}

namespace Rask.Site.Features;

// Tables: table, caption, colgroup/col, thead/tbody/tfoot, tr, th (scope), td (colspan).
public sealed partial class ElementsTablesDemo : Component
{
    protected override Component? Render() => Table.Class("w-full border-collapse text-left text-sm [&_td]:border [&_td]:px-3 [&_td]:py-2 [&_th]:border [&_th]:px-3 [&_th]:py-2")[
        Caption.Class("caption-top")["Quarterly results"],
        Colgroup[Col.Span(1).Class("bg-zinc-50 dark:bg-zinc-900"), Col.Span(2)],
        Thead[
            Tr[Th.Scope(ThScope.Col)["Region"], Th.Scope(ThScope.Col)["Q1"], Th.Scope(ThScope.Col)["Q2"]]
        ],
        Tbody[
            Tr[Th.Scope(ThScope.Row)["North"], Td["10"], Td["12"]],
            Tr[Th.Scope(ThScope.Row)["South"], Td["8"], Td["15"]]
        ],
        Tfoot[
            Tr[Th.Scope(ThScope.Row)["Total"], Td.ColSpan(2).Class("text-right font-bold")["45"]]
        ]
    ];
}

using Rask.Core.Live;

namespace Rask.Site.Features;

// Media & embedded content: img, picture/source, audio, video/track, canvas, iframe (srcdoc — no
// network), embed, object, and an image map (map/area). Self-contained assets so it works offline.
public sealed partial class ElementsMediaDemo : Component
{
    private static string Asset(string name) => LiveOptions.PathBase + "/img/" + name;

    protected override Component? Render() => Div.Class("flex flex-col gap-3")[
        PictureCanvasIframe(),
        EmbedObjectMap(),
        AudioVideo()
    ];

    private static Component PictureCanvasIframe() =>
        Div.Class("flex gap-3 items-start flex-wrap items-center")[
            Figure.Class("m-0")[
                // <picture> picks a <source> by media query, else falls back to <img>.
                Picture[
                    Source.Srcset(Asset("rask-placeholder.svg")).Media("(min-width: 1px)"),
                    Img
                        .Src(Asset("rask-placeholder.svg"))
                        .Alt("Rask logo")
                        .Width(96)
                        .Height(96)
                        .Class("rounded border")
                ],
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["picture / source / img"]
            ],
            Figure.Class("m-0")[
                // <canvas> is a JS drawing surface; shown here as the (empty) element.
                Canvas.Width(96).Height(96).Class("border rounded"),
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["canvas"]
            ],
            Figure.Class("m-0")[
                Iframe
                    .Srcdoc("<p style='font:13px sans-serif;margin:8px'>An inline iframe document.</p>")
                    .Width("180")
                    .Height("96")
                    .Class("border rounded"),
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["iframe (srcdoc)"]
            ]
        ];

    private static Component EmbedObjectMap() =>
        Div.Class("flex gap-3 items-start flex-wrap items-center")[
            Figure.Class("m-0")[
                Embed.Src(Asset("rask-placeholder.svg")).Type("image/svg+xml").Width("96").Height("96"),
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["embed"]
            ],
            Figure.Class("m-0")[
                HtmlObject.DataUrl(Asset("rask-placeholder.svg")).Type("image/svg+xml").Width("96").Height("96"),
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["object"]
            ],
            Figure.Class("m-0")[
                // <img usemap> + <map>/<area>: a clickable region.
                Img
                    .Src(Asset("rask-placeholder.svg"))
                    .Alt("Map")
                    .Width(96)
                    .Height(96)
                    .UseMap("#regions")
                    .Class("border rounded"),
                Map.Name("regions")[Area.Shape(AreaShape.Rect).Coords("0,0,48,96").Href("#").Alt("left half")],
                Figcaption.Class("mt-2 text-sm text-zinc-500 dark:text-white/70")["img usemap / map / area"]
            ]
        ];

    private static Component AudioVideo() =>
        Div.Class("grid grid-cols-12 gap-4")[
            Div.Class("col-span-12 md:col-span-6")[
                P.Class("text-sm mb-1 text-zinc-500 dark:text-white/70")["audio (controls)"],
                Audio.Controls().Preload(Preload.None).Class("w-full")
            ],
            Div.Class("col-span-12 md:col-span-6")[
                P.Class("text-sm mb-1 text-zinc-500 dark:text-white/70")["video (poster + track)"],
                Video
                    .Controls()
                    .Width(240)
                    .Poster(Asset("rask-placeholder.svg"))
                    .Preload(Preload.None)
                    .Class("border rounded")[
                    Track.Kind(TrackKind.Captions).Src(Asset("captions.vtt")).Srclang("en").Label("English").Default()
                ]
            ]
        ];
}

namespace Rask.Site.Features;

// Interactive elements: details/summary (a native disclosure), dialog (shown inline via Open), and
// menu (a semantic command list).
public sealed partial class ElementsInteractiveDemo : Component
{
    protected override Component? Render() => Div.Class("flex flex-col gap-3")[
        Details.Open().Class("border rounded p-2")[
            Summary.Class("font-semibold")["Disclosure — click to toggle"],
            P.Class("mb-0 mt-2 text-zinc-500 dark:text-white/70")["The browser shows/hides this natively; no JS needed."]
        ],
        // <dialog open> renders in the normal flow (non-modal). showModal() would need JS interop.
        Dialog.Open().Class("position-static block border rounded p-3 m-0 shadow-sm")[
            P.Class("mb-0")["An open ", Code["<dialog open>"], " — non-modal, rendered in flow."]
        ],
        Div[
            P.Class("text-sm mb-1 text-zinc-500 dark:text-white/70")["menu (a semantic toolbar / command list)"],
            Menu.Class("list-inline mb-0")[
                Li.Class("list-inline-item")[Ui.Button["Cut"]],
                Li.Class("list-inline-item")[Ui.Button["Copy"]],
                Li.Class("list-inline-item")[Ui.Button["Paste"]]
            ]
        ]
    ];
}

namespace Rask.Site.Features;

// Document & metadata elements — html, head, body, title, base, link, meta, style, script, noscript —
// build the page shell, so they can't render live *inside* this page. Instead the demo composes a real
// shell and shows its serialized output via ToHtml(). template/slot (inert/shadow-DOM) render below.
public sealed partial class ElementsMetadataDemo : Component
{
    // Illustrative only: a real app declares head content by overriding the `Head` property (which is
    // why RASK019 normally flags Head()[…] children) — this composes the elements directly just to show
    // them and their serialized output, so the analyzer is suppressed here on purpose.
#pragma warning disable RASK019
    private static Component Shell() => Html.Lang("en").Dir(Dir.Ltr)[
        Head[
            Meta.Charset("utf-8"),
            Meta.Name("viewport").Content("width=device-width, initial-scale=1"),
            Title["My page"],
            Base.Href("/"),
            Link.Rel("stylesheet").Href("/app.css"),
            Style["body{margin:0}"],
            Script.Src("/app.js").Defer(),
            Noscript["This app needs JavaScript."]
        ],
        Body[P["Hello world"]]
    ];
#pragma warning restore RASK019

    protected override Component? Render() => Div.Class("flex flex-col gap-3")[
        Div[
            P.Class("text-sm mb-1 text-zinc-500 dark:text-white/70")[
                "The structural elements compose a document. Here is a real shell and its serialized HTML:"],
            Pre.Class("bg-slate-900 text-slate-100 rounded p-3 mb-0").Style("white-space:pre-wrap;word-break:break-word")[
                Code[Shell().ToHtml()]]
        ],
        Div[
            P.Class("text-sm mb-1 text-zinc-500 dark:text-white/70")[
                "template holds inert content (cloned by JS); slot is a shadow-DOM placeholder:"],
            Div.Class("border rounded p-2")[
                Template.Id("row-tmpl")[Li["Inert template content"]],
                Slot.Name("label")["Default slot content"],
                P.Class("mb-0 mt-1 text-zinc-500 dark:text-white/70 text-sm")[
                    "(the ", Code["template"], " content is hidden by the browser until cloned)"]
            ]
        ]
    ];
}