highsoft-ui 1.0.152 → 1.0.154

package/dist/lib/components/Modal/ModalContactFooter.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { ButtonVariant, ButtonSize } from '../Button';
 export interface ModalContactFooterProps {
     /** Image URLs shown as a stacked row of round avatars on the left */
@@ -17,5 +17,6 @@ export interface ModalContactFooterProps {
     buttonVariant?: ButtonVariant;
     /** CTA button size */
     buttonSize?: ButtonSize;
+    link?: ElementType;
 }
-export declare function ModalContactFooter({ avatars, text, buttonLabel, buttonIcon, buttonHref, onButtonClick, buttonVariant, buttonSize }: ModalContactFooterProps): import("react").JSX.Element;
+export declare function ModalContactFooter({ avatars, text, buttonLabel, buttonIcon, buttonHref, onButtonClick, buttonVariant, buttonSize, link: Link }: ModalContactFooterProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/Sidebar.d.ts

@@ -1,17 +1,22 @@
 import { ReactNode } from 'react';
 export interface SidebarProps {
     children: ReactNode;
-    /** Accessible label for the navigation landmark. */
+    /** Accessible label for the navigation landmark / sheet dialog. */
     'aria-label'?: string;
-    /** Label on the mobile drawer's close button. Default "Close navigation". */
+    /** Label on the mobile sheet's close button. Default "Close navigation". */
     closeLabel?: string;
     className?: string;
 }
 /**
  * The sidebar column. On desktop it's a fixed-position-free flex column filling
- * the layout's first grid track; on narrow screens it becomes an off-canvas
- * drawer driven by the layout's mobile state. Auto-renders the resize handle
- * (when the layout is resizable) and the mobile close button.
+ * the layout's first grid track; on narrow screens it becomes a bottom sheet
+ * driven by the layout's mobile state. Auto-renders the resize handle (when the
+ * layout is resizable), the sheet's grab handle and its close button.
+ *
+ * While the sheet is open it's a modal dialog: focus is trapped inside it,
+ * Escape and the backdrop dismiss it, and dragging the grab handle down does
+ * too. While it's closed on a narrow screen it's `inert`, so the few hundred
+ * links it holds stay out of the tab order and the accessibility tree.
  */
 export declare function Sidebar({ children, 'aria-label': ariaLabel, closeLabel, className }: SidebarProps): import("react").JSX.Element;
 /** Fixed top region of the sidebar (switchers, search, logo). Does not scroll. */

package/dist/lib/components/Sidebar/SidebarLayout.d.ts

@@ -14,8 +14,37 @@ export interface SidebarLayoutProps {
      * the width only for the current session (no persistence).
      */
     storageKey?: string;
-    /** Label on the mobile "open navigation" trigger bar. Default "Menu". */
+    /**
+     * Names what this navigation contains — "Changelog", "API reference". Shown
+     * on the mobile bar, as an overline above `mobileTriggerValue` when that is
+     * given. Default "Navigation".
+     */
     mobileTriggerLabel?: ReactNode;
+    /**
+     * Where the reader currently is inside the tree — "Highcharts / v12.5.0".
+     * Becomes the mobile trigger's headline, so a deep link tells you what the
+     * control opens and where you stand before you open it.
+     *
+     * Leave it unset and the layout reads this off the active <NavItem> itself,
+     * as "<parent group> / <item>" — the sidebar already knows, so restating it
+     * here is only worth it when you want different wording. Pass `false` to
+     * show no position line at all.
+     */
+    mobileTriggerValue?: ReactNode;
+    /** Leading glyph on the mobile trigger (20×20) — a product mark, typically. */
+    mobileTriggerIcon?: ReactNode;
+    /**
+     * Control slotted beside the mobile trigger, kept outside the sheet. Put
+     * search here: on a phone it's usually what the reader actually wants, and
+     * shutting it inside the sheet costs an extra tap to reach.
+     */
+    mobileTriggerAction?: ReactNode;
+    /**
+     * Render the built-in mobile bar. Default true. Set false to drive the sheet
+     * from your own control via `useSidebarLayout().openMobile()` — you then own
+     * `aria-expanded`, `aria-controls="hs-sidebar-drawer"` and returning focus.
+     */
+    mobileBar?: boolean;
     /**
      * Grow to fill a flex/grid parent (sets `flex: 1 1 auto; min-height: 0`) so
      * the shell takes the available height and the content column scrolls on its
@@ -27,13 +56,16 @@ export interface SidebarLayoutProps {
 }
 /**
  * The resizable two-column shell: a sidebar column (`--hs-sidebar-w` wide) and a
- * fluid content column. Owns the resize width and the mobile drawer state, which
+ * fluid content column. Owns the resize width and the mobile sheet state, which
  * <Sidebar>, <SidebarMain> and <NavItem> read from context.
  *
- * On narrow screens (<=760px) the grid collapses to a single column, the sidebar
- * becomes an off-canvas drawer, and a sticky trigger bar appears at the top.
+ * On narrow screens (<=760px) the grid collapses to a single column and the
+ * sidebar becomes a bottom sheet, opened from a bar fixed to the bottom of the
+ * viewport. The bar sits in thumb reach rather than at the top of a long
+ * scrolling page, and names its own contents ("Changelog / Highcharts v12.5.0")
+ * instead of repeating the site header's hamburger.
  */
-export declare function SidebarLayout({ children, defaultWidth, minWidth, maxWidth, resizable, storageKey, mobileTriggerLabel, fill, className, style }: SidebarLayoutProps): import("react").JSX.Element;
+export declare function SidebarLayout({ children, defaultWidth, minWidth, maxWidth, resizable, storageKey, mobileTriggerLabel, mobileTriggerValue, mobileTriggerIcon, mobileTriggerAction, mobileBar, fill, className, style }: SidebarLayoutProps): import("react").JSX.Element;
 /** The fluid content column that sits beside the sidebar. */
 export declare function SidebarMain({ children, className, ...rest }: {
     children: ReactNode;

package/dist/lib/components/Sidebar/context.d.ts

@@ -7,10 +7,38 @@ export interface SidebarLayoutContextValue {
     setWidth: (w: number) => void;
     minWidth: number;
     maxWidth: number;
-    /** Whether the mobile off-canvas drawer is open. */
+    /**
+     * Whether the layout is currently in its narrow (<=760px) form — the sidebar
+     * is a bottom sheet rather than a grid column. `false` on the server and on
+     * the first client render, then settles after mount.
+     */
+    isMobile: boolean;
+    /** Whether the mobile bottom sheet is open. */
     mobileOpen: boolean;
-    openMobile: () => void;
+    /**
+     * Open the sheet. `focus: 'search'` lands on the first field in
+     * <SidebarHeader> instead of on the sheet — for a search control in the
+     * mobile bar, where tapping it means "let me type", so the keyboard coming
+     * up is the point rather than an intrusion.
+     */
+    openMobile: (options?: {
+        focus?: 'sheet' | 'search';
+    }) => void;
     closeMobile: () => void;
+    /** Where the pending open wants focus. Read by <Sidebar>. */
+    openFocus: 'sheet' | 'search';
+    /**
+     * Where the active <NavItem> sits, as "<parent group> / <item>" — what the
+     * mobile bar names when the consumer hasn't passed `mobileTriggerValue`.
+     * Empty when nothing is active or the labels aren't reducible to text.
+     */
+    activePage: string;
+    /**
+     * Reported by each <NavItem> as it becomes (or stops being) the active one.
+     * Pass `null` to give up the slot; the last item to claim it wins, and
+     * releasing only clears when the caller is still the holder.
+     */
+    reportActivePage: (id: string, page: string | null) => void;
 }
 export declare const SidebarLayoutContext: import('react').Context<SidebarLayoutContextValue | null>;
 /** Throws when used outside <SidebarLayout> — for components that require it. */

package/dist/lib/components/Sidebar/navPath.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * Labels of the <NavGroup>s enclosing the current subtree, outermost first.
+ * Every group appends one entry, so `.length` is also the nesting depth (which
+ * drives the sticky-offset stacking). An entry is `''` when the group's label
+ * isn't reducible to text — the slot is still taken, so depth stays right.
+ */
+export declare const NavPathContext: import('react').Context<string[]>;
+export declare function useNavPath(): string[];
+/**
+ * Best-effort plain text for a label, so the mobile bar can name the current
+ * page without the consumer restating it. Handles the shapes labels actually
+ * take — a string, `v{version}` (an array of strings), a wrapped span — and
+ * gives up on anything else rather than guessing. Giving up is safe: the bar
+ * falls back to its label, and `mobileTriggerValue` overrides regardless.
+ */
+export declare function textOf(node: ReactNode): string;

package/dist/main.js

@@ -1,37 +1,37 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-BGsqFCRW.js";
-import { t as s } from "./CopyCode-_yeXCeeq.js";
+import { t as o } from "./Button-DSGsV45k.js";
+import { t as s } from "./CopyCode-PbZbRLn-.js";
 import { t as c } from "./FrameworkIcon-D7N3PjYr.js";
-import { t as l } from "./CodeBlock-BKiZQpA5.js";
+import { t as l } from "./CodeBlock-7BTXXf30.js";
 import { t as u } from "./Icon-VeXJMj8Q.js";
 import { t as d } from "./Link-CYR92_U0.js";
 import { t as f } from "./ProductIcon-DFLAYWbu.js";
-import { t as p } from "./ButtonGroup-DKfaXOeS.js";
+import { t as p } from "./ButtonGroup-DNTpDU-E.js";
 import { t as m } from "./InputSolo-DUdKtZjX.js";
-import { t as h } from "./SearchDropdown-L_rQz1vn.js";
-import { i as g, n as _, r as v, t as y } from "./InputGrouped-CHGCMmsK.js";
+import { t as h } from "./SearchDropdown-B5CFwNib.js";
+import { i as g, n as _, r as v, t as y } from "./InputGrouped-BJEodhml.js";
 import { t as b } from "./Container-BDssaLig.js";
 import { t as x } from "./DiscordInvite-CLYxexdH.js";
 import { t as S } from "./Heading-DNDHqYWO.js";
 import { t as C } from "./Typography-AvvBRu-u.js";
 import { t as w } from "./Logo-Bz0G2G-k.js";
-import { t as T } from "./NewsletterSignup-DrcPfdrg.js";
-import { n as E, r as D, t as O } from "./Dropdown-B_Ib6i1c.js";
-import { t as k } from "./PrefPanel-BGw72I_D.js";
-import { n as A, t as j } from "./Label-CgiWi1v6.js";
-import { t as M } from "./VideoCover-DqMDvzvA.js";
-import { t as N } from "./VideoPlayer-Cq_garSg.js";
-import { t as P } from "./VideoPlayerModal-D1v1O2kW.js";
-import { t as F } from "./Footer-ZdzuxuhY.js";
+import { t as T } from "./NewsletterSignup-mPKBEpYq.js";
+import { n as E, r as D, t as O } from "./Dropdown-c_EhnzqC.js";
+import { t as k } from "./PrefPanel-DxSIkYDF.js";
+import { n as A, t as j } from "./Label-BhFeSC8Z.js";
+import { t as M } from "./VideoCover-BkbLsmQ_.js";
+import { t as N } from "./VideoPlayer-CY63501h.js";
+import { t as P } from "./VideoPlayerModal-DIHMoFgS.js";
+import { t as F } from "./Footer-C6a3PeJq.js";
 import { n as I } from "./GPTInput-C0YG1990.js";
-import { t as L } from "./Notification-B3skQvZE.js";
-import { n as R, t as z } from "./Header-CVKH_INR.js";
+import { t as L } from "./Notification-JovL5anc.js";
+import { n as R, t as z } from "./Header-BokKjfF7.js";
 import { t as B } from "./Tabs-BuDaPqdN.js";
 import { n as V, t as H } from "./RadioBox-o1Ssyj0s.js";
-import { n as U, t as W } from "./Checkbox-CniRhVkQ.js";
+import { n as U, t as W } from "./Checkbox-imALf2_N.js";
 import { Modal as G } from "./components/Modal/index.js";
-import { t as K } from "./RoadmapDetails-XS0OylnP.js";
+import { t as K } from "./RoadmapDetails-ZnyXG2j7.js";
 import { ModalContactFooter as q } from "./components/Modal/ModalContactFooter.js";
 import { useOptionalSidebarLayout as J, useSidebarLayout as Y } from "./components/Sidebar/context.js";
 import { SidebarLayout as X, SidebarMain as Z } from "./components/Sidebar/SidebarLayout.js";

package/dist/{prism-light-COlcVrfu.js → prism-light-BLaY8zo6.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-CDnUGrhg.js";
+import { r as t, t as n } from "./create-element-C3ORyDVw.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/dist/{styles.module-Bd4HbnpA.js → styles.module-DGKft2EO.js}

@@ -8,14 +8,18 @@ var e = {
 	disclosureChevron: "UvvIVG_disclosureChevron",
 	disclosureToggle: "UvvIVG_disclosureToggle",
 	fill: "UvvIVG_fill",
+	grabber: "UvvIVG_grabber",
+	grabberPill: "UvvIVG_grabberPill",
 	groupActive: "UvvIVG_groupActive",
 	groupChevron: "UvvIVG_groupChevron",
 	groupChildren: "UvvIVG_groupChildren",
 	groupChildrenInner: "UvvIVG_groupChildrenInner",
+	groupExpanding: "UvvIVG_groupExpanding",
 	groupLabel: "UvvIVG_groupLabel",
 	groupOpen: "UvvIVG_groupOpen",
 	groupToggle: "UvvIVG_groupToggle",
 	handle: "UvvIVG_handle",
+	hasMobileBar: "UvvIVG_hasMobileBar",
 	hasStickyHead: "UvvIVG_hasStickyHead",
 	hatchClip: "UvvIVG_hatchClip",
 	hatchDrag: "UvvIVG_hatchDrag",
@@ -30,13 +34,20 @@ var e = {
 	main: "UvvIVG_main",
 	minimizeBtn: "UvvIVG_minimizeBtn",
 	mobileBar: "UvvIVG_mobileBar",
+	mobileBarAction: "UvvIVG_mobileBarAction",
 	overlay: "UvvIVG_overlay",
 	section: "UvvIVG_section",
 	sectionHead: "UvvIVG_sectionHead",
 	sectionLabel: "UvvIVG_sectionLabel",
+	sheetDragging: "UvvIVG_sheetDragging",
 	sidebar: "UvvIVG_sidebar",
 	sidebarOpen: "UvvIVG_sidebarOpen",
-	trigger: "UvvIVG_trigger"
+	trigger: "UvvIVG_trigger",
+	triggerChevron: "UvvIVG_triggerChevron",
+	triggerIcon: "UvvIVG_triggerIcon",
+	triggerLine: "UvvIVG_triggerLine",
+	triggerOverline: "UvvIVG_triggerOverline",
+	triggerText: "UvvIVG_triggerText"
 };
 //#endregion
 export { e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.152",
+  "version": "1.0.154",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {