@felleslosninger/minid-elements 0.0.99 → 0.0.101

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControllerMixin(styled(LitElement)) {\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @query('.fds-checkbox__description')\n  checkboxDescriptionElement!: HTMLDivElement;\n\n  @queryAssignedNodes({ slot: 'description', flatten: true })\n  descriptionNodes?: NodeListOf<HTMLElement>;\n\n  #handleChange(event: Event) {\n    this.checked = (event.target as HTMLInputElement).checked;\n    if (this.checked) {\n      this.setFormValue('on', 'checked');\n    } else {\n      this.setFormValue(null);\n    }\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  #handleClick(event: Event) {\n    if (this.readonly) {\n      event.preventDefault();\n    }\n  }\n\n  #updateDescriptionHidden() {\n    this.checkboxDescriptionElement.style.display = !this.descriptionNodes\n      ?.length\n      ? 'none'\n      : 'block';\n  }\n\n  protected firstUpdated() {\n    this.#updateDescriptionHidden();\n  }\n\n  override render() {\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n\n    return html`\n      <div\n        class=\"${classMap({\n          'fds-checkbox': true,\n          'fds-paragraph': true,\n          'fds-checkbox--readonly': this.readonly,\n          'fds-paragraph--sm': sm,\n          'fds-checkbox--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-checkbox--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-checkbox--lg': lg,\n        })}\"\n      >\n        <input\n          id=\"checkbox\"\n          class=\"fds-checkbox__input\"\n          type=\"checkbox\"\n          @change=${this.#handleChange}\n          @click=${this.#handleClick}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n        />\n        <label\n          for=\"checkbox\"\n          class=${classMap({\n            'fds-label': true,\n            'fds-checkbox__label': true,\n            'fds-label--regular-weight': true,\n            'fds-label--sm': sm,\n            'fds-label--md': md,\n            'fds-label--lg': lg,\n          })}\n        >\n          <slot></slot>\n        </label>\n        <div\n          class=\"${classMap({\n            'fds-paragraph': true,\n            'fds-checkbox__description': true,\n            'fds-paragraph--sm': sm,\n            'fds-paragraph--md': md,\n            'fds-paragraph--lg': lg,\n          })}\"\n        >\n          <slot\n            name=\"description\"\n            @slotchange=${this.#updateDescriptionHidden}\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from 'src/mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Gets the validity state object */\n\n  /**\n   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /**\n   *  Checks for validity and shows the browser's validation message if the control is invalid.\n   */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    console.log('invalid: ', this.invalid);\n\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            .required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code-input.component.d.ts

@@ -7,9 +7,9 @@ declare global {
 }
 declare const MinidCodeInput_base: typeof LitElement & import('../types/mixin-constructor').Constructor<import('../mixins/form-controller.mixin').ConstraintsValidationMixinInterface>;
 export declare class MinidCodeInput extends MinidCodeInput_base {
-    caretColor: string;
-    caretHighlightColor: string;
-    inputId: string;
+    private readonly caretColor;
+    private readonly caretHighlightColor;
+    private readonly inputId;
     inputRef: Ref<HTMLInputElement>;
     value: string;
     label: string;
@@ -23,31 +23,32 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     /**
      * Display custom error message, and force invalid state
      */
-    _forcedErrorMessage: string;
+    invalidmessage: string;
     /**
      * The length of the code input
      */
     length: number;
-    fontSize: string;
+    fontsize: string;
     renderError: boolean;
-    _localErrorNode: Node | null;
+    localErrorNode: Node | null;
     constructor();
     connectedCallback(): void;
     _whenSettled(): Promise<void>;
     disconnectedCallback(): void;
-    calcInputStyle(): void;
-    autoFillEventHandler(e: AnimationEvent): void;
+    private calcInputStyle;
+    private autoFillEventHandler;
     get selectionEnd(): number | null | undefined;
+    private handleFocusOut;
+    private handleFocusIn;
+    private handleClick;
+    private handleKeydown;
+    private handleChange;
+    private handleSlotchange;
+    private findErrorMessageNode;
     firstUpdated(_changedProperties: PropertyValues): void;
-    focus(options?: FocusOptions): void;
-    onFocusOut(): void;
-    onFocusIn(): void;
     updated(_changedProperties: PropertyValues): void;
+    focus(options?: FocusOptions): void;
     setCustomValidity(error: string): void;
-    onClick(): void;
-    private handleKeydown;
-    handleSlotchange(e: Event): void;
-    _findErrorMessageNode(nodes: Node[]): Node | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

package/dist/components/code-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAkB,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAwDD,qBACa,cAAe,SAAQ,mBAEnC;IACC,UAAU,SAAyC;IACnD,mBAAmB,SAAwC;IAC3D,OAAO,SAAsC;IAEtC,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAU;IAGlB,WAAW,UAAS;IAGpB,eAAe,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa3B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,cAAc;IAkBd,oBAAoB,CAAC,CAAC,EAAE,cAAc;IAKtC,IAAI,YAAY,8BAEf;IAED,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,UAAU;IASV,SAAS;IAQT,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAI/B,OAAO;IAaP,OAAO,CAAC,aAAa;IAkBrB,gBAAgB,CAAC,CAAC,EAAE,KAAK;IAazB,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI;IAcxC,MAAM;CAoDhB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAkB,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,uBAAuB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAoDD,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyC;IACpE,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAwC;IAC5E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAEvD,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAc;IAGtB,WAAW,UAAS;IAGpB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa1B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,oBAAoB;IAK5B,IAAI,YAAY,8BAEf;IAED,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,oBAAoB;IAc5B,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAItB,MAAM;CA6ChB"}

package/dist/components/code-input.js

@@ -6,6 +6,7 @@ import { live } from "lit/directives/live.js";
 import { webOtpApiInit, webOtpApiClose } from "../utilities/web-otp-api.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { ConstraintsValidationMixin } from "../mixins/form-controller.mixin.js";
+import "./icon/icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,9 +20,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 const styles = [
   css`
     :host {
+      display: flex;
+      flex-direction: column;
       container: otc / inline-size;
       text-align: left;
-      width: 30rem;
       --otc-background: white;
       --otc-error-background: white;
       --otc-length: 5;
@@ -39,6 +41,7 @@ const styles = [
       letter-spacing: 2ch;
       padding-block: 0.25ch;
       padding-inline-start: calc(0.5ch * 1.5);
+      flex-grow: 1;
 
       &:focus-visible:focus {
         outline-style: none;
@@ -59,12 +62,6 @@ const styles = [
     input.error {
       background: var(--otc-error-background);
     }
-
-    #error-box {
-      color: rgb(179, 38, 30);
-      font-size: 18px;
-      font-weight: 400;
-    }
   `
 ];
 let nextUniqueId = 0;
@@ -83,16 +80,33 @@ let MinidCodeInput = class extends ConstraintsValidationMixin(
     this.required = false;
     this.disabled = false;
     this.inputmode = "numeric";
-    this._forcedErrorMessage = "";
+    this.invalidmessage = "";
     this.length = 5;
-    this.fontSize = "3cqw";
+    this.fontsize = "11.45cqw";
     this.renderError = false;
-    this._localErrorNode = null;
+    this.localErrorNode = null;
+    this.handleFocusIn = () => {
+      const currentChar = this.value.length + 1;
+      this.inputRef.value?.style.setProperty(
+        `--char-${currentChar}-color`,
+        this.caretHighlightColor
+      );
+    };
+    this.handleChange = (e) => {
+      this.value = e.target.value;
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true
+        })
+      );
+    };
     this.addEventListener("invalid", (e) => {
       this.renderError = true;
-      if (this._localErrorNode) {
+      if (this.localErrorNode) {
         e.preventDefault();
-        this._localErrorNode.textContent = this.validationMessage || "Error";
+        this.localErrorNode.textContent = this.validationMessage || "Error";
       }
     });
   }
@@ -126,7 +140,7 @@ let MinidCodeInput = class extends ConstraintsValidationMixin(
     inputStyle?.setProperty("--otc-background", gradientStyle);
     const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;
     inputStyle?.setProperty("--otc-error-background", gradientErrorStyle);
-    inputStyle?.setProperty("--otc-width", this.fontSize);
+    inputStyle?.setProperty("--otc-width", this.fontsize);
   }
   autoFillEventHandler(e) {
     e.animationName === "onAutoFillStart" && (this.value = this.inputRef.value.value);
@@ -134,15 +148,7 @@ let MinidCodeInput = class extends ConstraintsValidationMixin(
   get selectionEnd() {
     return this.inputRef.value?.selectionEnd;
   }
-  firstUpdated(_changedProperties) {
-    this.focus();
-    webOtpApiInit(this.renderRoot);
-  }
-  focus(options) {
-    const notMobile = !window.matchMedia("only screen and (max-width: 768px)").matches;
-    notMobile && this.inputRef.value?.focus(options);
-  }
-  onFocusOut() {
+  handleFocusOut() {
     for (let i = 0; i < this.length; i++) {
       this.inputRef.value?.style.setProperty(
         `--char-${i + 1}-color`,
@@ -150,37 +156,12 @@ let MinidCodeInput = class extends ConstraintsValidationMixin(
       );
     }
   }
-  onFocusIn() {
-    const currentChar = this.value.length + 1;
-    this.inputRef.value?.style.setProperty(
-      `--char-${currentChar}-color`,
-      this.caretHighlightColor
-    );
-  }
-  updated(_changedProperties) {
-    for (let i = 0; i < this.length; i++) {
-      const color = i === this.value.length ? this.caretHighlightColor : this.caretColor;
-      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);
-    }
-    if (_changedProperties.has("_forcedErrorMessage")) {
-      this.setCustomValidity(this._forcedErrorMessage);
-    }
-    this.setFormValue(this.value);
-    this.setValidity(
-      this.inputRef.value.validity,
-      this.inputRef.value.validationMessage,
-      this.inputRef.value
-    );
-  }
-  setCustomValidity(error) {
-    this.inputRef.value?.setCustomValidity(error);
-  }
-  onClick() {
+  handleClick() {
     this.value = this.value.substring(0, this.selectionEnd || 0);
     this.renderError = false;
     this.setCustomValidity("");
-    if (this._localErrorNode) {
-      this._localErrorNode.textContent = "";
+    if (this.localErrorNode) {
+      this.localErrorNode.textContent = "";
     }
     this.setFormValue(this.value);
     this.setValidity({});
@@ -198,76 +179,95 @@ let MinidCodeInput = class extends ConstraintsValidationMixin(
   handleSlotchange(e) {
     const slot = e.target;
     const childNodes = slot.assignedNodes({ flatten: true });
-    this._localErrorNode = this._findErrorMessageNode(childNodes);
-    if (this._localErrorNode && this._forcedErrorMessage) {
+    this.localErrorNode = this.findErrorMessageNode(childNodes);
+    if (this.localErrorNode && this.invalidmessage) {
       this.renderError = true;
-      this._localErrorNode.textContent = this._forcedErrorMessage;
+      this.localErrorNode.textContent = this.invalidmessage;
       this.setValidity({});
     }
   }
-  _findErrorMessageNode(nodes) {
+  findErrorMessageNode(nodes) {
     for (const node of nodes) {
       if (node instanceof Element && node.classList.contains("error-message")) {
         return node;
       }
       const childNodesArray = Array.from(node.childNodes);
-      const foundNode = this._findErrorMessageNode(childNodesArray);
+      const foundNode = this.findErrorMessageNode(childNodesArray);
       if (foundNode) {
         return foundNode;
       }
     }
     return null;
   }
+  firstUpdated(_changedProperties) {
+    this.focus();
+    webOtpApiInit(this.renderRoot);
+  }
+  updated(_changedProperties) {
+    for (let i = 0; i < this.length; i++) {
+      const color = i === this.value.length ? this.caretHighlightColor : this.caretColor;
+      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);
+    }
+    if (_changedProperties.has("_forcedErrorMessage")) {
+      this.setCustomValidity(this.invalidmessage);
+    }
+    this.setFormValue(this.value);
+    this.setValidity(
+      this.inputRef.value.validity,
+      this.inputRef.value.validationMessage,
+      this.inputRef.value
+    );
+  }
+  focus(options) {
+    const notMobile = !window.matchMedia("only screen and (max-width: 768px)").matches;
+    notMobile && this.inputRef.value?.focus(options);
+  }
+  setCustomValidity(error) {
+    this.inputRef.value?.setCustomValidity(error);
+  }
   render() {
     return html`
-      <div class="flex flex-col">
-        <label
-          class="${classMap({
+      <label
+        class="${classMap({
       "sr-only": this.hidelabel,
-      "font-medium": true,
       "mb-2": !!this.label
+    })} font-medium"
+        for="${this.inputId}"
+        >${this.label}
+      </label>
+      <input
+        ${ref(this.inputRef)}
+        id=${this.inputId}
+        .value="${live(this.value)}"
+        class="${classMap({
+      error: this.invalidmessage
     })}"
-          for="${this.inputId}"
-          >${this.label}
-        </label>
-        <input
-          ${ref(this.inputRef)}
-          id=${this.inputId}
-          class="${classMap({
-      "w-full": true,
-      error: this._forcedErrorMessage
-    })}"
-          .value=${live(this.value)}
-          autocomplete="${"one-time-code"}"
-          inputmode=${this.inputmode}
-          @input="${(e) => {
-      this.value = e.target.value;
-    }}"
-          @change="${(e) => {
-      this.value = e.target.value;
-      this.dispatchEvent(
-        new Event("input", {
-          bubbles: true,
-          cancelable: true,
-          composed: true
-        })
-      );
-    }}"
-          @focusout="${() => {
-      this.onFocusOut();
-    }}"
-          @focusin="${() => {
-      this.onFocusIn();
-    }}"
-          @keydown="${this.handleKeydown}"
-          @click="${this.onClick}"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          minlength=${this.length}
-          maxlength="${this.length}"
-        />
-        <slot name="error-message" @slotchange=${this.handleSlotchange}></slot>
-      </div>
+        autocomplete="${"one-time-code"}"
+        inputmode="${this.inputmode}"
+        @input="${this.handleChange}"
+        @change="${this.handleChange}"
+        @focusout="${this.handleFocusOut}"
+        @focusin="${this.handleFocusIn}"
+        @keydown="${this.handleKeydown}"
+        @click="${this.handleClick}"
+        minlength="${this.length}"
+        maxlength="${this.length}"
+        ?disabled="${this.disabled}"
+        ?required="${this.required}"
+      />
+      <slot name="error-message" @slotchange=${this.handleSlotchange}>
+        <div
+          class="text-danger-subtle mt-2 flex gap-1"
+          aria-live="polite"
+          ?hidden=${!this.invalidmessage}
+        >
+          <mid-icon
+            name="xmark-octagon-fill"
+            class="mt-1 min-h-5 min-w-5"
+          ></mid-icon>
+          ${this.invalidmessage}
+        </div>
+      </slot>
     `;
   }
 };
@@ -290,20 +290,20 @@ __decorateClass([
   property({ type: String })
 ], MinidCodeInput.prototype, "inputmode", 2);
 __decorateClass([
-  property({ type: String, attribute: "error-message" })
-], MinidCodeInput.prototype, "_forcedErrorMessage", 2);
+  property()
+], MinidCodeInput.prototype, "invalidmessage", 2);
 __decorateClass([
   property({ type: Number })
 ], MinidCodeInput.prototype, "length", 2);
 __decorateClass([
-  property({ type: String, attribute: "font-size" })
-], MinidCodeInput.prototype, "fontSize", 2);
+  property()
+], MinidCodeInput.prototype, "fontsize", 2);
 __decorateClass([
   state()
 ], MinidCodeInput.prototype, "renderError", 2);
 __decorateClass([
   state()
-], MinidCodeInput.prototype, "_localErrorNode", 2);
+], MinidCodeInput.prototype, "localErrorNode", 2);
 MinidCodeInput = __decorateClass([
   customElement("mid-code-input")
 ], MinidCodeInput);

package/dist/components/code-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      container: otc / inline-size;\n      text-align: left;\n      width: 30rem;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n\n    #error-box {\n      color: rgb(179, 38, 30);\n      font-size: 18px;\n      font-weight: 400;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input')\nexport class MinidCodeInput extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  caretColor = 'var(--color-neutral-surface-tinted)';\n  caretHighlightColor = 'var(--color-accent-surface-active)';\n  inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property({ type: String, attribute: 'error-message' })\n  _forcedErrorMessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: String, attribute: 'font-size' })\n  fontSize = '3cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  _localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this._localErrorNode) {\n        e.preventDefault();\n        this._localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontSize);\n  }\n\n  autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  onFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  onFocusIn() {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this._forcedErrorMessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  onClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this._localErrorNode) {\n      this._localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this._localErrorNode = this._findErrorMessageNode(childNodes);\n    if (this._localErrorNode && this._forcedErrorMessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this._localErrorNode.textContent = this._forcedErrorMessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  _findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this._findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  override render() {\n    return html`\n      <div class=\"flex flex-col\">\n        <label\n          class=\"${classMap({\n            'sr-only': this.hidelabel,\n            'font-medium': true,\n            'mb-2': !!this.label,\n          })}\"\n          for=\"${this.inputId}\"\n          >${this.label}\n        </label>\n        <input\n          ${ref(this.inputRef)}\n          id=${this.inputId}\n          class=\"${classMap({\n            'w-full': true,\n            error: this._forcedErrorMessage,\n          })}\"\n          .value=${live(this.value)}\n          autocomplete=\"${'one-time-code' as any}\"\n          inputmode=${this.inputmode}\n          @input=\"${(e: InputEvent) => {\n            this.value = (e.target as HTMLInputElement).value;\n          }}\"\n          @change=\"${(e: Event) => {\n            this.value = (e.target as HTMLInputElement).value;\n            this.dispatchEvent(\n              new Event('input', {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n              })\n            );\n          }}\"\n          @focusout=\"${() => {\n            this.onFocusOut();\n          }}\"\n          @focusin=\"${() => {\n            this.onFocusIn();\n          }}\"\n          @keydown=\"${this.handleKeydown}\"\n          @click=\"${this.onClick}\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          minlength=${this.length}\n          maxlength=\"${this.length}\"\n        />\n        <slot name=\"error-message\" @slotchange=${this.handleSlotchange}></slot>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      container: otc / inline-size;\n      text-align: left;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n      flex-grow: 1;\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input')\nexport class MinidCodeInput extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  private readonly caretColor = 'var(--color-neutral-surface-tinted)';\n  private readonly caretHighlightColor = 'var(--color-accent-surface-active)';\n  private readonly inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property()\n  fontsize = '11.45cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this.localErrorNode) {\n        e.preventDefault();\n        this.localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  private calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontsize);\n  }\n\n  private autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  private handleFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  private handleFocusIn = () => {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  };\n\n  private handleClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this.localErrorNode) {\n      this.localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this.localErrorNode = this.findErrorMessageNode(childNodes);\n    if (this.localErrorNode && this.invalidmessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this.localErrorNode.textContent = this.invalidmessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  private findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this.findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this.invalidmessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'sr-only': this.hidelabel,\n          'mb-2': !!this.label,\n        })} font-medium\"\n        for=\"${this.inputId}\"\n        >${this.label}\n      </label>\n      <input\n        ${ref(this.inputRef)}\n        id=${this.inputId}\n        .value=\"${live(this.value)}\"\n        class=\"${classMap({\n          error: this.invalidmessage,\n        })}\"\n        autocomplete=\"${'one-time-code' as any}\"\n        inputmode=\"${this.inputmode}\"\n        @input=\"${this.handleChange}\"\n        @change=\"${this.handleChange}\"\n        @focusout=\"${this.handleFocusOut}\"\n        @focusin=\"${this.handleFocusIn}\"\n        @keydown=\"${this.handleKeydown}\"\n        @click=\"${this.handleClick}\"\n        minlength=\"${this.length}\"\n        maxlength=\"${this.length}\"\n        ?disabled=\"${this.disabled}\"\n        ?required=\"${this.required}\"\n      />\n      <slot name=\"error-message\" @slotchange=${this.handleSlotchange}>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/combobox.component.d.ts

@@ -1,8 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
-import { MinidPopup } from './popup.component';
+import { LitElement } from 'lit';
 import { MinidMenu } from '../components/menu.component';
-import { MinidPhoneInput } from '../components/phone-input.component';
-import { MinidTextfield } from '../components/textfield.component';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-combobox': MinidCombobox;
@@ -16,10 +13,10 @@ declare const MinidCombobox_base: typeof LitElement;
  */
 export declare class MinidCombobox extends MinidCombobox_base {
     private closeWatcher?;
-    popup: MinidPopup;
-    trigger: HTMLSlotElement;
-    panel: HTMLSlotElement;
-    triggerElements: (MinidTextfield | MinidPhoneInput | HTMLInputElement)[];
+    private popup;
+    private trigger;
+    private panel;
+    private triggerElements;
     /**
      * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for
      * comboboxs that allow for multiple interactions.
@@ -44,14 +41,14 @@ export declare class MinidCombobox extends MinidCombobox_base {
      */
     hoist: boolean;
     disabled: boolean;
-    triggerElement: 'mid-textfield' | 'mid-phone-input';
+    private triggerElement;
     /**
      * The combobox will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
      * components that use a combobox internally.
      */
     containingElement?: HTMLElement;
     connectedCallback(): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
     focusOnTrigger(): void;
     getMenu(): MinidMenu | undefined;

package/dist/components/combobox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../src/components/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAU/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D,OAAO,CAAC,YAAY,CAAC,CAAe;IAGpC,KAAK,EAAG,UAAU,CAAC;IAGnB,OAAO,EAAG,eAAe,CAAC;IAG1B,KAAK,EAAG,eAAe,CAAC;IAGxB,eAAe,EAAG,CAAC,cAAc,GAAG,eAAe,GAAG,gBAAgB,CAAC,EAAE,CAAC;IAE1E;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,IAAI,UAAS;IAGb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,KAAK,UAAS;IAGd,QAAQ,UAAS;IAGjB,cAAc,EAAE,eAAe,GAAG,iBAAiB,CAAmB;IAEtE;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAsBhE,oBAAoB;IAMpB,cAAc;IAUd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,aAAa,CASnB;IAEF,OAAO,CAAC,qBAAqB,CA2C3B;IAEF,OAAO,CAAC,uBAAuB,CAM7B;IAEF,OAAO,CAAC,iBAAiB,CAiBvB;IAEF,kBAAkB;IAaZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA4D/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAchB,mBAAmB;IAMnB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IAmBV,uBAAuB;IA0BjB,gBAAgB;IA0Cb,MAAM;CAuChB"}
+{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../src/components/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ5C,OAAO,mBAAmB,CAAC;AAY3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D,OAAO,CAAC,YAAY,CAAC,CAAe;IAGpC,OAAO,CAAC,KAAK,CAAc;IAG3B,OAAO,CAAC,OAAO,CAAmB;IAGlC,OAAO,CAAC,KAAK,CAAmB;IAGhC,OAAO,CAAC,eAAe,CAInB;IAEJ;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,IAAI,UAAS;IAGb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,KAAK,UAAS;IAGd,QAAQ,UAAS;IAGjB,OAAO,CAAC,cAAc,CAAwD;IAE9E;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,YAAY,IAAI,IAAI;IAsBpB,oBAAoB;IAMpB,cAAc;IAUd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,aAAa,CASnB;IAEF,OAAO,CAAC,qBAAqB,CA2C3B;IAEF,OAAO,CAAC,uBAAuB,CAM7B;IAEF,OAAO,CAAC,iBAAiB,CAiBvB;IAEF,kBAAkB;IAaZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA4D/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAchB,mBAAmB;IAMnB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IAmBV,uBAAuB;IA0BjB,gBAAgB;IA0Cb,MAAM;CAuChB"}

package/dist/components/combobox.js

@@ -103,7 +103,7 @@ let MinidCombobox = class extends styled(LitElement, styles) {
       this.containingElement = this;
     }
   }
-  firstUpdated(_changedProperties) {
+  firstUpdated() {
     const input = this.triggerElements[0];
     if (input.tagName.toLowerCase() === "mid-phone-input") {
       this.triggerElement = "mid-phone-input";