Merge pull request #1 from Amphiluke/keyboard-interactions

Keyboard interactions

Author: Amphiluke

README.md

@@ -185,6 +185,14 @@ A mandatory attribute `name` is used by the `<cbx-tree>` component to construct
 <cbx-tree name="reading-list[]"></cbx-tree>
 ```
 
+### `nohover`
+
+By default, items in the `<cbx-tree>` component grab focus and get highlighted when pointer hovers over them, similarly to options in the `<select>` element’s dropdown. A Boolean attribute `nohover` makes the `<cbx-tree>` component deactivate this behaviour, so that items only become selected when clicked or focused by keyboard navigation (similarly to options in a `<select>` with the `multiple` attribute specified).
+
+```html
+<cbx-tree name="reading-list[]" nohover></cbx-tree>
+```
+
 ## Instance properties
 
 The `CbxTree` interface also inherits properties from its parent, [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
@@ -212,6 +220,10 @@ console.log('Checked values:', readingList.formData.getAll('reading-list[]'));
 
 Reflects the value of the element’s [`name` attribute](#name).
 
+### `CbxTree.noHover`
+
+Reflects the value of the element’s [`nohover` attribute](#nohover).
+
 ### `CbxTree.subtreeProvider`
 
 The `subtreeProvider` property is used in cases where on-demand subtree loading is required. If your initial tree doesn’t contain data for some nested subtrees, you may define your custom function for subtree generation/fetching which will be called when the user expands the target item for the first time.
@@ -317,8 +329,8 @@ The `<cbx-tree>` element provides a few CSS custom properties (variables) that y
 | `--cbx-tree-toggle-closed-mask`  | `<url>`¹    | Mask image for the toggle button in the collapsed state |
 | `--cbx-tree-toggle-open-mask`    | `<url>`     | Mask image for the toggle button in the expanded state  |
 | `--cbx-tree-toggle-pending-mask` | `<url>`     | Mask image for the toggle button in the pending state   |
-| `--cbx-tree-label-hover-bg`      | `<color>`²  | Background color for the highlighted item’s label       |
-| `--cbx-tree-label-hover-fg`      | `<color>`   | Text color for the highlighted item’s label             |
+| `--cbx-tree-label-focus-bg`      | `<color>`²  | Background color for the highlighted item’s label       |
+| `--cbx-tree-label-focus-fg`      | `<color>`   | Text color for the highlighted item’s label             |
 | `--cbx-tree-nesting-indent`      | `<length>`³ | Indentation size for nested subtrees                    |
 
 ¹ https://developer.mozilla.org/en-US/docs/Web/CSS/url_value \

dist/cbx-tree.d.mts

@@ -11,17 +11,21 @@ export default class CbxTree extends HTMLElement {
   #private;
 
   static get formAssociated(): true;
+  static get observedAttributes(): string[];
   subtreeProvider: ((parentValue: string) => Promise<CbxRawTreeItem[]>) | null;
   get formData(): FormData;
   get form(): HTMLFormElement | null;
   get name(): string | null;
   set name(value: string);
   get disabled(): boolean;
   set disabled(value: boolean);
+  get noHover(): boolean;
+  set noHover(value: boolean);
   get type(): string;
 
   constructor();
 
+  attributeChangedCallback(name: string): void;
   formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
   formStateRestoreCallback(state: string, mode: string): void;

dist/cbx-tree.mjs

@@ -86,8 +86,8 @@ cbx-tree[data-theme='custom'] {
   --cbx-tree-toggle-closed-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14"><path d="M3 7L11 7M7 3L7 11" stroke="black"/></svg>');
   --cbx-tree-toggle-open-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14"><path d="M3 7L11 7" stroke="black"/></svg>');
   --cbx-tree-nesting-indent: 1.3em;
-  --cbx-tree-label-hover-bg: rgb(from SelectedItem r g b / 0.2);
-  --cbx-tree-label-hover-fg: currentColor;
+  --cbx-tree-label-focus-bg: rgb(from SelectedItem r g b / 0.2);
+  --cbx-tree-label-focus-fg: currentColor;
 
   &::part(item) {
     --line-color: rgb(from currentColor r g b / 0.3);