@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/src/lib/controllers/focus-trap.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.controller.d.ts","sourceRoot":"","sources":["../../../../src/lib/controllers/focus-trap.controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAmB,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAY,MAAM,KAAK,CAAC;AAG9E,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAOjD,qBAAa,mBAAoB,YAAW,kBAAkB;;gBAKhD,IAAI,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,0BAA0B;IAMjE,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAKzB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAOtC,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IAUpC,gBAAgB,IAAI,IAAI;CAazB"}

package/dist/src/lib/controllers/focus-trap.controller.js

@@ -0,0 +1,55 @@
+import { createFocusTrap } from 'focus-trap';
+import { isServer } from 'lit';
+import { createOptions } from '../utils/create-options.js';
+import { waitForAnimations } from '../utils/wait-for-animations.js';
+
+const FocusTrapControllerOptions = createOptions({
+  escapeDeactivates: false,
+  tabbableOptions: { getShadowRoot: true }
+});
+class FocusTrapController {
+  #host;
+  #options;
+  #focusTrap;
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = FocusTrapControllerOptions(options);
+    this.#host.addController(this);
+  }
+  async activate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.activate();
+  }
+  async deactivate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.deactivate();
+  }
+  async toggle(state) {
+    if (state ?? !this.#focusTrap?.active) {
+      return this.activate();
+    }
+    return this.deactivate();
+  }
+  async hostConnected() {
+    if (isServer) return;
+    await this.#host.updateComplete;
+    this.#focusTrap ??= createFocusTrap(this.#host, {
+      ...this.#options,
+      checkCanFocusTrap: this.#checkCanFocusTrap.bind(this),
+      checkCanReturnFocus: this.#checkCanReturnFocus.bind(this)
+    });
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  async #checkCanFocusTrap(containers) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanFocusTrap?.(containers);
+  }
+  async #checkCanReturnFocus(trigger) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanReturnFocus?.(trigger);
+  }
+}
+
+export { FocusTrapController };

package/dist/src/lib/controllers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/controllers/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/src/lib/directives/aria-boolean-attr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-boolean-attr.d.ts","sourceRoot":"","sources":["../../../../src/lib/directives/aria-boolean-attr.ts"],"names":[],"mappings":"AAAA,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,UAAO,GAAG,MAAM,GAAG,OAAO,CAI7F;AAED,wBAAgB,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAEvE"}

package/dist/src/lib/directives/aria-boolean-attr.js

@@ -0,0 +1,9 @@
+function toAriaBooleanAttribute(value, removeOnFalse = true) {
+  if (removeOnFalse && value === false) return null;
+  return String(value);
+}
+function fromAriaBooleanAttribute(value) {
+  return value === "true";
+}
+
+export { fromAriaBooleanAttribute, toAriaBooleanAttribute };

package/dist/src/lib/directives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/src/lib/directives/optional-attr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optional-attr.d.ts","sourceRoot":"","sources":["../../../../src/lib/directives/optional-attr.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,KAAG,WAAW,CAAC,CAAC,CAGvD,CAAC"}

package/dist/src/lib/directives/optional-attr.js

@@ -0,0 +1,8 @@
+import { nothing } from 'lit';
+
+const optionalAttr = (value) => {
+  if (value === void 0 || value === null || value === "") return nothing;
+  return value;
+};
+
+export { optionalAttr };

package/dist/src/lib/directives/optional-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optional-slot.d.ts","sourceRoot":"","sources":["../../../../src/lib/directives/optional-slot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAE/E,wBAAgB,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,GAAG,cAAc,GAAG,OAAO,OAAO,CASrG"}

package/dist/src/lib/directives/optional-slot.js

@@ -0,0 +1,14 @@
+import { html, nothing } from 'lit';
+
+function optionalSlot(host, slotName) {
+  if (host.querySelector(`[slot="${slotName}"]`)) {
+    return html`
+      <div class="${slotName}" part="${slotName}-container">
+        <slot name="${slotName}" @slotchange="${() => host.requestUpdate()}"></slot>
+      </div>
+    `;
+  }
+  return nothing;
+}
+
+export { optionalSlot };

package/dist/src/lib/directives/slot-fallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-fallback.d.ts","sourceRoot":"","sources":["../../../../src/lib/directives/slot-fallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAa,MAAM,kBAAkB,CAAC;AAE1E,cAAM,qBAAsB,SAAQ,SAAS;IAClC,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,WAAW,GAAG,IAAI;IAQxD,MAAM,IAAI,IAAI;CAGf;AAED,eAAO,MAAM,oBAAoB,qFAAmC,CAAC"}

package/dist/src/lib/directives/slot-fallback.js

@@ -0,0 +1,16 @@
+import { directive, Directive } from 'lit/directive.js';
+
+class SlotFallbackDirective extends Directive {
+  update({ options, element }) {
+    if (!options?.host || !(element instanceof HTMLSlotElement)) return;
+    const host = options.host;
+    const slottedElementSelector = element.name ? `[slot="${element.name}"]` : "*";
+    if (host.querySelectorAll(slottedElementSelector).length > 0 || host.textContent?.trim()) return;
+    host.textContent = "";
+  }
+  render() {
+  }
+}
+const emptySlotFallbackFix = directive(SlotFallbackDirective);
+
+export { emptySlotFallbackFix };

package/dist/src/lib/external/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/external/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/src/lib/external/roving-tabindex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-tabindex.d.ts","sourceRoot":"","sources":["../../../../src/lib/external/roving-tabindex.ts"],"names":[],"mappings":"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"}

package/dist/src/lib/external/roving-tabindex.js

@@ -0,0 +1,386 @@
+function ensureMethod(value, type, fallback) {
+  if (typeof value === type) {
+    return () => value;
+  } else if (typeof value === "function") {
+    return value;
+  }
+  return fallback;
+}
+class FocusGroupController {
+  constructor(host, { hostDelegatesFocus, direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope } = {
+    elements: () => []
+  }) {
+    this._currentIndex = -1;
+    this.prevIndex = -1;
+    this._direction = () => "both";
+    this.directionLength = 5;
+    this.hostDelegatesFocus = false;
+    this.elementEnterAction = (_el) => {
+      return;
+    };
+    this._focused = false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this._focusInIndex = (_elements) => 0;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.isFocusableElement = (_el) => true;
+    this._listenerScope = () => this.host;
+    // When elements are virtualized, the delta between the first element
+    // and the first rendered element.
+    this.offset = 0;
+    this.recentlyConnected = false;
+    this.handleFocusin = (event) => {
+      if (!this.isEventWithinListenerScope(event)) return;
+      const path = event.composedPath();
+      let targetIndex = -1;
+      path.find((el) => {
+        targetIndex = this.elements.indexOf(el);
+        return targetIndex !== -1;
+      });
+      this.prevIndex = this.currentIndex;
+      this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
+      if (this.isRelatedTargetOrContainAnElement(event)) {
+        this.hostContainsFocus();
+      }
+    };
+    /**
+     * handleClick - Finds the element that was clicked and sets the tabindex to 0
+     * @returns void
+     */
+    this.handleClick = () => {
+      const elements = this.elements;
+      if (!elements.length) return;
+      let focusElement = elements[this.currentIndex];
+      if (this.currentIndex < 0) {
+        return;
+      }
+      if (!focusElement || !this.isFocusableElement(focusElement)) {
+        this.setCurrentIndexCircularly(1);
+        focusElement = elements[this.currentIndex];
+      }
+      if (focusElement && this.isFocusableElement(focusElement)) {
+        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+        focusElement.setAttribute("tabindex", "0");
+      }
+    };
+    this.handleFocusout = (event) => {
+      if (this.isRelatedTargetOrContainAnElement(event)) {
+        this.hostNoLongerContainsFocus();
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
+        return;
+      }
+      let diff = 0;
+      this.prevIndex = this.currentIndex;
+      switch (event.key) {
+        case "ArrowRight":
+          diff += 1;
+          break;
+        case "ArrowDown":
+          diff += this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "ArrowLeft":
+          diff -= 1;
+          break;
+        case "ArrowUp":
+          diff -= this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "End":
+          this.currentIndex = 0;
+          diff -= 1;
+          break;
+        case "Home":
+          this.currentIndex = this.elements.length - 1;
+          diff += 1;
+          break;
+      }
+      event.preventDefault();
+      if (this.direction === "grid" && this.currentIndex + diff < 0) {
+        this.currentIndex = 0;
+      } else if (this.direction === "grid" && this.currentIndex + diff > this.elements.length - 1) {
+        this.currentIndex = this.elements.length - 1;
+      } else {
+        this.setCurrentIndexCircularly(diff);
+      }
+      this.elementEnterAction(this.elements[this.currentIndex]);
+      this.focus();
+    };
+    this.mutationObserver = new MutationObserver(() => {
+      this.handleItemMutation();
+    });
+    this.hostDelegatesFocus = hostDelegatesFocus || false;
+    this.host = host;
+    this.host.addController(this);
+    this._elements = elements;
+    this.isFocusableElement = isFocusableElement || this.isFocusableElement;
+    this._direction = ensureMethod(direction, "string", this._direction);
+    this.elementEnterAction = elementEnterAction || this.elementEnterAction;
+    this._focusInIndex = ensureMethod(focusInIndex, "number", this._focusInIndex);
+    this._listenerScope = ensureMethod(listenerScope, "object", this._listenerScope);
+  }
+  get currentIndex() {
+    if (this._currentIndex === -1) {
+      this._currentIndex = this.focusInIndex;
+    }
+    return this._currentIndex - this.offset;
+  }
+  set currentIndex(currentIndex) {
+    this._currentIndex = currentIndex + this.offset;
+  }
+  get direction() {
+    return this._direction();
+  }
+  get elements() {
+    if (!this.cachedElements) {
+      this.cachedElements = this._elements();
+    }
+    return this.cachedElements;
+  }
+  set focused(focused) {
+    if (focused === this.focused) return;
+    this._focused = focused;
+  }
+  get focused() {
+    return this._focused;
+  }
+  get focusInElement() {
+    return this.elements[this.focusInIndex];
+  }
+  get focusInIndex() {
+    return this._focusInIndex(this.elements);
+  }
+  isEventWithinListenerScope(event) {
+    if (this._listenerScope() === this.host) return true;
+    return event.composedPath().includes(this._listenerScope());
+  }
+  /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
+        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
+    */
+  handleItemMutation() {
+    if (this._currentIndex == -1 || this.elements.length <= this._elements().length) return;
+    const focusedElement = this.elements[this.currentIndex];
+    this.clearElementCache();
+    if (this.elements.includes(focusedElement)) return;
+    const moveToNextElement = this.currentIndex !== this.elements.length;
+    const diff = moveToNextElement ? 1 : -1;
+    if (moveToNextElement) {
+      this.setCurrentIndexCircularly(-1);
+    }
+    this.setCurrentIndexCircularly(diff);
+    this.focus();
+  }
+  update({ elements } = { elements: () => [] }) {
+    this.unmanage();
+    this._elements = elements;
+    this.clearElementCache();
+    this.manage();
+  }
+  /**
+   * resets the focusedItem to initial item
+   */
+  reset() {
+    const elements = this.elements;
+    if (!elements.length) return;
+    this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
+    let focusElement = elements[this.currentIndex];
+    if (this.currentIndex < 0) {
+      return;
+    }
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = elements[this.currentIndex];
+    }
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+      focusElement.setAttribute("tabindex", "0");
+    }
+  }
+  focusOnItem(item, options) {
+    if (item && this.isFocusableElement(item) && this.elements.indexOf(item)) {
+      const diff = this.elements.indexOf(item) - this.currentIndex;
+      this.setCurrentIndexCircularly(diff);
+      this.elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+    }
+    this.focus(options);
+  }
+  focus(options) {
+    const elements = this.elements;
+    if (!elements.length) return;
+    let focusElement = elements[this.currentIndex];
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = elements[this.currentIndex];
+    }
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      if (!this.hostDelegatesFocus || elements[this.prevIndex] !== focusElement) {
+        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+      }
+      focusElement.tabIndex = 0;
+      focusElement.focus(options);
+      if (this.hostDelegatesFocus && !this.focused) {
+        this.hostContainsFocus();
+      }
+    }
+  }
+  clearElementCache(offset = 0) {
+    this.mutationObserver.disconnect();
+    delete this.cachedElements;
+    this.offset = offset;
+    requestAnimationFrame(() => {
+      this.elements.forEach((element) => {
+        this.mutationObserver.observe(element, {
+          attributes: true
+        });
+      });
+    });
+  }
+  setCurrentIndexCircularly(diff) {
+    const { length } = this.elements;
+    let steps = length;
+    this.prevIndex = this.currentIndex;
+    let nextIndex = (length + this.currentIndex + diff) % length;
+    while (
+      // don't cycle the elements more than once
+      steps && this.elements[nextIndex] && // @ts-ignore
+      !this.isFocusableElement(this.elements[nextIndex])
+    ) {
+      nextIndex = (length + nextIndex + diff) % length;
+      steps -= 1;
+    }
+    this.currentIndex = nextIndex;
+  }
+  hostContainsFocus() {
+    this.host.addEventListener("focusout", this.handleFocusout);
+    this.host.addEventListener("keydown", this.handleKeydown);
+    this.focused = true;
+  }
+  hostNoLongerContainsFocus() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+    this.focused = false;
+  }
+  isRelatedTargetOrContainAnElement(event) {
+    const relatedTarget = event.relatedTarget;
+    const isRelatedTargetAnElement = this.elements.includes(relatedTarget);
+    const isRelatedTargetContainedWithinElements = this.elements.some((el) => el.contains(relatedTarget));
+    return !(isRelatedTargetAnElement || isRelatedTargetContainedWithinElements);
+  }
+  acceptsEventKey(key) {
+    if (key === "End" || key === "Home") {
+      return true;
+    }
+    switch (this.direction) {
+      case "horizontal":
+        return key === "ArrowLeft" || key === "ArrowRight";
+      case "vertical":
+        return key === "ArrowUp" || key === "ArrowDown";
+      case "both":
+      case "grid":
+        return key.startsWith("Arrow");
+    }
+  }
+  manage() {
+    this.addEventListeners();
+  }
+  unmanage() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+    this.host.addEventListener("click", this.handleClick);
+  }
+  removeEventListeners() {
+    this.host.removeEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+    this.host.removeEventListener("click", this.handleClick);
+  }
+  hostConnected() {
+    this.recentlyConnected = true;
+    this.addEventListeners();
+  }
+  hostDisconnected() {
+    this.mutationObserver.disconnect();
+    this.removeEventListeners();
+  }
+  hostUpdated() {
+    if (this.recentlyConnected) {
+      this.recentlyConnected = false;
+      this.elements.forEach((element) => {
+        this.mutationObserver.observe(element, {
+          attributes: true
+        });
+      });
+    }
+  }
+}
+class RovingTabindexController extends FocusGroupController {
+  constructor() {
+    super(...arguments);
+    this.managed = true;
+    this.manageIndexesAnimationFrame = 0;
+  }
+  set focused(focused) {
+    if (focused === this.focused) return;
+    super.focused = focused;
+    this.manageTabindexes();
+  }
+  get focused() {
+    return super.focused;
+  }
+  clearElementCache(offset = 0) {
+    cancelAnimationFrame(this.manageIndexesAnimationFrame);
+    super.clearElementCache(offset);
+    if (!this.managed) return;
+    this.manageIndexesAnimationFrame = requestAnimationFrame(() => this.manageTabindexes());
+  }
+  manageTabindexes() {
+    if (this.focused && !this.hostDelegatesFocus) {
+      this.updateTabindexes(() => ({ tabIndex: -1 }));
+    } else {
+      this.updateTabindexes((el) => {
+        return {
+          removeTabIndex: el.contains(this.focusInElement) && el !== this.focusInElement,
+          tabIndex: el === this.focusInElement ? 0 : -1
+        };
+      });
+    }
+  }
+  updateTabindexes(getTabIndex) {
+    this.elements.forEach((el) => {
+      const { tabIndex, removeTabIndex } = getTabIndex(el);
+      if (!removeTabIndex) {
+        if (this.focused) {
+          if (el !== this.elements[this.currentIndex]) {
+            el.tabIndex = tabIndex;
+          }
+        } else {
+          el.tabIndex = tabIndex;
+        }
+        return;
+      }
+      const updatable = el;
+      if (updatable.requestUpdate) updatable.requestUpdate();
+    });
+  }
+  manage() {
+    this.managed = true;
+    this.manageTabindexes();
+    super.manage();
+  }
+  unmanage() {
+    this.managed = false;
+    this.updateTabindexes(() => ({ tabIndex: 0 }));
+    super.unmanage();
+  }
+  hostUpdated() {
+    super.hostUpdated();
+    if (!this.host.hasUpdated) {
+      this.manageTabindexes();
+    }
+  }
+}
+
+export { FocusGroupController, RovingTabindexController };

package/dist/src/lib/facade/checkbox-form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/checkbox-form-control.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAK1C,8BAAsB,mBAAoB,SAAQ,wBAA0B;;IAC1E,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IACO,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAQ;IAG/G,OAAO,UAAS;;IAWP,WAAW,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAOvD,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IASvC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;CAmBtC"}

package/dist/src/lib/facade/checkbox-form-control.js

@@ -0,0 +1,77 @@
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { FormControl } from '../mixins/form-control.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { CustomElement } from '../models/custom-element.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
+class CheckboxFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.role = null;
+    this.checked = false;
+    this.#handleClick = ({ target }) => {
+      const { localName } = target;
+      if (LINK_SELECTORS.has(localName)) return;
+      this.toggle(void 0, true);
+    };
+    this.#handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter && !actions.space) return;
+      const { localName } = event.target;
+      event.preventDefault();
+      if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
+      this.toggle(void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.#handleKeyboardEvent);
+      this.addEventListener("keyup", this.#handleKeyboardEvent);
+    }
+  }
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: false
+    };
+  }
+  toFormValue() {
+    if (this.value) {
+      return this.checked ? this.value : null;
+    }
+    return this.checked ? "on" : null;
+  }
+  toggle(state, emitEvent = false) {
+    const currentState = this.checked;
+    const newState = state ?? !currentState;
+    if (this.disabled || this.readonly || newState === currentState) return;
+    this.checked = newState;
+    if (!emitEvent || !this.emit("change")) return;
+    this.checked = currentState;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "checkbox";
+  }
+  updateAriaAttributes() {
+    super.updateAriaAttributes?.();
+    this.ariaChecked = toAriaBooleanAttribute(this.checked, false);
+  }
+  #handleClick;
+  #handleKeyboardEvent;
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CheckboxFormControl.prototype, "checked");
+
+export { CheckboxFormControl };

package/dist/src/lib/facade/checkbox-group-form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/checkbox-group-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAI9D,8BAAsB,wBAAyB,SAAQ,6BAA0D;;IAE/G,OAAO,CAAC,QAAQ,CAAiB;IAEjC,SAAS,KAAK,WAAW,IAAI,wBAAwB,EAAE,CAEtD;IAED,IAAI,QAAQ,IAAI,mBAAmB,EAAE,CAEpC;IAED,IAAI,aAAa,IAAI,mBAAmB,EAAE,CAEzC;IAGQ,KAAK,EAAE,MAAM,EAAE,CAAM;;IASrB,WAAW,IAAI,QAAQ;IAQhC,SAAS,CAAC,eAAe,IAAI,OAAO;IAIpC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,mBAAmB;cAIlD,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B7D,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;IAIhG,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI;CAsBtE"}