@felleslosninger/minid-elements 0.0.105 → 0.0.106

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 { 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    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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"}
+{"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 '../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    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.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;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"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,EAAkB,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAMjE,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.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';\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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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type 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

@@ -13,6 +13,7 @@ declare const MinidCombobox_base: typeof LitElement;
  */
 export declare class MinidCombobox extends MinidCombobox_base {
     private closeWatcher?;
+    private triggerElement;
     private popup;
     private trigger;
     private panel;
@@ -41,7 +42,6 @@ export declare class MinidCombobox extends MinidCombobox_base {
      */
     hoist: boolean;
     disabled: boolean;
-    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.
@@ -61,13 +61,7 @@ export declare class MinidCombobox extends MinidCombobox_base {
     handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
     handleTriggerKeyUp(event: KeyboardEvent): void;
     handleTriggerSlotChange(): void;
-    /**
-     * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu
-     * is activated.
-     */
-    reposition(): void;
-    addOpenListeners(): void;
-    removeOpenListeners(): void;
+    updateAccessibleTrigger(): void;
     /**
      * Shows the combobox panel.
      */
@@ -76,7 +70,13 @@ export declare class MinidCombobox extends MinidCombobox_base {
      * Hides the combobox panel
      */
     hide(): Promise<void>;
-    updateAccessibleTrigger(): void;
+    /**
+     * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    reposition(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
     handleOpenChange(): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
 }

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,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;CAwChB"}
+{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../src/components/combobox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,OAAO,mBAAmB,CAAC;AAY3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,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;IACpC,OAAO,CAAC,cAAc,CAAwD;IAG9E,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;IAEjB;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,YAAY;IAsBZ,oBAAoB;IAMpB,cAAc;IAUd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,aAAa,CAQnB;IAEF,OAAO,CAAC,qBAAqB,CAmC3B;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;IAcvB,uBAAuB;IAyBvB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAchB,mBAAmB;IAOb,gBAAgB;IA0Cb,MAAM;CAwChB"}

package/dist/components/combobox.js

@@ -1,5 +1,5 @@
 import { css, LitElement, html } from "lit";
-import { query, queryAssignedElements, property, state, customElement } from "lit/decorators.js";
+import { query, queryAssignedElements, property, customElement } from "lit/decorators.js";
 import "./popup.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { waitForEvent } from "../internal/event.js";
@@ -27,6 +27,7 @@ const styles = [
 let MinidCombobox = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
+    this.triggerElement = "mid-textfield";
     this.stayopenonselect = false;
     this.open = false;
     this.size = "md";
@@ -34,7 +35,6 @@ let MinidCombobox = class extends styled(LitElement, styles) {
     this.skidding = 0;
     this.hoist = false;
     this.disabled = false;
-    this.triggerElement = "mid-textfield";
     this.handleCountryClick = () => {
       const menu = this.getMenu();
       this.open ? this.hide() : this.show();
@@ -50,7 +50,6 @@ let MinidCombobox = class extends styled(LitElement, styles) {
         event.stopPropagation();
         this.hide();
         this.focusOnTrigger();
-        return;
       }
     };
     this.handleDocumentKeyDown = (event) => {
@@ -61,17 +60,18 @@ let MinidCombobox = class extends styled(LitElement, styles) {
         return;
       }
       if (event.key === "Tab") {
-        if (this.open && (document.activeElement?.tagName.toLowerCase() === "mid-menu-item" || document.activeElement?.tagName.toLowerCase() === "mid-menu")) {
+        const composedPath = event.composedPath();
+        const tabbedIsMenuItem = composedPath.some(
+          (e) => e.tagName?.toLowerCase() === "mid-menu-item"
+        );
+        if (this.open && tabbedIsMenuItem) {
           event.preventDefault();
           this.hide();
           this.focusOnTrigger();
           return;
         }
         setTimeout(() => {
-          const activeElement = this.containingElement?.getRootNode() instanceof ShadowRoot ? document.activeElement?.shadowRoot?.activeElement : document.activeElement;
-          if (!this.containingElement || activeElement?.closest(
-            this.containingElement.tagName.toLowerCase()
-          ) !== this.containingElement) {
+          if (composedPath.every((target) => target !== this.containingElement)) {
             this.hide();
           }
         });
@@ -197,50 +197,6 @@ let MinidCombobox = class extends styled(LitElement, styles) {
   handleTriggerSlotChange() {
     this.updateAccessibleTrigger();
   }
-  /**
-   * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   */
-  reposition() {
-    this.popup.reposition();
-  }
-  addOpenListeners() {
-    if ("CloseWatcher" in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => {
-        this.hide();
-        this.focusOnTrigger();
-      };
-    }
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-    this.closeWatcher?.destroy();
-  }
-  /**
-   * Shows the combobox panel.
-   */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "mid-after-show");
-  }
-  /**
-   * Hides the combobox panel
-   */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "mid-after-hide");
-  }
   //
   // Slotted triggers can be arbitrary content, but we need to link them to the combobox panel with `aria-haspopup` and
   // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
@@ -272,6 +228,50 @@ let MinidCombobox = class extends styled(LitElement, styles) {
       target.setAttribute("aria-expanded", this.open ? "true" : "false");
     }
   }
+  /**
+   * Shows the combobox panel.
+   */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "mid-after-show");
+  }
+  /**
+   * Hides the combobox panel
+   */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "mid-after-hide");
+  }
+  /**
+   * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    if ("CloseWatcher" in window) {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        this.hide();
+        this.focusOnTrigger();
+      };
+    }
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    this.closeWatcher?.destroy();
+  }
   async handleOpenChange() {
     if (this.disabled) {
       this.open = false;
@@ -380,9 +380,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], MinidCombobox.prototype, "disabled", 2);
-__decorateClass([
-  state()
-], MinidCombobox.prototype, "triggerElement", 2);
 __decorateClass([
   property({ attribute: false })
 ], MinidCombobox.prototype, "containingElement", 2);

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../src/components/combobox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport './popup.component';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidPopup } from './popup.component';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { MinidButton } from './button.component';\nimport { MinidMenu } from '../components/menu.component';\nimport { MinidPhoneInput } from '../components/phone-input.component';\nimport { MinidTextfield } from '../components/textfield.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-combobox': MinidCombobox;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-combobox')\nexport class MinidCombobox extends styled(LitElement, styles) {\n  private closeWatcher?: CloseWatcher;\n\n  @query('#combobox')\n  private popup!: MinidPopup;\n\n  @query('.combobox__trigger')\n  private trigger!: HTMLSlotElement;\n\n  @query('.combobox__panel')\n  private panel!: HTMLSlotElement;\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private triggerElements!: (\n    | MinidTextfield\n    | MinidPhoneInput\n    | HTMLInputElement\n  )[];\n\n  /**\n   * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * comboboxs that allow for multiple interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  stayopenonselect = false;\n\n  /**\n   * Indicates wether the combobox panel is open. You can use this or the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Distance between trigger and combobox panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the combobox panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @state()\n  private triggerElement: 'mid-textfield' | 'mid-phone-input' = 'mid-textfield';\n\n  /**\n   * The combobox will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a combobox internally.\n   */\n  @property({ attribute: false })\n  containingElement?: HTMLElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated(): void {\n    const input = this.triggerElements[0];\n    if (input.tagName.toLowerCase() === 'mid-phone-input') {\n      this.triggerElement = 'mid-phone-input';\n    } else if (input.tagName.toLowerCase() === 'mid-textfield') {\n      this.triggerElement = 'mid-textfield';\n    }\n\n    this.panel.hidden = !this.open;\n\n    const menu = this.getMenu();\n    if (menu) {\n      menu.variant = 'combobox';\n    }\n\n    // If the combobox panel is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as\n      | HTMLElement\n      | undefined;\n\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel\n      .assignedElements({ flatten: true })\n      .find((el) => el.tagName.toLowerCase() === 'mid-menu') as\n      | MinidMenu\n      | undefined;\n  }\n\n  private handleCountryClick = () => {\n    const menu = this.getMenu();\n\n    this.open ? this.hide() : this.show();\n    if (this.open && menu && menu.searchable) {\n      // Delay focus slightly to win the focus battle\n      setTimeout(() => {\n        menu.clearFilter();\n        menu.focusSearchField();\n      }, 1);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open combobox. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n      return;\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the combobox and refocus the trigger\n      if (\n        this.open &&\n        (document.activeElement?.tagName.toLowerCase() === 'mid-menu-item' ||\n          document.activeElement?.tagName.toLowerCase() === 'mid-menu')\n      ) {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the combobox is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.containingElement?.getRootNode() instanceof ShadowRoot\n            ? document.activeElement?.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (\n          !this.containingElement ||\n          activeElement?.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: CustomEvent) => {\n    if (this.triggerElement !== 'mid-phone-input') {\n      return;\n    }\n\n    // Transfer selected country from panel to input field\n    const input = this.triggerElements[0] as MinidPhoneInput;\n    const country = event.detail.item.value;\n    input.country = country;\n\n    const target = event.target as HTMLElement;\n\n    // Hide the combobox when a menu item is selected\n    if (!this.stayopenonselect && target.tagName.toLowerCase() === 'mid-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  handleTriggerClick() {\n    if (this.triggerElement === 'mid-phone-input') {\n      return;\n    }\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  async handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if ([' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      if (this.triggerElement === 'mid-textfield') {\n        this.handleTriggerClick();\n      }\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllSelectableItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n\n          // Wait for the combobox to open before focusing, but not the animation\n          await this.updateComplete;\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                firstMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                lastMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        this.hide();\n        this.focusOnTrigger();\n      };\n    }\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    this.closeWatcher?.destroy();\n  }\n\n  /**\n   * Shows the combobox panel.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the combobox panel\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the combobox panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({\n      flatten: true,\n    }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(\n      (el) => getTabbableBoundary(el).start\n    );\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // buttons have to update the internal button so it's announced correctly by screen readers\n        case 'mid-button':\n          target = (accessibleTrigger as MinidButton).button;\n          break;\n\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'combobox.show');\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.removeOpenListeners();\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'combobox.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"combobox\"\n        distance=${this.distance}\n        placement=\"bottom-end\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=\"width\"\n        ?active=${this.open}\n      >\n        <slot\n          class=\"combobox__trigger\"\n          slot=\"anchor\"\n          name=\"trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n          @mid-country-click=${this.handleCountryClick}\n        ></slot>\n        <div\n          class=\"bg-accent\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"combobox\"\n        >\n          <slot\n            class=\"combobox__panel\"\n            part=\"panel\"\n            @keydown=${this.handleKeyDown}\n            @mid-select=${this.handlePanelSelect}\n          ></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.js","sources":["../../src/components/combobox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport './popup.component';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidPopup } from './popup.component';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { MinidButton } from './button.component';\nimport { MinidMenu } from '../components/menu.component';\nimport { MinidPhoneInput } from '../components/phone-input.component';\nimport { MinidTextfield } from '../components/textfield.component';\nimport { MinidMenuItem } from '../components/menu-item.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-combobox': MinidCombobox;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-combobox')\nexport class MinidCombobox extends styled(LitElement, styles) {\n  private closeWatcher?: CloseWatcher;\n  private triggerElement: 'mid-textfield' | 'mid-phone-input' = 'mid-textfield';\n\n  @query('#combobox')\n  private popup!: MinidPopup;\n\n  @query('.combobox__trigger')\n  private trigger!: HTMLSlotElement;\n\n  @query('.combobox__panel')\n  private panel!: HTMLSlotElement;\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private triggerElements!: (\n    | MinidTextfield\n    | MinidPhoneInput\n    | HTMLInputElement\n  )[];\n\n  /**\n   * By default, the combobox is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * comboboxs that allow for multiple interactions.\n   */\n  @property({ type: Boolean, reflect: true })\n  stayopenonselect = false;\n\n  /**\n   * Indicates wether the combobox panel is open. You can use this or the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Distance between trigger and combobox panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the combobox panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * The combobox will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a combobox internally.\n   */\n  @property({ attribute: false })\n  containingElement?: HTMLElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    const input = this.triggerElements[0];\n    if (input.tagName.toLowerCase() === 'mid-phone-input') {\n      this.triggerElement = 'mid-phone-input';\n    } else if (input.tagName.toLowerCase() === 'mid-textfield') {\n      this.triggerElement = 'mid-textfield';\n    }\n\n    this.panel.hidden = !this.open;\n\n    const menu = this.getMenu();\n    if (menu) {\n      menu.variant = 'combobox';\n    }\n\n    // If the combobox panel is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as\n      | HTMLElement\n      | undefined;\n\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel\n      .assignedElements({ flatten: true })\n      .find((el) => el.tagName.toLowerCase() === 'mid-menu') as\n      | MinidMenu\n      | undefined;\n  }\n\n  private handleCountryClick = () => {\n    const menu = this.getMenu();\n\n    this.open ? this.hide() : this.show();\n    if (this.open && menu && menu.searchable) {\n      // Delay focus slightly to win the focus battle\n      setTimeout(() => {\n        menu.clearFilter();\n        menu.focusSearchField();\n      }, 1);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open combobox. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      const composedPath = event.composedPath();\n      const tabbedIsMenuItem = composedPath.some(\n        (e): e is MinidMenuItem =>\n          (e as HTMLElement).tagName?.toLowerCase() === 'mid-menu-item'\n      );\n\n      // Tabbing within an open menu should close the combobox and refocus the trigger\n      if (this.open && tabbedIsMenuItem) {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the combobox is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        if (composedPath.every((target) => target !== this.containingElement)) {\n          this.hide();\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: CustomEvent) => {\n    if (this.triggerElement !== 'mid-phone-input') {\n      return;\n    }\n\n    // Transfer selected country from panel to input field\n    const input = this.triggerElements[0] as MinidPhoneInput;\n    const country = event.detail.item.value;\n    input.country = country;\n\n    const target = event.target as HTMLElement;\n\n    // Hide the combobox when a menu item is selected\n    if (!this.stayopenonselect && target.tagName.toLowerCase() === 'mid-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  handleTriggerClick() {\n    if (this.triggerElement === 'mid-phone-input') {\n      return;\n    }\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  async handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if ([' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      if (this.triggerElement === 'mid-textfield') {\n        this.handleTriggerClick();\n      }\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllSelectableItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n\n          // Wait for the combobox to open before focusing, but not the animation\n          await this.updateComplete;\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                firstMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              if (this.triggerElement === 'mid-textfield') {\n                lastMenuItem.focus();\n              } else {\n                menu.clearFilter();\n                menu.focusSearchField();\n              }\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the combobox panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({\n      flatten: true,\n    }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(\n      (el) => getTabbableBoundary(el).start\n    );\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // buttons have to update the internal button so it's announced correctly by screen readers\n        case 'mid-button':\n          target = (accessibleTrigger as MinidButton).button;\n          break;\n\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /**\n   * Shows the combobox panel.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the combobox panel\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  /**\n   * Instructs the combobox menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        this.hide();\n        this.focusOnTrigger();\n      };\n    }\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    this.closeWatcher?.destroy();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'combobox.show');\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.removeOpenListeners();\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'combobox.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"combobox\"\n        distance=${this.distance}\n        placement=\"bottom-end\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=\"width\"\n        ?active=${this.open}\n      >\n        <slot\n          class=\"combobox__trigger\"\n          slot=\"anchor\"\n          name=\"trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n          @mid-country-click=${this.handleCountryClick}\n        ></slot>\n        <div\n          class=\"bg-accent\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"combobox\"\n        >\n          <slot\n            class=\"combobox__panel\"\n            part=\"panel\"\n            @keydown=${this.handleKeyDown}\n            @mid-select=${this.handlePanelSelect}\n          ></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,mBAAmB,CAAC;AAM3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM/C,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAG5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAYD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,YAAY,CAAC,CAAsB;IAG3C,KAAK,EAAG,UAAU,CAAC;IAGnB,OAAO,EAAG,eAAe,CAAC;IAG1B,KAAK,EAAG,eAAe,CAAC;IAGxB,IAAI,UAAS;IAGb,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,gBAAgB,UAAS;IAGzB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAgB;IAE9B;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAGb,KAAK,UAAS;IAEd;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,YAAY;IAUZ,oBAAoB;IAMpB,cAAc;IASd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,aAAa,CAQnB;IAEF,OAAO,CAAC,qBAAqB,CAmC3B;IAEF,OAAO,CAAC,uBAAuB,CAO7B;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,kBAAkB;IASZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAgD/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB,uBAAuB;IAoBvB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAgBhB,mBAAmB;IAWb,gBAAgB;IAmCb,MAAM;CAwChB"}
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,mBAAmB,CAAC;AAM3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM/C,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAG5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAYD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,YAAY,CAAC,CAAsB;IAG3C,KAAK,EAAG,UAAU,CAAC;IAGnB,OAAO,EAAG,eAAe,CAAC;IAG1B,KAAK,EAAG,eAAe,CAAC;IAGxB,IAAI,UAAS;IAGb,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,gBAAgB,UAAS;IAGzB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAgB;IAE9B;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAGb,KAAK,UAAS;IAEd;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;OAGG;IAEH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC,iBAAiB;IAQjB,YAAY;IAUZ,oBAAoB;IAMpB,cAAc;IASd,OAAO,IAID,SAAS,GACT,SAAS;IAGf,OAAO,CAAC,aAAa,CAQnB;IAEF,OAAO,CAAC,qBAAqB,CAmC3B;IAEF,OAAO,CAAC,uBAAuB,CAO7B;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,kBAAkB;IASZ,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAgD/C,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAOvC,uBAAuB;IAIvB,uBAAuB;IAoBvB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;OAGG;IACH,UAAU;IAIV,gBAAgB;IAgBhB,mBAAmB;IAWb,gBAAgB;IA2Cb,MAAM;CAwChB"}

package/dist/components/dropdown.js

@@ -237,23 +237,31 @@ let MinidDropdown = class extends styled(LitElement, styles) {
     }
     this.updateAccessibleTrigger();
     if (this.open) {
-      this.dispatchEvent(new Event("mid-show"));
+      this.dispatchEvent(
+        new Event("mid-show", { bubbles: true, composed: true })
+      );
       this.addOpenListeners();
       await stopAnimations(this);
       this.panel.hidden = false;
       this.popup.active = true;
       const { keyframes, options } = getAnimation(this, "dropdown.show");
       await animateTo(this.popup.popup, keyframes, options);
-      this.dispatchEvent(new Event("mid-after-show"));
+      this.dispatchEvent(
+        new Event("mid-after-show", { bubbles: true, composed: true })
+      );
     } else {
-      this.dispatchEvent(new Event("mid-hide"));
+      this.dispatchEvent(
+        new Event("mid-hide", { bubbles: true, composed: true })
+      );
       this.removeOpenListeners();
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, "dropdown.hide");
       await animateTo(this.popup.popup, keyframes, options);
       this.panel.hidden = true;
       this.popup.active = false;
-      this.dispatchEvent(new Event("mid-after-hide"));
+      this.dispatchEvent(
+        new Event("mid-after-hide", { bubbles: true, composed: true })
+      );
     }
   }
   render() {
@@ -277,9 +285,9 @@ let MinidDropdown = class extends styled(LitElement, styles) {
         ?arrow=${this.arrow}
       >
         <slot
+          class="trigger"
           slot="anchor"
           name="trigger"
-          class="trigger"
           @click=${this.handleTriggerClick}
           @keydown=${this.handleTriggerKeyDown}
           @keyup=${this.handleTriggerKeyUp}