@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

package/dist/ui/elements/PcPane/index.d.ts

@@ -0,0 +1,120 @@
+import { nothing, type PropertyValues, type TemplateResult } from "lit";
+import { PcElement } from "../../base";
+import { PcPanel } from "../PcPanel";
+import { type SideMode } from "../../layout";
+/** Which way a pane's start, middle and end run */
+export type PaneOrientation = "vertical" | "horizontal";
+/** Which edge of the layout a pane is on: panels opened from its rail, and its floating box, go the other way */
+export type PaneEdge = "left" | "right" | "top" | "bottom";
+/** Event fired when a floating pane is shown or collapsed (detail: `{ collapsed }`) */
+export declare const PANE_COLLAPSE_EVENT = "pc-collapse";
+/**
+ * An area where buttons and panels are shown or docked, e.g. a side of the `<paint-canvas>` layout. Its content goes in
+ * its `start`, `middle` and `end` slots (content without a slot goes at the start), which run down a `vertical` pane
+ * (the default) or across a `horizontal` one; the middle takes the space left.
+ *
+ * Its `mode` sets how it shows its panels (`PcPanel`s, e.g. `<pc-panel-layers>`):
+ * - `docked`: as they are.
+ * - `rail`: as a column of buttons (with each panel's icon, name and badge) that open one panel at a time over the
+ *   canvas, beside the pane (away from its `edge`). Focus moves into the panel; Escape, a press outside it or its
+ *   button again closes it, and focus goes back to the button.
+ * - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
+ *   `label`), firing `pc-collapse` when it's shown or collapsed.
+ * - `overlay`: a rail over the canvas, without a background: each button has its own, and presses between them reach
+ *   the canvas. Its panels stay solid.
+ *
+ * Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
+ * and `renderEnd`), e.g. `<pc-toolbar>`.
+ *
+ * @example
+ * html`<pc-pane edge="right" mode="rail" label="Panels"><pc-panel-layers .app=${app}></pc-panel-layers></pc-pane>`
+ */
+export declare class PcPane extends PcElement {
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        mode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        edge: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        collapsed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        openPanel: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Which way its start, middle and end run (`vertical` by default) */
+    orientation: PaneOrientation;
+    /** How it shows its panels (`docked` by default) */
+    mode: SideMode;
+    /** Which edge of the layout it's on (`left` by default) */
+    edge: PaneEdge;
+    /** Names it, e.g. on its button when floating and collapsed */
+    label: string;
+    /** Whether it's collapsed to a button while floating (true until opened) */
+    collapsed: boolean;
+    /** The panel open from its rail, if any */
+    openPanel?: PcPanel;
+    /** The panels in it */
+    private panels;
+    /** The rail button that opened the open panel, to return focus to */
+    private opener?;
+    private readonly panelObserver;
+    private readonly onDocumentPointerDown;
+    private readonly onKeyDown;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Open a panel over the canvas from its rail button (closing any other), or close it if it's open. Focus moves into
+     * the panel: to the first thing in it that takes focus, or the panel itself.
+     *
+     * @example
+     * pane.togglePanel(pane.querySelector("pc-panel-layers"));
+     */
+    togglePanel(panel: PcPanel, opener?: HTMLElement): void;
+    /**
+     * Close the panel open from the rail, moving focus back to its rail button if asked.
+     */
+    closePanel(returnFocus: boolean): void;
+    /** Show or collapse the floating pane, telling listeners */
+    private toggleCollapsed;
+    /** Follow the panels slotted into it */
+    private onSlotChange;
+    /** Show the panels for the mode: hidden behind the rail (except the open one, beside the pane) or as they are */
+    private syncPanels;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Content of its own at its start, before what's slotted there */
+    protected renderStart(): TemplateResult | typeof nothing;
+    /** Content of its own in its middle, before what's slotted there */
+    protected renderMiddle(): TemplateResult | typeof nothing;
+    /** Content of its own at its end, before what's slotted there */
+    protected renderEnd(): TemplateResult | typeof nothing;
+    /** The rail: a button per panel */
+    private renderRail;
+    /** The button that shows or collapses a floating pane */
+    private renderCollapse;
+    render(): TemplateResult<1>;
+}

package/dist/ui/elements/PcPane/index.js

@@ -0,0 +1,394 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
+import { PcPanel } from "../PcPanel/index.js";
+import { showsRail } from "../../layout/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcPane/index.ts
+/** Event fired when a floating pane is shown or collapsed (detail: `{ collapsed }`) */
+var PANE_COLLAPSE_EVENT = "pc-collapse";
+/** Elements that can take keyboard focus */
+var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/**
+* An area where buttons and panels are shown or docked, e.g. a side of the `<paint-canvas>` layout. Its content goes in
+* its `start`, `middle` and `end` slots (content without a slot goes at the start), which run down a `vertical` pane
+* (the default) or across a `horizontal` one; the middle takes the space left.
+*
+* Its `mode` sets how it shows its panels (`PcPanel`s, e.g. `<pc-panel-layers>`):
+* - `docked`: as they are.
+* - `rail`: as a column of buttons (with each panel's icon, name and badge) that open one panel at a time over the
+*   canvas, beside the pane (away from its `edge`). Focus moves into the panel; Escape, a press outside it or its
+*   button again closes it, and focus goes back to the button.
+* - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
+*   `label`), firing `pc-collapse` when it's shown or collapsed.
+* - `overlay`: a rail over the canvas, without a background: each button has its own, and presses between them reach
+*   the canvas. Its panels stay solid.
+*
+* Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
+* and `renderEnd`), e.g. `<pc-toolbar>`.
+*
+* @example
+* html`<pc-pane edge="right" mode="rail" label="Panels"><pc-panel-layers .app=${app}></pc-panel-layers></pc-pane>`
+*/
+var PcPane = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		orientation: {
+			type: String,
+			reflect: true
+		},
+		mode: {
+			type: String,
+			reflect: true
+		},
+		edge: {
+			type: String,
+			reflect: true
+		},
+		label: { type: String },
+		collapsed: {
+			type: Boolean,
+			reflect: true
+		},
+		openPanel: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: relative;
+        display: flex;
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 0;
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      :host([edge="right"]) {
+        flex-direction: row-reverse;
+      }
+      .regions {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+      }
+      :host([orientation="horizontal"]) .regions {
+        flex-direction: row;
+      }
+      .start,
+      .middle,
+      .end {
+        display: flex;
+        flex-direction: inherit;
+      }
+      /* The middle takes the space left, and gives it up first; the start and end keep their content's size */
+      .middle {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+      }
+      .regions[hidden] {
+        display: none;
+      }
+
+      /* Rail: a column of buttons, one per panel, on the side facing the canvas */
+      .rail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-1);
+        padding: var(--pc-space-1);
+        border-inline: 1px solid var(--pc-border);
+        background: var(--pc-bar);
+      }
+      /* The same size as the toolbars' buttons (borders included) */
+      .rail button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: var(--pc-side-button-size);
+        height: var(--pc-side-button-size);
+        padding: 0;
+        border: 1px solid transparent;
+        border-radius: var(--pc-radius-small);
+        background: transparent;
+        cursor: pointer;
+      }
+      .rail button:hover {
+        background: var(--pc-surface-hover);
+      }
+      .rail button[aria-expanded="true"] {
+        border-color: var(--pc-accent);
+        background: var(--pc-accent);
+      }
+      .rail button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+      .rail img {
+        width: var(--pc-side-icon-size);
+        height: var(--pc-side-icon-size);
+        filter: var(--pc-icon-filter);
+      }
+      .rail .badge {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        width: 10px;
+        height: 10px;
+        border: 2px solid var(--pc-bar);
+        border-radius: 50%;
+        background: var(--pc-red);
+      }
+
+      /* Overlay: the rail over the canvas without a background, so only its buttons (each with its own) take presses */
+      :host([mode="overlay"]) {
+        pointer-events: none;
+      }
+      :host([mode="overlay"]) .rail {
+        border-inline: 0;
+        background: transparent;
+      }
+      :host([mode="overlay"]) .rail button,
+      :host([mode="overlay"]) ::slotted(*) {
+        pointer-events: auto;
+      }
+      :host([mode="overlay"]) .rail button {
+        border-color: var(--pc-border);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+      }
+      :host([mode="overlay"]) .rail button:hover {
+        background: var(--pc-surface-hover);
+      }
+      :host([mode="overlay"]) .rail button[aria-expanded="true"] {
+        border-color: var(--pc-accent);
+        background: var(--pc-accent);
+      }
+
+      /* Floating: the pane floats over the canvas as a box, and collapses to a button */
+      :host([mode="floating"]) {
+        position: absolute;
+        z-index: 5;
+        top: var(--pc-space-2);
+        bottom: var(--pc-space-2);
+        flex-direction: column;
+        gap: var(--pc-space-1);
+        max-width: var(--pc-floating-panel-width, min(360px, 85vw));
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+        overflow: hidden;
+      }
+      :host([mode="floating"]:not([edge="right"])) {
+        left: var(--pc-space-2);
+      }
+      :host([mode="floating"][edge="right"]) {
+        right: var(--pc-space-2);
+      }
+      :host([mode="floating"][collapsed]) {
+        bottom: auto;
+      }
+      .collapse {
+        align-self: flex-end;
+        min-width: var(--pc-control-size);
+        min-height: var(--pc-control-size);
+        border: 0;
+        background: transparent;
+        color: var(--pc-text);
+        font-size: 18px;
+        cursor: pointer;
+      }
+      .collapse:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+    `];
+	/** The panels in it */
+	panels = [];
+	/** The rail button that opened the open panel, to return focus to */
+	opener;
+	panelObserver = new MutationObserver(() => this.requestUpdate());
+	onDocumentPointerDown = (event) => {
+		const panel = this.openPanel;
+		if (!panel) return;
+		const path = event.composedPath();
+		if (path.includes(panel) || this.opener && path.includes(this.opener)) return;
+		markDismissingPress(event);
+		this.closePanel(false);
+	};
+	onKeyDown = (event) => {
+		if (event.key !== "Escape" || !this.openPanel) return;
+		event.preventDefault();
+		this.closePanel(true);
+	};
+	constructor() {
+		super();
+		this.orientation = "vertical";
+		this.mode = "docked";
+		this.edge = "left";
+		this.label = "";
+		this.collapsed = true;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.panelObserver.observe(this, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"icon",
+				"label",
+				"badge"
+			]
+		});
+		this.addEventListener("keydown", this.onKeyDown);
+		document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.panelObserver.disconnect();
+		this.removeEventListener("keydown", this.onKeyDown);
+		document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+	}
+	/**
+	* Open a panel over the canvas from its rail button (closing any other), or close it if it's open. Focus moves into
+	* the panel: to the first thing in it that takes focus, or the panel itself.
+	*
+	* @example
+	* pane.togglePanel(pane.querySelector("pc-panel-layers"));
+	*/
+	togglePanel(panel, opener) {
+		if (this.openPanel === panel) {
+			this.closePanel(true);
+			return;
+		}
+		if (this.openPanel) this.closePanel(false);
+		this.openPanel = panel;
+		this.opener = opener;
+		this.syncPanels();
+		const focusable = panel.querySelector(FOCUSABLE);
+		if (focusable) focusable.focus();
+		else {
+			panel.tabIndex = -1;
+			panel.focus();
+		}
+	}
+	/**
+	* Close the panel open from the rail, moving focus back to its rail button if asked.
+	*/
+	closePanel(returnFocus) {
+		if (!this.openPanel) return;
+		this.openPanel = void 0;
+		this.syncPanels();
+		if (returnFocus) this.opener?.focus();
+		this.opener = void 0;
+	}
+	/** Show or collapse the floating pane, telling listeners */
+	toggleCollapsed() {
+		this.collapsed = !this.collapsed;
+		emit(this, PANE_COLLAPSE_EVENT, { collapsed: this.collapsed });
+	}
+	/** Follow the panels slotted into it */
+	onSlotChange() {
+		this.panels = [...this.renderRoot.querySelectorAll("slot")].flatMap((slot) => slot.assignedElements({ flatten: true }).filter((element) => element instanceof PcPanel));
+		if (this.openPanel && !this.panels.includes(this.openPanel)) this.closePanel(false);
+		this.syncPanels();
+		this.requestUpdate();
+	}
+	/** Show the panels for the mode: hidden behind the rail (except the open one, beside the pane) or as they are */
+	syncPanels() {
+		const rail = showsRail(this.mode);
+		for (const panel of this.panels) {
+			panel.toggleAttribute("data-pc-rail", rail);
+			if (rail && panel === this.openPanel) panel.setAttribute("data-pc-open", this.edge);
+			else panel.removeAttribute("data-pc-open");
+		}
+	}
+	updated(changed) {
+		if (!changed.has("mode") && !changed.has("edge")) return;
+		if (!showsRail(this.mode)) this.closePanel(false);
+		this.syncPanels();
+	}
+	/** Content of its own at its start, before what's slotted there */
+	renderStart() {
+		return nothing;
+	}
+	/** Content of its own in its middle, before what's slotted there */
+	renderMiddle() {
+		return nothing;
+	}
+	/** Content of its own at its end, before what's slotted there */
+	renderEnd() {
+		return nothing;
+	}
+	/** The rail: a button per panel */
+	renderRail() {
+		if (!showsRail(this.mode) || this.panels.length === 0) return nothing;
+		return html`<div
+      class="rail"
+      part="rail"
+      role="toolbar"
+      aria-orientation="vertical"
+      aria-label=${this.label || nothing}
+    >
+      ${this.panels.map((panel) => {
+			const label = panel.panelLabel;
+			return html`<button
+          type="button"
+          title=${label}
+          aria-label=${panel.badge ? this.t("paintCanvas.layout.new", { name: label }) : label}
+          aria-expanded=${String(this.openPanel === panel)}
+          @click=${(event) => this.togglePanel(panel, event.currentTarget)}
+        >
+          <img src=${this.iconUrl(panel.panelIcon)} alt="" />
+          ${panel.badge ? html`<span class="badge"></span>` : nothing}
+        </button>`;
+		})}
+    </div>`;
+	}
+	/** The button that shows or collapses a floating pane */
+	renderCollapse() {
+		if (this.mode !== "floating") return nothing;
+		const collapsed = this.collapsed;
+		const arrows = this.edge === "right" ? ["«", "»"] : ["»", "«"];
+		return html`<button
+      type="button"
+      class="collapse"
+      part="collapse"
+      aria-expanded=${String(!collapsed)}
+      aria-label=${this.t(collapsed ? "paintCanvas.layout.show" : "paintCanvas.layout.hide", { name: this.label })}
+      @click=${this.toggleCollapsed}
+    >
+      ${collapsed ? arrows[0] : arrows[1]}
+    </button>`;
+	}
+	render() {
+		return html`${this.renderCollapse()}
+      <div
+        class="regions"
+        part="regions"
+        ?hidden=${this.mode === "floating" && this.collapsed}
+      >
+        <div class="start" part="start">
+          ${this.renderStart()}<slot
+            name="start"
+            @slotchange=${this.onSlotChange}
+          ></slot
+          ><slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+        <div class="middle" part="middle">
+          ${this.renderMiddle()}<slot
+            name="middle"
+            @slotchange=${this.onSlotChange}
+          ></slot>
+        </div>
+        <div class="end" part="end">
+          ${this.renderEnd()}<slot
+            name="end"
+            @slotchange=${this.onSlotChange}
+          ></slot>
+        </div>
+      </div>
+      ${this.renderRail()}`;
+	}
+};
+defineElement("pc-pane", PcPane);
+export { PANE_COLLAPSE_EVENT, PcPane };

package/dist/ui/elements/PcPanel/index.d.ts

@@ -1,12 +1,20 @@
+import { nothing, type TemplateResult } from "lit";
 import { PcElement } from "../../base";
 /**
- * Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
- * `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
- * meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
- * (`--pc-panel-max-width`).
+ * A panel: a box of settings or content for one purpose, docked in a `<pc-pane>` or floating over the canvas. It has
+ * `header`, `body` and `footer` slots; content without a slot goes in the body. It names its region with its `label`
+ * for screen readers.
+ *
+ * Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
+ * a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`), and in every layout it's
+ * never wider than 290px (`--pc-panel-max-width`) or the space it has.
+ *
+ * Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
+ * `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give
+ * their own `defaultLabel` and `defaultIcon`.
  *
  * @example
- * html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+ * html`<pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>`
  */
 export declare class PcPanel extends PcElement {
     static properties: {
@@ -32,12 +40,22 @@ export declare class PcPanel extends PcElement {
         };
     };
     static styles: import("lit").CSSResultGroup[];
-    /** Name of the icon for its rail button */
+    /** Name of the icon for its rail button (`defaultIcon` if not given) */
     icon: string;
-    /** Names the panel (its rail button and region) */
+    /** Names the panel: its region and rail button (`defaultLabel` if not given) */
     label: string;
     /** Whether there's something new in it */
     badge: boolean;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    /** The icon a panel made for a purpose shows on its rail button when none is given */
+    protected get defaultIcon(): string;
+    /** The name a panel made for a purpose has when none is given, in the chosen language */
+    protected get defaultLabel(): string;
+    /** The icon shown on its rail button */
+    get panelIcon(): string;
+    /** The panel's name, for its region and rail button */
+    get panelLabel(): string;
+    /** The panel's own body content, before what's slotted into its body (none for a plain `<pc-panel>`) */
+    protected renderBody(): TemplateResult | typeof nothing;
+    render(): TemplateResult<1>;
 }

package/dist/ui/elements/PcPanel/index.js

@@ -2,13 +2,20 @@ import { PcElement, defineElement } from "../../base/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcPanel/index.ts
 /**
-* Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
-* `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
-* meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
-* (`--pc-panel-max-width`).
+* A panel: a box of settings or content for one purpose, docked in a `<pc-pane>` or floating over the canvas. It has
+* `header`, `body` and `footer` slots; content without a slot goes in the body. It names its region with its `label`
+* for screen readers.
+*
+* Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
+* a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`), and in every layout it's
+* never wider than 290px (`--pc-panel-max-width`) or the space it has.
+*
+* Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
+* `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give
+* their own `defaultLabel` and `defaultIcon`.
 *
 * @example
-* html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+* html`<pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>`
 */
 var PcPanel = class extends PcElement {
 	static properties = {
@@ -23,10 +30,38 @@ var PcPanel = class extends PcElement {
 	static styles = [PcElement.styles, css`
       :host {
         display: flex;
+        box-sizing: border-box;
+        width: var(--pc-panel-width, var(--pc-panel-default-width, 290px));
         min-width: 0;
-        max-width: var(--pc-panel-max-width, 290px);
+        max-width: min(100%, var(--pc-panel-max-width, 290px));
         min-height: 0;
+        max-height: 100%;
         flex-direction: column;
+        /* Light grey, like the bars */
+        background: var(--pc-bar);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      /* In a pane's rail (set by the pane): hidden until opened from its button, then over the canvas beside the pane,
+         as tall as its content needs (at most 90% of the window's height, and never taller than the pane) */
+      :host([data-pc-rail]:not([data-pc-open])) {
+        display: none;
+      }
+      :host([data-pc-open]) {
+        position: absolute;
+        z-index: 5;
+        top: 0;
+        /* Its usual width, kept within the window (the pane it opens from is narrower than it) */
+        max-width: min(var(--pc-panel-max-width, 290px), 85vw);
+        max-height: min(90vh, 100%);
+      }
+      :host([data-pc-open="left"]) {
+        left: 100%;
+      }
+      :host([data-pc-open="right"]) {
+        right: 100%;
       }
       section {
         display: flex;
@@ -34,6 +69,15 @@ var PcPanel = class extends PcElement {
         min-height: 0;
         flex-direction: column;
       }
+      .body {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        padding: var(--pc-space-2);
+        overflow: auto;
+      }
     `];
 	constructor() {
 		super();
@@ -41,9 +85,33 @@ var PcPanel = class extends PcElement {
 		this.label = "";
 		this.badge = false;
 	}
+	/** The icon a panel made for a purpose shows on its rail button when none is given */
+	get defaultIcon() {
+		return "";
+	}
+	/** The name a panel made for a purpose has when none is given, in the chosen language */
+	get defaultLabel() {
+		return "";
+	}
+	/** The icon shown on its rail button */
+	get panelIcon() {
+		return this.icon || this.defaultIcon;
+	}
+	/** The panel's name, for its region and rail button */
+	get panelLabel() {
+		return this.label || this.defaultLabel;
+	}
+	/** The panel's own body content, before what's slotted into its body (none for a plain `<pc-panel>`) */
+	renderBody() {
+		return nothing;
+	}
 	render() {
-		return html`<section part="panel" aria-label=${this.label || nothing}>
-      <slot></slot>
+		return html`<section part="panel" aria-label=${this.panelLabel || nothing}>
+      <slot name="header"></slot>
+      <div class="body" part="body">
+        ${this.renderBody()}<slot name="body"><slot></slot></slot>
+      </div>
+      <slot name="footer"></slot>
     </section>`;
 	}
 };