@galaxy-io/dls 2.6.1 → 2.7.0

package/dist/drawer/Drawer.d.ts

@@ -23,6 +23,18 @@ interface DrawerBaseProps extends AriaAttributes {
     footer?: ReactNode;
     /** Controls in the title row, before the close button, for the thing the drawer shows: one or two icon-only `TERTIARY` `SMALL` buttons and a ⋯ `Menu` for the rest. Not for Save or Cancel (those are `footer`). */
     actions?: ReactNode;
+    /** A strip between the title row and the body that stays in place while the body scrolls: an `Alert isBanner`. */
+    banner?: ReactNode;
+    /**
+     * Hairlines between the title row and the body, and between the body and the footer. For a body that scrolls.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * No body padding: the app owns it (sections of `Box padding={16}` and `Divider`s, a table edge to edge). The title row and footer keep theirs.
+     * @default false
+     */
+    isFlush?: boolean;
     /**
      * The edge the drawer sits on and slides from.
      * @default Side.RIGHT

package/dist/drawer/Drawer.js

@@ -6,6 +6,7 @@ import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Portal from "../layout/Portal.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
 import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+import Divider from "../layout/Divider.js";
 import { OVERLAY_CONTENT_SHOWN, withContentFirstExit } from "../overlay/internal/contentFirstExit.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
@@ -32,6 +33,11 @@ import { AnimatePresence, motion } from "framer-motion";
 * link) and a ⋯ `Menu` for the rest (rename, duplicate, delete). `footer` finishes the drawer's
 * task (Cancel, then the `PRIMARY` Save); a read-only detail drawer usually has no footer.
 *
+* The regions are plain by default, as in `Modal`. `hasDividers` draws a hairline between the
+* title row and the body and between the body and the footer. `isFlush` drops the body's padding
+* so the app owns it. `banner` is a slot between the title row and the body that stays put while
+* the body scrolls, for an `Alert isBanner`.
+*
 * By default it is modal, like `Modal`: a portal over a dimmed, locked page with a focus trap,
 * stacked through the overlay stack, closing on Escape or a backdrop click. With
 * `isModal={false}` it is a docked panel: it renders in place in the layout and pushes the content
@@ -186,14 +192,22 @@ var Body = /*#__PURE__*/ styled("div")({
 	class: "gx-Drawer-Body-b45j7yl",
 	propsAsIs: false
 });
+/** `isFlush`: the body has no inset; the content pads itself. */
+var FLUSH_BODY_CSS = "gx-Drawer-FLUSH_BODY_CSS-fov58xm";
+/** `banner`: a strip pinned between the title row and the body; it never shrinks or scrolls. */
+var Banner = /*#__PURE__*/ styled("div")({
+	name: "Banner",
+	class: "gx-Drawer-Banner-bckczr5",
+	propsAsIs: false
+});
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Drawer-Footer-fov58xm",
+	class: "gx-Drawer-Footer-f1v64nx4",
 	propsAsIs: false
 });
 var CloseSlot = /*#__PURE__*/ styled("span")({
 	name: "CloseSlot",
-	class: "gx-Drawer-CloseSlot-cckczr5",
+	class: "gx-Drawer-CloseSlot-ct6k1c3",
 	propsAsIs: false
 });
 /**
@@ -202,17 +216,17 @@ var CloseSlot = /*#__PURE__*/ styled("span")({
 * the stylesheet.
 */
 var DRAWER_SIDE_TO_HANDLE_CSS_MAP = {
-	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s1v64nx4",
-	[Side.LEFT]: "gx-Drawer-Side_LEFT-st6k1c3",
-	[Side.TOP]: "gx-Drawer-Side_TOP-s15lcrsa",
-	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s1ob4oh8"
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s15lcrsa",
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-s1ob4oh8",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s14nwavk",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s1ifjfam"
 };
 /** The viewport length on the side's axis, less the 48px strip. */
 function readMaxSize(side) {
 	return (DRAWER_SIDE_TO_IS_HORIZONTAL_MAP[side] ? window.innerWidth : window.innerHeight) - DRAWER_VIEWPORT_GAP_PX;
 }
 /** A panel that slides in from an edge: title row, scrolling body, actions row. */
-var Drawer = forwardRef(function Drawer({ children, header, subheader, icon, footer, actions, side = Side.RIGHT, size = "MEDIUM", isResizable = false, isModal = true, isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+var Drawer = forwardRef(function Drawer({ children, header, subheader, icon, footer, actions, banner, hasDividers = false, isFlush = false, side = Side.RIGHT, size = "MEDIUM", isResizable = false, isModal = true, isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
 	const generatedId = useId();
 	const titleId = useId();
 	const subheaderId = useId();
@@ -283,8 +297,13 @@ var Drawer = forwardRef(function Drawer({ children, header, subheader, icon, foo
 			subheaderId,
 			hasClose: isDismissable
 		}),
-		/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
-		footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),
+		hasDividers && hasHeaderRow && /* @__PURE__ */ jsx(Divider, {}),
+		banner !== void 0 && /* @__PURE__ */ jsx(Banner, { children: banner }),
+		/* @__PURE__ */ jsx(Body, {
+			className: cx(isFlush && FLUSH_BODY_CSS),
+			children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children
+		}),
+		footer !== void 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [hasDividers && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Footer, { children: footer })] }),
 		isResizable && /* @__PURE__ */ jsx(ResizeHandle, {
 			orientation: DRAWER_SIDE_TO_HANDLE_ORIENTATION_MAP[side],
 			isReversed: DRAWER_SIDE_TO_IS_HANDLE_REVERSED_MAP[side],

package/dist/layout/ResizablePanels.d.ts

@@ -10,6 +10,11 @@ export interface ResizablePanelsProps extends AriaAttributes {
     orientation?: Orientation;
     /** Persists each uncontrolled panel's size in `localStorage` under this key, by panel `id`. Off when omitted. */
     storageKey?: string;
+    /**
+     * A hairline on the edge where two panels meet: a sized panel's edge facing its handle, so the handle's strip lies just inside the fluid panel.
+     * @default false
+     */
+    hasDividers?: boolean;
     /** DOM id on the root `<div>`. */
     id?: string;
     /** Any `data-*` attribute, forwarded to the root `<div>`. */

package/dist/layout/ResizablePanels.js

@@ -20,6 +20,11 @@ import { useMergeRefs } from "@floating-ui/react";
 * Pass `ResizablePanel`s as direct children (Fragments are not flattened); `null` / `false`
 * children are skipped, so a panel can be shown conditionally. A panel with neither `value` nor
 * `defaultValue` is the fluid one; with none, the last panel is.
+*
+* The panels have no frame of their own. `hasDividers` draws a hairline on the edge where two
+* panels meet: on a sized panel's edge that faces its handle (so the line sits on the sidebar's
+* edge and the handle's strip lies just inside the fluid panel), and on the later panel's start
+* edge where two panels meet without a handle.
 */
 var ResizablePanelsContext = createContext(null);
 /** The storage key while `storageKey` is unset; it lives in a per-instance memory adapter. */
@@ -68,6 +73,15 @@ var RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP = {
 var SIZED_CSS = "gx-ResizablePanels-SIZED_CSS-s16ojr42";
 /** The fluid panel takes the remaining space. */
 var FLUID_CSS = "gx-ResizablePanels-FLUID_CSS-f1k6jei3";
+/** `hasDividers`: the hairline on a panel's start or end edge along the layout axis. */
+var RESIZABLE_PANEL_ORIENTATION_TO_START_DIVIDER_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1ikvfoe",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-oa3x64k"
+};
+var RESIZABLE_PANEL_ORIENTATION_TO_END_DIVIDER_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1kf7v08",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o12hjusf"
+};
 /** Rounds and keeps `value` within `[min, max]`. */
 function clamp(value, min, max) {
 	return Math.min(Math.max(Math.round(value), min), max);
@@ -76,7 +90,7 @@ function isPanelElement(node) {
 	return isValidElement(node) && node.type === ResizablePanel;
 }
 /** A split layout of `ResizablePanel`s with a `ResizeHandle` between each sized–fluid pair. */
-var ResizablePanels = forwardRef(function ResizablePanels({ children, orientation = Orientation.HORIZONTAL, storageKey, className, style, ...rest }, ref) {
+var ResizablePanels = forwardRef(function ResizablePanels({ children, orientation = Orientation.HORIZONTAL, storageKey, hasDividers = false, className, style, ...rest }, ref) {
 	const rootRef = useRef(null);
 	const mergedRef = useMergeRefs([rootRef, ref]);
 	const rootSize = useElementClientSize(rootRef);
@@ -130,10 +144,26 @@ var ResizablePanels = forwardRef(function ResizablePanels({ children, orientatio
 		}
 		return Math.max(target.min, Math.min(target.max, Math.floor(room)));
 	};
-	const layoutById = new Map(panels.map((panel) => [panel.props.id, {
+	const dividerEdges = panels.map(() => ({
+		start: false,
+		end: false
+	}));
+	if (hasDividers) handleTargets.forEach((targetIndex, index) => {
+		if (index === 0) return;
+		if (targetIndex === void 0) {
+			const edges = dividerEdges[index];
+			if (edges !== void 0) edges.start = true;
+		} else {
+			const edges = dividerEdges[targetIndex];
+			if (edges !== void 0) edges[targetIndex === index ? "start" : "end"] = true;
+		}
+	});
+	const layoutById = new Map(panels.map((panel, index) => [panel.props.id, {
 		size: panel.isFluid ? void 0 : sizeOf(panel),
 		min: panel.min,
-		isFluid: panel.isFluid
+		isFluid: panel.isFluid,
+		hasStartDivider: dividerEdges[index]?.start ?? false,
+		hasEndDivider: dividerEdges[index]?.end ?? false
 	}]));
 	const contextValue = {
 		orientation,
@@ -185,7 +215,7 @@ var ResizablePanel = forwardRef(function ResizablePanel({ id, children, value: _
 		id,
 		role: name ? "region" : void 0,
 		"aria-label": name,
-		className: cx(RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP[orientation], isFluid ? FLUID_CSS : SIZED_CSS, className),
+		className: cx(RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP[orientation], isFluid ? FLUID_CSS : SIZED_CSS, layout?.hasStartDivider && RESIZABLE_PANEL_ORIENTATION_TO_START_DIVIDER_CSS_MAP[orientation], layout?.hasEndDivider && RESIZABLE_PANEL_ORIENTATION_TO_END_DIVIDER_CSS_MAP[orientation], className),
 		style: {
 			...style,
 			...variables

package/dist/lists/DescriptionList.d.ts

@@ -83,6 +83,16 @@ export interface DescriptionListProps extends AriaAttributes {
      * @default false
      */
     isValueTrailing?: boolean;
+    /**
+     * A hairline between rows, with 8px (`HORIZONTAL`) or 12px (`VERTICAL`) above and below it; none above the first row or below the last.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * A hairline frame with `lg` corners around the list, 16px from the first label and the last value, with a line between rows inside it (implies `hasDividers`) and 12px above and below every row: the detail card.
+     * @default false
+     */
+    hasBorder?: boolean;
     /** DOM id on the root `<dl>`. */
     id?: string;
     /** Any `data-*` attribute, forwarded to the root `<dl>`. */

package/dist/lists/DescriptionList.js

@@ -19,6 +19,11 @@ import { cx } from "@linaria/core";
 * by side. Rows take the copy button's height when any item is copyable, so the list keeps one
 * rhythm.
 *
+* `hasDividers` draws a hairline under every row but the last (never above the first) and
+* moves the grid gaps onto the cells so the line is continuous across the label and value tracks.
+* `hasBorder` frames the list with a hairline and `lg` corners, pads the rows' outer edges (so the
+* lines reach the frame) and implies `hasDividers`: the detail card.
+*
 * Read-only: editing is a form (`Field` + inputs); a list of plain lines is `BulletedList`.
 */
 /** Type step of labels and values; canonical rungs `SMALL MEDIUM LARGE`. */
@@ -68,17 +73,42 @@ var DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP = {
 	[Orientation.HORIZONTAL]: "gx-DescriptionList-Orientation_HORIZONTAL-oarm5a8",
 	[Orientation.VERTICAL]: "gx-DescriptionList-Orientation_VERTICAL-o1itek1z"
 };
+/**
+* `hasDividers`: the grid gaps become cell padding (`--gx-dl-col-gap` at the end of every item
+* but the last in its row, `--gx-dl-row-pad` above and below every row boundary) and the rows
+* after the first draw a hairline on their top edge. Which items start or end a row depends on
+* `columns`, so the per-row custom properties are set in the columns map and read here. In
+* `HORIZONTAL` the item leaves `display: contents` for a subgrid over its two tracks, so it is a
+* box that can carry the border and padding while its label stays in the shared label track.
+*/
+var DIVIDERS_CSS = "gx-DescriptionList-DIVIDERS_CSS-d19oquh";
+var DESCRIPTION_LIST_DIVIDERS_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-DescriptionList-Orientation_HORIZONTAL-o108p3ql",
+	[Orientation.VERTICAL]: "gx-DescriptionList-Orientation_VERTICAL-o10x7q9y"
+};
+var DESCRIPTION_LIST_DIVIDERS_COLUMNS_TO_CSS_MAP = {
+	1: "gx-DescriptionList-1-_1g4xmgd",
+	2: "gx-DescriptionList-2-_1s7hmki",
+	3: "gx-DescriptionList-3-_1t8g3vn",
+	4: "gx-DescriptionList-4-_1k8wc0x"
+};
+/**
+* `hasBorder`: a hairline frame with `lg` corners; the first and last columns pad 16 from it, every
+* row pads 12 above and below (the outer rows through the edge fallbacks the cells read), and the
+* `hasDividers` blocks draw the lines. Declared after the orientation map so its row pad wins.
+*/
+var BORDER_CSS = "gx-DescriptionList-BORDER_CSS-b6xkh13";
 var DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP = {
-	1: "gx-DescriptionList-1-_19oquh",
-	2: "gx-DescriptionList-2-_108p3ql",
-	3: "gx-DescriptionList-3-_10x7q9y",
-	4: "gx-DescriptionList-4-_1g4xmgd"
+	1: "gx-DescriptionList-1-_x7vzfq",
+	2: "gx-DescriptionList-2-_1wbhzfx",
+	3: "gx-DescriptionList-3-_6u7lmt",
+	4: "gx-DescriptionList-4-_10jrxrj"
 };
 /** Applied only when some item is copyable: every row is as tall as a row with a copy button. */
 var DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP = {
-	["SMALL"]: "gx-DescriptionList-SMALL-s1s7hmki",
-	["MEDIUM"]: "gx-DescriptionList-MEDIUM-m1t8g3vn",
-	["LARGE"]: "gx-DescriptionList-LARGE-l1k8wc0x"
+	["SMALL"]: "gx-DescriptionList-SMALL-s1xbu6g3",
+	["MEDIUM"]: "gx-DescriptionList-MEDIUM-m1okymsl",
+	["LARGE"]: "gx-DescriptionList-LARGE-l15jcjvy"
 };
 var DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
@@ -99,9 +129,10 @@ var getCopyText = (item) => {
 	return isText(item.value) && !isEmpty(item.value) ? String(item.value) : void 0;
 };
 /** Labelled values in a `<dl>`: labels aligned in one column, or above their values. */
-var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIUM", orientation = Orientation.HORIZONTAL, columns = 1, isValueTrailing = false, id, className, style, ...rest }, ref) {
+var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIUM", orientation = Orientation.HORIZONTAL, columns = 1, isValueTrailing = false, hasDividers = false, hasBorder = false, id, className, style, ...rest }, ref) {
 	const textSize = DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP[size];
 	const hasCopy = items.some((item) => item.isCopyable === true);
+	const hasLines = hasDividers || hasBorder;
 	const entries = items.map((item, position) => ({
 		item,
 		position
@@ -110,7 +141,7 @@ var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIU
 		...rest,
 		ref,
 		id,
-		className: cx(DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP[orientation], DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP[columns], hasCopy && DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP[size], isValueTrailing && VALUE_TRAILING_CSS, className),
+		className: cx(DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP[orientation], DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP[columns], hasCopy && DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP[size], isValueTrailing && VALUE_TRAILING_CSS, hasLines && DIVIDERS_CSS, hasLines && DESCRIPTION_LIST_DIVIDERS_ORIENTATION_TO_CSS_MAP[orientation], hasLines && DESCRIPTION_LIST_DIVIDERS_COLUMNS_TO_CSS_MAP[columns], hasBorder && BORDER_CSS, className),
 		style,
 		children: entries.map(({ item, position }) => {
 			const copyText = getCopyText(item);

package/dist/modal/Modal.d.ts

@@ -17,6 +17,18 @@ interface ModalBaseProps extends AriaAttributes {
     children?: ReactNode;
     /** The actions row, end-aligned with an 8px gap. Put the least destructive action first. */
     footer?: ReactNode;
+    /** A strip between the title row and the body that stays in place while the body scrolls: an `Alert isBanner`. */
+    banner?: ReactNode;
+    /**
+     * Hairlines between the title row and the body, and between the body and the footer. For a body that scrolls.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * No body padding: the app owns it (sections of `Box padding={16}` and `Divider`s, a table edge to edge). The title row and footer keep theirs.
+     * @default false
+     */
+    isFlush?: boolean;
     /**
      * Panel width: 400 / 560 / 720px, or `X_LARGE` to fill the viewport less 32px on each side.
      * @default ModalSize.MEDIUM

package/dist/modal/Modal.js

@@ -3,6 +3,7 @@ import Text from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Portal from "../layout/Portal.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import Divider from "../layout/Divider.js";
 import { OverlayScaleFade } from "../overlay/internal/OverlayScaleFade.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
@@ -11,7 +12,7 @@ import Fade from "../transform/Fade.js";
 /* empty css                */
 import { styled } from "@linaria/react";
 import { forwardRef, useId, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 import { XIcon } from "@phosphor-icons/react";
 //#region src/modal/Modal.tsx
@@ -23,6 +24,12 @@ import { XIcon } from "@phosphor-icons/react";
 * and out (`Fade` backdrop, a scale-fade panel whose content leaves first). It has no trigger: the
 * app opens it.
 *
+* The regions are plain by default. `hasDividers` draws a hairline between the title row and the
+* body and between the body and the footer, for a body that scrolls. `isFlush` drops the body's
+* padding so the app owns it (sections of `Box padding={16}` and `Divider`s, a table edge to
+* edge). `banner` is a slot between the title row and the body that stays put while the body
+* scrolls, for an `Alert isBanner`.
+*
 * A short yes/no question is `ConfirmDialog`; a panel beside the page is `Drawer`; an anchored
 * panel is `Popover`.
 *
@@ -80,18 +87,26 @@ var Body = /*#__PURE__*/ styled("div")({
 	class: "gx-Modal-Body-b1w4b032",
 	propsAsIs: false
 });
+/** `isFlush`: the body has no inset; the content pads itself. */
+var FLUSH_BODY_CSS = "gx-Modal-FLUSH_BODY_CSS-fbri8ij";
+/** `banner`: a strip pinned between the title row and the body; it never shrinks or scrolls. */
+var Banner = /*#__PURE__*/ styled("div")({
+	name: "Banner",
+	class: "gx-Modal-Banner-bxdonbm",
+	propsAsIs: false
+});
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Modal-Footer-fbri8ij",
+	class: "gx-Modal-Footer-f1c1q51w",
 	propsAsIs: false
 });
 var CloseSlot = /*#__PURE__*/ styled("span")({
 	name: "CloseSlot",
-	class: "gx-Modal-CloseSlot-cxdonbm",
+	class: "gx-Modal-CloseSlot-c1aye683",
 	propsAsIs: false
 });
 /** A blocking dialog over a dimmed page: title row, scrolling body, actions row. */
-var Modal = forwardRef(function Modal({ children, header, subheader, icon, footer, size = "MEDIUM", isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+var Modal = forwardRef(function Modal({ children, header, subheader, icon, footer, banner, hasDividers = false, isFlush = false, size = "MEDIUM", isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
 	const generatedId = useId();
 	const titleId = useId();
 	const subheaderId = useId();
@@ -165,8 +180,13 @@ var Modal = forwardRef(function Modal({ children, header, subheader, icon, foote
 								subheaderId,
 								hasClose: isDismissable
 							}),
-							/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
-							footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),
+							hasDividers && hasHeaderRow && /* @__PURE__ */ jsx(Divider, {}),
+							banner !== void 0 && /* @__PURE__ */ jsx(Banner, { children: banner }),
+							/* @__PURE__ */ jsx(Body, {
+								className: cx(isFlush && FLUSH_BODY_CSS),
+								children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children
+							}),
+							footer !== void 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [hasDividers && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Footer, { children: footer })] }),
 							isDismissable && /* @__PURE__ */ jsx(CloseSlot, { children: /* @__PURE__ */ jsx(Button, {
 								variant: ButtonVariant.TERTIARY,
 								size: ButtonSize.SMALL,

package/dist/navigation/Tabs.d.ts

@@ -1,6 +1,6 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ElementType, type ReactElement, type ReactNode, type RefAttributes } from "react";
-import { Orientation } from "../theme/enums.js";
+import { Orientation, type Space } from "../theme/enums.js";
 /** Mode (Constitution V-A local mode set: Tabs UNDERLINE / PILL; declared in scripts/lint-dls.ts MODE_SETS). */
 export declare enum TabsVariant {
     /** Tabs on a hairline; the selected tab has a `text.primary` indicator on the edge facing the panel. The default. */
@@ -81,6 +81,12 @@ export interface TabsProps<TId extends string = string> extends AriaAttributes {
      * @default false
      */
     fillWidth?: boolean;
+    /**
+     * Space between the ends of the row (or column) and its first and last tab, `actions` included; the `UNDERLINE` hairline still runs the full length.
+     * For a row flush with a panel's edges whose tabs should sit on the page's padding line (`16` in the island), instead of a padded wrapper, which would cut the hairline short.
+     * @default 0
+     */
+    inset?: Space;
     /** Controls at the end of the tab row (or the bottom of the column), outside the tablist, usually `Button`s one rung smaller. */
     actions?: ReactNode;
     /**

package/dist/navigation/Tabs.js

@@ -2,6 +2,7 @@ import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js
 import { Orientation, Placement } from "../theme/enums.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import { useControlledState } from "../hooks/useControlledState.js";
+import { spaceToCss } from "../utils/css.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Chip, { ChipSize, ChipVariant } from "../chips/Chip.js";
 import Menu, { MenuItem, MenuSize } from "../menu/Menu.js";
@@ -19,7 +20,9 @@ import { CaretDownIcon } from "@phosphor-icons/react";
 * navigates. Each tab can show an icon and a count `Chip`. `UNDERLINE` is the page-level mode (a
 * hairline with a `text.primary` indicator under the selected tab); `PILL` is a quieter second level (the
 * selected tab is a filled pill). Horizontal tabs that do not fit collapse into a "More" menu at
-* the end of the row, so the row never wraps or scrolls.
+* the end of the row, so the row never wraps or scrolls. `inset` pads the row (or column) from its
+* ends while the `UNDERLINE` hairline keeps its full length: a row flush with a panel's edges, its
+* tabs on the page's padding line.
 *
 * Height: a horizontal row takes the height it is given. Alone it is its rung tall; stretched by
 * a taller flex row (the default `align-items: stretch`, e.g. a 48px app header) it fills that
@@ -58,7 +61,7 @@ var TabsSize = /* @__PURE__ */ function(TabsSize) {
 }({});
 /** Sub-pixel slack when comparing measured widths. */
 var FIT_EPSILON_PX = .5;
-/** The root block: bar, then panel (a horizontal bar with no panel fills the root's height). */
+/** The root block: bar, then panel (a horizontal bar with no panel fills the root's height). `--gx-tabs-inset` is the `inset` prop. */
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
 	class: "gx-Tabs-r1fvk33l",
@@ -114,6 +117,7 @@ var TABS_ORIENTATION_TO_CSS_MAP = {
 var FILL_WIDTH_CSS = "gx-Tabs-FILL_WIDTH_CSS-fs6iug3";
 /** Vertical `fillWidth`: a column with no panel beside it spans its parent, so the hairline sits on the parent's edge. */
 var VERTICAL_FILL_WIDTH_CSS = "gx-Tabs-VERTICAL_FILL_WIDTH_CSS-vvxftzj";
+/** The bar's `inset` is padding on the bar itself, so the `UNDERLINE` hairline (drawn on the bar's edge) spans it. */
 var TABS_ORIENTATION_TO_BAR_CSS_MAP = {
 	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oduyhd6",
 	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oux4b2d"
@@ -252,7 +256,7 @@ function fitVisibleIndexes(count, selectedIndex, measurement, available) {
 }
 /** Tabs and their panel; the value is the selected tab's id. */
 function TabsImpl(props, ref) {
-	const { items, value, defaultValue, onChange, variant = "UNDERLINE", size = "MEDIUM", orientation = Orientation.HORIZONTAL, fillWidth = false, actions, as, ariaLabel, id, className, style, ...rest } = props;
+	const { items, value, defaultValue, onChange, variant = "UNDERLINE", size = "MEDIUM", orientation = Orientation.HORIZONTAL, fillWidth = false, inset = 0, actions, as, ariaLabel, id, className, style, ...rest } = props;
 	const list = items;
 	const isLinks = list.some((item) => item.href !== void 0);
 	const isHorizontal = orientation === Orientation.HORIZONTAL;
@@ -281,13 +285,14 @@ function TabsImpl(props, ref) {
 	const [available, setAvailable] = useState(null);
 	const isMeasuring = isOverflowMode && (measurement === null || measurement.signature !== signature);
 	const hasActions = actions !== void 0 && actions !== null && actions !== false;
-	/** The row's width for tabs and the trigger: the bar minus `actions` and its gap. */
+	/** The row's width for tabs and the trigger: the bar minus its `inset` padding, `actions` and its gap. */
 	const readAvailable = useCallback(() => {
 		const bar = barRef.current;
 		if (bar === null) return;
-		let width = bar.getBoundingClientRect().width;
+		const barStyle = getComputedStyle(bar);
+		let width = bar.getBoundingClientRect().width - pxOf(barStyle.paddingInlineStart) - pxOf(barStyle.paddingInlineEnd);
 		const actionsElement = actionsRef.current;
-		if (actionsElement !== null) width -= actionsElement.getBoundingClientRect().width + pxOf(getComputedStyle(bar).columnGap);
+		if (actionsElement !== null) width -= actionsElement.getBoundingClientRect().width + pxOf(barStyle.columnGap);
 		setAvailable((current) => current === width ? current : width);
 	}, []);
 	useIsomorphicLayoutEffect(() => {
@@ -472,7 +477,10 @@ function TabsImpl(props, ref) {
 	return /* @__PURE__ */ jsxs(Root, {
 		ref,
 		className: cx(TABS_ORIENTATION_TO_CSS_MAP[orientation], fillWidth && (isHorizontal ? FILL_WIDTH_CSS : VERTICAL_FILL_WIDTH_CSS), className),
-		style,
+		style: inset === 0 ? style : {
+			...style,
+			"--gx-tabs-inset": spaceToCss(inset)
+		},
 		children: [/* @__PURE__ */ jsxs(Bar, {
 			ref: barRef,
 			className: cx(TABS_SIZE_TO_CSS_MAP[size], TABS_VARIANT_TO_BAR_CSS_MAP[variant][orientation], TABS_ORIENTATION_TO_BAR_CSS_MAP[orientation]),