vue-dockable-desktop 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -11,6 +11,118 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.7.0] — 2026-10-04
+
+**Parity: react-dockable-desktop 7.6.0.** Context menus open with nothing highlighted, the same
+every time.
+
+### Changed
+
+- **A context menu opens with focus on the menu itself, no item highlighted.** It used to focus
+  its first item, and whether the browser then drew a focus ring depended on the user's previous
+  interaction: a menu opened from script (a map library's right-click calling `showContextMenu`,
+  say) showed a ring after a page load or a key press and none after a mouse click. ArrowDown
+  reaches the first item and ArrowUp the last.
+- **A keyboard `contextmenu` event** (the ContextMenu key or Shift+F10, which report no pointer
+  position) **still opens on the first item**, and so does `initialFocus: 'first-item'`.
+
+### Added
+
+- **`initialFocus?: 'menu' | 'first-item'`** on `ShowContextMenuOptions`
+  (`ws.showContextMenu`, `useContextMenu()`).
+- **Home and End** in context menus, as in rdd.
+- **`--vdd-context-menu-focus-ring`**: the outline on a menu item with keyboard focus, by default
+  `--vdd-focus-ring` (the skin's accent). Both are now documented in the theming chapter; they are
+  read with a fallback rather than declared, so they follow the skin's or your brand's accent.
+
+### Fixed
+
+- **Menu items drew the browser's default focus ring** instead of the skin's.
+- **ArrowUp from a menu with nothing highlighted would have gone to the second-to-last item**; it
+  goes to the last.
+
+### Upgrading
+
+- Nothing to change for menus opened with the mouse or from script. If you open a menu from your
+  own keyboard shortcut, pass `initialFocus: 'first-item'` so it starts on an item.
+- Tests that expected the first item to have focus right after `showContextMenu` should press
+  ArrowDown first, or open the menu with `initialFocus: 'first-item'`.
+
+### Tests
+
+- `test/components/contextMenu.test.ts`: the menu itself is focused on open; `initialFocus`;
+  keyboard and mouse `contextmenu` events; ArrowDown/ArrowUp from the menu; Home and End. Each was
+  seen failing with its part of the fix removed.
+
+### Documentation
+
+- Overlays chapter: initial focus, the option, keys, the focus ring. Theming chapter: a "Focus
+  rings" table with `--vdd-focus-ring` and `--vdd-context-menu-focus-ring`.
+
+## [1.6.0] — 2026-10-04
+
+**Parity: react-dockable-desktop 7.5.0.** Toolbar buttons: the library sizes the icon inside its
+own buttons, and a toggle that is on can be told from one that is off at a glance, on chrome and
+over panel content alike. No props were added or removed; everything new is a CSS custom property.
+
+### Added
+
+- **Icon size tokens.** `--vdd-panel-toolbar-icon-size` (`20px`) sizes icons in
+  `<VddPanelToolbar>` buttons and toggles; `--vdd-chrome-icon-size` (`22px`) sizes them in the
+  workspace toolbar and the sidebar rail. Icon fonts follow the button's `font-size`; SVG icons
+  follow the token's width and height, even when the SVG has its own `width`/`height` attributes.
+- **`soft` chip tokens**: `--vdd-panel-toolbar-btn-bg`, `--vdd-panel-toolbar-btn-bg-hover`,
+  `--vdd-panel-toolbar-btn-border`.
+- **Workspace toolbar toggle tokens**: `--vdd-toolbar-btn-toggle-active-color` and
+  `--vdd-toolbar-btn-toggle-active-border`.
+
+### Changed
+
+- **Panel toolbar "on" state** is a solid chip with a white icon, the same in every
+  `buttonVariant`: in dark the accent mixed 65% with black, in light the plain accent. The icon is
+  `--vdd-brand-on-accent` when a brand sets it. It clears WCAG's 3:1 non-text contrast. Before, it
+  was a 14–15% accent tint.
+- **`buttonVariant="soft"`** is a near-opaque chip with a hairline edge, readable over panel
+  content. Before, it was a 6% (dark) / 4% (light) wash.
+- **Workspace toolbar toggle "on"**: the accent tint goes from 6–8% to 22% (dark) / 16% (light),
+  with a 1px accent edge and the accent icon.
+- **Icons in toolbar and rail buttons are larger by default**: 20px in panel toolbars, 22px in
+  the workspace toolbar and rail.
+
+### Fixed
+
+- **Keyboard focus was invisible on toolbar and rail buttons**: `.vdd-toolbar-btn` and
+  `.vdd-sidebar-tab-btn` removed the outline with nothing in its place. They, and panel toolbar
+  buttons, show a focus ring for keyboard focus now (`--vdd-focus-ring`, default a 2px accent
+  outline), as rdd does.
+- **`filled` toggles looked the same on and off**; it now rests on an accent tint with an accent
+  edge, and "on" is the solid chip.
+- **vscode and macos painted a white hover tint in light mode** on panel toolbar buttons; it now
+  applies in dark only.
+- **`buttonSize` was documented as the icon size.** It sets the button size.
+- The theming chapter no longer claims a coarse-pointer rule enlarges panel toolbar buttons.
+
+### Upgrading
+
+- Remove per-icon sizes inside toolbar and rail buttons (`width`/`height` props, inline sizes):
+  set `--vdd-panel-toolbar-icon-size` / `--vdd-chrome-icon-size` instead. An inline `style` size
+  still wins over the tokens.
+- If you added shadows to keep toolbar icons readable over panel content, remove them and use
+  `button-variant="soft"` or a `frosted`/`solid` toolbar.
+- To restyle "on", set `--vdd-panel-toolbar-btn-active-bg` and `--vdd-panel-toolbar-btn-active-color`
+  (recipes in the panel overlay chapter).
+
+### Documentation
+
+- Panel overlay chapter: "Styling toolbar buttons" (what the library owns, icon sizes, variants,
+  the "on" tokens, recipes); corrected `buttonSize`.
+- Theming chapter: new icon and toggle tokens; panel toolbar defaults updated.
+
+### Demo
+
+- "Toolbar Buttons" panel (Control Center → open): every `buttonVariant` in every state over
+  light, dark and busy content, with icon-size sliders.
+
 ## [1.5.1] — 2026-10-01
 
 **Parity: react-dockable-desktop 7.4.1 fixes.** From a review of 1.5.0. No API changes.

package/dist/components/VddPanelToolbar.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     variant?: ToolbarVariant;
     /** Inherited by this toolbar's buttons unless they override it. @default 'ghost' */
     buttonVariant?: ButtonVariant;
-    /** Icon button size in pixels. Left to the stylesheet when unset. */
+    /** Button size in pixels (sets `--vdd-panel-toolbar-btn-size`). The icon inside follows `--vdd-panel-toolbar-icon-size`. Left to the stylesheet when unset. */
     buttonSize?: number;
 };
 declare var __VLS_1: {};

package/dist/components/VddToolbarButton.vue.d.ts

@@ -1,4 +1,4 @@
-/** An icon button for a `<VddPanelToolbar>`. The icon is a slot, so anything renders. */
+/** An icon button for a `<VddPanelToolbar>`. The icon is a slot, so anything renders; pass it no size, the library sizes it with `--vdd-panel-toolbar-icon-size`. */
 type __VLS_Props = {
     /** Tooltip and accessible name. */
     title?: string;

package/dist/core/contextMenu.d.ts

@@ -46,7 +46,25 @@ export interface ShowContextMenuOptions {
     x?: number;
     y?: number;
     items: ContextMenuItem[];
+    /**
+     * Where focus goes when the menu opens. `'menu'` (the default) focuses the menu itself, with no
+     * item highlighted: ArrowDown then reaches the first item and ArrowUp the last. `'first-item'`
+     * focuses the first enabled item, for a menu opened from the keyboard. When this is left out, a
+     * keyboard `contextmenu` event (the ContextMenu key or Shift+F10, which report no pointer
+     * position) opens on the first item and everything else, including a call with no event, on
+     * the menu: the same view every time, whatever the user did before.
+     */
+    initialFocus?: 'menu' | 'first-item';
 }
+/** A menu request as the workspace holds it. */
+export interface ContextMenuRequest {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    initialFocus: 'menu' | 'first-item';
+}
+/** The menu's initial focus, from what the caller passed (see `ShowContextMenuOptions.initialFocus`). */
+export declare function menuInitialFocus(options: ShowContextMenuOptions): 'menu' | 'first-item';
 export declare const isSeparator: (item: ContextMenuItem) => item is ContextMenuSeparator;
 export declare const isSubMenu: (item: ContextMenuItem) => item is ContextMenuSubMenu;
 /** Where a menu should open, from whatever the caller supplied. */

package/dist/core/workspace.d.ts

@@ -2,7 +2,7 @@ import type { App, Component, ComputedRef, InjectionKey } from 'vue';
 import type { DirtyStateOptions, DropPosition, FloatAnchor, FloatingWindow, Label, LayoutNode, MessageDescriptor, MessageFormatter, PanelInfo, SplitDirection } from '../types';
 import { PanelRegistry } from './registry';
 import type { PanelDefaultOptions } from './registry';
-import type { ContextMenuItem, ShowContextMenuOptions } from './contextMenu';
+import type { ContextMenuItem, ContextMenuRequest, ShowContextMenuOptions } from './contextMenu';
 import type { BuiltInEvents } from './eventBus';
 import { defaultMessages } from './messages';
 import type { ToolbarState } from './toolbarState';
@@ -168,11 +168,7 @@ export interface Workspace<TEvents extends object = Record<string, unknown>> {
     /** Dismiss the open menu, if any. */
     closeContextMenu(): void;
     /** The pending menu request, or `null`. @internal */
-    readonly contextMenu: ComputedRef<{
-        x: number;
-        y: number;
-        items: ContextMenuItem[];
-    } | null>;
+    readonly contextMenu: ComputedRef<ContextMenuRequest | null>;
     /**
      * Toolbar selection state, for items that are not controlled by the caller.
      *