@api-client/ui 0.0.3 → 0.0.5

package/dist/ui/icons/UiIcon.js

@@ -7,9 +7,10 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import * as Icons from './Icons.js';
 export default class UiIcon extends LitElement {
-    iconInternal;
-    hasIconInternal = false;
-    iconValue;
+    constructor() {
+        super(...arguments);
+        this.hasIconInternal = false;
+    }
     /**
      * An icon to be rendered from the ApiIcons library.
      * When incorrect icon is referenced nothing is rendered.

package/dist/ui/icons/UiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIcon.js","sourceRoot":"","sources":["../../../src/ui/icons/UiIcon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IACpC,YAAY,CAAuB;IAEnC,eAAe,GAAG,KAAK,CAAC;IAExB,SAAS,CAAgC;IAEjD;;;;OAIG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,IAAI,CAAC,KAA2B;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,4BAA4B;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,IAA0B;QAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAC;QACjF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;OAEG;IACM,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAChD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAA,eAAe,CAAC;SAC5B;QACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF;AA3CC;IADC,QAAQ,EAAE;kCAGV","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from './Icons.js';\nimport { IconType } from './Icons.js';\n\nexport default class UiIcon extends LitElement {\n  private iconInternal: IconType | undefined;\n\n  private hasIconInternal = false;\n\n  private iconValue: SVGTemplateResult | undefined;\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property()\n  get icon(): IconType | undefined {\n    return this.iconInternal;\n  }\n\n  set icon(value: IconType | undefined) {\n    const old = this.iconInternal;\n    if (old === value) {\n      return;\n    }\n    this.iconInternal = value;\n    this.updateIcon(value);\n    // don't request update here\n  }\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal;\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined;\n    this.hasIconInternal = !!icon;\n    this.iconValue = icon;\n    this.requestUpdate();\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this;\n    if (!hasIcon) {\n      return html`<slot></slot>`;\n    }\n    return html`${_iconValue}`;\n  }\n}\n"]}
+{"version":3,"file":"UiIcon.js","sourceRoot":"","sources":["../../../src/ui/icons/UiIcon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAA9C;;QAGU,oBAAe,GAAG,KAAK,CAAC;IAqDlC,CAAC;IAjDC;;;;OAIG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,IAAI,CAAC,KAA2B;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,4BAA4B;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,IAA0B;QAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAC;QACjF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;OAEG;IACM,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAChD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAA,eAAe,CAAC;SAC5B;QACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF;AA3CC;IADC,QAAQ,EAAE;kCAGV","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from './Icons.js';\nimport { IconType } from './Icons.js';\n\nexport default class UiIcon extends LitElement {\n  private iconInternal: IconType | undefined;\n\n  private hasIconInternal = false;\n\n  private iconValue: SVGTemplateResult | undefined;\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property()\n  get icon(): IconType | undefined {\n    return this.iconInternal;\n  }\n\n  set icon(value: IconType | undefined) {\n    const old = this.iconInternal;\n    if (old === value) {\n      return;\n    }\n    this.iconInternal = value;\n    this.updateIcon(value);\n    // don't request update here\n  }\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal;\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined;\n    this.hasIconInternal = !!icon;\n    this.iconValue = icon;\n    this.requestUpdate();\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this;\n    if (!hasIcon) {\n      return html`<slot></slot>`;\n    }\n    return html`${_iconValue}`;\n  }\n}\n"]}

package/dist/ui/input/CheckboxElement.js

@@ -9,6 +9,18 @@ import { check, checkIndeterminate } from '../icons/Icons.js';
 import { ripple } from "../effects/rippleDirective.js";
 import '../../define/ui/ui-ripple.js';
 export default class CheckboxElement extends CheckedElement {
+    constructor() {
+        super(...arguments);
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`;
+        };
+    }
     static get styles() {
         return elementStyles;
     }
@@ -22,12 +34,6 @@ export default class CheckboxElement extends CheckedElement {
         }
         return nothing;
     }
-    ripple;
-    showRipple = false;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     async handleFocus() {
         const _ripple = await this.getRipple();
         _ripple?.beginFocus();
@@ -65,10 +71,6 @@ export default class CheckboxElement extends CheckedElement {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     queryAsync('ui-ripple')

package/dist/ui/input/CheckboxElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResult, html, SVGTemplateResult, TemplateResult, nothing } from \"lit\";\nimport { queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport elementStyles from './Checkbox.styles.js';\nimport CheckedElement from \"./CheckedElement.js\";\nimport { check, checkIndeterminate } from '../icons/Icons.js';\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport UiRipple from \"../effects/ripple.js\";\n\nexport default class CheckboxElement extends CheckedElement {\n  static override get styles(): CSSResult | CSSResult[] {\n    return elementStyles;\n  }\n\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this;\n    if (indeterminate) {\n      return checkIndeterminate;\n    }\n    if (checked) {\n      return check;\n    }\n    return nothing;\n  }\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.beginFocus();\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.endFocus();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.beginPress();\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.endPress();\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"icon\">${this._icon}</div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" unbounded ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResult, html, SVGTemplateResult, TemplateResult, nothing } from \"lit\";\nimport { queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport elementStyles from './Checkbox.styles.js';\nimport CheckedElement from \"./CheckedElement.js\";\nimport { check, checkIndeterminate } from '../icons/Icons.js';\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport UiRipple from \"../effects/ripple.js\";\n\nexport default class CheckboxElement extends CheckedElement {\n  static override get styles(): CSSResult | CSSResult[] {\n    return elementStyles;\n  }\n\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this;\n    if (indeterminate) {\n      return checkIndeterminate;\n    }\n    if (checked) {\n      return check;\n    }\n    return nothing;\n  }\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.beginFocus();\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.endFocus();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.beginPress();\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.endPress();\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"icon\">${this._icon}</div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" unbounded ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/input/CheckedElement.js

@@ -13,7 +13,7 @@ export default class CheckedElement extends UiElement {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
@@ -31,11 +31,6 @@ export default class CheckedElement extends UiElement {
         this.requestUpdate('disabled', old);
         this._updateFormValue();
     }
-    /**
-     * The name of the form control, submitted as a pair with the control's value as part of the form data.
-     * @attribute
-     */
-    name;
     #_value;
     /**
      * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
@@ -116,18 +111,12 @@ export default class CheckedElement extends UiElement {
         }
         this._updateFormValue();
     }
-    /**
-     * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes
-     * it also exposes an attribute to style the element as invalid. This attribute changes
-     * when the element validation is performed.
-     * @attribute
-     */
-    invalid;
     get _validationError() {
         return 'Please check this box if you want to proceed.';
     }
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
         // The default value for the `<input type="checkbox"/>
         this.value = 'on';
         this.#_checked = false;

package/dist/ui/input/CheckedElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckedElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * A base class for UI elements that can be checked (as in a form: checkbox, switch, radio).\n * \n * @fires change - when the checked element changes it's checked state\n * @fires input - when the checked element changes it's checked state\n */\nexport default class CheckedElement extends UiElement {\n  #_userInteracted: boolean;\n\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  get type(): string { return this.localName; }\n\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n    this._updateFormValue();\n  }\n\n  /**\n   * The name of the form control, submitted as a pair with the control's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string; \n\n  /**\n   * When a form is submitted, only checkboxes which are currently checked are submitted to the server, \n   * and the reported value is the `value` of the value attribute. \n   * If the `value` is not otherwise specified, it is the string `on` by default. \n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this._updateFormValue();\n  }\n\n  #_checked: boolean;\n\n  /**\n   * A Boolean attribute indicating whether this checkbox is checked.\n   * \n   * A checkbox's value is only included in the submitted data \n   * if the checkbox is currently `checked`. If it is, then the value \n   * of the checkbox's `value` attribute is reported as the input's value.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get checked(): boolean {\n    return this.#_checked;\n  }\n\n  set checked(value: boolean) {\n    const old = this.#_checked;\n    if (old === value) {\n      return;\n    }\n    this.#_checked = value;\n    this._setChecked(value);\n    this.requestUpdate('checked', old);\n  }\n\n  #_indeterminate: boolean;\n\n  /**\n   * In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. \n   * This is a state in which it's impossible to say whether the item is toggled on or off.\n   * \n   * If you submit a form with an indeterminate checkbox, the same thing happens as \n   * if the checkbox were unchecked — no data is submitted to represent the checkbox.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get indeterminate(): boolean {\n    return this.#_indeterminate;\n  }\n\n  set indeterminate(value: boolean) {\n    if (this.#_indeterminate === value) {\n      return;\n    }\n    this.#_indeterminate = value;\n    this._updateFormValue();\n  }\n\n  #_required?: boolean;\n\n  /**\n   * Set to true to mark the checked element as required. \n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  get required(): boolean | undefined {\n    return this.#_required;\n  }\n\n  set required(value: boolean | undefined) {\n    const old = this.#_required;\n    if (old === value) {\n      return;\n    }\n    this.#_required = value;\n    this.requestUpdate('required', 'old');\n    if (value) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n    this._updateFormValue();\n  }\n\n  /**\n   * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes\n   * it also exposes an attribute to style the element as invalid. This attribute changes \n   * when the element validation is performed.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean;\n\n  protected get _validationError(): string {\n    return 'Please check this box if you want to proceed.';\n  }\n\n  constructor() {\n    super();\n    // The default value for the `<input type=\"checkbox\"/>\n    this.value = 'on';\n    this.#_checked = false;\n    this.#_indeterminate = false;\n    this.#_userInteracted = false;\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('invalid', this._invalidHandler.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n  \n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'checkbox');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n    this._setChecked(this.checked);\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form has been reset\n   */\n  formResetCallback(): void {\n    this.checked = false;\n    this._postCheckedChange();\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form state has been restored\n   *\n   * @param formState Restored value\n   */\n  formStateRestoreCallback(formState?: string): void {\n    if (this.value === formState) {\n      this.checked = true;\n      this._postCheckedChange();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    this.toggle();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.toggle();\n    }\n  }\n\n  protected handleFocus(): void { \n    // \n  }\n\n  protected handleBlur(): void { \n    // \n  }\n\n  protected _setChecked(value = false): void {\n    const { indeterminate } = this;\n    const attrValue = indeterminate ? 'mixed' : String(value);\n    this.setAttribute('aria-checked', attrValue);\n    this._updateFormValue();\n  }\n\n  protected _updateFormValue(): void {\n    const { value = null, checked, indeterminate, disabled, required } = this;\n    if (!checked || indeterminate || disabled) {\n      this.#_internals.setFormValue(null);\n    } else {\n      this.#_internals.setFormValue(value);\n    }\n\n    if (required && !checked) {\n      this.#_internals.setValidity({\n        valueMissing: true,\n      }, this._validationError);\n    } else if (this.#_internals.validity.valueMissing) {\n      this.#_internals.setValidity({});\n    }\n  }\n\n  protected _notifyChange(): void {\n    // The <input type=\"checkbox\"/> dispatches both events.\n    this.dispatchEvent(new Event('input'));\n    this.dispatchEvent(new Event('change'));\n  }\n\n  protected _invalidHandler(): void {\n    if (!this.#_userInteracted) {\n      return;\n    }\n    this.invalid = true;\n  }\n\n  toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.#_userInteracted = true;\n    this.invalid = false;\n    this.checked = !this.checked;\n    this._updateFormValue();\n    this._postCheckedChange();\n  }\n\n  protected _postCheckedChange(): void {\n    this._notifyChange();\n    this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns true if the element's value has no validity problems; false otherwise. \n   * Fires an invalid event at the element in the latter case.\n   */\n  checkValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if internals's target element has no validity problems; otherwise, returns false, \n   * fires an invalid event at the element, and (if the event isn't canceled) reports \n   * the problem to the user.\n   */\n  reportValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.reportValidity();\n  }\n}\n"]}
+{"version":3,"file":"CheckedElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IACnD,gBAAgB,CAAU;IAE1B,MAAM,KAAK,cAAc;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAA0B;IAErC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;IACnD,CAAC;IAED,IAAI,IAAI,KAAa,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C,IAAI,QAAQ;QACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC7B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAQD,OAAO,CAAU;IAEjB;;;;;OAKG;IAEH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,KAAK,CAAC,KAAyB;QACjC,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,SAAS,CAAU;IAEnB;;;;;;;OAOG;IAEH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,OAAO,CAAC,KAAc;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IAED,eAAe,CAAU;IAEzB;;;;;;;OAOG;IAEH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE;YAClC,OAAO;SACR;QACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU,CAAW;IAErB;;;OAGG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,IAAI,QAAQ,CAAC,KAA0B;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QACtC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACvC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAUD,IAAc,gBAAgB;QAC5B,OAAO,+CAA+C,CAAC;IACzD,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA1IV,gBAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QA2InC,sDAAsD;QACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,IAAI,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;SACvC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAkB;QACzC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;IACH,CAAC;IAEQ,WAAW,CAAC,CAAa;QAChC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,QAAQ,CAAC,MAAsB;QACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACvB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACrC,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;IACH,CAAC;IAES,WAAW;QACnB,GAAG;IACL,CAAC;IAES,UAAU;QAClB,GAAG;IACL,CAAC;IAES,WAAW,CAAC,KAAK,GAAG,KAAK;QACjC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAES,gBAAgB;QACxB,MAAM,EAAE,KAAK,GAAG,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1E,IAAI,CAAC,OAAO,IAAI,aAAa,IAAI,QAAQ,EAAE;YACzC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACrC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SACtC;QAED,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;YACxB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;gBAC3B,YAAY,EAAE,IAAI;aACnB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC3B;aAAM,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,YAAY,EAAE;YACjD,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SAClC;IACH,CAAC;IAES,aAAa;QACrB,uDAAuD;QACvD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAES,eAAe;QACvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;IAC1C,CAAC;IAED;;;;OAIG;IACH,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;IAC3C,CAAC;CACF;AA7QC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAM1C;AAM2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAW1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAG1B;AAqBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAG1C;AAuBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAG1C;AAiBD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAG1C;AAuB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAmB","sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * A base class for UI elements that can be checked (as in a form: checkbox, switch, radio).\n * \n * @fires change - when the checked element changes it's checked state\n * @fires input - when the checked element changes it's checked state\n */\nexport default class CheckedElement extends UiElement {\n  #_userInteracted: boolean;\n\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  get type(): string { return this.localName; }\n\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n    this._updateFormValue();\n  }\n\n  /**\n   * The name of the form control, submitted as a pair with the control's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string; \n\n  /**\n   * When a form is submitted, only checkboxes which are currently checked are submitted to the server, \n   * and the reported value is the `value` of the value attribute. \n   * If the `value` is not otherwise specified, it is the string `on` by default. \n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this._updateFormValue();\n  }\n\n  #_checked: boolean;\n\n  /**\n   * A Boolean attribute indicating whether this checkbox is checked.\n   * \n   * A checkbox's value is only included in the submitted data \n   * if the checkbox is currently `checked`. If it is, then the value \n   * of the checkbox's `value` attribute is reported as the input's value.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get checked(): boolean {\n    return this.#_checked;\n  }\n\n  set checked(value: boolean) {\n    const old = this.#_checked;\n    if (old === value) {\n      return;\n    }\n    this.#_checked = value;\n    this._setChecked(value);\n    this.requestUpdate('checked', old);\n  }\n\n  #_indeterminate: boolean;\n\n  /**\n   * In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. \n   * This is a state in which it's impossible to say whether the item is toggled on or off.\n   * \n   * If you submit a form with an indeterminate checkbox, the same thing happens as \n   * if the checkbox were unchecked — no data is submitted to represent the checkbox.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get indeterminate(): boolean {\n    return this.#_indeterminate;\n  }\n\n  set indeterminate(value: boolean) {\n    if (this.#_indeterminate === value) {\n      return;\n    }\n    this.#_indeterminate = value;\n    this._updateFormValue();\n  }\n\n  #_required?: boolean;\n\n  /**\n   * Set to true to mark the checked element as required. \n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  get required(): boolean | undefined {\n    return this.#_required;\n  }\n\n  set required(value: boolean | undefined) {\n    const old = this.#_required;\n    if (old === value) {\n      return;\n    }\n    this.#_required = value;\n    this.requestUpdate('required', 'old');\n    if (value) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n    this._updateFormValue();\n  }\n\n  /**\n   * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes\n   * it also exposes an attribute to style the element as invalid. This attribute changes \n   * when the element validation is performed.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean;\n\n  protected get _validationError(): string {\n    return 'Please check this box if you want to proceed.';\n  }\n\n  constructor() {\n    super();\n    // The default value for the `<input type=\"checkbox\"/>\n    this.value = 'on';\n    this.#_checked = false;\n    this.#_indeterminate = false;\n    this.#_userInteracted = false;\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('invalid', this._invalidHandler.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n  \n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'checkbox');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n    this._setChecked(this.checked);\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form has been reset\n   */\n  formResetCallback(): void {\n    this.checked = false;\n    this._postCheckedChange();\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form state has been restored\n   *\n   * @param formState Restored value\n   */\n  formStateRestoreCallback(formState?: string): void {\n    if (this.value === formState) {\n      this.checked = true;\n      this._postCheckedChange();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    this.toggle();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.toggle();\n    }\n  }\n\n  protected handleFocus(): void { \n    // \n  }\n\n  protected handleBlur(): void { \n    // \n  }\n\n  protected _setChecked(value = false): void {\n    const { indeterminate } = this;\n    const attrValue = indeterminate ? 'mixed' : String(value);\n    this.setAttribute('aria-checked', attrValue);\n    this._updateFormValue();\n  }\n\n  protected _updateFormValue(): void {\n    const { value = null, checked, indeterminate, disabled, required } = this;\n    if (!checked || indeterminate || disabled) {\n      this.#_internals.setFormValue(null);\n    } else {\n      this.#_internals.setFormValue(value);\n    }\n\n    if (required && !checked) {\n      this.#_internals.setValidity({\n        valueMissing: true,\n      }, this._validationError);\n    } else if (this.#_internals.validity.valueMissing) {\n      this.#_internals.setValidity({});\n    }\n  }\n\n  protected _notifyChange(): void {\n    // The <input type=\"checkbox\"/> dispatches both events.\n    this.dispatchEvent(new Event('input'));\n    this.dispatchEvent(new Event('change'));\n  }\n\n  protected _invalidHandler(): void {\n    if (!this.#_userInteracted) {\n      return;\n    }\n    this.invalid = true;\n  }\n\n  toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.#_userInteracted = true;\n    this.invalid = false;\n    this.checked = !this.checked;\n    this._updateFormValue();\n    this._postCheckedChange();\n  }\n\n  protected _postCheckedChange(): void {\n    this._notifyChange();\n    this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns true if the element's value has no validity problems; false otherwise. \n   * Fires an invalid event at the element in the latter case.\n   */\n  checkValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if internals's target element has no validity problems; otherwise, returns false, \n   * fires an invalid event at the element, and (if the event isn't canceled) reports \n   * the problem to the user.\n   */\n  reportValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.reportValidity();\n  }\n}\n"]}

package/dist/ui/input/Input.js

@@ -28,14 +28,10 @@ export default class Input extends UiElement {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
-    /**
-     * @attribute
-     */
-    type;
     /**
      * Disables the input.
      * @attribute
@@ -58,18 +54,6 @@ export default class Input extends UiElement {
             this.blur();
         }
     }
-    /**
-     * The name of the form control, submitted as a pair with the control's value as part of the form data.
-     * @attribute
-     */
-    name;
-    /**
-     * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
-     * and the reported value is the `value` of the value attribute.
-     * If the `value` is not otherwise specified, it is the string `on` by default.
-     * @attribute
-     */
-    value = '';
     #_required;
     /**
      * Set to true to mark the input element as required.
@@ -87,167 +71,6 @@ export default class Input extends UiElement {
         this.requestUpdate('required', 'old');
         this._updateFormValue();
     }
-    /**
-     * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes
-     * it also exposes an attribute to style the element as invalid. This attribute changes
-     * when the element validation is performed.
-     *
-     * Calling `reportValidity()` will automatically update `invalid`.
-     * @attribute
-     */
-    invalid;
-    /**
-     * The error message that replaces supporting text when `error` is true. If
-     * `errorText` is an empty string, then the supporting text will continue to
-     * show.
-     *
-     * Calling `reportValidity()` will automatically update `errorText` to the
-     * native `validationMessage`.
-     * @attribute
-     */
-    invalidText = '';
-    /**
-     * The label to be rendered with the input.
-     * @attribute
-     */
-    label;
-    /**
-     * Whether or not the text field has a leading icon. Used for SSR.
-     * @attribute
-     */
-    hasPrefix = false;
-    /**
-     * Whether or not the text field has a trailing icon. Used for SSR.
-     * @attribute
-     */
-    hasSuffix = false;
-    /**
-     * Conveys additional information below the text field, such as how it should
-     * be used.
-     * @attribute
-     */
-    supportingText = '';
-    /**
-     * Override the input text CSS `direction`. Useful for RTL languages that use
-     * LTR notation for fractions.
-     * @attribute
-     */
-    textDirection = '';
-    /**
-     * When set the label of the input disappears after input rather than float over the input.
-     * @attribute
-     */
-    noFloating;
-    /**
-     * Defines the greatest value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-     * @attribute
-     */
-    max = '';
-    /**
-     * The maximum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-     * @attribute
-     */
-    maxLength = -1;
-    /**
-     * Defines the most negative value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-     * @attribute
-     */
-    min = '';
-    /**
-     * The minimum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-     * @attribute
-     */
-    minLength = -1;
-    /**
-     * A regular expression that the text field's value must match to pass
-     * constraint validation.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-     * @attribute
-     */
-    pattern = '';
-    /**
-     * @attribute
-     */
-    placeholder = '';
-    /**
-     * Indicates whether or not a user should be able to edit the text field's
-     * value.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-     *
-     * @attribute
-     */
-    readOnly = false;
-    /**
-     * Bind the `<input>`'s `autocomplete` property.
-     * @default off
-     * @attribute
-     */
-    autocomplete = 'off';
-    /**
-     * Binds this to the `<input>`'s `inputMode` property.
-     * @attribute
-     */
-    inputMode = '';
-    /**
-     * Binds this to the `<input>`'s `autocapitalize` property.
-     *
-     * Possible values are:
-     *
-     * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
-     * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
-     *  all other letters default to lowercase
-     * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
-     * - `characters`: All letters should default to uppercase
-     *
-     * @default off
-     * @attr
-     */
-    autocapitalize = 'off';
-    /**
-     * Binds this to the `<input>`'s `autocorrect` property.
-     * @default off
-     * @attribute
-     */
-    autocorrect = 'off';
-    /**
-     * Binds this to the `<input>`'s `results` property,
-     * used with type=search.
-     *
-     * The maximum number of items that should be displayed in the
-     * drop-down list of previous search queries. Safari only.
-     * @attribute
-     */
-    results;
-    /**
-     * Binds this to the `<input>`'s `accept` property,
-     * used with type=file.
-     * @attribute
-     */
-    accept;
-    /**
-     * Binds this to the`<input>`'s `multiple` property,
-     * used with type=file.
-     * @attribute
-     */
-    multiple;
-    /**
-     * Binds this to the `<input>`'s `size` property.
-     * @attribute
-     */
-    size;
-    pendingSetters = new Map();
     setNativeValue(key, value) {
         const { input } = this;
         if (input) {
@@ -292,14 +115,6 @@ export default class Input extends UiElement {
     set selectionStart(value) {
         this.setNativeValue('selectionStart', value);
     }
-    /**
-     * Returns or sets the element's step attribute, which works with min and max
-     * to limit the increments at which a numeric or date-time value can be set.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-     * @attribute
-     */
-    step = '';
     /**
      * Returns the native validation error message that would be displayed upon
      * calling `reportValidity()`.
@@ -345,63 +160,183 @@ export default class Input extends UiElement {
     get willValidate() {
         return this.getNativeValue('willValidate') ?? false;
     }
-    /**
-     * Returns true when the text field has been interacted with. Native
-     * validation errors only display in response to user interactions.
-     */
-    dirty = false;
-    focused = false;
-    input;
-    prefixes;
-    suffixes;
-    /**
-     * The validation message displayed from a native error via
-     * `reportValidity()`.
-     */
-    nativeErrorText = '';
-    /**
-     * Whether or not a native error has been reported via `reportValidity()`.
-     */
-    nativeError = false;
-    counterId = 'counter';
-    supportingTextId = 'support';
-    labelId = 'support';
-    ariaAutoComplete = null;
-    ariaControls = null;
-    ariaActiveDescendant = null;
-    ariaExpanded = null;
-    /**
-     * The `aria-label` of the text field's input.
-     */
-    ariaLabel;
-    /**
-     * The `aria-labelledby` of the text field's input.
-     *
-     * Note: currently only usable in SSR light DOM.
-     */
-    ariaLabelledBy;
-    dataRole = null;
-    /**
-     * When set to true, the error text's `role="alert"` will be removed, then
-     * re-added after an animation frame. This will re-announce an error message
-     * to screen readers.
-     */
-    refreshErrorAlert = false;
     /**
      * When set is shows password in the `password` input.
      * This is private so the password can be viewed only through user interaction.
      */
-    #showPassword = false;
-    removingTabindex = false;
+    #showPassword;
     get files() {
         return this.getNativeValue('files');
     }
-    /**
-     * When set it adds a `<datalist>` element to the input.
-     */
-    list;
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
+        /**
+         * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
+         * and the reported value is the `value` of the value attribute.
+         * If the `value` is not otherwise specified, it is the string `on` by default.
+         * @attribute
+         */
+        this.value = '';
+        /**
+         * The error message that replaces supporting text when `error` is true. If
+         * `errorText` is an empty string, then the supporting text will continue to
+         * show.
+         *
+         * Calling `reportValidity()` will automatically update `errorText` to the
+         * native `validationMessage`.
+         * @attribute
+         */
+        this.invalidText = '';
+        /**
+         * Whether or not the text field has a leading icon. Used for SSR.
+         * @attribute
+         */
+        this.hasPrefix = false;
+        /**
+         * Whether or not the text field has a trailing icon. Used for SSR.
+         * @attribute
+         */
+        this.hasSuffix = false;
+        /**
+         * Conveys additional information below the text field, such as how it should
+         * be used.
+         * @attribute
+         */
+        this.supportingText = '';
+        /**
+         * Override the input text CSS `direction`. Useful for RTL languages that use
+         * LTR notation for fractions.
+         * @attribute
+         */
+        this.textDirection = '';
+        /**
+         * Defines the greatest value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+         * @attribute
+         */
+        this.max = '';
+        /**
+         * The maximum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+         * @attribute
+         */
+        this.maxLength = -1;
+        /**
+         * Defines the most negative value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+         * @attribute
+         */
+        this.min = '';
+        /**
+         * The minimum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+         * @attribute
+         */
+        this.minLength = -1;
+        /**
+         * A regular expression that the text field's value must match to pass
+         * constraint validation.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+         * @attribute
+         */
+        this.pattern = '';
+        /**
+         * @attribute
+         */
+        this.placeholder = '';
+        /**
+         * Indicates whether or not a user should be able to edit the text field's
+         * value.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+         *
+         * @attribute
+         */
+        this.readOnly = false;
+        /**
+         * Bind the `<input>`'s `autocomplete` property.
+         * @default off
+         * @attribute
+         */
+        this.autocomplete = 'off';
+        /**
+         * Binds this to the `<input>`'s `inputMode` property.
+         * @attribute
+         */
+        this.inputMode = '';
+        /**
+         * Binds this to the `<input>`'s `autocapitalize` property.
+         *
+         * Possible values are:
+         *
+         * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
+         * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
+         *  all other letters default to lowercase
+         * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
+         * - `characters`: All letters should default to uppercase
+         *
+         * @default off
+         * @attr
+         */
+        this.autocapitalize = 'off';
+        /**
+         * Binds this to the `<input>`'s `autocorrect` property.
+         * @default off
+         * @attribute
+         */
+        this.autocorrect = 'off';
+        this.pendingSetters = new Map();
+        /**
+         * Returns or sets the element's step attribute, which works with min and max
+         * to limit the increments at which a numeric or date-time value can be set.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+         * @attribute
+         */
+        this.step = '';
+        /**
+         * Returns true when the text field has been interacted with. Native
+         * validation errors only display in response to user interactions.
+         */
+        this.dirty = false;
+        this.focused = false;
+        /**
+         * The validation message displayed from a native error via
+         * `reportValidity()`.
+         */
+        this.nativeErrorText = '';
+        /**
+         * Whether or not a native error has been reported via `reportValidity()`.
+         */
+        this.nativeError = false;
+        this.counterId = 'counter';
+        this.supportingTextId = 'support';
+        this.labelId = 'support';
+        this.ariaAutoComplete = null;
+        this.ariaControls = null;
+        this.ariaActiveDescendant = null;
+        this.ariaExpanded = null;
+        this.dataRole = null;
+        /**
+         * When set to true, the error text's `role="alert"` will be removed, then
+         * re-added after an animation frame. This will re-announce an error message
+         * to screen readers.
+         */
+        this.refreshErrorAlert = false;
+        /**
+         * When set is shows password in the `password` input.
+         * This is private so the password can be viewed only through user interaction.
+         */
+        this.#showPassword = false;
+        this.removingTabindex = false;
         this.type = 'text';
         this.#_userInteracted = false;
         this.actionController.cancelKeyboardEvents = false;