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

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

@@ -0,0 +1,109 @@
+import { isServer } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { CheckboxFormControl } from './checkbox-form-control.js';
+import { FormControl } from '../mixins/form-control.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 GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
+const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.value = [];
+    this.#handleChangeEvent = (event) => {
+      const { target } = event;
+      if (!this.isControl(target)) return;
+      if (target.checked) {
+        this.updateValue([...this.value, target.value], true);
+        return;
+      }
+      this.updateValue(
+        this.value.filter((value) => value !== target.value),
+        true
+      );
+    };
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChangeEvent);
+    }
+  }
+  get childGroups() {
+    return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
+  }
+  get controls() {
+    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
+  }
+  get groupControls() {
+    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  }
+  toFormValue() {
+    const formData = new FormData();
+    this.value.forEach((value, index) => {
+      formData.append(`${this.name}[${index}]`, value);
+    });
+    return formData;
+  }
+  isIndeterminate() {
+    return this.value.length > 0 && this.value.length < this.controls.length;
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+      for (const groupControl of this.groupControls) {
+        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
+          groupControl.indeterminate = this.isIndeterminate();
+          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+        }
+      }
+    }
+    if (props.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (props.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (props.has("readonly")) {
+      this.updateCheckboxControls((control) => {
+        control.readonly = this.readonly;
+      });
+    }
+  }
+  updateCheckboxControls(updateFn) {
+    this.controls.forEach(updateFn);
+  }
+  updateValue(value, dispatchEvent) {
+    this.value = value;
+    if (!dispatchEvent) return;
+    this.emit("change");
+  }
+  #handleChangeEvent;
+  #findCheckboxControls(predicate) {
+    return this.elements.filter((element) => this.isControl(element) && predicate(element));
+  }
+};
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], _CheckboxGroupFormControl.prototype, "elements");
+__decorateClass([
+  property({ type: Array })
+], _CheckboxGroupFormControl.prototype, "value");
+let CheckboxGroupFormControl = _CheckboxGroupFormControl;
+
+export { CheckboxGroupFormControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"option-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/option-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAY,MAAM,KAAK,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAG1C,8BAAsB,aAAc,SAAQ,kBAA4B;;IAC7D,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAQ;IAGnE,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,YAAY,IAAI,MAAM;;IAatB,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IASvC,iBAAiB,IAAI,IAAI;cAKf,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;CAkBrE"}

package/dist/src/lib/facade/option-control.js

@@ -0,0 +1,70 @@
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from '../mixins/can-be-disabled.js';
+import { CustomElement } from '../models/custom-element.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.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;
+};
+class OptionControl extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super();
+    this.role = null;
+    this.selected = false;
+    this.value = "";
+    this.#handleClick = () => {
+      this.toggle(void 0, true);
+    };
+    this.#handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter && !actions.space) return;
+      event.preventDefault();
+      if (event.type === "keydown") return;
+      this.toggle(void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.#handleKeyboardEvent);
+      this.addEventListener("keyup", this.#handleKeyboardEvent);
+    }
+  }
+  getTextLabel() {
+    return this.textContent?.trim() ?? "";
+  }
+  toggle(state, emitEvent = false) {
+    const currentState = this.selected;
+    const newState = state ?? !this.selected;
+    if (this.disabled || newState === this.selected) return;
+    this.selected = newState;
+    if (!emitEvent || !this.emit("change")) return;
+    this.selected = currentState;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "option";
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("selected")) {
+      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
+    }
+  }
+  #handleClick;
+  #handleKeyboardEvent;
+}
+__decorateClass([
+  property({ type: Boolean })
+], OptionControl.prototype, "selected");
+__decorateClass([
+  property()
+], OptionControl.prototype, "value");
+
+export { OptionControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/radio-group-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAIpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,8BAAsB,qBAAsB,SAAQ,0BAA0B;;IAC5E,OAAgB,iBAAiB;;;;;MAG/B;IAGF,OAAO,CAAC,QAAQ,CAAiB;;IAcjC,WAAW,IAAI,mBAAmB,EAAE;IAI3B,iBAAiB,IAAI,IAAI;IAKlC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,mBAAmB;cAIlD,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cA6B9C,sBAAsB,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;CASvG"}

package/dist/src/lib/facade/radio-group-form-control.js

@@ -0,0 +1,86 @@
+import { isServer } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { CheckboxFormControl } from './checkbox-form-control.js';
+import { RovingTabindexController } from '../external/roving-tabindex.js';
+import { FormControl } from '../mixins/form-control.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;
+};
+class RadioGroupFormControl extends FormControl(CustomElement) {
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  constructor() {
+    super();
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChange, { capture: true });
+      new RovingTabindexController(this, {
+        elements: () => this.getControls(),
+        elementEnterAction: (element) => element.click(),
+        direction: "both"
+      });
+    }
+  }
+  getControls() {
+    return this.elements.filter((element) => this.isControl(element));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "radiogroup";
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  update(changes) {
+    super.update?.(changes);
+    if (changes.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+    }
+    if (changes.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (changes.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (changes.has("readonly")) {
+      this.updateCheckboxControls((control) => {
+        control.readonly = this.readonly;
+      });
+    }
+    if (changes.has("required") || changes.has("value")) {
+      const [firstControl] = this.getControls();
+      if (!firstControl) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
+    }
+  }
+  async updateCheckboxControls(updateFn) {
+    await 0;
+    this.getControls().forEach(updateFn);
+  }
+  #handleChange = ({ target }) => {
+    if (!this.isControl(target) || this.value === target.value) return;
+    this.value = target.value;
+  };
+}
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], RadioGroupFormControl.prototype, "elements");
+
+export { RadioGroupFormControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/select-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEtD,8BAAsB,iBAAiB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,sBAE7F;;IAGC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAGrC,QAAQ,UAAS;IAGR,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAM;IAEvC,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;IAED,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;cAST,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYlD,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;CAcjD"}

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

@@ -0,0 +1,68 @@
+import { property } from 'lit/decorators.js';
+import { FormControl } from '../mixins/form-control.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;
+};
+class SelectFormControl extends FormControl(
+  CustomElement
+) {
+  constructor() {
+    super(...arguments);
+    this.#selectedOptions = /* @__PURE__ */ new Map();
+    this.multiple = false;
+    this.value = "";
+  }
+  #selectedOptions;
+  get selectedOptions() {
+    return this.#selectedOptions.values();
+  }
+  toggle(option) {
+    if (this.multiple) {
+      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
+      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
+    } else {
+      this.value = option.value;
+    }
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("value")) {
+      this.updateSelection();
+    }
+    if (changes.has("required") || changes.has("value")) {
+      const [selectedOption] = this.#selectedOptions.values();
+      if (!selectedOption?.selected) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
+    }
+  }
+  async updateSelection() {
+    if (this.disabled) return;
+    await 0;
+    for (const option of this.options ?? []) {
+      if (option.disabled) continue;
+      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      if (option.selected) {
+        this.#selectedOptions.set(option.value, option);
+      } else {
+        this.#selectedOptions.delete(option.value);
+      }
+    }
+    this.requestUpdate();
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SelectFormControl.prototype, "multiple");
+__decorateClass([
+  property()
+], SelectFormControl.prototype, "value");
+
+export { SelectFormControl };

package/dist/src/lib/mixins/can-be-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAqBjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-disabled.js

@@ -0,0 +1,40 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.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 CanBeDisabled = dedupeMixin((superClass) => {
+  class CanBeDisabledElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.#initialTabIndex = 0;
+      this.disabled = false;
+    }
+    #initialTabIndex;
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.#initialTabIndex = Math.max(0, this.tabIndex || 0);
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("disabled")) {
+        this.tabIndex = this.disabled ? -1 : this.#initialTabIndex;
+        this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeDisabledElement.prototype, "disabled");
+  return CanBeDisabledElement;
+});
+
+export { CanBeDisabled };

package/dist/src/lib/mixins/can-be-readonly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-readonly.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-readonly.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAajD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-readonly.js

@@ -0,0 +1,33 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.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 CanBeReadonly = dedupeMixin((superClass) => {
+  class CanBeReadonlyElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.readonly = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("readonly")) {
+        this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeReadonlyElement.prototype, "readonly");
+  return CanBeReadonlyElement;
+});
+
+export { CanBeReadonly };

package/dist/src/lib/mixins/can-be-required.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-required.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-required.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAajD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-required.js

@@ -0,0 +1,33 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.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 CanBeRequired = dedupeMixin((superClass) => {
+  class CanBeRequiredElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.required = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("required")) {
+        this.ariaRequired = toAriaBooleanAttribute(this.required);
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeRequiredElement.prototype, "required");
+  return CanBeRequiredElement;
+});
+
+export { CanBeRequired };

package/dist/src/lib/mixins/can-be-validated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-validated.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-validated.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAErC,IAAI,QAAQ,IAAI,aAAa,CAAC;IAC9B,IAAI,iBAAiB,IAAI,MAAM,CAAC;IAChC,aAAa,IAAI,OAAO,CAAC;IACzB,cAAc,IAAI,IAAI,CAAC;IACvB,WAAW,CAAC,KAAK,CAAC,EAAE,kBAAkB,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,cAAc,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAgCjD,WAAW,CAAC,cAAc,CAAC,GAAG,CACzE,CAAC"}

package/dist/src/lib/mixins/can-be-validated.js

@@ -0,0 +1,32 @@
+import { dedupeMixin } from './dedupe-mixin.js';
+
+const CanBeValidated = dedupeMixin((superClass) => {
+  class CanBeValidatedElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusable = true;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
+    setValidity(flags, target = this) {
+      const errorKey = Object.keys(flags ?? {}).find((key) => flags?.[key] === true);
+      this.internals.setValidity(flags, errorKey ?? "unknown error", target);
+    }
+  }
+  return CanBeValidatedElement;
+});
+
+export { CanBeValidated };

package/dist/src/lib/mixins/dedupe-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dedupe-mixin.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/dedupe-mixin.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,MAAM,WAAW,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAcrE,wBAAgB,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAS/E"}

package/dist/src/lib/mixins/dedupe-mixin.js

@@ -0,0 +1,23 @@
+const appliedClassMixins = /* @__PURE__ */ new WeakMap();
+function wasMixinPreviouslyApplied(mixin, superClass) {
+  let klass = superClass;
+  while (klass) {
+    if (appliedClassMixins.get(klass) === mixin) {
+      return true;
+    }
+    klass = Object.getPrototypeOf(klass);
+  }
+  return false;
+}
+function dedupeMixin(mixin) {
+  return (superClass) => {
+    if (wasMixinPreviouslyApplied(mixin, superClass)) {
+      return superClass;
+    }
+    const mixedClass = mixin(superClass);
+    appliedClassMixins.set(mixedClass, mixin);
+    return mixedClass;
+  };
+}
+
+export { dedupeMixin };

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/form-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,OAAO,EAAE,CAAC;AAE7E,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,CAAE,SAAQ,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc;IAC9H,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC/C,oBAAoB,CAAC,IAAI,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,EAAE,CAAC,SAAS,SAAS,uBAAuB,CAAC,KA2C/E,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CACxE,CAAC"}

package/dist/src/lib/mixins/form-control.js

@@ -0,0 +1,61 @@
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from './can-be-disabled.js';
+import { CanBeReadonly } from './can-be-readonly.js';
+import { CanBeRequired } from './can-be-required.js';
+import { CanBeValidated } from './can-be-validated.js';
+import { dedupeMixin } from './dedupe-mixin.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 FormControl = dedupeMixin((superClass) => {
+  class FormControlElement extends CanBeValidated(CanBeRequired(CanBeReadonly(CanBeDisabled(superClass)))) {
+    constructor(...args) {
+      super(...args);
+      this.name = "";
+      this.value = "";
+      this.internals = this.attachInternals();
+    }
+    static {
+      this.formAssociated = true;
+    }
+    static {
+      this.shadowRootOptions = {
+        ...CustomElement.shadowRootOptions,
+        delegatesFocus: true
+      };
+    }
+    get form() {
+      return this.internals.form;
+    }
+    toFormValue() {
+      return this.value;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      this.updateAriaAttributes?.();
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "name");
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "value");
+  return FormControlElement;
+});
+
+export { FormControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}

package/dist/src/lib/mixins/is-localized.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-localized.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/is-localized.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAA2B,MAAM,mBAAmB,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAKL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,YAAY,EAAE,OAAO,YAAY,CAAC;IAClC,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,kBAAkB,EAAE,OAAO,kBAAkB,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAwB5D,WAAW,CAAC,WAAW,CAAC,GAAG,CACxD,CAAC"}

package/dist/src/lib/mixins/is-localized.js

@@ -0,0 +1,41 @@
+import { SignalWatcher, computed } from '@lit-labs/signals';
+import { property } from 'lit/decorators.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { getLocale } from '../utils/localization.js';
+import { formatDate, formatNumber, formatList, formatRelativeTime } from '../utils/format.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 IsLocalized = dedupeMixin((superClass) => {
+  class IsLocalizedElement extends SignalWatcher(superClass) {
+    constructor() {
+      super(...arguments);
+      this.locale = computed(() => getLocale(this.lang));
+    }
+    formatDate(input, options) {
+      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatNumber(input, options) {
+      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatList(input, options) {
+      return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatRelativeTime(input, options) {
+      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+  }
+  __decorateClass([
+    property()
+  ], IsLocalizedElement.prototype, "lang");
+  return IsLocalizedElement;
+});
+
+export { IsLocalized };

package/dist/src/lib/mixins/is-translatable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-translatable.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/is-translatable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAY,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3C,gBAAgB,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACjD,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1C,eAAO,MAAM,cAAc,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAc5D,WAAW,CAAC,cAAc,CAAC,GAAG,CAC9D,CAAC"}