@felleslosninger/minid-elements 0.0.97 → 0.0.99

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../src/components/combobox.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } 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  /**\n   * @ignore\n   */\n  #closeWatcher?: CloseWatcher;\n\n  /**\n   * @ignore\n   */\n  @query('#combobox')\n  popup!: MinidPopup;\n\n  /**\n   * @ignore\n   */\n  @query('.combobox__trigger')\n  trigger!: HTMLSlotElement;\n\n  /**\n   * @ignore\n   */\n  @query('.combobox__panel')\n  panel!: HTMLSlotElement;\n\n  /**\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'trigger' })\n  triggerElements!: (MinidTextfield | MinidPhoneInput | HTMLInputElement)[];\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  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  protected firstUpdated(_changedProperties: PropertyValues): 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        >\n        </slot>\n        <div\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, PropertyValues } 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  popup!: MinidPopup;\n\n  @query('.combobox__trigger')\n  trigger!: HTMLSlotElement;\n\n  @query('.combobox__panel')\n  panel!: HTMLSlotElement;\n\n  @queryAssignedElements({ slot: 'trigger' })\n  triggerElements!: (MinidTextfield | MinidPhoneInput | HTMLInputElement)[];\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  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  protected firstUpdated(_changedProperties: PropertyValues): 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          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/{modal.component.d.ts → dialog.component.d.ts}

@@ -1,18 +1,18 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'mid-modal': MinidModal;
+        'mid-dialog': MinidDialog;
     }
 }
-declare const MinidModal_base: typeof LitElement;
+declare const MinidDialog_base: typeof LitElement;
 /**
  *
- * @event mid-show - Emitted when the modal opens.
- * @event mid-after-show - Emitted after the modal opens and all animations are complete.
- * @event mid-hide - Emitted when the modal closes.
- * @event mid-after-hide - Emitted after the modal closes and all animations are complete.
+ * @event mid-show - Emitted when the dialog opens.
+ * @event mid-after-show - Emitted after the dialog opens and all animations are complete.
+ * @event mid-hide - Emitted when the dialog closes.
+ * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.
  * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to
- *   close the modal by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
  *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
  *   destructive behavior such as data loss.
  *
@@ -21,18 +21,17 @@ declare const MinidModal_base: typeof LitElement;
  * @csspart body - Select the `article` element
  * @csspart footer - Select the `footer` element
  *
- * @slot -- The default slot for the body content of the modal
+ * @slot -- The default slot for the body content of the dialog
  * @slot heading - The content inside the `h2` element
  * @slot footer - The content inside the `footer` element
  *
- * @animation modal.show - The animation to use when showing the modal.
- * @animation modal.hide - The animation to use when hiding the modal.
- * @animation modal.denyClose - The animation to use when closing the modal is prevented.
+ * @animation dialog.show - The animation to use when showing the dialog.
+ * @animation dialog.hide - The animation to use when hiding the dialog.
+ * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.
  *
  */
-export declare class MinidModal extends MinidModal_base {
+export declare class MinidDialog extends MinidDialog_base {
     dialog: HTMLDialogElement;
-    panel: HTMLElement;
     /**
      * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
      * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
@@ -48,14 +47,14 @@ export declare class MinidModal extends MinidModal_base {
     private handleBackdropClick;
     handleOpenChange(): Promise<void>;
     /**
-     * Shows the modal.
+     * Shows the dialog.
      */
     show(): Promise<void>;
     /**
-     * Hides the modal
+     * Hides the dialog
      */
     hide(): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};
-//# sourceMappingURL=modal.component.d.ts.map
+//# sourceMappingURL=dialog.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../src/components/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAWD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,WAAY,SAAQ,gBAA0B;IAEzD,MAAM,EAAG,iBAAiB,CAAC;IAE3B;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;OAGG;IAEH,OAAO,SAAM;IAEb,OAAO,CAAC,YAAY;IAkBpB,kBAAkB,GAAI,OAAO,KAAK,UAQhC;IAEF,OAAO,CAAC,mBAAmB;IAQrB,gBAAgB;IA+CtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CA8BhB"}

package/dist/components/{modal.js → dialog.js}

@@ -20,45 +20,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const styles = [
   css`
     :host {
-      --max-width: 40rem;
-      --footer-and-header-height: 140px;
-      display: contents;
-    }
-
-    .dialog {
-      max-width: var(--max-width);
-      max-height: unset;
-    }
-
-    .dialog[open] {
-      animation: none;
-    }
-
-    .dialog.closing::backdrop {
-      animation: fade-out 200ms ease-in forwards;
-    }
-
-    .modal-content {
-      max-height: calc(90vh - var(--footer-and-header-height));
-      overflow: auto;
-    }
-
-    .footer {
-      justify-content: flex-end;
-    }
-
-    @keyframes fade-out {
-      from {
-        opacity: 1;
-      }
-
-      to {
-        opacity: 0;
-      }
+      --width: 40rem;
+      display: block;
     }
   `
 ];
-let MinidModal = class extends styled(LitElement, styles) {
+let MinidDialog = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -81,8 +48,8 @@ let MinidModal = class extends styled(LitElement, styles) {
     });
     this.dispatchEvent(requestCloseEvent);
     if (requestCloseEvent.defaultPrevented) {
-      const { keyframes, options } = getAnimation(this, "modal.denyClose");
-      animateTo(this.panel, keyframes, options);
+      const { keyframes, options } = getAnimation(this, "dialog.denyClose");
+      animateTo(this.dialog, keyframes, options);
       return;
     }
     this.hide();
@@ -99,9 +66,9 @@ let MinidModal = class extends styled(LitElement, styles) {
       );
       this.dialog.showModal();
       lockBodyScrolling(this);
-      const panelAnimation = getAnimation(this, "modal.show");
+      const panelAnimation = getAnimation(this, "dialog.show");
       await animateTo(
-        this.panel,
+        this.dialog,
         panelAnimation.keyframes,
         panelAnimation.options
       ), this.dispatchEvent(
@@ -112,16 +79,16 @@ let MinidModal = class extends styled(LitElement, styles) {
         new Event("mid-hide", { bubbles: true, composed: true })
       );
       await Promise.all([stopAnimations(this.dialog)]);
-      const panelAnimation = getAnimation(this, "modal.hide");
-      this.panel.classList.add("closing");
+      const panelAnimation = getAnimation(this, "dialog.hide");
+      this.dialog.classList.add("backdrop:animate-fade-out");
       await animateTo(
-        this.panel,
+        this.dialog,
         panelAnimation.keyframes,
         panelAnimation.options
       );
-      this.panel.classList.remove("closing");
+      this.dialog.classList.remove("backdrop:animate-fade-out");
       this.dialog.close();
-      this.panel.hidden = false;
+      this.dialog.hidden = false;
       unlockBodyScrolling(this);
       this.dispatchEvent(
         new Event("mid-after-hide", { composed: true, bubbles: true })
@@ -129,7 +96,7 @@ let MinidModal = class extends styled(LitElement, styles) {
     }
   }
   /**
-   * Shows the modal.
+   * Shows the dialog.
    */
   async show() {
     if (this.open) {
@@ -139,7 +106,7 @@ let MinidModal = class extends styled(LitElement, styles) {
     return waitForEvent(this, "mid-after-show");
   }
   /**
-   * Hides the modal
+   * Hides the dialog
    */
   async hide() {
     if (!this.open) {
@@ -153,26 +120,26 @@ let MinidModal = class extends styled(LitElement, styles) {
       <dialog
         part="base"
         id="dialog"
-        class="dialog fds-modal m-auto"
+        class="text-body-md text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none"
         @cancel=${this.handleDialogCancel}
         @click=${this.handleBackdropClick}
       >
-        <header part="header" class="fds-modal__header flex">
-          <h2 class="fds-heading fds-heading--xs">
-            <slot name="heading"></slot>
-          </h2>
-          <button
-            autofocus
-            @click="${() => this.requestClose("close-button")}"
-            class="fds-btn fds-focus fds-btn--md fds-btn--tertiary fds-btn--second fds-btn--icon-only fds-modal__header__button"
-          >
-            <mid-icon class="text-[1.75rem]" name="xmark"></mid-icon>
-          </button>
+        <header part="header" class="text-heading-sm flex justify-between">
+          <slot name="heading"></slot>
+          <div class="h-0">
+            <button
+              autofocus
+              @click="${() => this.requestClose("close-button")}"
+              class="text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 -translate-y-3 translate-x-3 items-center justify-center rounded"
+            >
+              <mid-icon class="size-6" name="xmark"></mid-icon>
+            </button>
+          </div>
         </header>
-        <article part="body" class="fds-modal__content modal-content">
+        <div part="body" class="overflow-auto">
           <slot> </slot>
-        </article>
-        <footer part="footer" class="fds-modal__footer footer">
+        </div>
+        <footer part="footer">
           <slot name="footer"> </slot>
         </footer>
       </dialog>
@@ -181,41 +148,38 @@ let MinidModal = class extends styled(LitElement, styles) {
 };
 __decorateClass([
   query("#dialog")
-], MinidModal.prototype, "dialog", 2);
-__decorateClass([
-  query(".dialog")
-], MinidModal.prototype, "panel", 2);
+], MinidDialog.prototype, "dialog", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], MinidModal.prototype, "open", 2);
+], MinidDialog.prototype, "open", 2);
 __decorateClass([
   property({ reflect: true })
-], MinidModal.prototype, "heading", 2);
+], MinidDialog.prototype, "heading", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
-], MinidModal.prototype, "handleOpenChange", 1);
-MinidModal = __decorateClass([
-  customElement("mid-modal")
-], MinidModal);
-setDefaultAnimation("modal.show", {
+], MinidDialog.prototype, "handleOpenChange", 1);
+MinidDialog = __decorateClass([
+  customElement("mid-dialog")
+], MinidDialog);
+setDefaultAnimation("dialog.show", {
   keyframes: [
     { opacity: 0, scale: 0.8 },
     { opacity: 1, scale: 1 }
   ],
   options: { duration: 250, easing: "ease" }
 });
-setDefaultAnimation("modal.hide", {
+setDefaultAnimation("dialog.hide", {
   keyframes: [
     { opacity: 1, scale: 1 },
     { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 250, easing: "ease" }
 });
-setDefaultAnimation("modal.denyClose", {
+setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],
   options: { duration: 100 }
 });
 export {
-  MinidModal
+  MinidDialog
 };
-//# sourceMappingURL=modal.js.map
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dialog': MinidDialog;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --width: 40rem;\n      display: block;\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the dialog opens.\n * @event mid-after-show - Emitted after the dialog opens and all animations are complete.\n * @event mid-hide - Emitted when the dialog closes.\n * @event mid-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the dialog\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when closing the dialog is prevented.\n *\n */\n@customElement('mid-dialog')\nexport class MinidDialog extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'dialog.denyClose');\n      animateTo(this.dialog, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'dialog.show');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.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\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a animation class to trigger it at the same time as the dialog animation\n      this.dialog.classList.add('backdrop:animate-fade-out');\n      await animateTo(\n        this.dialog,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.dialog.classList.remove('backdrop:animate-fade-out');\n      this.dialog.close();\n      this.dialog.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the dialog.\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 dialog\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  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"text-body-md text-neutral m-auto max-h-[calc(100%---spacing(8))] w-(--width) max-w-[calc(100%---spacing(8))] flex-col rounded-lg p-6 shadow-xl backdrop:bg-black/50 open:flex open:animate-none\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"text-heading-sm flex justify-between\">\n          <slot name=\"heading\"></slot>\n          <div class=\"h-0\">\n            <button\n              autofocus\n              @click=\"${() => this.requestClose('close-button')}\"\n              class=\"text-body-md focus-visible:focus-ring text-neutral hover:bg-neutral-surface-hover float-right flex size-12 -translate-y-3 translate-x-3 items-center justify-center rounded\"\n            >\n              <mid-icon class=\"size-6\" name=\"xmark\"></mid-icon>\n            </button>\n          </div>\n        </header>\n        <div part=\"body\" class=\"overflow-auto\">\n          <slot> </slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}

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

@@ -11,8 +11,7 @@ declare const MinidDropdown_base: typeof LitElement;
  * @part panel - Select the dropdown panel host element
  */
 export declare class MinidDropdown extends MinidDropdown_base {
-    #private;
-    popupId: string;
+    private readonly popupId;
     open: boolean;
     size: 'sm' | 'md' | 'lg';
     placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
@@ -34,9 +33,9 @@ export declare class MinidDropdown extends MinidDropdown_base {
      * but `fixed` can solve issues with overflow clipping
      */
     hoist: boolean;
-    handleAnchorClick: (event: CustomEvent<{
-        id: string;
-    }>) => void;
+    private handleClickOutside;
+    private toggleDropdownOpen;
+    private handleAnchorClick;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

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;AAI5C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAuBD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;;IAE3D,OAAO,SAAoC;IAG3C,IAAI,UAAS;IAGb,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;IAqCd,iBAAiB,GAAI,OAAO,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,UAKrD;IAEO,MAAM;CA4BhB"}
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,mBAAmB,CAAC;AAG3B,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;IAG5D,IAAI,UAAS;IAGb,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,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,iBAAiB,CAKvB;IAEO,MAAM;CAgChB"}

package/dist/components/dropdown.js

@@ -1,13 +1,11 @@
 import { css, LitElement, html } from "lit";
-import { state, property, customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./popup.js";
+import { classMap } from "lit/directives/class-map.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -16,35 +14,18 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _handleClickOutside, _MinidDropdown_instances, toggleDropdownOpen_fn;
-let nextUniqueID = 0;
+let nextUniqueId = 0;
 const styles = [
   css`
     :host {
-      display: flex;
-    }
-
-    .popup {
-      --arrow-size: 8px;
-    }
-
-    .popup::part(arrow) {
-      z-index: 1501;
-      border: 1px solid #cbcbcb;
-      border-left: 0;
-      border-top: 0;
+      display: inline-flex;
     }
   `
 ];
 let MinidDropdown = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _MinidDropdown_instances);
-    this.popupId = `mid-dropdown-${nextUniqueID++}`;
+    this.popupId = `mid-dropdown-${nextUniqueId++}`;
     this.open = false;
     this.size = "md";
     this.placement = "bottom-end";
@@ -52,22 +33,48 @@ let MinidDropdown = class extends styled(LitElement, styles) {
     this.skidding = 0;
     this.arrow = false;
     this.hoist = false;
-    __privateAdd(this, _handleClickOutside, (event) => {
+    this.handleClickOutside = (event) => {
       if (!event.composedPath().includes(this)) {
-        __privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn).call(this, event, false);
+        this.toggleDropdownOpen(event, false);
       }
-    });
+    };
     this.handleAnchorClick = (event) => {
       if (event.detail.id !== this.popupId) {
-        __privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn).call(this, event, false);
+        this.toggleDropdownOpen(event, false);
       }
     };
   }
+  toggleDropdownOpen(event, open) {
+    event.stopPropagation();
+    if (open !== void 0) {
+      this.open = open;
+    } else {
+      this.open = !this.open;
+    }
+    if (this.open) {
+      addEventListener("click", this.handleClickOutside);
+      addEventListener(
+        "mid-anchor-click",
+        this.handleAnchorClick
+      );
+    } else {
+      this.blur();
+      removeEventListener(
+        "mid-anchor-click",
+        this.handleAnchorClick
+      );
+      removeEventListener("click", this.handleClickOutside);
+    }
+  }
   render() {
     return html`
       <mid-popup
         id="${this.popupId}"
-        class="popup"
+        class="${classMap({
+      "text-body-sm": this.size === "sm",
+      "text-body-md": this.size === "md",
+      "text-body-lg": this.size === "lg"
+    })} [--arrow-border-color:var(--border-color-neutral-subtle)] [--arrow-size:8px]"
         distance=${this.distance}
         placement="${this.placement}"
         skidding=${this.skidding}
@@ -79,7 +86,7 @@ let MinidDropdown = class extends styled(LitElement, styles) {
         sync=${ifDefined(this.sync)}
         ?active=${this.open}
         ?arrow=${this.arrow}
-        @click=${__privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn)}
+        @click=${this.toggleDropdownOpen}
       >
         <slot slot="anchor" name="trigger"> </slot>
         <div
@@ -92,33 +99,6 @@ let MinidDropdown = class extends styled(LitElement, styles) {
     `;
   }
 };
-_handleClickOutside = /* @__PURE__ */ new WeakMap();
-_MinidDropdown_instances = /* @__PURE__ */ new WeakSet();
-toggleDropdownOpen_fn = function(event, open) {
-  event.stopPropagation();
-  if (open !== void 0) {
-    this.open = open;
-  } else {
-    this.open = !this.open;
-  }
-  if (this.open) {
-    addEventListener("click", __privateGet(this, _handleClickOutside));
-    addEventListener(
-      "mid-anchor-click",
-      this.handleAnchorClick
-    );
-  } else {
-    this.blur();
-    removeEventListener(
-      "mid-anchor-click",
-      this.handleAnchorClick
-    );
-    removeEventListener("click", __privateGet(this, _handleClickOutside));
-  }
-};
-__decorateClass([
-  state()
-], MinidDropdown.prototype, "popupId", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MinidDropdown.prototype, "open", 2);