@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f24090c

package/dist/components/six-drawer.js.map

@@ -1 +1 @@
-{"file":"six-drawer.js","mappings":"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","names":["SixDrawer"],"sources":["./src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","./src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  componentId = `drawer-${++id}`;\n  drawer: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer'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.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-drawer.js","mappings":"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","names":["SixDrawer"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer'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.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-dropdown2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as scrollIntoView } from './scroll.js';
 import { P as Popover } from './popover.js';
 import { E as EventListeners } from './event-listeners.js';
 import { b as getSlotChildren } from './slot.js';
 import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control.js';
+import { d as defineCustomElement$5 } from './six-error2.js';
 import { d as defineCustomElement$4 } from './six-icon2.js';
 import { d as defineCustomElement$3 } from './six-input2.js';
 import { d as defineCustomElement$2 } from './six-menu2.js';
@@ -19,20 +19,20 @@ function getNearestTabbableElement(el) {
     return el;
   }
   // Check the element's shadow root
-  if (el.shadowRoot) {
-    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable);
-    if (tabbableShadowChild) {
+  if (el.shadowRoot != null) {
+    const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e));
+    if (tabbableShadowChild != null) {
       return tabbableShadowChild;
     }
   }
   // Check the element's children
-  if (el.children) {
-    return [...el.children].map(getNearestTabbableElement)[0];
+  if (el.children != null) {
+    return [...el.children].map((e) => getNearestTabbableElement(e)).at(0);
   }
-  return null;
+  return undefined;
 }
 
-const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";
+const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";
 
 const isTagName = (name) => (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === name.toLowerCase();
 const isSixMenu = isTagName('six-menu');
@@ -47,7 +47,7 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     this.sixAfterShow = createEvent(this, "six-dropdown-after-show", 7);
     this.sixHide = createEvent(this, "six-dropdown-hide", 7);
     this.sixAfterHide = createEvent(this, "six-dropdown-after-hide", 7);
-    this.sixAutoFilterFired = createEvent(this, "six-dropdown-auto-filter-fired", 7);
+    this.sixAutoFilter = createEvent(this, "six-dropdown-auto-filter-fired", 7);
     this.sixAsyncFilterFired = createEvent(this, "six-async-filter-fired", 7);
     this.sixScroll = createEvent(this, "six-dropdown-scroll", 7);
     this.componentId = `dropdown-${++id}`;
@@ -55,23 +55,154 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     this.hasBeenInitialized = false;
     this.eventListeners = new EventListeners();
     this.getMenuItems = () => {
-      if (this._options !== null) {
-        return this._options.map((option) => h("six-menu-item", { value: option.value }, option.label));
+      if (this.filteredOptions.length > 0) {
+        return this.filteredOptions.map((option) => h("six-menu-item", { value: option.value }, option.label));
       }
+      if (this.panel == null)
+        return [];
       const [panel] = getSlotChildren(this.panel);
       // the menu-items can be in a slot e.g. in six-select or direct children of the panel
       return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
     };
     this.handleFilterInputChange = () => {
       var _a, _b;
+      if (this.filterInputElement == null)
+        return;
       const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-      if (this._options) {
+      if (this.filteredOptions.length > 0) {
         this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
       }
       else {
         this.handleFilteringForSlotItems(lowerCaseFilterTerm);
       }
-      this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });
+      this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
+    };
+    this.handleDocumentKeyDown = (event) => {
+      var _a;
+      const keyboardEvent = event;
+      // Close when escape is pressed
+      if (keyboardEvent.key === 'Escape') {
+        void this.hide();
+        this.focusOnTrigger();
+        return;
+      }
+      if (this.filterInputElement === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+        if (keyboardEvent.key === 'ArrowDown') {
+          const item = this.getMenuItems().find((item) => item.style.display !== 'none');
+          if (item != null) {
+            item.setFocus();
+          }
+        }
+      }
+      // Handle tabbing
+      if (keyboardEvent.key === 'Tab') {
+        // Tabbing within an open menu should close the dropdown and refocus the trigger
+        if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {
+          keyboardEvent.preventDefault();
+          void this.hide();
+          this.focusOnTrigger();
+          return;
+        }
+        // Tabbing outside the containing element closes the panel
+        //
+        // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+        // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+        setTimeout(() => {
+          var _a, _b;
+          const activeElement = this.container.getRootNode() instanceof ShadowRoot
+            ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
+            : document.activeElement;
+          if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
+            void this.hide();
+            return;
+          }
+        });
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      // Close when clicking outside the containing element
+      const path = event.composedPath();
+      if (!path.includes(this.container)) {
+        void this.hide();
+        return;
+      }
+    };
+    this.handlePanelSelect = (event) => {
+      const target = event.target;
+      // Hide the dropdown when a menu item is selected
+      if (this.closeOnSelect && isSixMenu(target)) {
+        void this.hide();
+        this.focusOnTrigger();
+      }
+    };
+    this.handleTriggerClick = () => {
+      this.open ? this.hide() : this.show();
+    };
+    this.handleTriggerKeyDown = (event) => {
+      // Close when escape or tab is pressed
+      if (event.key === 'Escape') {
+        this.focusOnTrigger();
+        void this.hide();
+        return;
+      }
+      // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+      // key again to hide the menu in case they don't want to make a selection.
+      if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
+        event.preventDefault();
+        this.open ? void this.hide() : void this.show();
+        return;
+      }
+      const menu = this.getMenu();
+      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+      // faster navigation.
+      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        // Show the menu if it's not already open
+        if (!this.open) {
+          void this.show();
+        }
+        if (menu == null) {
+          return;
+        }
+        const menuItems = [...menu.querySelectorAll('six-menu-item')];
+        const firstMenuItem = menuItems.at(0);
+        const lastMenuItem = menuItems.at(menuItems.length - 1);
+        // Focus on a menu item
+        if (event.key === 'ArrowDown' && firstMenuItem != null) {
+          firstMenuItem.setFocus();
+          return;
+        }
+        if (event.key === 'ArrowUp' && lastMenuItem != null) {
+          lastMenuItem.setFocus();
+          return;
+        }
+      }
+      // Other keys bring focus to the menu and initiate type-to-select behavior
+      const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
+      if (this.open && menu != null && !ignoredKeys.includes(event.key)) {
+        void menu.typeToSelect(event.key);
+        return;
+      }
+    };
+    this.handleTriggerKeyUp = (event) => {
+      // Prevent space from triggering a click event in Firefox
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+    };
+    this.handleTriggerSlotChange = () => {
+      this.updateAccessibleTrigger();
+    };
+    this.handleDropdownScroll = () => {
+      if (this.panel == null)
+        return;
+      this.sixScroll.emit({
+        scrollHeight: this.panel.scrollHeight,
+        scrollTop: this.panel.scrollTop,
+        scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
+        scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
+      });
     };
     this.open = false;
     this.placement = 'bottom-start';
@@ -86,9 +217,9 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     this.autofocusFilter = true;
     this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
     this.disableHideOnEnterAndSpace = false;
-    this.options = null;
+    this.options = [];
     this.virtualScroll = false;
-    this._options = null;
+    this.filteredOptions = [];
   }
   get hasFilterEnabled() {
     return this.filter || this.asyncFilter;
@@ -101,6 +232,8 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     this.updateAccessibleTrigger();
   }
   handlePopoverOptionsChange() {
+    if (this.popover == null)
+      return;
     this.popover.setOptions({
       strategy: this.hoist ? 'fixed' : 'absolute',
       placement: this.placement,
@@ -109,25 +242,18 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     });
   }
   handleOptionsChange() {
-    this._options = [...this.options];
+    if (Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
+    }
   }
   connectedCallback() {
     if (this.virtualScroll && this.options === null) {
       console.error('Options must be defined when using virtual scrolling');
     }
-    if (this.options !== null) {
-      this._options = [...this.options];
+    if (Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
     }
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleTriggerClick = this.handleTriggerClick.bind(this);
-    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
-    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);
-    this.handleTriggerSlotChange = this.handleTriggerSlotChange.bind(this);
-    this.handleDropdownScroll = this.handleDropdownScroll.bind(this);
-    if (this.hasBeenInitialized && !this.popover) {
+    if (this.hasBeenInitialized && this.popover == null) {
       // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter
       // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had
       // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,
@@ -146,15 +272,17 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
       this.setupFiltering(this.handleFilterInputChange);
     }
     else if (this.asyncFilter) {
-      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));
+      this.setupFiltering(() => { var _a, _b; return this.sixAsyncFilterFired.emit({ filterValue: (_b = (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' }); });
     }
   }
   initializePopover() {
+    if (this.trigger == null || this.positioner == null)
+      return;
     const onAfterHide = () => {
-      if (this.filter) {
+      if (this.filter && this.filterInputElement != null) {
         this.filterInputElement.value = '';
-        if (this._options !== null) {
-          this._options = [...this.options];
+        if (this.filteredOptions.length > 0) {
+          this.filteredOptions = [...this.options];
         }
         else {
           const menuItems = this.getMenuItems();
@@ -164,14 +292,15 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
       this.sixAfterHide.emit();
     };
     const onAfterShow = async () => {
+      var _a;
       if (this.hasFilterEnabled && this.autofocusFilter) {
         // if dropdown filter is enabled we should autofocus the search field
-        await this.filterInputElement.setFocus();
+        await ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
       }
       this.sixAfterShow.emit();
     };
     const onTransitionEnd = () => {
-      if (!this.open) {
+      if (!this.open && this.panel != null) {
         this.panel.scrollTop = 0;
       }
     };
@@ -187,14 +316,16 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     });
   }
   setupFiltering(callback) {
-    this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
+    if (this.filterInputElement != null) {
+      this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
+    }
   }
   handleFilteringForAttributeItems(lowerCaseFilterTerm) {
-    if (lowerCaseFilterTerm === '') {
-      this._options = [...this.options];
+    if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
       return;
     }
-    this._options = this.options.filter((option) => {
+    this.filteredOptions = this.options.filter((option) => {
       var _a, _b, _c, _d;
       return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
         (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
@@ -211,15 +342,16 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     });
   }
   disconnectedCallback() {
+    var _a;
     this.eventListeners.removeAll();
     void this.hide();
-    this.popover.destroy();
-    this.popover = null;
+    (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.popover = undefined;
   }
   /** Shows the dropdown panel */
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.isVisible || this.popover == null || this.panel == null) {
       return;
     }
     const sixShow = this.sixShow.emit();
@@ -237,7 +369,7 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
   /** Hides the dropdown panel */
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+    if (!this.isVisible || this.panel == null || this.popover == null) {
       return;
     }
     const sixHide = this.sixHide.emit();
@@ -253,8 +385,10 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     this.popover.hide();
   }
   focusOnTrigger() {
+    if (this.trigger == null)
+      return;
     const [trigger] = getSlotChildren(this.trigger);
-    if (trigger) {
+    if (trigger != null) {
       if (typeof trigger.setFocus === 'function') {
         trigger.setFocus();
       }
@@ -264,143 +398,20 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     }
   }
   getMenu() {
-    const [menu] = getSlotChildren(this.panel).filter(isSixMenu);
-    return menu;
+    if (this.panel == null)
+      return;
+    return getSlotChildren(this.panel).filter(isSixMenu).at(0);
   }
   /**
    * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
    * is activated.
    */
   async reposition() {
-    if (!this.open) {
+    if (!this.open || this.popover == null) {
       return;
     }
     this.popover.reposition();
   }
-  handleDocumentKeyDown(event) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
-      void this.hide();
-      this.focusOnTrigger();
-      return;
-    }
-    if (this.filterInputElement === this.host.shadowRoot.activeElement) {
-      if (event.key === 'ArrowDown') {
-        const item = this.getMenuItems().find((item) => item.style.display !== 'none');
-        if (item) {
-          item.setFocus();
-        }
-      }
-    }
-    // Handle tabbing
-    if (event.key === 'Tab') {
-      // Tabbing within an open menu should close the dropdown and refocus the trigger
-      if (this.open && isSixMenuItem(document.activeElement)) {
-        event.preventDefault();
-        void this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-      // Tabbing outside of the containing element closes the panel
-      //
-      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
-      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
-      setTimeout(() => {
-        var _a;
-        const activeElement = this.container.getRootNode() instanceof ShadowRoot
-          ? (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement
-          : document.activeElement;
-        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
-          void this.hide();
-          return;
-        }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    // Close when clicking outside of the containing element
-    const path = event.composedPath();
-    if (!path.includes(this.container)) {
-      void this.hide();
-      return;
-    }
-  }
-  handleMenuItemActivate(event) {
-    const item = event.target;
-    scrollIntoView(item, this.panel);
-  }
-  handlePanelSelect(event) {
-    const target = event.target;
-    // Hide the dropdown when a menu item is selected
-    if (this.closeOnSelect && isSixMenu(target)) {
-      void this.hide();
-      this.focusOnTrigger();
-    }
-  }
-  handleTriggerClick() {
-    this.open ? this.hide() : this.show();
-  }
-  handleTriggerKeyDown(event) {
-    const menu = this.getMenu();
-    const menuItems = menu ? [...menu.querySelectorAll('six-menu-item')] : null;
-    const firstMenuItem = menuItems[0];
-    const lastMenuItem = menuItems[menuItems.length - 1];
-    // Close when escape or tab is pressed
-    if (event.key === 'Escape') {
-      this.focusOnTrigger();
-      void this.hide();
-      return;
-    }
-    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
-    // key again to hide the menu in case they don't want to make a selection.
-    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      this.open ? void this.hide() : void this.show();
-      return;
-    }
-    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
-    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
-    // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-      // Show the menu if it's not already open
-      if (!this.open) {
-        void this.show();
-      }
-      // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstMenuItem) {
-        firstMenuItem.setFocus();
-        return;
-      }
-      if (event.key === 'ArrowUp' && lastMenuItem) {
-        lastMenuItem.setFocus();
-        return;
-      }
-    }
-    // Other keys bring focus to the menu and initiate type-to-select behavior
-    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
-    if (this.open && menu && !ignoredKeys.includes(event.key)) {
-      void menu.typeToSelect(event.key);
-      return;
-    }
-  }
-  handleTriggerKeyUp(event) {
-    // Prevent space from triggering a click event in Firefox
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-  }
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-  handleDropdownScroll() {
-    this.sixScroll.emit({
-      scrollHeight: this.panel.scrollHeight,
-      scrollTop: this.panel.scrollTop,
-      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
-      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
-    });
-  }
   //
   // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
   // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
@@ -412,8 +423,10 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
   // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
   //
   updateAccessibleTrigger() {
-    const [accessibleTrigger] = getSlotChildren(this.trigger).map(getNearestTabbableElement);
-    if (accessibleTrigger) {
+    if (this.trigger == null)
+      return;
+    const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
+    if (accessibleTrigger != null) {
       accessibleTrigger.setAttribute('aria-haspopup', 'true');
       accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
     }
@@ -427,7 +440,7 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
         dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
       } }, this.hasFilterEnabled && (h("six-input", { class: {
         'filter-hidden': !this.open,
-      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, h("slot", null), this._options && (h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
+      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, h("slot", null), this.filteredOptions.length > 0 && (h("six-menu", { part: "menu", items: this.filteredOptions, virtualScroll: this.virtualScroll }))))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -455,7 +468,7 @@ const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H
     "disableHideOnEnterAndSpace": [4, "disable-hide-on-enter-and-space"],
     "options": [16],
     "virtualScroll": [4, "virtual-scroll"],
-    "_options": [32],
+    "filteredOptions": [32],
     "show": [64],
     "hide": [64],
     "reposition": [64]
@@ -464,13 +477,18 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["six-dropdown", "six-icon", "six-input", "six-menu", "six-menu-item"];
+  const components = ["six-dropdown", "six-error", "six-icon", "six-input", "six-menu", "six-menu-item"];
   components.forEach(tagName => { switch (tagName) {
     case "six-dropdown":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SixDropdown);
       }
       break;
+    case "six-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
     case "six-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();