@florid-kit/components 0.0.1-next.1

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@florid-kit/components",
+  "version": "0.0.1-next.1",
+  "main": "index.js",
+  "module": "index.mjs",
+  "typings": "index.d.ts",
+  "description": "This library was generated with [Nx](https://nx.dev).",
+  "dependencies": {
+    "@florid-kit/tokens": "^0.0.0-next.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/core-server": "^8.1.5",
+    "@storybook/web-components": "^8.1.5",
+    "@storybook/web-components-vite": "^8.1.5",
+    "@swc-node/register": "^1.6.8",
+    "storybook": "^8.1.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "directory": "dist"
+  }
+}

package/single-selection-controller.d.ts

@@ -0,0 +1,76 @@
+import { ReactiveController } from 'lit';
+
+/**
+ * An element that supports single-selection with `SingleSelectionController`.
+ */
+export interface SingleSelectionElement extends HTMLElement {
+    /**
+     * Whether or not the element is selected.
+     */
+    checked: boolean;
+}
+/**
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyToggle extends LitElement {
+ *   get checked() { return this[CHECKED]; }
+ *   set checked(checked: boolean) {
+ *     const oldValue = this.checked;
+ *     if (oldValue === checked) {
+ *       return;
+ *     }
+ *
+ *     this[CHECKED] = checked;
+ *     this.selectionController.handleCheckedChange();
+ *     this.requestUpdate('checked', oldValue);
+ *   }
+ *
+ *   [CHECKED] = false;
+ *
+ *   private selectionController = new SingleSelectionController(this);
+ *
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
+ *   }
+ * }
+ */
+export declare class SingleSelectionController implements ReactiveController {
+    private readonly host;
+    private focused;
+    private root;
+    constructor(host: SingleSelectionElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Should be called whenever the host's `checked` property changes
+     * synchronously.
+     */
+    handleCheckedChange(): void;
+    private readonly handleFocusIn;
+    private readonly handleFocusOut;
+    private uncheckSiblings;
+    /**
+     * Updates the `tabindex` of the host and its siblings.
+     */
+    private updateTabIndices;
+    /**
+     * Retrieves all siblings in the host element's root with the same `name`
+     * attribute.
+     */
+    private getNamedSiblings;
+    /**
+     * Handles arrow key events from the host. Using the arrow keys will
+     * select and check the next or previous sibling with the host's
+     * `name` attribute.
+     */
+    private readonly handleKeyDown;
+}