domma-cms 1.16.1 → 1.17.0

package/admin/js/templates/menu-editor.html

@@ -23,10 +23,10 @@
             <div class="tab-content">
                 <div class="tab-panel active" id="me-items" data-panel="me-items">
                     <div class="toolbar mex-toolbar">
-                        <button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button>
-                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button>
-                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button>
-                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-switcher" data-on-click="addSwitcher" title="The site's theme dots, among the links"><span data-icon="palette"></span> Add theme switcher</button>
+                        <button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button><span data-help-title="Add item" data-help="Add a new navigation link at the top level, then edit its label, destination, icon, access and appearance. To add a nested link below a particular item, use that row Actions menu. Applying item changes updates the editor; Save keeps the menu."></span>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button><span data-help-title="Add separator" data-help="Insert a non-clickable dividing line to separate groups of links. Separators have no destination or children. Drag one to the desired place, or use row actions to move or remove it. Save the menu to keep the change."></span>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button><span data-help-title="Add spacer" data-help="Insert empty space between navigation items. The size picker on its row offers fixed sizes from xs to xl, or flexible to absorb the leftover room. Spacers are structural items without a link or children. They are useful for separating groups or pushing actions apart in a row."></span>
+                        <button type="button" class="btn btn-sm btn-ghost" id="me-add-switcher" data-on-click="addSwitcher" title="The site's theme dots, among the links"><span data-icon="palette"></span> Add theme switcher</button><span data-help-title="Add theme switcher" data-help="Insert the site theme-switcher dots among the menu links. The themes offered are selected under Theme &gt; Theme switcher; this row chooses their position in the menu. It has no destination or nested links. Save the menu to keep its placement."></span>
                         <span class="mex-spacer"></span>
                         <small class="mex-note"><span data-bind-text="itemCount.value"></span> items</small>
                         <span data-help-title="Items" data-help="Click an item to edit its label, link, icon, who sees it, badge and look. Right-click it (or ⋮, or Shift+F10) to add an item or a sub-item below it, move, indent, duplicate, hide or remove it. Drag the grip to move it, or drop it onto another item to nest it. With an item focused: Enter edits, Alt+Up / Down moves, Alt+Right / Left indents, Delete removes. Changes are kept only when you Save."></span>
@@ -41,7 +41,7 @@
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
                             <label for="me-variant">Variant
-                                <span data-help="The colour scheme of the bar - transparent over the page, dark, light, or the theme's own default."></span></label>
+                                <span data-help-title="Variant" data-help="Choose the colour scheme for this menu. Transparent lets the page show behind the bar; Dark and Light choose a contrasting surface; Default follows the theme. Leaving the choice unset uses the normal menu default. Check the links against your page background, particularly over hero images. This also affects the admin sidebar when editing its menu."></span></label>
                             <select id="me-variant" name="variant" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="transparent">Transparent</option>
@@ -52,7 +52,7 @@
                         </div>
                         <div class="form-group">
                             <label for="me-position">Position
-                                <span data-help-title="Position" data-help="Sticky stays at the top as the page scrolls; fixed never moves; static scrolls away with the page. Floating lifts the menu off the page into a panel pinned to a corner or edge - its own options appear below."></span></label>
+                                <span data-help-title="Position" data-help="Sticky keeps the public navbar at the top once scrolling reaches it. Fixed pins it to the viewport from the start. Static lets it scroll away with the page. Floating creates a separate panel with its own anchor, size and behaviour options below. Position does not move the admin sidebar; its place is controlled by the admin shell."></span></label>
                             <select id="me-position" name="position" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="sticky">Sticky</option>
@@ -63,7 +63,7 @@
                         </div>
                         <div class="form-group">
                             <label for="me-orientation">Orientation
-                                <span data-help="Horizontal lays the items in a row; vertical stacks them in a column - a side rail when this menu is the navbar."></span></label>
+                                <span data-help-title="Orientation" data-help="Horizontal arranges links across a row. Vertical stacks them into a column and, in the public navbar slot, creates a side rail with extra side and width controls. The mobile navbar uses its drawer layout instead. Choose the orientation first, then adjust the options that appear for that layout."></span></label>
                             <select id="me-orientation" name="orientation" class="form-input">
                                 <option value="">- default (horizontal) -</option>
                                 <option value="horizontal">Horizontal</option>
@@ -72,7 +72,8 @@
                             <small class="form-hint">Vertical stacks the items into a column - a docked side rail in the navbar slot, an indented list for <code>[menu]</code> and floating panels. Below 993px the navbar always falls back to the mobile drawer.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-align">Alignment</label>
+                            <label for="me-align">Alignment
+                                <span data-help-title="Alignment" data-help="Place links at the left, centre or right of a horizontal menu, or spread them evenly across its width. The public navbar centres against the whole bar by default, rather than just the space beside the brand. A menu shortcode in page content defaults to the left. Vertical menus and the mobile drawer ignore this setting."></span></label>
                             <select id="me-align" name="align" class="form-input">
                                 <option value="">- default -</option>
                                 <option value="left">Left</option>
@@ -84,8 +85,10 @@
                         </div>
                         <div class="form-group">
                             <label>Mobile navbar</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-hamburger" name="mobileHamburgerOnly" style="width:auto;margin:0"> Hamburger only (hide the top bar)</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-brand" name="mobileHideBrand" style="width:auto;margin:0"> Hide branding on mobile</label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-hamburger" name="mobileHamburgerOnly" style="width:auto;margin:0"> Hamburger only (hide the top bar)
+                                <span data-help-title="Hamburger only (hide the top bar)" data-help="Below 993px, hide the navbar strip and its action icons, leaving a floating hamburger button that opens the navigation drawer. The brand remains unless Hide branding on mobile is also enabled. Search can still be opened with Ctrl+K or Cmd+K. This applies when the menu fills the public navbar slot; it does not change the desktop bar."></span></label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-brand" name="mobileHideBrand" style="width:auto;margin:0"> Hide branding on mobile
+                                <span data-help-title="Hide branding on mobile" data-help="Hide the public navbar logo and site name below 993px, independently of the hamburger-only option. The saved brand is kept and desktop branding is unaffected. Use this when a small screen needs more room or the page already includes a prominent logo. The site-wide branding switch can hide the brand at every size."></span></label>
                             <small class="form-hint">Applies below 993px when this menu fills the navbar slot. Hamburger only leaves a floating menu button and hides the bar and its action icons. Branding stays visible unless hidden separately. Search remains available through Ctrl+K or Cmd+K.</small>
                         </div>
                         <div class="form-group dm-look-field">
@@ -99,11 +102,12 @@
                                 <option value="dock">Dock</option>
                                 <option value="neon">Neon</option>
                             </select>
-                            <label class="flex items-center gap-2" style="margin-top:.4rem"><input type="checkbox" id="me-look-shrink" name="lookShrink" style="width:auto;margin:0"> Shrink when the page scrolls</label>
+                            <label class="flex items-center gap-2" style="margin-top:.4rem"><input type="checkbox" id="me-look-shrink" name="lookShrink" style="width:auto;margin:0"> Shrink when the page scrolls
+                                <span data-help-title="Shrink when the page scrolls" data-help="Reduce the desktop navbar size after the visitor starts scrolling, leaving more room for page content. This belongs to the horizontal navbar bar shape settings; it does not shrink a vertical rail, the admin sidebar or the mobile drawer. Visitors who request reduced motion receive the calmer presentation."></span></label>
                         </div>
                         <div class="form-group dm-look-field">
                             <label for="me-look-brand">Branding shape
-                                <span data-help-title="Branding shape" data-help="Pill puts your logo and site name in a rounded capsule of their own, matching a pill bar. Navbar only, horizontal only, desktop only."></span></label>
+                                <span data-help-title="Branding shape" data-help="Choose Standard for the normal logo and name presentation, or Pill to put the brand inside its own rounded capsule. The pill can match a pill navigation bar, but is configured separately. This applies to a horizontal desktop navbar. It does not switch branding off; use Site Settings &gt; Branding for that."></span></label>
                             <select id="me-look-brand" name="lookBrand" class="form-input">
                                 <option value="">Standard</option>
                                 <option value="pill">Pill</option>
@@ -118,6 +122,15 @@
                                 <option value="band">Strip - keep the band</option>
                             </select>
                         </div>
+                        <div class="form-group dm-look-field">
+                            <label for="me-look-icons">Bar icons
+                                <span data-help-title="Bar icons" data-help="Colour the icons of the links along the bar. Rainbow gives each link the next colour along (an item's own Tile colour wins); Accent paints them all in the theme's main colour. Standard leaves them the colour of the text. Items drawn as a button (a pill) and items with their own colour keep theirs. If the bar runs short of room the icons are the last thing it drops."></span></label>
+                            <select id="me-look-icons" name="lookIcons" class="form-input">
+                                <option value="">Standard - the text colour</option>
+                                <option value="rainbow">Rainbow</option>
+                                <option value="accent">Accent</option>
+                            </select>
+                        </div>
                         <div class="form-group dm-look-field">
                             <label for="me-look-dropdown">Dropdown style
                                 <span data-help-title="Dropdown style" data-help="Cards opens each dropdown as a large rounded card: every sub-item gets a coloured icon tile and a line of description, laid out in columns. A sub-item with sub-items of its own becomes a column with a heading. Edit a top-level item to give its card a heading, a side box or a strip of chips."></span></label>
@@ -127,7 +140,8 @@
                             </select>
                         </div>
                         <div class="form-group dm-look-cards-field" style="display:none">
-                            <label for="me-look-tiles">Icon tiles</label>
+                            <label for="me-look-tiles">Icon tiles
+                                <span data-help-title="Icon tiles" data-help="Choose the backgrounds behind icons in card dropdowns. Rainbow assigns successive colours to items; Theme colour uses the site accent; Neutral uses a subdued surface; No tiles shows plain icons. An item with its own Tile colour overrides this menu-wide choice. These options appear when Dropdown style is Cards."></span></label>
                             <select id="me-look-tiles" name="lookTiles" class="form-input">
                                 <option value="">Rainbow - each item the next colour</option>
                                 <option value="accent">Theme colour</option>
@@ -138,11 +152,13 @@
                         </div>
                         <div class="form-group dm-look-cards-field" style="display:none">
                             <label>Card movement</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-look-morph" name="lookMorph" style="width:auto;margin:0"> Slide from one card to the next</label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-look-morph" name="lookMorph" style="width:auto;margin:0"> Slide from one card to the next
+                                <span data-help-title="Slide from one card to the next" data-help="When moving between card dropdowns, animate the next card from the previous card instead of closing one and opening another. This works well with dropdowns that open on hover. Turn it off for a simpler change between panels. It applies to card dropdowns, and is disabled for visitors who request reduced motion."></span></label>
                             <small class="form-hint">Moving between dropdowns grows the next card out of the last one instead of closing one and opening another. Pairs well with <strong>Open dropdowns on hover</strong>. Off for visitors who ask for reduced motion.</small>
                         </div>
                         <div class="form-group dm-vertical-field" style="display:none">
-                            <label for="me-side">Rail side</label>
+                            <label for="me-side">Rail side
+                                <span data-help-title="Rail side" data-help="Dock a vertical public navbar to the left or right edge of the desktop viewport. Its rail reserves space on that side so page content remains beside it. This has no effect on a horizontal bar, a floating panel or the mobile drawer. Use Orientation to choose Vertical before setting the rail side."></span></label>
                             <select id="me-side" name="side" class="form-input">
                                 <option value="left">Left</option>
                                 <option value="right">Right</option>
@@ -150,24 +166,30 @@
                             <small class="form-hint">Which edge a vertical navbar docks to.</small>
                         </div>
                         <div class="form-group dm-dock-rail-field" style="display:none">
-                            <label for="me-dock-width">Rail width (px)</label>
+                            <label for="me-dock-width">Rail width (px)
+                                <span data-help-title="Rail width (px)" data-help="Set the expanded desktop rail width in pixels, from 160 to 480. A wider rail gives long labels more room and takes more width from the page. The page gutter follows the expanded rail width. Leaving it empty uses 240px. This is for a docked vertical navbar, not a floating panel."></span></label>
                             <input type="number" id="me-dock-width" name="dockWidth" class="form-input" min="160" max="480" step="10" placeholder="240">
                             <small class="form-hint">How wide the docked rail is, 160 to 480. The page's gutter follows it.</small>
                         </div>
                         <div class="form-group dm-dock-rail-field" style="display:none">
                             <label>Rail behaviour</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-collapsible" name="dockCollapsible" style="width:auto;margin:0"> Collapsible to icons</label>
-                            <label class="flex items-center gap-2 dm-dock-collapsed-field"><input type="checkbox" id="me-dock-collapsed" name="dockCollapsed" style="width:auto;margin:0"> Start collapsed</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-autohide" name="dockAutohide" style="width:auto;margin:0"> Autohide off-screen</label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-collapsible" name="dockCollapsible" style="width:auto;margin:0"> Collapsible to icons
+                                <span data-help-title="Collapsible to icons" data-help="Add a control that switches the desktop rail between full labels and a narrow strip of icons. In the collapsed rail, labels remain available as tooltips. Each visitor retains their own choice in their browser. Give items clear icons before enabling this. Below 993px the navbar uses the usual mobile drawer."></span></label>
+                            <label class="flex items-center gap-2 dm-dock-collapsed-field"><input type="checkbox" id="me-dock-collapsed" name="dockCollapsed" style="width:auto;margin:0"> Start collapsed
+                                <span data-help-title="Start collapsed" data-help="Start a collapsible desktop rail in its narrow icon-only state for a visitor with no saved preference. Visitors can expand it with the rail control, and their own saved choice takes precedence on later visits. Enable Collapsible to icons first. This does not set the initial state of the mobile drawer."></span></label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-autohide" name="dockAutohide" style="width:auto;margin:0"> Autohide off-screen
+                                <span data-help-title="Autohide off-screen" data-help="Slide the desktop rail off its edge when it is not in use, leaving a small strip to reveal it. Moving the pointer to the edge, tapping the strip or focusing a control in the rail brings it back. The page uses the released width. This is separate from collapsing to icons, and does not replace the mobile drawer."></span></label>
                             <small class="form-hint"><strong>Collapsible</strong> adds a toggle that shrinks the rail to its icons (labels become tooltips); each visitor's choice is remembered. <strong>Autohide</strong> slides the rail off its edge, leaving a strip - it comes back when the pointer reaches that edge, on a tap, or when focus moves into it - and the page takes the full width. Desktop only: below 993px the menu is the usual drawer.</small>
                         </div>
                         <div class="form-group dm-dock-bar-field" style="display:none">
                             <label>Bar behaviour</label>
-                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-hideOnScroll" name="dockHideOnScroll" style="width:auto;margin:0"> Hide on scroll</label>
+                            <label class="flex items-center gap-2"><input type="checkbox" id="me-dock-hideOnScroll" name="dockHideOnScroll" style="width:auto;margin:0"> Hide on scroll
+                                <span data-help-title="Hide on scroll" data-help="Hide the horizontal navbar while the visitor scrolls down and reveal it as soon as they scroll up. This gives reading space while keeping navigation easy to recover. It works best with Sticky positioning. It controls the public bar, rather than a vertical rail, floating panel or the admin sidebar."></span></label>
                             <small class="form-hint">The bar slides away while the page scrolls down and comes back as soon as it scrolls up. Best with Position <strong>Sticky</strong>.</small>
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-anchor">Float anchor</label>
+                            <label for="me-float-anchor">Float anchor
+                                <span data-help-title="Float anchor" data-help="Choose the viewport corner or side that the floating menu starts from. Top and bottom corners anchor both directions; the left and right edge options centre the panel vertically. The X and Y offsets add space from that anchor. These are starting values: a movable panel can retain a visitor-selected position."></span></label>
                             <select id="me-float-anchor" name="floatAnchor" class="form-input">
                                 <option value="TL">Top left</option>
                                 <option value="TR">Top right</option>
@@ -178,23 +200,28 @@
                             </select>
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-offsetX">Float offset X (px)</label>
+                            <label for="me-float-offsetX">Float offset X (px)
+                                <span data-help-title="Float offset X (px)" data-help="Set the horizontal distance in pixels between the floating panel and its selected viewport edge. For a right anchor the gap is measured from the right; for a left anchor it is measured from the left. Leaving it empty uses 16px. A visitor who has already moved the panel may see their remembered position instead."></span></label>
                             <input type="number" id="me-float-offsetX" name="floatOffsetX" class="form-input" placeholder="16" min="0" max="4000">
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-offsetY">Float offset Y (px)</label>
+                            <label for="me-float-offsetY">Float offset Y (px)
+                                <span data-help-title="Float offset Y (px)" data-help="Set the vertical gap in pixels for the floating panel relative to its anchor. Top anchors measure from the top and bottom anchors from the bottom; side-centred anchors start around the vertical centre. Leaving it empty uses 16px. Treat this as the initial position when visitors are allowed to move the panel."></span></label>
                             <input type="number" id="me-float-offsetY" name="floatOffsetY" class="form-input" placeholder="16" min="0" max="4000">
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-width">Float width (px)</label>
+                            <label for="me-float-width">Float width (px)
+                                <span data-help-title="Float width (px)" data-help="Set the initial floating panel width in pixels, from 120 to 600. Leaving it empty lets the layout choose its width. Allow space for labels and nested items. If resizing is enabled, a returning visitor may see their remembered size. Below 768px the panel returns to the page flow instead of floating."></span></label>
                             <input type="number" id="me-float-width" name="floatWidth" class="form-input" placeholder="auto" min="120" max="600">
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-radius">Corner rounding (px)</label>
+                            <label for="me-float-radius">Corner rounding (px)
+                                <span data-help-title="Corner rounding (px)" data-help="Set the rounding of the floating panel corners in pixels. Use 0 for square corners, a modest value for a soft rectangle, or a larger value for a more rounded panel. This changes the panel outline, not each link. Leave it empty to use the component default."></span></label>
                             <input type="number" id="me-float-radius" name="floatRadius" class="form-input" placeholder="theme default" min="0" max="48">
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-shadow">Shadow</label>
+                            <label for="me-float-shadow">Shadow
+                                <span data-help-title="Shadow" data-help="Choose how strongly the floating panel stands away from the page. None removes the shadow; larger choices create a more pronounced edge and depth. This affects the panel rather than individual items. Leave it on the default to follow the normal component styling, and check it against both light and dark page backgrounds."></span></label>
                             <select id="me-float-shadow" name="floatShadow" class="form-input">
                                 <option value="">- theme default -</option>
                                 <option value="none">None</option>
@@ -205,7 +232,8 @@
                             </select>
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-accent">Accent colour</label>
+                            <label for="me-float-accent">Accent colour
+                                <span data-help-title="Accent colour" data-help="Choose the accent used on the floating panel border and the stripe along its leading edge. Theme colours follow the active theme; Custom lets you choose a hex colour. Leaving it unset keeps the normal styling. This is separate from link text, badges and the menu highlight colour."></span></label>
                             <div class="me-colour-control">
                                 <select id="me-float-accent" name="floatAccent" class="form-input">
                                     <option value="">- none -</option>
@@ -222,12 +250,14 @@
                             <small class="form-hint">Tints the panel border and draws a stripe down its leading edge.</small>
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-opacity">Panel opacity (%)</label>
+                            <label for="me-float-opacity">Panel opacity (%)
+                                <span data-help-title="Panel opacity (%)" data-help="Set the floating panel surface opacity from 20 to 100 percent. At 100 the surface is solid. Lower values let the page show through with a blurred backdrop; labels remain fully opaque. Busy backgrounds can reduce readability, so check the result over real content. Leaving the field empty uses 100 percent."></span></label>
                             <input type="number" id="me-float-opacity" name="floatOpacity" class="form-input" placeholder="100" min="20" max="100">
                             <small class="form-hint">Below 100 the panel surface goes translucent with a blur behind it. Text stays fully opaque.</small>
                         </div>
                         <div class="form-group dm-float-field" style="display:none">
-                            <label for="me-float-title">Panel title</label>
+                            <label for="me-float-title">Panel title
+                                <span data-help-title="Panel title" data-help="Set the text in the floating panel bar beside its drag handle and collapse control. Leaving it blank uses the menu name. Keep it short enough to fit a narrow panel. This is a visible panel title, whereas the menu Description is administrative metadata. It does not rename the menu or its slug."></span></label>
                             <input type="text" id="me-float-title" name="floatTitle" class="form-input" placeholder="menu name" maxlength="60">
                             <small class="form-hint">Shown in the panel's bar, next to the drag handle and hamburger. Blank uses the menu's own name.</small>
                         </div>
@@ -236,19 +266,23 @@
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
                                 <input type="checkbox" id="me-float-collapsible" name="floatCollapsible" style="width:auto;margin:0">
                                 Collapsible - a hamburger button folds the panel away and back
-                            </label>
+                            
+                                <span data-help-title="Collapsible - a hamburger button folds the panel away and back" data-help="Add a hamburger control that folds the floating menu content away and opens it again. Each visitor keeps their own collapsed state in their browser. Start collapsed supplies the initial choice for new visitors. On screens below 768px, the panel returns to the page flow but collapsing is still available."></span></label>
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer;margin-left:1.5rem" class="dm-float-collapsed-field">
                                 <input type="checkbox" id="me-float-collapsed" name="floatCollapsed" style="width:auto;margin:0">
                                 Start collapsed
-                            </label>
+                            
+                                <span data-help-title="Start collapsed" data-help="Start a collapsible floating panel folded away for a visitor who has not made a choice yet. The visitor can open it with the panel hamburger control, and a previously saved visitor choice takes precedence. This setting requires Collapsible and does not delete or disable any menu items."></span></label>
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
                                 <input type="checkbox" id="me-float-movable" name="floatMovable" style="width:auto;margin:0">
                                 Movable - visitors drag the panel by its bar
-                            </label>
+                            
+                                <span data-help-title="Movable - visitors drag the panel by its bar" data-help="Let visitors drag the floating panel by its top bar to a position that suits their page view. Their position is saved in their own browser; it does not change these site defaults for anyone else. Double-clicking the bar resets the panel. Below 768px the panel returns to normal page flow."></span></label>
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
                                 <input type="checkbox" id="me-float-resizable" name="floatResizable" style="width:auto;margin:0">
                                 Resizable - visitors drag the panel's bottom-right corner
-                            </label>
+                            
+                                <span data-help-title="Resizable - visitors drag the panel&#x27;s bottom-right corner" data-help="Let visitors drag the floating panel bottom-right corner to change its size. Their chosen size is remembered in their own browser, while these settings remain the starting values for other visitors. Double-clicking the panel bar resets it. Resizing does not apply when the panel returns to page flow below 768px."></span></label>
                             <small class="form-hint">Each visitor's own position, size and collapsed state are remembered in their browser; the settings above stay the starting point. Double-clicking the bar resets a panel. Below 768px panels return to the page flow, so only collapsing applies there.</small>
                         </div>
                         <div class="form-group">
@@ -256,24 +290,27 @@
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
                                 <input type="checkbox" id="me-appearOnHover" name="appearOnHover" style="width:auto;margin:0">
                                 Reveal dropdowns on hover (desktop navbar; click still works)
-                            </label>
+                            
+                                <span data-help-title="Reveal dropdowns on hover (desktop navbar; click still works)" data-help="Open desktop navbar dropdowns when the pointer moves over their parent items. Clicking still works, and touch users continue to use tap controls. This can make a large navigation menu faster to browse, especially with card dropdowns. Leave it off when you want opening a dropdown to require an explicit click."></span></label>
                         </div>
                         <div class="form-group">
                             <label for="me-highlight-hover">Hover effect
-                                <span data-help-title="Highlighting" data-help="How items react under the pointer, and how the item for the page being viewed is marked. Set here for the whole menu; any single item can override both in its own editor."></span></label>
+                                <span data-help-title="Hover effect" data-help="Choose how links react when the pointer moves over them. None removes the hover effect; the other choices add the named visual treatment. This menu-wide default applies wherever the menu is drawn, including navbar, footer, shortcode and admin sidebar. An individual item can override it. When selected controls the current-page marker separately. Colour change tints the text; Underline and Overline add a line below or above it; Background tint adds a coloured wash; Darkened darkens the item; Uppercase changes letter case; Grow enlarges it; Breathe pulses its scale; Glow adds a soft glow. None leaves it still."></span></label>
                             <!-- Options are filled from HIGHLIGHT_HOVER in menu-decor.mjs on mount,
                                  so this list and the per-item editor's always match. -->
                             <select id="me-highlight-hover" name="highlightHover" class="form-input"></select>
                             <small class="form-hint">What an item does under the pointer. Applies wherever this menu is drawn - navbar, footer, <code>[menu]</code> and the admin sidebar. Any single item can override this in its own editor, under Highlighting.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-highlight-active">When selected</label>
+                            <label for="me-highlight-active">When selected
+                                <span data-help-title="When selected" data-help="Choose how the link to the page currently being viewed is marked. This lets visitors recognise their place in the navigation. Leaving the choice unset uses the normal default; None explicitly removes the selected effect. An individual item can override this setting in its editor. This is separate from the effect shown while hovering. Bold increases text weight; Underline and Overline add a line; Background tint adds a wash; Darkened darkens the link; Filled pill encloses it in a rounded surface. None removes the selected marker."></span></label>
                             <!-- Filled from HIGHLIGHT_ACTIVE in menu-decor.mjs on mount. -->
                             <select id="me-highlight-active" name="highlightActive" class="form-input"></select>
                             <small class="form-hint">How the item pointing at the page you are on is marked out. Any single item can override this in its own editor, under Highlighting.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-highlight-accent">Highlight colour</label>
+                            <label for="me-highlight-accent">Highlight colour
+                                <span data-help-title="Highlight colour" data-help="Choose the colour used by hover and selected-item effects throughout this menu. A theme colour follows the theme; Custom supplies a fixed hex colour. Leaving it empty uses the normal accent. An item can override the colour in its own editor. This does not set the floating panel accent or the badge colour."></span></label>
                             <div class="me-colour-control">
                                 <select id="me-highlight-accent" name="highlightAccent" class="form-input">
                                     <option value="">- theme primary -</option>
@@ -295,46 +332,55 @@
                             <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
                                 <input type="checkbox" id="me-entrance-enabled" name="entranceEnabled" style="width:auto;margin:0">
                                 Bring the items in one after another
-                            </label>
+                            
+                                <span data-help-title="Bring the items in one after another" data-help="Reveal menu items one after another instead of presenting the whole list at once. Set the animation, spacing between starts and duration below. Dropdowns and footer groups reveal their own items when shown. Visitors who request reduced motion see items immediately, regardless of this setting."></span></label>
                             <small class="form-hint">Applies wherever this menu is drawn on the site - navbar, footer, <code>[menu]</code> and floating panels.</small>
                         </div>
                         <div class="form-group dm-entrance-field" style="display:none">
-                            <label for="me-entrance-animation">Entrance animation</label>
+                            <label for="me-entrance-animation">Entrance animation
+                                <span data-help-title="Entrance animation" data-help="Choose the movement used as each menu item first appears. This controls entrance only, rather than hover or the selected-page highlight. Use the delay and duration fields to set its pacing. Reduced-motion visitors see the items immediately. The setting is available when staggered entrance is enabled. Fade changes opacity; Slide up and Slide down move vertically; the left and right choices enter from the named side; Zoom grows into place; Pop adds a bounce; Flip rotates down; Blur sharpens into focus."></span></label>
                             <!-- Filled from ENTRANCE_ANIMATIONS in menu-decor.mjs on mount. -->
                             <select id="me-entrance-animation" name="entranceAnimation" class="form-input"></select>
                         </div>
                         <div class="form-group dm-entrance-field" style="display:none">
-                            <label for="me-entrance-stagger">Delay between items (ms)</label>
+                            <label for="me-entrance-stagger">Delay between items (ms)
+                                <span data-help-title="Delay between items (ms)" data-help="Set the delay in milliseconds between the start of one item entrance and the next. Smaller values make a long menu appear sooner; larger values make the sequence more noticeable. This is the gap between starts, not the animation duration. Visitors requesting reduced motion do not wait for the sequence. The accepted range is 0 to 1000ms, and the default is 60ms. At 0, items begin together."></span></label>
                             <input type="number" id="me-entrance-stagger" name="entranceStagger" class="form-input" placeholder="60" min="0" max="1000" step="10">
                         </div>
                         <div class="form-group dm-entrance-field" style="display:none">
-                            <label for="me-entrance-duration">Each item's animation (ms)</label>
+                            <label for="me-entrance-duration">Each item's animation (ms)
+                                <span data-help-title="Each item&#x27;s animation (ms)" data-help="Set how long each item entrance animation takes, in milliseconds. This is independent of the delay between item starts, so animations may overlap. Shorter values feel quicker; longer values create a more gradual reveal. This only applies when staggered entrance is enabled and the visitor has not requested reduced motion. The accepted range is 50 to 3000ms, and the default is 400ms."></span></label>
                             <input type="number" id="me-entrance-duration" name="entranceDuration" class="form-input" placeholder="400" min="50" max="3000" step="50">
                         </div>
                         <div class="form-group">
                             <label for="me-class">CSS classes
-                                <span data-help-title="CSS classes" data-help="Your own class names, separated by spaces, added to the menu's outer element - the navbar, the footer column or the [menu] nav. Style them in Custom CSS. Each item can carry classes of its own too, in its editor."></span></label>
+                                <span data-help-title="CSS classes" data-help="Add your own CSS class names, separated by spaces, to this menu outer element: the navbar, footer column or menu shortcode navigation. Enter names without leading dots, then write rules in Custom CSS. Each item can also have classes in its own editor. Classes add styling hooks; they do not supply styles by themselves."></span></label>
                             <input type="text" id="me-class" name="class" class="form-input" placeholder="site-nav is-compact" autocomplete="off" spellcheck="false">
                             <small class="form-hint">Letters, digits, hyphens and underscores; no dots. For styling in Custom CSS.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-fontFamily">Font family</label>
+                            <label for="me-fontFamily">Font family
+                                <span data-help-title="Font family" data-help="Set a CSS font family for menu labels, such as Arial, sans-serif. This field selects from fonts already available to the page; it does not download a font. Leave it blank to inherit the site typography. The style applies to the menu, including the admin sidebar when this is its menu."></span></label>
                             <input type="text" id="me-fontFamily" name="fontFamily" class="form-input" placeholder="Inter">
                         </div>
                         <div class="form-group">
-                            <label for="me-fontSize">Font size</label>
+                            <label for="me-fontSize">Font size
+                                <span data-help-title="Font size" data-help="Set the menu label size using a CSS value such as 16px or 1rem. A rem value follows the root text size; pixels give a fixed size. Leave it blank to inherit the normal menu typography. Check long labels and mobile navigation after changing this; icon size is controlled separately."></span></label>
                             <input type="text" id="me-fontSize" name="fontSize" class="form-input" placeholder="14 (px assumed) or 1rem">
                         </div>
                         <div class="form-group">
-                            <label for="me-fontWeight">Font weight</label>
+                            <label for="me-fontWeight">Font weight
+                                <span data-help-title="Font weight" data-help="Set the thickness of menu label text using a CSS weight such as 400 for regular, 600 for semibold or 700 for bold. The chosen font must provide the weight to render it accurately. Leave it blank to inherit the normal menu weight. This does not change icon stroke thickness."></span></label>
                             <input type="text" id="me-fontWeight" name="fontWeight" class="form-input" placeholder="500">
                         </div>
                         <div class="form-group">
-                            <label for="me-letterSpacing">Letter spacing</label>
+                            <label for="me-letterSpacing">Letter spacing
+                                <span data-help-title="Letter spacing" data-help="Adjust the space between letters using a CSS value such as 0.02em or 1px. An em value scales with the menu text size. Small positive values can help short uppercase labels; large values make longer labels harder to fit. Leave it blank to inherit the normal spacing."></span></label>
                             <input type="text" id="me-letterSpacing" name="letterSpacing" class="form-input" placeholder="0.01 (em assumed) or 1px">
                         </div>
                         <div class="form-group">
-                            <label for="me-iconSize">Icon size</label>
+                            <label for="me-iconSize">Icon size
+                                <span data-help-title="Icon size" data-help="Set the size of menu icons using a CSS size such as 18px. This is independent of the label font size. Keep icons large enough to recognise, especially when a rail can collapse to icons. Leave it blank to use the menu default. It does not choose the icon assigned to each item."></span></label>
                             <input type="text" id="me-iconSize" name="iconSize" class="form-input" placeholder="15 (px assumed) or 1.25em">
                         </div>
                     </div>
@@ -357,12 +403,14 @@
                             <small class="form-hint">Leave unset for no binding - this menu then only renders where it is mapped or where a <code>[menu]</code> shortcode places it.</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-bind-projects">Projects</label>
+                            <label for="me-bind-projects">Projects
+                                <span data-help-title="Projects" data-help="Choose the projects whose pages should use this menu in the selected slot. Use Ctrl-click or Cmd-click to select multiple projects. The menu must also have a Slot selected for this binding to take effect. Page patterns can supply additional matches. This controls where the menu appears, rather than who is allowed to see each item."></span></label>
                             <select id="me-bind-projects" name="bindProjects" class="form-input" multiple size="5"></select>
                             <small class="form-hint">Applies on every page belonging to the selected projects. Ctrl/Cmd-click to select more than one.</small>
                         </div>
                         <div class="form-group col-span-2">
-                            <label for="me-bind-pages">Pages</label>
+                            <label for="me-bind-pages">Pages
+                                <span data-help-title="Pages" data-help="Enter one URL path or path pattern per line, for example /about or /docs/*. The trailing wildcard matches pages beneath that path. Use the picker and Add to insert an existing page, then edit patterns here if needed. Together with the selected Slot, these rules override the usual menu location on matching pages."></span></label>
                             <div class="me-pages-picker">
                                 <select id="me-bind-page-pick" class="form-input"></select>
                                 <button type="button" class="btn btn-sm btn-secondary" id="me-bind-page-add"><span data-icon="plus"></span> Add</button>
@@ -380,20 +428,23 @@
                     <div class="grid grid-cols-2 dm-pe-grid">
                         <div class="form-group">
                             <label for="me-slug">Slug <span class="required">*</span>
-                                <span data-help="The menu's id - its file name and what [menu slug=&quot;…&quot;] names. Renaming it moves the menu and any location mapped to it."></span></label>
+                                <span data-help-title="Slug *" data-help="The unique ID used for the menu filename and in a [menu slug=&quot;...&quot;] shortcode. Use a stable, descriptive name. Renaming it moves the menu record and rewrites mapped menu locations, but check any hand-authored shortcodes that name the old slug. The Name field is a separate human-readable label."></span></label>
                             <input type="text" id="me-slug" name="slug" class="form-input" required>
                             <small class="form-hint">Lowercase alphanumeric + hyphen - affects file name</small>
                         </div>
                         <div class="form-group">
-                            <label for="me-name">Name <span class="required">*</span></label>
+                            <label for="me-name">Name <span class="required">*</span>
+                                <span data-help-title="Name" data-help="Give this menu a recognisable name for the admin list and editor. The name does not change its slug, URL destinations or location mapping. A floating panel uses it as its title when Panel title is empty. Choose a name that describes its purpose, such as Main navigation or Members sidebar."></span></label>
                             <input type="text" id="me-name" name="name" class="form-input" required>
                         </div>
                         <div class="form-group col-span-2">
-                            <label for="me-description">Description</label>
+                            <label for="me-description">Description
+                                <span data-help-title="Description" data-help="Add an administrative note explaining what the menu is for or where it is used. This helps distinguish similar menus in the admin. It is separate from an item description, which can appear inside a card dropdown. Changing this does not alter the menu links, slug or placement."></span></label>
                             <textarea id="me-description" name="description" class="form-input" rows="2"></textarea>
                         </div>
                         <div class="form-group col-span-2">
-                            <label for="me-project">Project</label>
+                            <label for="me-project">Project
+                                <span data-help-title="Project" data-help="Associate this menu with a project for organisation in the admin. This metadata is separate from Binding: selecting a project here does not by itself place the menu on that project pages. Use the Binding tab to choose a slot and the page or project rules that decide where it appears."></span></label>
                             <select id="me-project" name="project" class="form-input"></select>
                             <small class="form-hint">Tag this menu to a project so it appears under that project's sidebar entry</small>
                         </div>

package/admin/js/templates/theme.html

@@ -117,6 +117,8 @@
                                 <option value="Open Sans">Open Sans</option>
                                 <option value="Lato">Lato</option>
                                 <option value="Nunito">Nunito</option>
+                                <option value="Nunito Sans">Nunito Sans</option>
+                                <option value="Mulish">Mulish</option>
                                 <option value="Poppins">Poppins</option>
                                 <option value="Source Sans 3">Source Sans 3</option>
                                 <option value="Montserrat">Montserrat</option>