@six-group/ui-library 0.0.0-insider.1a260b6 → 0.0.0-insider.1c3fe8c

package/dist/collection/components/six-dialog/six-dialog.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
 import { hasSlot } from "../../utils/slot";
 import Modal from "../../utils/modal";
+import { animateTo } from "../../utils/animation";
 let id = 0;
 /**
  * @since 1.0
@@ -28,19 +29,30 @@ export class SixDialog {
         this.componentId = `dialog-${++id}`;
         this.willShow = false;
         this.willHide = false;
+        this.hasFooter = false;
+        this.isVisible = false;
+        /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /**
+         * The dialog's label as displayed in the header. You should always include a relevant label even when using
+         * `no-header`, as it is required for proper accessibility.
+         */
+        this.label = '';
+        /**
+         * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an
+         * easy, accessible way for users to dismiss the dialog.
+         */
+        this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = hasSlot(this.host, 'footer');
@@ -55,11 +67,6 @@ export class SixDialog {
                 this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
             }
         };
-        this.hasFooter = false;
-        this.isVisible = false;
-        this.open = false;
-        this.label = '';
-        this.noHeader = false;
     }
     handleOpenChange() {
         this.open ? this.show() : this.hide();
@@ -121,13 +128,21 @@ export class SixDialog {
         this.modal.deactivate();
         unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     render() {
-        return (h("div", { key: '75859da889a7e5a2fe52734bf3676a340696745c', ref: (el) => (this.dialog = el), part: "base", class: {
+        return (h("div", { key: 'b97915d5076bb83782212b61b1f65f694fd84b63', ref: (el) => (this.dialog = el), part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
                 'dialog--visible': this.isVisible,
                 'dialog--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '6f5e118594c9f91a69d797ec21129ff7cc5dfc6c', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { key: '0dda1345d1263cce5070ecc26eb80c13d3dbd8df', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '1598a701c0b49a3e8b4dfe57245cb9eaea9af96b', part: "header", class: "dialog__header" }, h("span", { key: '1398618fdc5802a2493e2f6c1919f8ff97ed73b9', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'e8ba3e92b867a2f95e5bafbd2573a9a376591760', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'd967a6722d5da5daa397aa9f7a25b46da7fd336e', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '2b7b70d52fc2ce4a1aa9fdce3ddd8484f197f0e8', part: "body", class: "dialog__body" }, h("slot", { key: '109ac4b9bcb66d8df9ae060d8b7d9d6056ae3899' })), h("footer", { key: 'b45a2dce81ecbb194f9648255e5776fcf86af47b', part: "footer", class: "dialog__footer" }, h("slot", { key: 'cba1b4d078de3fb1d73d8224cb152df26e858871', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '153379e70061e86842f65f3588329dc9c6d592db', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { key: 'd0b78c413a70eeb6e6cbf75be7829a7d1f2ad715', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '94e7d993356ea718e1ed87d4fe9e1d3faf0574f8', part: "header", class: "dialog__header" }, h("span", { key: '600591c9266dda80c457f41c54c92a8134d89bb8', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: '4ad2904648821134ce3851682768b01086a68359', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: '4d793b14b41f7d9c43d5f9949cba6bfe7c6a442c', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '729f6cc36802fccf46958b2c259213aa9369fb94', part: "body", class: "dialog__body" }, h("slot", { key: 'ba299ae12ba958c705a807639aee911167997b38' })), h("footer", { key: '92cb57fa4c4dc066a49dd259832e43be619cc945', part: "footer", class: "dialog__footer" }, h("slot", { key: '63ea68abef52d91c04608ad1bf6d508a31012ed9', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "six-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -145,6 +160,7 @@ export class SixDialog {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -157,12 +173,14 @@ export class SixDialog {
                     "tags": [],
                     "text": "Indicates whether the dialog is open. You can use this in lieu of the show/hide methods."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -175,12 +193,14 @@ export class SixDialog {
                     "tags": [],
                     "text": "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."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "noHeader": {
                 "type": "boolean",
+                "attribute": "no-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -193,7 +213,8 @@ export class SixDialog {
                     "tags": [],
                     "text": "Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\neasy, accessible way for users to dismiss the dialog."
                 },
-                "attribute": "no-header",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -312,23 +333,23 @@ export class SixDialog {
                     }
                 }
             }, {
-                "method": "sixOverlayDismiss",
-                "name": "six-dialog-overlay-dismiss",
+                "method": "sixRequestClose",
+                "name": "six-dialog-request-close",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing."
+                    "text": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\npressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\nthe drawer will result in destructive behavior such as data loss."
                 },
                 "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
+                    "original": "SixDialogRequestClose",
+                    "resolved": "SixDialogRequestClose",
                     "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
+                        "SixDialogRequestClose": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dialog/six-dialog.tsx",
+                            "id": "src/components/six-dialog/six-dialog.tsx::SixDialogRequestClose"
                         }
                     }
                 }

package/dist/collection/components/six-dialog/six-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-dialog.js","sourceRoot":"","sources":["../../../src/components/six-dialog/six-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\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 dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog'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 dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog 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 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.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog 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 dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == 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    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\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 === 'opacity' && target.classList.contains('dialog__panel')) {\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\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__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=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__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=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-dialog.js","sourceRoot":"","sources":["../../../src/components/six-dialog/six-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDialogRequestClose {\n  source: 'close-button' | 'keyboard' | 'overlay';\n}\n\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 dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog'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 dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog 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 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.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog 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 dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n   * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n   * the drawer will result in destructive behavior such as data loss.\n   */\n  @Event({ eventName: 'six-dialog-request-close' }) sixRequestClose!: EventEmitter<SixDialogRequestClose>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == 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    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\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.preventClose('close-button');\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.preventClose('keyboard');\n    }\n  };\n\n  private handleOverlayClick = () => {\n    this.preventClose('overlay');\n  };\n\n  private preventClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const sixRequestClose = this.sixRequestClose.emit({ source });\n\n    if (sixRequestClose.defaultPrevented && this.panel) {\n      animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n      return;\n    }\n\n    this.hide();\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 === 'opacity' && target.classList.contains('dialog__panel')) {\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\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__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=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__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=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-drawer/six-drawer.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 /**
  * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
  *   `placement`. Note that the drawer will shrink to accommodate smaller screens.

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
 import { hasSlot } from "../../utils/slot";
 import Modal from "../../utils/modal";
+import { animateTo } from "../../utils/animation";
 let id = 0;
 /**
  * @since 1.0
@@ -27,19 +28,37 @@ export class SixDrawer {
         this.componentId = `drawer-${++id}`;
         this.willShow = false;
         this.willHide = false;
+        this.hasFooter = false;
+        this.isVisible = false;
+        /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /**
+         * The drawer's label as displayed in the header. You should always include a relevant label even when using
+         * `no-header`, as it is required for proper accessibility.
+         */
+        this.label = '';
+        /** The direction from which the drawer will open. */
+        this.placement = 'right';
+        /**
+         * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+         * its parent element, set this prop and add `position: relative` to the parent.
+         */
+        this.contained = false;
+        /**
+         * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+         * accessible way for users to dismiss the drawer.
+         */
+        this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = hasSlot(this.host, 'footer');
@@ -51,13 +70,6 @@ export class SixDrawer {
                 this.resetTransitionVariables();
             }
         };
-        this.hasFooter = false;
-        this.isVisible = false;
-        this.open = false;
-        this.label = '';
-        this.placement = 'right';
-        this.contained = false;
-        this.noHeader = false;
     }
     handleOpenChange() {
         this.open ? this.show() : this.hide();
@@ -124,6 +136,14 @@ export class SixDrawer {
         this.modal.deactivate();
         unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     resetTransitionVariables() {
         this.isVisible = this.open;
         this.willShow = false;
@@ -131,7 +151,7 @@ export class SixDrawer {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("div", { key: '3f0c58a92f99ceaedd021a99055d4b9d3cb6b490', ref: (el) => (this.drawer = el), part: "base", class: {
+        return (h("div", { key: '17d045e1a06aa424bc59f7316525df73ae031227', ref: (el) => (this.drawer = el), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 'drawer--visible': this.isVisible,
@@ -142,7 +162,7 @@ export class SixDrawer {
                 'drawer--contained': this.contained,
                 'drawer--fixed': !this.contained,
                 'drawer--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '06d4b753471747898380ad96df47d14eb97f3191', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: '3c5fc6ef2f0e6fa30feacd66534628385957894a', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '0b49d4f269ba18e09a4b249200385c58746057f2', part: "header", class: "drawer__header" }, h("span", { key: 'b6ae3162f1eef9678470add112b5a7588c1a59d2', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: 'a6da570ad5f2cc9bfea3738be1f49f2da8e0e4bf', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'b91dcd172972abab22d6c3160d305a2188281a57', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '92e6853d2012222b7eaa29c1f8a3df56d138d7c5', part: "body", class: "drawer__body" }, h("slot", { key: '2abc9eb1633feb27ae0cf658602a79e5eef8a3f5' })), h("footer", { key: 'b772e1b63f3a50d1b68de0adae38aa28270fe884', part: "footer", class: "drawer__footer" }, h("slot", { key: 'a20158d9f897a62749150469ddb7e97ba545305e', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '804fcb75cc49156bfcb6af8958a40c33c20f8202', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: 'e5095b200d370fe98163b3f0fa2bbf42ece7fa5f', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: 'c479cfa062277a6f1cf0f7433cff73e94139faea', part: "header", class: "drawer__header" }, h("span", { key: '8d60e0eb1cecc9c8f2091b5b8c9aefaa2aac3c91', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '26c5fb0feb42c9db7625e98f10cd5cbd0acfd742', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: '454ee7cea511b470ae224c6559ee99f10e9cf095', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '4f07be9128e7d2a292298b3e22ec0e5105adc3f3', part: "body", class: "drawer__body" }, h("slot", { key: '856a4bd2ee8dacc8b6124d87d8e501a8bd8c3f23' })), h("footer", { key: '721ca11e6b5470d2170d9bc929ba2d973faf9117', part: "footer", class: "drawer__footer" }, h("slot", { key: 'afb8d35c7fee0fa3e9833ea1b381c2d81f8cb5b0', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "six-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +180,7 @@ export class SixDrawer {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -172,12 +193,14 @@ export class SixDrawer {
                     "tags": [],
                     "text": "Indicates whether the drawer is open. You can use this in lieu of the show/hide methods."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -190,12 +213,14 @@ export class SixDrawer {
                     "tags": [],
                     "text": "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."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'right' | 'bottom' | 'left'",
@@ -208,12 +233,14 @@ export class SixDrawer {
                     "tags": [],
                     "text": "The direction from which the drawer will open."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'right'"
             },
             "contained": {
                 "type": "boolean",
+                "attribute": "contained",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -226,12 +253,14 @@ export class SixDrawer {
                     "tags": [],
                     "text": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."
                 },
-                "attribute": "contained",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noHeader": {
                 "type": "boolean",
+                "attribute": "no-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,7 +273,8 @@ export class SixDrawer {
                     "tags": [],
                     "text": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer."
                 },
-                "attribute": "no-header",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -363,23 +393,23 @@ export class SixDrawer {
                     }
                 }
             }, {
-                "method": "sixOverlayDismiss",
-                "name": "six-drawer-overlay-dismiss",
+                "method": "sixRequestClose",
+                "name": "six-drawer-request-close",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing."
+                    "text": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\npressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\nthe drawer will result in destructive behavior such as data loss."
                 },
                 "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
+                    "original": "SixDrawerRequestClose",
+                    "resolved": "SixDrawerRequestClose",
                     "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
+                        "SixDrawerRequestClose": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-drawer/six-drawer.tsx",
+                            "id": "src/components/six-drawer/six-drawer.tsx::SixDrawerRequestClose"
                         }
                     }
                 }

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

@@ -1 +1 @@
-{"version":3,"file":"six-drawer.js","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\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      // 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    }\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=\"close\"\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","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDrawerRequestClose {\n  source: 'close-button' | 'keyboard' | 'overlay';\n}\n\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  /**\n   * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n   * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n   * the drawer will result in destructive behavior such as data loss.\n   */\n  @Event({ eventName: 'six-drawer-request-close' }) sixRequestClose!: EventEmitter<SixDrawerRequestClose>;\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      // 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    }\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.preventClose('close-button');\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.preventClose('keyboard');\n    }\n  };\n\n  private handleOverlayClick = () => {\n    this.preventClose('overlay');\n  };\n\n  private preventClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const sixRequestClose = this.sixRequestClose.emit({ source });\n\n    if (sixRequestClose.defaultPrevented && this.panel) {\n      animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n      return;\n    }\n\n    this.hide();\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=\"close\"\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"]}

package/dist/collection/components/six-dropdown/six-dropdown.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: inline-block;
 }