@kubex/zinc 1.1.184 → 2.0.0

package/src/components/panel/panel.test.ts

@@ -71,4 +71,46 @@ describe('<zn-panel>', () => {
 
     expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.false;
   });
+
+  it('shows a description under the caption in the header', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-panel caption="Identity" description="Shown to assessors">Body</zn-panel>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const header = el.shadowRoot!.querySelector('zn-header')!;
+    await (header as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    expect(header.shadowRoot!.querySelector('.header__description')!.textContent).to.equal('Shown to assessors');
+  });
+
+  it('renders no description element without one', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-panel caption="Identity">Body</zn-panel>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const header = el.shadowRoot!.querySelector('zn-header')!;
+    await (header as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    expect(header.shadowRoot!.querySelector('.header__description')).to.not.exist;
+  });
+
+  describe('transparent', () => {
+    // Safari has no overflow-clip-margin, so the room comes from a padding/negative-margin fallback there
+    it('leaves room outside the content for the focus ring of a flush control', async () => {
+      const el = await fixture(html`
+        <zn-panel transparent flush style="--zn-focus-ring-outset: 4px"><input></zn-panel> `);
+      const content = el.shadowRoot!.querySelector('.panel__content')!.getBoundingClientRect();
+      const input = el.querySelector('input')!.getBoundingClientRect();
+      const clipMargin = CSS.supports('overflow-clip-margin: 0px') ? 4 : 0;
+
+      expect(input.left - (content.left - clipMargin)).to.equal(4);
+      expect(input.top - (content.top - clipMargin)).to.equal(4);
+    });
+
+    it('keeps the bottom edge of the header clickable', async () => {
+      const el = await fixture(html`
+        <zn-panel transparent caption="Example" style="--zn-focus-ring-outset: 4px"><input></zn-panel> `);
+      const header = el.shadowRoot!.querySelector('.panel__header')!;
+      const rect = header.getBoundingClientRect();
+      const hit = el.shadowRoot!.elementFromPoint(rect.left + 10, rect.bottom - 2);
+
+      expect(header.contains(hit)).to.be.true;
+    });
+  });
 });

package/src/components/popup/popup.component.ts

@@ -1,7 +1,7 @@
+import '../../events/zn-reposition';
 import {arrow, autoUpdate, computePosition, flip, offset, platform, shift, size} from '@floating-ui/dom';
 import {classMap} from 'lit/directives/class-map.js';
 import {html, unsafeCSS} from 'lit';
-import {offsetParent} from 'composed-offset-position';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import type {CSSResultGroup} from 'lit';
@@ -65,7 +65,7 @@ export default class ZnPopup extends ZincElement {
 
   /**
    * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
-   * panel inside of the viewport.
+   * panel inside the viewport.
    */
   @property({reflect: true}) placement:
     | 'top'
@@ -206,7 +206,7 @@ export default class ZnPopup extends ZincElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.stop();
+    this.stop().then();
   }
 
   async updated(changedProps: Map<string, unknown>) {
@@ -214,12 +214,16 @@ export default class ZnPopup extends ZincElement {
 
     // Start or stop the positioner when active changes
     if (changedProps.has('active')) {
-      this.active ? this.start() : this.stop();
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop().then();
+      }
     }
 
     // Update the anchor when anchor changes
     if (changedProps.has('anchor')) {
-      this.handleAnchorChange();
+      await this.handleAnchorChange();
     }
 
     // All other properties will trigger a reposition when active
@@ -255,6 +259,10 @@ export default class ZnPopup extends ZincElement {
       this.anchorEl.removeEventListener('mouseover', this.handleAnchorHover);
       this.anchorEl.addEventListener('mouseover', this.handleAnchorHover);
     }
+
+    if (this.active) {
+      this.start();
+    }
   }
 
   public handleAnchorHover = () => {
@@ -282,6 +290,9 @@ export default class ZnPopup extends ZincElement {
         this.removeAttribute('data-current-placement');
         this.style.removeProperty('--auto-size-available-width');
         this.style.removeProperty('--auto-size-available-height');
+        // WebKit: going display:none and leaving the top layer in one style update leaves the popup's old box as
+        // stale scroll overflow on its container (scrollbars flash on close), so flush style between the two.
+        void getComputedStyle(this.popup).display;
         this.popup.hidePopover();
         requestAnimationFrame(() => resolve());
       } else {
@@ -306,7 +317,7 @@ export default class ZnPopup extends ZincElement {
     if (this.sync) {
       middleware.push(
         size({
-          apply: ({rects}: { rects: { reference: { width: number, height: number } } }) => {
+          apply: ({rects}: { rects: { reference: { width: number; height: number } } }) => {
             const syncWidth = this.sync === 'width' || this.sync === 'both';
             const syncHeight = this.sync === 'height' || this.sync === 'both';
 
@@ -350,7 +361,7 @@ export default class ZnPopup extends ZincElement {
         size({
           boundary: this.autoSizeBoundary,
           padding: this.autoSizePadding,
-          apply: ({availableWidth, availableHeight}: { availableWidth: number, availableHeight: number }) => {
+          apply: ({availableWidth, availableHeight}: { availableWidth: number; availableHeight: number }) => {
             if (this.autoSize === 'vertical' || this.autoSize === 'both') {
               this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);
             } else {
@@ -381,11 +392,6 @@ export default class ZnPopup extends ZincElement {
       );
     }
 
-    const getOffsetParent =
-      this.strategy === 'absolute'
-        ? (element: Element) => platform.getOffsetParent(element, offsetParent)
-        : platform.getOffsetParent;
-
     // A closed popover has no size to measure, so it would first land on top of its anchor
     if (this.popup.isConnected && !this.popup.matches(':popover-open')) {
       this.popup.style.visibility = 'hidden';
@@ -396,9 +402,10 @@ export default class ZnPopup extends ZincElement {
       placement: this.placement,
       middleware,
       strategy: this.strategy,
+      // The popup is a popover in the top layer, so the page, not any ancestor, is what it is positioned within
       platform: {
         ...platform,
-        getOffsetParent
+        getOffsetParent: () => window
       }
     }).then(({x, y, middlewareData, placement}:
              { x: number; y: number; middlewareData: MiddlewareData; placement: string }) => {

package/src/components/popup/popup.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import type ZnPopup from './popup.component';
 
 describe('<zn-popup>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,23 @@ describe('<zn-popup>', () => {
 
     expect(el).to.exist;
   });
+
+  it('keeps following a new anchor set while open', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <button id="first">First</button>
+        <button id="second">Second</button>
+        <zn-popup anchor="first" active><div>Content</div></zn-popup>
+      </div>`);
+    const popup = wrapper.querySelector<ZnPopup>('zn-popup')!;
+    await oneEvent(popup, 'zn-reposition');
+
+    popup.anchor = 'second';
+    await oneEvent(popup, 'zn-reposition');
+
+    // The positioner repositions on window resize; a stopped one never would
+    const repositioned = oneEvent(popup, 'zn-reposition');
+    window.dispatchEvent(new Event('resize'));
+    await repositioned;
+  });
 });

package/src/components/priority-list/priority-list.component.ts

@@ -1,4 +1,5 @@
 import {classMap} from "lit/directives/class-map.js";
+import {clipCornerRadius, ReorderController} from '../../internal/reorder';
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {
   FormControlController,
@@ -8,6 +9,7 @@ import {HasSlotController} from '../../internal/slot';
 import {property, query, state} from 'lit/decorators.js';
 import {repeat} from "lit/directives/repeat.js";
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from '../button';
 import ZnIcon from '../icon';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
@@ -35,11 +37,14 @@ function safeParse(value: string): unknown {
  * @status experimental
  * @since 1.0
  *
+ * @dependency zn-button
  * @dependency zn-icon
  *
  * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that
  *   uniquely identifies the item. The component automatically assigns slot names to project each item into the
  *   correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).
+ *   Use `zn-tile` items for titled rows with their own actions. Set `locked` on an item to pin it where it is.
+ * @slot action-{value} - Controls shown at the end of the item with that `value`.
  * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.
  * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.
  * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.
@@ -66,6 +71,7 @@ function safeParse(value: string): unknown {
  */
 export default class ZnPriorityList extends ZincElement implements ZincFormControl {
   static dependencies = {
+    'zn-button': ZnButton,
     'zn-icon': ZnIcon,
   };
 
@@ -90,6 +96,13 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
 
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
 
+  private readonly reorderController: ReorderController = new ReorderController(this, {
+    formControl: this.formControlController,
+    fallbackFields: () => this.name ? this.getPriorityMap().map(({key, priority}) => [`${this.name}[${key}]`, String(priority)]) : [],
+    modifier: 'alt',
+    focus: key => this.reorderRow(key)?.focus(),
+  });
+
   @query('.priority-list__hidden-inputs') hiddenInputsContainer: HTMLDivElement;
 
   /**
@@ -118,6 +131,9 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
 
   @state() defaultValue: string[] = [];
 
+  /** The item holding the list's single tab stop. */
+  @state() private _focusKey = '';
+
   /** The component's label. Required for proper accessibility. */
   @property() label = '';
 
@@ -144,6 +160,23 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
   /** The starting priority number. Defaults to 1. */
   @property({type: Number, attribute: 'priority-start'}) priorityStart = 1;
 
+  /** Draws the items as rows divided edge to edge, for a list filling a flush panel; the label is kept for
+   * screen readers only. */
+  @property({type: Boolean, reflect: true}) flush = false;
+
+  /** Lets a click or Enter select an item as well as drag it, for a list that doubles as navigation. The click is
+   * passed on to the item, so a `tab` or link on it acts as if clicked. */
+  @property({type: Boolean, reflect: true}) selectable = false;
+
+  /** The selected item's value. An item marked active by zn-tabs takes precedence, so the list follows its tabs. */
+  @property({reflect: true}) selected = '';
+
+  /** Hides each item's priority number, for lists where the order shows the priority. */
+  @property({type: Boolean, attribute: 'hide-priority', reflect: true}) hidePriority = false;
+
+  /** Shows move up and move down buttons on each item. */
+  @property({type: Boolean, attribute: 'move-buttons', reflect: true}) moveButtons = false;
+
   /**
    * When set, the associated form will be submitted with the given action URL whenever items are reordered.
    * If set to an empty string, the form will be submitted using its existing action.
@@ -157,11 +190,6 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
    */
   @property() order = '';
 
-  // Drag state
-  @state() private draggedKey: string | null = null;
-  @state() private isDragging = false;
-  private dragOverKey: string | null = null;
-
   /** Gets the validity state object. */
   get validity(): ValidityState {
     return validValidityState;
@@ -172,9 +200,21 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
     return '';
   }
 
+  private _itemObserver = new MutationObserver(() => this.requestUpdate());
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = [...this._value];
+    this._itemObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['locked', 'class'],
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._itemObserver.disconnect();
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
@@ -267,188 +307,108 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
     });
   }
 
-  /**
-   * Moves an item from one index to another.
-   */
-  private _moveItem(fromIndex: number, toIndex: number) {
-    if (fromIndex === toIndex) return;
-    if (fromIndex < 0 || toIndex < 0) return;
-    if (fromIndex >= this._value.length || toIndex >= this._value.length) return;
+  private _item(key: string) {
+    return this.querySelector<HTMLElement>(`:scope > [value="${CSS.escape(key)}"]`);
+  }
 
-    const newOrder = [...this._value];
-    const [moved] = newOrder.splice(fromIndex, 1);
-    newOrder.splice(toIndex, 0, moved);
+  /** @internal ReorderHost: the items' keys in order. */
+  reorderKeys() {
+    return [...this._value];
+  }
 
-    this._value = newOrder;
+  /** @internal ReorderHost: renders the items in a new order. */
+  applyReorder(keys: string[]) {
+    this._value = keys;
     this._assignSlotNames();
     this._syncHiddenInputs();
     this.requestUpdate();
-
-    this.emit('zn-change');
-    this.emit('zn-reorder');
-    this._submitForm();
   }
 
-  /**
-   * Submits the associated form if a `formaction` attribute is set.
-   */
-  private _submitForm() {
-    if (this.formAction === undefined || this.formAction === null) return;
-
-    const form = this.getForm();
-    if (form) {
-      // Submitting through the controller announces the form before it is
-      // submitted, which is what lets a host intercept the submit: a submit
-      // event raised on a form inside a shadow root never reaches the document,
-      // so submitting it directly navigates the page instead.
-      const submitter = document.createElement('input');
-      submitter.type = 'submit';
-      if (this.formAction) {
-        submitter.setAttribute('formaction', this.formAction);
-      }
-      this.formControlController.submit(submitter);
-    } else if (this.formAction) {
-      // No parent form — create a temporary one to submit the priority data
-      const tempForm = document.createElement('form');
-      tempForm.method = 'post';
-      tempForm.action = this.formAction;
-      tempForm.hidden = true;
-
-      this._value.forEach((key, index) => {
-        if (this.name) {
-          const input = document.createElement('input');
-          input.type = 'hidden';
-          input.name = `${this.name}[${key}]`;
-          input.value = String(this.priorityStart + index);
-          tempForm.appendChild(input);
-        }
-      });
-
-      document.body.appendChild(tempForm);
-      // requestSubmit raises a cancellable submit event, so a host can handle
-      // the submission rather than the browser navigating to formaction.
-      tempForm.requestSubmit();
-      tempForm.remove();
-    }
+  /** @internal ReorderHost: the row drawn for an item. */
+  reorderRow(key: string) {
+    const index = this._value.indexOf(key);
+    return this.shadowRoot?.querySelectorAll<HTMLElement>('.priority-list__item')[index] ?? null;
   }
 
-  // --- Drag and Drop Handlers ---
-
-  private _handleDragStart(event: DragEvent, key: string) {
-    if (this.disabled) {
-      event.preventDefault();
-      return;
-    }
-
-    this.draggedKey = key;
-    this.isDragging = true;
-
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', key);
-    }
+  /** @internal ReorderHost: whether an item is pinned where it is. */
+  reorderLocked(key: string) {
+    return this._item(key)?.hasAttribute('locked') ?? false;
   }
 
-  private _handleDragEnd() {
-    if (this.isDragging) {
-      // Emit events for the final position change
-      this._syncHiddenInputs();
-      this.emit('zn-change');
-      this.emit('zn-reorder');
-      this._submitForm();
+  private async _handleStep(event: Event, key: string, step: number) {
+    event.stopPropagation();
+    const button = event.currentTarget as ZnButton;
+    const hadFocus = button.matches(':focus-within');
+    if (!this.reorderController.step(key, step) || !hadFocus) return;
+
+    // Moving the row can detach it, which drops focus even when the button stays enabled
+    await this.updateComplete;
+    const target = [button, ...button.parentElement!.querySelectorAll<ZnButton>('zn-button')].find(b => !b.disabled);
+    if (target) {
+      target.button.focus();
+    } else {
+      this.reorderRow(key)?.focus();
     }
-
-    this.draggedKey = null;
-    this.dragOverKey = null;
-    this.isDragging = false;
   }
 
-  private _handleDragOver(event: DragEvent, key: string) {
-    event.preventDefault();
-
-    if (!this.draggedKey || this.draggedKey === key) return;
-
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move';
-    }
-
-    // Move the item in real-time so other items shift around
-    const fromIndex = this._value.indexOf(this.draggedKey);
-    const toIndex = this._value.indexOf(key);
-
-    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
-
-    const newOrder = [...this._value];
-    const [moved] = newOrder.splice(fromIndex, 1);
-    newOrder.splice(toIndex, 0, moved);
-    this._value = newOrder;
-    this._assignSlotNames();
-    this.requestUpdate();
+  // --- Keyboard Handlers ---
 
-    this.dragOverKey = key;
+  private _selectedKey(): string {
+    if (!this.selectable) return '';
+    const active = this._getSlottedItems().find(el => el.classList.contains('zn-tb-active'));
+    return active?.getAttribute('value') || this.selected;
   }
 
-  private _handleDragLeave(event: DragEvent, key: string) {
-    const related = event.relatedTarget as Node | null;
-    const target = event.currentTarget as HTMLElement;
-    if (related && target.contains(related)) return;
+  private _select(key: string) {
+    if (!this.selectable) return;
+    this.selected = key;
+    const item = this._item(key);
+    if (!item) return;
+    item.click();
+    this.emit('zn-select', {detail: {item}});
+  }
 
-    if (this.dragOverKey === key) {
-      this.dragOverKey = null;
+  private _matchClipCorners(row: HTMLElement) {
+    const radius = clipCornerRadius(this, row);
+    if (radius) {
+      row.style.setProperty('--zn-priority-list-drag-radius', radius);
+    } else {
+      row.style.removeProperty('--zn-priority-list-drag-radius');
     }
   }
 
-  private _handleDrop(event: DragEvent) {
-    event.preventDefault();
-    // Item is already in position from real-time dragover moves
-    // dragend handles cleanup and event emission
+  private _handleItemClick(event: MouseEvent, key: string) {
+    const path = event.composedPath();
+    // An action is its own control, and the click _select passes on to the item bubbles back through the row.
+    if (path.some(el => el instanceof HTMLElement && el.classList.contains('priority-list__actions'))
+      || path.includes(this._item(key)!)) {
+      return;
+    }
+    this._select(key);
   }
 
-  // --- Keyboard Handlers ---
-
   private _handleKeyDown(event: KeyboardEvent, key: string) {
     if (this.disabled) return;
 
-    const index = this._value.indexOf(key);
-    if (index === -1) return;
-
-    let newIndex: number | null = null;
-
-    switch (event.key) {
-      case 'ArrowUp':
-        if (index > 0) {
-          newIndex = index - 1;
-        }
-        break;
-      case 'ArrowDown':
-        if (index < this._value.length - 1) {
-          newIndex = index + 1;
-        }
-        break;
-      case 'Home':
-        if (index > 0) {
-          newIndex = 0;
-        }
-        break;
-      case 'End':
-        if (index < this._value.length - 1) {
-          newIndex = this._value.length - 1;
-        }
-        break;
-      default:
-        return;
+    if (this.selectable && (event.key === 'Enter' || event.key === ' ') && event.target === event.currentTarget) {
+      event.preventDefault();
+      this._select(key);
+      return;
     }
 
-    if (newIndex !== null) {
-      event.preventDefault();
-      this._moveItem(index, newIndex);
+    if (this.reorderController.handleKeyDown(event, key) || event.target !== event.currentTarget) return;
 
-      // Focus the moved item after re-render
-      this.updateComplete.then(() => {
-        const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.priority-list__item');
-        items?.[newIndex!]?.focus();
-      });
-    }
+    const index = this._value.indexOf(key);
+    const next = {
+      ArrowUp: index - 1,
+      ArrowDown: index + 1,
+      Home: 0,
+      End: this._value.length - 1,
+    }[event.key];
+    if (next === undefined) return;
+
+    event.preventDefault();
+    this.reorderRow(this._value[Math.max(0, Math.min(next, this._value.length - 1))])?.focus();
   }
 
   // --- Slot Change Handler ---
@@ -514,9 +474,18 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
     if (changedProperties.has('value') || changedProperties.has('name') || changedProperties.has('priorityStart')) {
       this._syncHiddenInputs();
     }
+
+    // Re-measured on every render, as the placeholder moves into and out of the panel's corners during a drag.
+    // Runs before the reorder slide starts, so the row is measured in its final place.
+    const placeholder = this.shadowRoot?.querySelector<HTMLElement>('.priority-list__item--dragging');
+    if (placeholder) {
+      this._matchClipCorners(placeholder);
+    }
   }
 
   render() {
+    const selectedKey = this._selectedKey();
+    const tabStop = [this._focusKey, selectedKey].find(key => key && this._value.includes(key)) ?? this._value[0];
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
@@ -562,42 +531,58 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
             class=${classMap({
               'priority-list': true,
               'priority-list--disabled': this.disabled,
-              'priority-list--drag-active': this.isDragging,
+              'priority-list--drag-active': this.reorderController.isDragging,
             })}
             role="listbox"
             aria-label=${this.label || 'Reorderable list'}
             aria-orientation="vertical">
-            ${repeat(this._value, (key) => key, (key, index) => html`
+            ${repeat(this._value, (key) => key, (key, index) => {
+              const item = this._item(key);
+              const locked = item?.hasAttribute('locked') ?? false;
+              const caption = item?.getAttribute('caption') || key;
+              return html`
               <div
                 part="item"
                 class=${classMap({
                   'priority-list__item': true,
-                  'priority-list__item--dragging': this.draggedKey === key,
+                  'priority-list__item--dragging': this.reorderController.draggedKey === key,
                   'priority-list__item--disabled': this.disabled,
+                  'priority-list__item--locked': locked,
+                  'priority-list__item--selectable': this.selectable,
+                  'priority-list__item--selected': key === selectedKey,
                 })}
                 role="option"
-                tabindex=${this.disabled ? '-1' : '0'}
-                aria-selected="false"
-                aria-label="${key} - priority ${this.priorityStart + index}"
-                draggable=${this.disabled ? 'false' : 'true'}
-                @dragstart=${(e: DragEvent) => this._handleDragStart(e, key)}
-                @dragend=${this._handleDragEnd}
-                @dragover=${(e: DragEvent) => this._handleDragOver(e, key)}
-                @dragleave=${(e: DragEvent) => this._handleDragLeave(e, key)}
-                @drop=${(e: DragEvent) => this._handleDrop(e)}
+                tabindex=${!this.disabled && key === tabStop ? '0' : '-1'}
+                aria-selected=${key === selectedKey ? 'true' : 'false'}
+                aria-label="${caption} - priority ${this.priorityStart + index}"
+                @pointerdown=${(e: PointerEvent) => this.reorderController.handlePointerDown(e, key)}
+                @focus=${() => { this._focusKey = key; }}
+                @click=${(e: MouseEvent) => this._handleItemClick(e, key)}
                 @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, key)}>
                 <span class="priority-list__handle" part="drag-handle">
-                  <zn-icon src="drag_indicator" size="16"></zn-icon>
+                  <zn-icon src="${locked ? 'lock@lu' : 'drag_indicator'}" size="16"></zn-icon>
                 </span>
                 <span class="priority-list__priority" part="priority">${this.priorityStart + index}</span>
                 <span class="priority-list__content" part="content">
                   <slot name="_item-${key}"></slot>
                 </span>
                 <span class="priority-list__actions" part="actions">
+                  ${this.moveButtons && !locked ? html`
+                    <span class="priority-list__move">
+                      <zn-button icon="chevron-up@lu" icon-size="18" icon-button="small" plain label="Move up"
+                                 tooltip="Move up"
+                                 ?disabled=${this.disabled || !this.reorderController.canStep(key, -1)}
+                                 @click=${(e: Event) => this._handleStep(e, key, -1)}></zn-button>
+                      <zn-button icon="chevron-down@lu" icon-size="18" icon-button="small" plain label="Move down"
+                                 tooltip="Move down"
+                                 ?disabled=${this.disabled || !this.reorderController.canStep(key, 1)}
+                                 @click=${(e: Event) => this._handleStep(e, key, 1)}></zn-button>
+                    </span>` : null}
                   <slot name="action-${key}"></slot>
                 </span>
               </div>
-            `)}
+            `;
+            })}
           </div>
 
           <!-- Hidden default slot to capture light DOM children for initial detection -->