@brickclay-org/ui 0.1.76 → 0.1.77

package/index.d.ts

@@ -969,9 +969,9 @@ interface Rgb {
 /** The neutral look used when there is no colour (or an unparseable one). */
 declare const NEUTRAL_APPEARANCE: ColorAppearance;
 /**
- * Parses hex and rgb()/rgba() colours. Named CSS colours ("red") are not
- * supported — they'd need a live DOM to resolve — and return null, which makes
- * the caller fall back to the neutral (uncoloured) appearance.
+ * Parses hex, rgb()/rgba() and hsl()/hsla() colours. Named CSS colours ("red")
+ * are not supported — they'd need a live DOM to resolve — and return null, which
+ * makes the caller fall back to the neutral (uncoloured) appearance.
  */
 declare function parseColor(input: string | null | undefined): Rgb | null;
 /**
@@ -1035,7 +1035,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: _angular_core.ModelSignal<boolean>;
     loading: _angular_core.InputSignal<boolean>;
     closeOnSelect: _angular_core.InputSignal<boolean>;
-    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
+    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: _angular_core.InputSignal<boolean>;
@@ -1064,7 +1064,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     selectedOptions: _angular_core.WritableSignal<any[]>;
     searchTerm: _angular_core.WritableSignal<string>;
     markedIndex: _angular_core.WritableSignal<number>;
-    placement: _angular_core.WritableSignal<"top" | "bottom">;
+    placement: _angular_core.WritableSignal<"bottom" | "top">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;
@@ -2221,11 +2221,9 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: _angular_core.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
+    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: _angular_core.InputSignal<string>;
-    /** Whether to show clear button when a value is selected. */
-    clearable: _angular_core.InputSignal<boolean>;
     /**
      * Show an accent dot beside each option, driven by `colorKey`, and tint the
      * control with the selected node's colour (same treatment as bk-status-select).
@@ -2237,6 +2235,8 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
      * trees render exactly as before.
      */
     inheritColor: _angular_core.InputSignal<boolean>;
+    /** Whether to show clear button when a value is selected. */
+    clearable: _angular_core.InputSignal<boolean>;
     /** Optional anchor key to scope dropdown to one subtree (e.g. module/category key). */
     restrictKey: _angular_core.InputSignal<any>;
     hasError: _angular_core.InputSignal<boolean>;
@@ -2250,7 +2250,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     controlWrapper: ElementRef<HTMLDivElement>;
     dropdownPanel?: ElementRef<HTMLDivElement>;
     private el;
-    placement: _angular_core.WritableSignal<"top" | "bottom">;
+    placement: _angular_core.WritableSignal<"bottom" | "top">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;
@@ -2336,6 +2336,12 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     goBack(): void;
     onSearchInput(event: Event): void;
     selectItem(node: HierarchicalNode, event?: Event): void;
+    /**
+     * Select/deselect any node from its checkbox — parent, child or leaf, at any
+     * depth. Stops the event so a parent row's own handler doesn't also navigate
+     * into its children.
+     */
+    toggleParentSelection(node: HierarchicalNode, event?: Event): void;
     openFromLabel(event: MouseEvent): void;
     onClickOutside(e: Event): void;
     private _value;
@@ -2349,7 +2355,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     private findNodeByValue;
     handleClear(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkHierarchicalSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkHierarchicalSelect, "bk-hierarchical-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "clearTooltip": { "alias": "clearTooltip"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowParentSelection": { "alias": "allowParentSelection"; "required": false; "isSignal": true; }; "backToMainText": { "alias": "backToMainText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "inheritColor": { "alias": "inheritColor"; "required": false; "isSignal": true; }; "restrictKey": { "alias": "restrictKey"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "clear": "clear"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkHierarchicalSelect, "bk-hierarchical-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "clearTooltip": { "alias": "clearTooltip"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowParentSelection": { "alias": "allowParentSelection"; "required": false; "isSignal": true; }; "backToMainText": { "alias": "backToMainText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "inheritColor": { "alias": "inheritColor"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "restrictKey": { "alias": "restrictKey"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "clear": "clear"; }, never, never, true, never>;
 }
 
 type ToastSeverity = 'success' | 'error' | 'warn' | 'info' | 'default';
@@ -2702,6 +2708,10 @@ declare class BkDropdown {
 
 type MenuOrientation = 'horizontal' | 'vertical';
 type MenuSubmenuMode = 'inline' | 'popup';
+type MenuTrigger = 'hover' | 'click';
+type MenuSize = 'default' | 'compact';
+/** Side a fly-out ended up on, once measured against the viewport. */
+type MenuPopupSide = 'right' | 'left' | 'down' | 'up';
 interface MenuItem {
     /** Unique id — matched against `activeItemId`. */
     id: string;
@@ -2713,6 +2723,8 @@ interface MenuItem {
     iconAlt?: string;
     /** Disables just this item (and blocks opening its submenu). */
     disabled?: boolean;
+    /** Heading shown above this item's children, titling the group. */
+    childrenLabel?: string;
     /** Nested items — presence of children turns this into an expandable node. */
     children?: MenuItem[];
 }
@@ -2723,15 +2735,24 @@ interface MenuItem {
  * - Orientation: `vertical` (stacked) / `horizontal` (menubar row).
  * - Items with `children` are expandable, shown with a chevron that rotates
  *   open/closed.
- * - Submenus render inline (accordion) or as pop-ups. Pop-ups adapt to the
- *   orientation: they drop *below* a horizontal top-level item and fly out to
- *   the *right* for vertical menus / deeper levels.
+ * - Submenus render inline (accordion) or as pop-ups, opened by hover or click.
+ *   Pop-ups adapt to the orientation: they drop *below* a horizontal top-level
+ *   item and fly out to the side for vertical menus / deeper levels, flipping
+ *   whenever the preferred side has no room.
  */
-declare class BkMenu {
+declare class BkMenu implements OnDestroy {
     private readonly host;
     items: MenuItem[];
     orientation: MenuOrientation;
     submenuMode: MenuSubmenuMode;
+    /**
+     * How pop-up submenus open: on `hover` (fly-out follows the pointer and
+     * closes when it leaves) or on `click` (stays put until you click the parent
+     * again, pick a leaf, or click outside). Inline submenus are always click.
+     */
+    trigger: MenuTrigger;
+    /** `compact` shrinks the type, padding and icons for dense layouts. */
+    size: MenuSize;
     /**
      * Keep only one submenu open per level: opening a parent collapses its
      * siblings (and their descendants) so the menu stays compact. Pop-up mode
@@ -2753,32 +2774,56 @@ declare class BkMenu {
     /** Ids of currently expanded/opened parent nodes. */
     private readonly openIds;
     /** Viewport coordinates for each open fixed-position fly-out, keyed by id. */
-    readonly popupPos: Map<string, {
-        top: number;
-        left: number;
-    }>;
+    private readonly popupPos;
+    /** Side each open fly-out resolved to — drives the chevron and hover bridge. */
+    private readonly popupSide;
+    /**
+     * Fly-outs whose real size has been measured. Until then the panel is in the
+     * DOM (it has to be, to be measurable) but transparent, so the estimated
+     * position never flashes on the wrong side.
+     */
+    private readonly measuredIds;
+    /** Grace period for the pointer to cross the gap into a fly-out. */
+    private static readonly HOVER_CLOSE_DELAY_MS;
+    private closeTimer;
     constructor(host: ElementRef<HTMLElement>);
     get isVertical(): boolean;
     get isPopup(): boolean;
+    get isCompact(): boolean;
+    get isHoverTrigger(): boolean;
     get maxHeightStyle(): string | null;
     popupTop(item: MenuItem): number | null;
     popupLeft(item: MenuItem): number | null;
+    /** Resolved side of an open fly-out, or null before it has been placed. */
+    submenuSide(item: MenuItem): MenuPopupSide | null;
+    /** True while a fly-out is open but not yet measured — kept transparent. */
+    isPlacing(item: MenuItem): boolean;
+    /** Which way the parent's chevron points. */
+    chevronDir(item: MenuItem, level: number): 'down' | 'right' | 'left';
     hasChildren(item: MenuItem): boolean;
     isOpen(item: MenuItem): boolean;
     isActive(item: MenuItem): boolean;
     isActiveAncestor(item: MenuItem): boolean;
     isHighlighted(item: MenuItem): boolean;
     inlineIndent(level: number): number | null;
-    onItemClick(item: MenuItem, siblings: MenuItem[], event: Event): void;
-    onItemEnter(item: MenuItem, siblings: MenuItem[], event: MouseEvent, level: number): void;
-    private computePopupPos;
+    groupTitleIndent(level: number): number | null;
+    onItemClick(item: MenuItem, siblings: MenuItem[], event: Event, level: number, parent: MenuItem | null): void;
+    onItemEnter(item: MenuItem, siblings: MenuItem[], event: MouseEvent, level: number, parent: MenuItem | null): void;
     onItemLeave(item: MenuItem): void;
+    private cancelPendingClose;
+    ngOnDestroy(): void;
+    private placePopup;
+    private preferredSide;
+    private applyPos;
+    private computePopupPos;
+    private clamp;
     private toggle;
     private closeBranch;
+    private closeAll;
     onDocumentClick(event: MouseEvent): void;
     onViewportChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "size": { "alias": "size"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
 /** Which edge of the anchor the panel sits against. */
@@ -2993,4 +3038,4 @@ declare class BkAvatarGroup {
 }
 
 export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, deriveAppearance, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, parseColor, splitPlacement };
-export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuSubmenuMode, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuPopupSide, MenuSize, MenuSubmenuMode, MenuTrigger, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/hierarchical-select/hierarchical-select.css

@@ -16,7 +16,7 @@
 }
 
 .hierarchical-select-control.disabled {
-  @apply cursor-not-allowed opacity-60;
+  @apply cursor-not-allowed;
   /* !important beats the inline accent (showDots): a disabled control must read
      as disabled even when a node's colour is applied. */
   background-color: #f4f4f6 !important;
@@ -164,6 +164,16 @@
   @apply flex-shrink-0 text-[#141414];
 }
 
+/* Selects the parent; the rest of the row still navigates into it. */
+.hierarchical-option-checkbox {
+  @apply flex-shrink-0 flex items-center cursor-pointer;
+}
+
+/* Matches the sm checkbox (16px) so childless rows keep the column aligned. */
+.hierarchical-option-checkbox-spacer {
+  @apply flex-shrink-0 w-4;
+}
+
 .hierarchical-option-empty {
   @apply px-3 py-2 text-gray-400 cursor-default text-sm;
 }

package/src/lib/menu/menu.css

@@ -18,11 +18,45 @@
   --menu-radius: 8px;
   --menu-disabled: 0.5;
 
+  /* Metrics — the compact variant below is nothing but a second set of these. */
+  --menu-font-size: 14px;
+  --menu-tracking: -0.28px;
+  --menu-pad-y: 10px;
+  --menu-pad-x: 12px;
+  --menu-gap: 8px;
+  --menu-icon-size: 16px;
+  --menu-chevron-size: 16px;
+  --menu-group-font-size: 11px;
+  /* How far a group title sits left of the rows it heads. */
+  --menu-title-outdent: 8px;
+  --menu-popup-pad: 4px;
+  --menu-popup-min-w: 200px;
+  --menu-popup-max-w: 280px;
+
   /* Safe to clip to rounded corners: pop-up fly-outs are position:fixed and
      escape this box entirely, so nothing gets cut off. */
-  @apply block w-full max-w-full text-sm font-medium tracking-[-0.28px]
+  @apply block w-full max-w-full font-medium
     bg-[var(--menu-bg)] text-[color:var(--menu-text)]
     border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;
+  font-size: var(--menu-font-size);
+  letter-spacing: var(--menu-tracking);
+}
+
+/* ---- Compact variant: same menu, tighter type and spacing. ---- */
+.bk-menu--compact {
+  --menu-radius: 6px;
+  --menu-font-size: 12px;
+  --menu-tracking: -0.24px;
+  --menu-pad-y: 6px;
+  --menu-pad-x: 8px;
+  --menu-gap: 6px;
+  --menu-icon-size: 14px;
+  --menu-chevron-size: 14px;
+  --menu-group-font-size: 10px;
+  --menu-title-outdent: 6px;
+  --menu-popup-pad: 3px;
+  --menu-popup-min-w: 160px;
+  --menu-popup-max-w: 240px;
 }
 
 /* ---- Lists ---- */
@@ -49,11 +83,13 @@
 }
 
 .bk-menu__button {
-  @apply flex items-center gap-2 w-full py-2.5 px-3 m-0 border-0
+  @apply flex items-center w-full m-0 border-0
     bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap
     transition-colors duration-100;
   font: inherit;
   letter-spacing: inherit;
+  gap: var(--menu-gap);
+  padding: var(--menu-pad-y) var(--menu-pad-x);
 }
 
 .bk-menu--horizontal > .bk-menu__list > .bk-menu__item > .bk-menu__button {
@@ -99,9 +135,36 @@
   @apply text-[color:var(--menu-active-text)];
 }
 
+/* ---- Group title: names the child group, not selectable.
+   Reads as a heading over the rows rather than one of them: outdented a notch
+   from the row text, and separated from the group by a rule. Inline and pop-up
+   are meant to look identical — the pop-up rules further down only cancel out
+   the panel's own padding to get there. ---- */
+.bk-menu__group-title {
+  @apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)]
+    whitespace-nowrap overflow-hidden text-ellipsis select-none
+    border-b border-[var(--menu-border)] mb-1;
+  font-size: var(--menu-group-font-size);
+  padding: var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);
+  /* Inline levels set padding-left themselves, indent-aware, from the template. */
+  padding-left: calc(var(--menu-pad-x) - var(--menu-title-outdent));
+}
+
+/* The panel is padded so its rows sit in from the border; the title's rule is
+   supposed to span it edge to edge, so pull it back out and pad the text back in.
+   Net indent and rule width then match the inline case exactly. */
+.bk-menu__submenu--popup > .bk-menu__group-title {
+  margin-left: calc(var(--menu-popup-pad) * -1);
+  margin-right: calc(var(--menu-popup-pad) * -1);
+  padding-left: calc(var(--menu-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad));
+  padding-right: calc(var(--menu-pad-x) + var(--menu-popup-pad));
+}
+
 /* ---- Icon (optional). Tinted monochrome when .bk-menu--tint. ---- */
 .bk-menu__icon {
-  @apply w-4 h-4 shrink-0 object-contain;
+  @apply shrink-0 object-contain;
+  width: var(--menu-icon-size);
+  height: var(--menu-icon-size);
 }
 
 .bk-menu--tint .bk-menu__icon {
@@ -124,6 +187,8 @@
 /* ---- Chevron ---- */
 .bk-menu__chevron {
   @apply shrink-0 opacity-80 transition-transform duration-[180ms];
+  width: var(--menu-chevron-size);
+  height: var(--menu-chevron-size);
 }
 
 /* Inline: rotate down → up on open. */
@@ -131,11 +196,15 @@
   @apply rotate-180;
 }
 
-/* Pop-up fly-out: static caret pointing to where the panel opens (right). */
+/* Pop-up fly-out: static caret pointing at the side the panel opens on. */
 .bk-menu__chevron--right {
   @apply -rotate-90;
 }
 
+.bk-menu__chevron--left {
+  @apply rotate-90;
+}
+
 /* =========================================================================
    Inline submenus (accordion) — expand in place.
    ========================================================================= */
@@ -153,26 +222,29 @@
 .bk-menu__submenu--popup {
   /* Fixed so the fly-out escapes the menu's overflow/scroll box and renders
      outside the nav. Coordinates are set inline (top/left) from JS. */
-  @apply fixed z-[1000] min-w-[200px] max-w-[280px] max-h-[calc(100vh-16px)]
+  @apply fixed z-[1000] max-h-[calc(100vh-16px)]
     overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)]
-    rounded-xl shadow-[var(--menu-shadow)] p-1 hidden;
+    rounded-xl shadow-[var(--menu-shadow)] hidden;
+  padding: var(--menu-popup-pad);
+  min-width: var(--menu-popup-min-w);
+  max-width: var(--menu-popup-max-w);
 }
 
 .bk-menu__submenu--popup.bk-menu__submenu--open {
   @apply block;
 }
 
-/* Invisible bridges spanning the gap between a parent and its fly-out, so the
-   pointer stays "inside" the item while crossing — prevents hover flicker. */
-.bk-menu__submenu--popup-right::before {
-  content: '';
-  @apply absolute top-0 left-[-6px] w-1.5 h-full;
-}
-.bk-menu__submenu--popup-down::before {
-  content: '';
-  @apply absolute top-[-6px] left-0 w-full h-1.5;
+/* Open but not yet measured: on-screen so its size can be read, invisible so
+   the estimated position never flashes before the real one lands. */
+.bk-menu__submenu--placing {
+  @apply opacity-0 pointer-events-none;
 }
 
+/* The gap between a parent and its fly-out is dead space the pointer has to
+   cross, and crossing it fires mouseleave. An invisible bridge element can't
+   span it — the panel is a scroll container, so anything at a negative offset
+   is clipped — so hover mode closes on a short delay instead (see menu.ts). */
+
 /* =========================================================================
    Responsive: a horizontal menu STAYS horizontal on small screens and scrolls
    sideways when the items don't fit (overflow-x: auto). Items keep their