@galaxy-io/dls 2.10.3 → 2.10.5

package/dist/brand/PoweredBy.js

@@ -1,16 +1,19 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import GalaxyAlchemyWordmark from "./GalaxyAlchemyWordmark.js";
 import GalaxyFilamentWordmark from "./GalaxyFilamentWordmark.js";
+import { useAppFrameContext } from "../layout/internal/AppFrameContext.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/brand/PoweredBy.tsx
 /**
 * The credit at the foot of a Galaxy module's sidebar: "Powered by" and the product wordmark, as
 * one link that opens the product's site in a new tab. A 40px row (tall enough to centre on the
 * Galaxy host's 24px theme toggle beside it) with `body_sm` tertiary text and the wordmark sized so
-* every product reads at the same x-height (Filament 15px, Alchemy 12px); its accessible name is
+* every product reads at the same x-height (Filament 15px, Alchemy 12px), its letters on the text's
+* baseline (an inline mark shifted by its own descent, not two boxes centred); its accessible name is
 * `ariaLabel` plus " (opens in a new tab)".
 *
 * `wordmark` is an enum of the product wordmarks, never a node: a product wordmark always stands
@@ -18,8 +21,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * (`Link isExternal` would draw one after the logo); the new tab is in the name.
 *
 * Hover is a monochrome step on the mark, `text.tertiary` to `text.secondary`, the DLS's own hover
-* idiom (a color change, never opacity). Focus is the `FOCUS_RING`. Not a nav destination
-* (`NavItem`), not a body link (`Link`).
+* idiom (a color change, never opacity). Focus is the `FOCUS_RING`. In a collapsed `AppFrame` it
+* renders nothing: the icon rail has no room for the credit. Not a nav destination (`NavItem`),
+* not a body link (`Link`).
 */
 /** The product whose wordmark the credit shows. */
 var PoweredByWordmark = /* @__PURE__ */ function(PoweredByWordmark) {
@@ -41,15 +45,30 @@ var POWERED_BY_WORDMARK_TO_SIZE_PX_MAP = {
 	["FILAMENT"]: 15,
 	["ALCHEMY"]: 12
 };
+/**
+* How far each wordmark's letters hang below their baseline, as a fraction of the artwork's
+* height: Filament's italic f tail (1200 − 910.55 of 1109 units), Alchemy's y (252 − 201.35 of
+* 252). Measured from the artwork's ink, so the mark can sit on the text's own baseline.
+*/
+/** The baseline shift per wordmark: its letters' descent in px at its size, below the text's baseline. */
+/**
+* Each wordmark on the text's baseline: inline (the wordmarks are blocks), an SVG's bottom edge
+* sits on the baseline, so `vertical-align` drops it by the letters' descent. The browser places the baseline (font metrics,
+* pixel snapping), so the mark and "Powered by" always share it.
+*/
+var POWERED_BY_WORDMARK_TO_BASELINE_CSS_MAP = {
+	["FILAMENT"]: "gx-PoweredBy-FILAMENT-f1hilrad",
+	["ALCHEMY"]: "gx-PoweredBy-ALCHEMY-a1s356ob"
+};
 /** What is appended to the name, as `Link isExternal` does. */
 var NEW_TAB_SUFFIX = " (opens in a new tab)";
 /**
-* The row: 40px (32 + 8), 8px in from the sides like a `NavItem`'s content, the text and the mark
-* 8px apart on one centre line. The radius gives the focus ring its corners.
+* The row: 40px (32 + 8), 8px in from the sides like a `NavItem`'s content. The text and the mark
+* share one line (and so one baseline), 8px apart. The radius gives the focus ring its corners.
 */
 var Root = /*#__PURE__*/ styled("a")({
 	name: "Root",
-	class: "gx-PoweredBy-r1hilrad",
+	class: "gx-PoweredBy-r1ez0mfr",
 	propsAsIs: false
 });
 /**
@@ -57,18 +76,31 @@ var Root = /*#__PURE__*/ styled("a")({
 * already transitions `color` on `duration.fast`. Declared in this module, whose CSS follows the
 * wordmarks' (it imports them), so it wins over their `text.primary`.
 */
-var MARK_CSS = "gx-PoweredBy-MARK_CSS-m1s356ob";
+var MARK_CSS = "gx-PoweredBy-MARK_CSS-mi05aex";
 /** The wordmark component per product: both take a px `size`, an `ariaLabel` and a class. */
 var POWERED_BY_WORDMARK_TO_COMPONENT_MAP = {
 	["FILAMENT"]: GalaxyFilamentWordmark,
 	["ALCHEMY"]: GalaxyAlchemyWordmark
 };
-/** "Powered by" never wraps or shrinks: the row is short and the mark follows it. */
-var LABEL_CSS = "gx-PoweredBy-LABEL_CSS-l1ez0mfr";
+/**
+* The line holding "Powered by" and the mark. It never wraps or shrinks, and its line height is the
+* row's 40px, so the mark's descent stays inside the line box and never moves the text: the baseline
+* lands where a centred `body_sm` line puts it, level with the middle of an icon beside the row.
+* Declared after Text's own CSS (this module imports it), so the line height wins.
+*/
+var LABEL_CSS = "gx-PoweredBy-LABEL_CSS-llnwtgc";
+/** The 8px between "Powered by" and the mark, as inline padding (no margins). */
+var MarkSlot = /*#__PURE__*/ styled("span")({
+	name: "MarkSlot",
+	class: "gx-PoweredBy-MarkSlot-mh367b4",
+	propsAsIs: false
+});
 /** The sidebar credit: "Powered by" and a product wordmark, linking to the product in a new tab. */
 var PoweredBy = forwardRef(function PoweredBy({ wordmark, href, ariaLabel, id, className, style, ...rest }, ref) {
+	const frame = useAppFrameContext();
 	const Wordmark = POWERED_BY_WORDMARK_TO_COMPONENT_MAP[wordmark];
-	return /* @__PURE__ */ jsxs(Root, {
+	if (frame?.isCollapsed) return null;
+	return /* @__PURE__ */ jsx(Root, {
 		"aria-label": `${ariaLabel}${NEW_TAB_SUFFIX}`,
 		...rest,
 		ref,
@@ -78,17 +110,17 @@ var PoweredBy = forwardRef(function PoweredBy({ wordmark, href, ariaLabel, id, c
 		rel: "noopener noreferrer",
 		className,
 		style,
-		children: [/* @__PURE__ */ jsx(Text, {
+		children: /* @__PURE__ */ jsxs(Text, {
 			as: "span",
 			size: TextSize.BODY_SM,
 			variant: TextVariant.TERTIARY,
 			className: LABEL_CSS,
-			children: "Powered by"
-		}), /* @__PURE__ */ jsx(Wordmark, {
-			size: POWERED_BY_WORDMARK_TO_SIZE_PX_MAP[wordmark],
-			ariaLabel: "",
-			className: MARK_CSS
-		})]
+			children: ["Powered by", /* @__PURE__ */ jsx(MarkSlot, { children: /* @__PURE__ */ jsx(Wordmark, {
+				size: POWERED_BY_WORDMARK_TO_SIZE_PX_MAP[wordmark],
+				ariaLabel: "",
+				className: cx(MARK_CSS, POWERED_BY_WORDMARK_TO_BASELINE_CSS_MAP[wordmark])
+			}) })]
+		})
 	});
 });
 PoweredBy.displayName = "PoweredBy";

package/dist/inputs/CronInput.js

@@ -123,7 +123,7 @@ var CRON_INPUT_FOCUS_RETRY_FRAMES = 10;
 /** The neutral hint shown when `cronstrue` cannot read the expression. */
 var CRON_INPUT_HINT = "Enter five fields: minute, hour, day of month, month, day of week.";
 /** The caption on the divider between the builder and the expression. */
-var CRON_INPUT_DIVIDER_LABEL = "or";
+var CRON_INPUT_DIVIDER_LABEL = "OR";
 /** Each builder row's label; the label column is as wide as the longest, whichever rows show. */
 var ROW_LABELS = {
 	frequency: "Frequency",

package/dist/layout/AppFrame.d.ts

@@ -1,9 +1,28 @@
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-/** The sidebar column's width in px, the same in every Galaxy module (Filament, Alchemy). */
-export declare const APP_FRAME_SIDEBAR_WIDTH = 240;
+/** The sidebar column's default width in px, the same in every Galaxy module (Filament, Alchemy). */
+export declare const APP_FRAME_SIDEBAR_WIDTH = 220;
+/**
+ * The collapsed column's width in px: 8px inset, SidebarNav's 8px, a 32px rail item, 8px, 8px. A
+ * rail icon's centre lands 1px from where the expanded item drew it.
+ */
+export declare const APP_FRAME_SIDEBAR_COLLAPSED_WIDTH = 64;
 export interface AppFrameProps extends AriaAttributes {
     /** The sidebar column's content: a `SidebarNav` with no `header`. It fills the column. */
     sidebar: ReactNode;
+    /**
+     * The sidebar column's width while expanded, inset included. A number is px.
+     * @default APP_FRAME_SIDEBAR_WIDTH (220)
+     */
+    sidebarWidth?: number | string;
+    /** Controlled: the sidebar is the icon rail (`APP_FRAME_SIDEBAR_COLLAPSED_WIDTH`). */
+    isCollapsed?: boolean;
+    /**
+     * Uncontrolled: whether the sidebar starts as the icon rail.
+     * @default false
+     */
+    defaultIsCollapsed?: boolean;
+    /** Called with the next collapsed state when `AppFrameToggle` is pressed. */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
     /** The page, usually a `PageLayout`. The column is a flex column that never overflows the frame. */
     children: ReactNode;
     /** DOM id on the root `<div>`. */
@@ -17,4 +36,23 @@ export interface AppFrameProps extends AriaAttributes {
 }
 /** A Galaxy module's frame: the sidebar column, a hairline, and the page. */
 declare const AppFrame: import("react").ForwardRefExoticComponent<AppFrameProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AppFrameToggleProps extends AriaAttributes {
+    /** DOM id on the `<button>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<button>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<button>`. */
+    className?: string;
+    /** Inline style on the `<button>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/**
+ * The button that collapses and expands the enclosing AppFrame's sidebar: a `TERTIARY` `SMALL`
+ * icon button (`SidebarSimpleIcon`, the host's own), named and tooltipped "Collapse sidebar" /
+ * "Expand sidebar", with `aria-expanded` and `aria-controls` on the column. Mod+B presses it (the
+ * tooltip shows the shortcut, `aria-keyshortcuts` announces it), also from inside a field. Put it in the
+ * SidebarNav footer, opposite `PoweredBy` in a `SPACE_BETWEEN` row; on the rail PoweredBy steps out
+ * and the row centres the toggle under the icons. Renders nothing outside an AppFrame.
+ */
+export declare const AppFrameToggle: import("react").ForwardRefExoticComponent<AppFrameToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default AppFrame;

package/dist/layout/AppFrame.js

@@ -1,9 +1,14 @@
 import { Orientation } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { getCssSizeValue } from "../utils/css.js";
+import { AppFrameContext, useAppFrameContext } from "./internal/AppFrameContext.js";
 import Divider from "./Divider.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 /* empty css                   */
 import { styled } from "@linaria/react";
-import { forwardRef } from "react";
+import { forwardRef, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { SidebarSimpleIcon } from "@phosphor-icons/react";
 //#region src/layout/AppFrame.tsx
 /**
 * The product frame of a Galaxy module: a fixed sidebar column, a vertical hairline, and a content
@@ -23,12 +28,29 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * it a `footer` and its items only, and `hasDividers={false}` when the footer should run on
 * without a line.
 *
-* There is no width prop (layout props live on Box, Flex, FlexItem and Grid): the sidebar is
-* `APP_FRAME_SIDEBAR_WIDTH`, 240px, the width every Galaxy module uses. Not a page (`PageLayout`),
-* not resizable panes (`ResizablePanels`).
+* The sidebar is `APP_FRAME_SIDEBAR_WIDTH`, 220px, the width every Galaxy module uses;
+* `sidebarWidth` changes it (a wrapper cannot reach the column, so it is the one layout prop here).
+*
+* **Collapsing.** `isCollapsed` / `defaultIsCollapsed` / `onCollapsedChange` narrow the column to
+* the icon rail, `APP_FRAME_SIDEBAR_COLLAPSED_WIDTH` (64px: the inset, SidebarNav's padding and a
+* 32px item), so the icons barely move. The width eases over `duration.base` (the Galaxy host's own
+* sidebar motion) and the column clips while it moves; reduced motion snaps it. A SidebarNav in the
+* column follows the frame (its own `isCollapsed` still wins), `PoweredBy` steps out on the rail,
+* and `AppFrameToggle` is the button that flips it: put it in the nav's footer, at the end of the
+* PoweredBy row; it also binds Mod+B (⌘B on Mac, Ctrl+B elsewhere), the Galaxy host's own sidebar
+* shortcut, while it is mounted.
+*
+* Not a page (`PageLayout`), not resizable panes (`ResizablePanels`).
+*/
+/** The collapse shortcut: Mod+B, ⌘B on Mac and Ctrl+B elsewhere, as in the Galaxy host. */
+var APP_FRAME_TOGGLE_HOT_KEYS = ["mod", "b"];
+/** The sidebar column's default width in px, the same in every Galaxy module (Filament, Alchemy). */
+var APP_FRAME_SIDEBAR_WIDTH = 220;
+/**
+* The collapsed column's width in px: 8px inset, SidebarNav's 8px, a 32px rail item, 8px, 8px. A
+* rail icon's centre lands 1px from where the expanded item drew it.
 */
-/** The sidebar column's width in px, the same in every Galaxy module (Filament, Alchemy). */
-var APP_FRAME_SIDEBAR_WIDTH = 240;
+var APP_FRAME_SIDEBAR_COLLAPSED_WIDTH = 64;
 /** The frame: a row that fills the host's box on the sidebar's fill, clipped. */
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
@@ -36,9 +58,10 @@ var Root = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 /**
-* The sidebar column: fixed width, inset `8 8 0`. With SidebarNav's own 8px the first item sits
-* 16px from the top and both sides, on the Galaxy host's Home button (the host contract), and the
-* footer runs to the bottom edge.
+* The sidebar column: fixed width (`sidebarWidth`, or the rail), inset `8 8 0`. With SidebarNav's
+* own 8px the first item sits 16px from the top and both sides, on the Galaxy host's Home button
+* (the host contract), and the footer runs to the bottom edge. It clips so the labels never spill
+* while the width moves.
 */
 var Sidebar = /*#__PURE__*/ styled("div")({
 	name: "Sidebar",
@@ -52,20 +75,72 @@ var Content = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 /** A Galaxy module's frame: the sidebar column, a hairline, and the page. */
-var AppFrame = forwardRef(function AppFrame({ sidebar, children, id, className, style, ...rest }, ref) {
-	return /* @__PURE__ */ jsxs(Root, {
-		...rest,
-		ref,
-		id,
-		className,
-		style,
-		children: [
-			/* @__PURE__ */ jsx(Sidebar, { children: sidebar }),
-			/* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL }),
-			/* @__PURE__ */ jsx(Content, { children })
-		]
+var AppFrame = forwardRef(function AppFrame({ sidebar, sidebarWidth = 220, isCollapsed: isCollapsedProp, defaultIsCollapsed = false, onCollapsedChange, children, id, className, style, ...rest }, ref) {
+	const [isCollapsed, setIsCollapsed] = useControlledState({
+		value: isCollapsedProp,
+		defaultValue: defaultIsCollapsed,
+		onChange: onCollapsedChange
+	});
+	const sidebarId = useId();
+	const context = useMemo(() => ({
+		isCollapsed,
+		setIsCollapsed,
+		sidebarId
+	}), [
+		isCollapsed,
+		setIsCollapsed,
+		sidebarId
+	]);
+	const width = isCollapsed ? `64px` : getCssSizeValue(sidebarWidth);
+	return /* @__PURE__ */ jsx(AppFrameContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Root, {
+			...rest,
+			ref,
+			id,
+			className,
+			style,
+			children: [
+				/* @__PURE__ */ jsx(Sidebar, {
+					id: sidebarId,
+					style: { "--gx-app-frame-sidebar-width": width },
+					children: sidebar
+				}),
+				/* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL }),
+				/* @__PURE__ */ jsx(Content, { children })
+			]
+		})
 	});
 });
 AppFrame.displayName = "AppFrame";
+/**
+* The button that collapses and expands the enclosing AppFrame's sidebar: a `TERTIARY` `SMALL`
+* icon button (`SidebarSimpleIcon`, the host's own), named and tooltipped "Collapse sidebar" /
+* "Expand sidebar", with `aria-expanded` and `aria-controls` on the column. Mod+B presses it (the
+* tooltip shows the shortcut, `aria-keyshortcuts` announces it), also from inside a field. Put it in the
+* SidebarNav footer, opposite `PoweredBy` in a `SPACE_BETWEEN` row; on the rail PoweredBy steps out
+* and the row centres the toggle under the icons. Renders nothing outside an AppFrame.
+*/
+var AppFrameToggle = forwardRef(function AppFrameToggle(props, ref) {
+	const frame = useAppFrameContext();
+	if (frame === null) return null;
+	const { isCollapsed, setIsCollapsed, sidebarId } = frame;
+	const label = isCollapsed ? "Expand sidebar" : "Collapse sidebar";
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-expanded": !isCollapsed,
+		"aria-controls": sidebarId,
+		...props,
+		ref,
+		variant: ButtonVariant.TERTIARY,
+		size: ButtonSize.SMALL,
+		icon: SidebarSimpleIcon,
+		ariaLabel: label,
+		tooltip: label,
+		hotKeys: APP_FRAME_TOGGLE_HOT_KEYS,
+		shouldBindHotKey: true,
+		onClick: () => setIsCollapsed(!isCollapsed)
+	});
+});
+AppFrameToggle.displayName = "AppFrameToggle";
 //#endregion
-export { APP_FRAME_SIDEBAR_WIDTH, AppFrame as default };
+export { APP_FRAME_SIDEBAR_COLLAPSED_WIDTH, APP_FRAME_SIDEBAR_WIDTH, AppFrameToggle, AppFrame as default };

package/dist/layout/internal/AppFrameContext.d.ts

@@ -0,0 +1,9 @@
+export interface AppFrameContextValue {
+    isCollapsed: boolean;
+    setIsCollapsed: (isCollapsed: boolean) => void;
+    /** The sidebar column's DOM id, for the toggle's `aria-controls`. */
+    sidebarId: string;
+}
+export declare const AppFrameContext: import("react").Context<AppFrameContextValue | null>;
+/** The enclosing AppFrame's collapse state, or `null` outside one. */
+export declare function useAppFrameContext(): AppFrameContextValue | null;

package/dist/layout/internal/AppFrameContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/layout/internal/AppFrameContext.ts
+/**
+* What AppFrame shares with the parts in its sidebar column: whether the column is the icon rail,
+* and the setter `AppFrameToggle` calls. `SidebarNav` reads `isCollapsed` when its own prop is
+* unset; `PoweredBy` renders nothing on the rail. `null` outside an AppFrame.
+*/
+var AppFrameContext = createContext(null);
+/** The enclosing AppFrame's collapse state, or `null` outside one. */
+function useAppFrameContext() {
+	return useContext(AppFrameContext);
+}
+//#endregion
+export { AppFrameContext, useAppFrameContext };

package/dist/navigation/SidebarNav.d.ts

@@ -13,7 +13,7 @@ export interface SidebarNavProps extends AriaAttributes {
      */
     hasDividers?: boolean;
     /**
-     * Icon rail: items show only their icon (labels and counts move into tooltips), group labels become dividers. Give the parent a 48px width.
+     * Icon rail: items show only their icon (labels and counts move into tooltips), group labels become dividers. Give the parent a 48px width. Inside an `AppFrame` it follows the frame's collapsed state when unset.
      * @default false
      */
     isCollapsed?: boolean;

package/dist/navigation/SidebarNav.js

@@ -3,6 +3,7 @@ import { Placement } from "../theme/enums.js";
 import Text, { TextSize, TextTransform, TextVariant, TextWeight } from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Tooltip from "../tooltip/Tooltip.js";
+import { useAppFrameContext } from "../layout/internal/AppFrameContext.js";
 import Divider from "../layout/Divider.js";
 import ScrollArea from "../layout/ScrollArea.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
@@ -62,6 +63,7 @@ var Header = /*#__PURE__*/ styled("div")({
 	class: "gx-SidebarNav-Header-h7sesvp",
 	propsAsIs: false
 });
+/** Items stand 8px apart, expanded and on the rail: the Galaxy host's own sidebar rhythm. */
 var List = /*#__PURE__*/ styled("ul")({
 	name: "List",
 	class: "gx-SidebarNav-List-lxg8t2f",
@@ -130,7 +132,11 @@ var GroupDivider = /*#__PURE__*/ styled("div")({
 	class: "gx-SidebarNav-GroupDivider-gyqt4ix",
 	propsAsIs: false
 });
-/** Rail mode: the header content and the footer content center in the 48px column. */
+/**
+* Rail mode: the header content and the footer content center in the 48px column. A section drops
+* its 12px top padding and spaces its divider row like an item: the 24px row centres the line, so
+* the space above it (the list's 8px gap + 11.5px) matches the space below (11.5px + 8px).
+*/
 var ROOT_COLLAPSED_CSS = "gx-SidebarNav-ROOT_COLLAPSED_CSS-rieaizt";
 /** The scrolling list takes the height between header and footer. */
 var LIST_SCROLL_CSS = "gx-SidebarNav-LIST_SCROLL_CSS-lo6ca5i";
@@ -145,7 +151,9 @@ var ITEM_COLLAPSED_CSS = "gx-SidebarNav-ITEM_COLLAPSED_CSS-i1ietnnw";
 var LABEL_CSS = "gx-SidebarNav-LABEL_CSS-l1d4bor0";
 var VISUALLY_HIDDEN_CSS = "gx-SidebarNav-VISUALLY_HIDDEN_CSS-v1rmtlmv";
 /** The primary navigation column: header, scrolling list of items and sections, footer. */
-var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, hasDividers = true, isCollapsed = false, ariaLabel, id, className, style, ...rest }, ref) {
+var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, hasDividers = true, isCollapsed: isCollapsedProp, ariaLabel, id, className, style, ...rest }, ref) {
+	const frame = useAppFrameContext();
+	const isCollapsed = isCollapsedProp ?? frame?.isCollapsed ?? false;
 	const name = ariaLabel || rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL);
 	const listContext = useMemo(() => ({
 		isCollapsed,