@six-group/ui-library 3.0.0-beta.1.11

package/dist/cjs/six-details.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const focusVisible = require('./focus-visible-0b352c74.js');
+
+const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
+
+let id = 0;
+let SixDetails = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixShow = index.createEvent(this, "six-details-show", 7);
+    this.sixAfterShow = index.createEvent(this, "six-details-after-show", 7);
+    this.sixHide = index.createEvent(this, "six-details-hide", 7);
+    this.sixAfterHide = index.createEvent(this, "six-details-after-hide", 7);
+    this.animateSummaryIcon = true;
+    this.componentId = `details-${++id}`;
+    this.isVisible = false;
+    /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+    this.summary = '';
+    /** The icon's size. */
+    this.summaryIconSize = 'inherit';
+    /** Set to true to prevent the user from toggling the details. */
+    this.disabled = false;
+    /** Set to true when you want to use six-details inline e.g. in a sidebar */
+    this.inline = false;
+    /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
+    this.selectableEmpty = false;
+    this.hasContent = true;
+  }
+  handleOpenChange() {
+    if (this.body) {
+      this.open ? this.show() : this.hide();
+    }
+  }
+  connectedCallback() {
+    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
+    this.handleSummaryClick = this.handleSummaryClick.bind(this);
+    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
+  }
+  componentDidLoad() {
+    focusVisible.focusVisible.observe(this.details);
+    this.body.hidden = !this.open;
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    focusVisible.focusVisible.unobserve(this.details);
+  }
+  /** Shows the detail body */
+  async show() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (this.isVisible) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.body.hidden = false;
+    if (this.body.scrollHeight === 0) {
+      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+      // intiially, but not immediately visible (i.e. in a tab panel).
+      this.body.style.height = 'auto';
+      this.body.style.overflow = 'visible';
+    }
+    else {
+      this.body.style.height = `${this.body.scrollHeight}px`;
+      this.body.style.overflow = 'hidden';
+    }
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the detail body */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    // We can't transition out of `height: auto`, so let's set it to the current height first
+    this.body.style.height = `${this.body.scrollHeight}px`;
+    this.body.style.overflow = 'hidden';
+    requestAnimationFrame(() => {
+      this.body.style.height = '0';
+    });
+    this.isVisible = false;
+    this.open = false;
+  }
+  handleBodyTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+      this.body.style.overflow = this.open ? 'visible' : 'hidden';
+      this.body.style.height = this.open ? 'auto' : '0';
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+      this.body.hidden = !this.open;
+    }
+  }
+  handleSummaryClick() {
+    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+      this.open ? this.hide() : this.show();
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.open ? this.hide() : this.show();
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  render() {
+    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+    return (index.h("div", { ref: (el) => (this.details = el), part: "base", class: {
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        inline: this.inline,
+      } }, index.h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, index.h("div", { part: "summary", class: "details__summary" }, index.h("slot", { name: "summary" }, this.summary)), index.h("span", { part: "summary-icon", class: {
+        'details__summary-icon': true,
+        'details__summary-icon--animate': this.animateSummaryIcon,
+      } }, index.h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && index.h("six-icon", { size: this.summaryIconSize }, summaryIcon)))), index.h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, index.h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, index.h("slot", null)))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
+SixDetails.style = sixDetailsCss;
+
+exports.six_details = SixDetails;

package/dist/cjs/six-dialog.cjs.entry.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const scroll = require('./scroll-76e6f5d7.js');
+const slot = require('./slot-ad537f24.js');
+const modal = require('./modal-48d42228.js');
+
+const sixDialogCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";
+
+const hasPreventScroll = modal.isPreventScrollSupported();
+let id = 0;
+let SixDialog = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixShow = index.createEvent(this, "six-dialog-show", 7);
+    this.sixAfterShow = index.createEvent(this, "six-dialog-after-show", 7);
+    this.sixHide = index.createEvent(this, "six-dialog-hide", 7);
+    this.sixAfterHide = index.createEvent(this, "six-dialog-after-hide", 7);
+    this.sixInitialFocus = index.createEvent(this, "six-dialog-initial-focus", 7);
+    this.sixOverlayDismiss = index.createEvent(this, "six-dialog-overlay-dismiss", 7);
+    this.componentId = `dialog-${++id}`;
+    this.willShow = false;
+    this.willHide = false;
+    this.hasFooter = false;
+    this.isVisible = false;
+    /** Indicates whether or not 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;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.modal = new modal.Modal(this.host, {
+      onFocusOut: () => this.panel.focus(),
+    });
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    scroll.unlockBodyScrolling(this.host);
+  }
+  /** Shows the dialog */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+    this.modal.activate();
+    scroll.lockBodyScrolling(this.host);
+    if (this.open) {
+      if (hasPreventScroll) {
+        // Wait for the next frame before setting initial focus so the dialog is technically visible
+        requestAnimationFrame(() => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus({ preventScroll: true });
+          }
+        });
+      }
+      else {
+        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
+        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
+        // out of view initially.
+        //
+        // Fiddle: https://jsfiddle.net/g6buoafq/1/
+        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
+        //
+        this.dialog.addEventListener('transitionend', () => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus();
+          }
+        }, { once: true });
+      }
+    }
+  }
+  /** Hides the dialog */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+    this.modal.deactivate();
+    scroll.unlockBodyScrolling(this.host);
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  }
+  handleOverlayClick() {
+    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+    if (!sixOverlayDismiss.defaultPrevented) {
+      this.hide();
+    }
+  }
+  handleSlotChange() {
+    this.hasFooter = slot.hasSlot(this.host, 'footer');
+  }
+  handleTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
+      this.isVisible = this.open;
+      this.willShow = false;
+      this.willHide = false;
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+    }
+  }
+  render() {
+    return (index.h("div", { 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 }, index.h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), index.h("div", { 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 && (index.h("header", { part: "header", class: "dialog__header" }, index.h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, index.h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), index.h("div", { part: "body", class: "dialog__body" }, index.h("slot", null)), index.h("footer", { part: "footer", class: "dialog__footer" }, index.h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
+SixDialog.style = sixDialogCss;
+
+exports.six_dialog = SixDialog;

package/dist/cjs/six-drawer.cjs.entry.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const scroll = require('./scroll-76e6f5d7.js');
+const slot = require('./slot-ad537f24.js');
+const modal = require('./modal-48d42228.js');
+
+const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";
+
+const hasPreventScroll = modal.isPreventScrollSupported();
+let id = 0;
+let SixDrawer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixShow = index.createEvent(this, "six-drawer-show", 7);
+    this.sixAfterShow = index.createEvent(this, "six-drawer-after-show", 7);
+    this.sixHide = index.createEvent(this, "six-drawer-hide", 7);
+    this.sixAfterHide = index.createEvent(this, "six-drawer-after-hide", 7);
+    this.sixInitialFocus = index.createEvent(this, "six-drawer-initial-focus", 7);
+    this.sixOverlayDismiss = index.createEvent(this, "six-drawer-overlay-dismiss", 7);
+    this.componentId = `drawer-${++id}`;
+    this.willShow = false;
+    this.willHide = false;
+    this.hasFooter = false;
+    this.isVisible = false;
+    /** Indicates whether or not 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;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.modal = new modal.Modal(this.host, {
+      onFocusOut: () => (this.contained ? null : this.panel.focus()),
+    });
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    // Show on init if open
+    if (this.open) {
+      this.show();
+      // if the sidebar is open by default we need to manually reset the
+      // transition variables since there will be no transition event
+      this.resetTransitionVariables();
+    }
+  }
+  disconnectedCallback() {
+    scroll.unlockBodyScrolling(this.host);
+  }
+  /** Shows the drawer */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+    // Lock body scrolling only if the drawer isn't contained
+    if (!this.contained) {
+      this.modal.activate();
+      scroll.lockBodyScrolling(this.host);
+    }
+    if (this.open) {
+      if (hasPreventScroll) {
+        // Wait for the next frame before setting initial focus so the dialog is technically visible
+        requestAnimationFrame(() => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus({ preventScroll: true });
+          }
+        });
+      }
+      else {
+        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
+        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
+        // out of view initially.
+        //
+        // Fiddle: https://jsfiddle.net/g6buoafq/1/
+        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
+        //
+        this.drawer.addEventListener('transitionend', () => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus();
+          }
+        }, { once: true });
+      }
+    }
+  }
+  /** Hides the drawer */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+    this.modal.deactivate();
+    scroll.unlockBodyScrolling(this.host);
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  }
+  handleOverlayClick() {
+    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+    if (!sixOverlayDismiss.defaultPrevented) {
+      this.hide();
+    }
+  }
+  handleSlotChange() {
+    this.hasFooter = slot.hasSlot(this.host, 'footer');
+  }
+  handleTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
+      this.resetTransitionVariables();
+    }
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (index.h("div", { ref: (el) => (this.drawer = el), part: "base", class: {
+        drawer: true,
+        'drawer--open': this.open,
+        'drawer--visible': this.isVisible,
+        'drawer--top': this.placement === 'top',
+        'drawer--right': this.placement === 'right',
+        'drawer--bottom': this.placement === 'bottom',
+        'drawer--left': this.placement === 'left',
+        'drawer--contained': this.contained,
+        'drawer--fixed': !this.contained,
+        'drawer--has-footer': this.hasFooter,
+      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), index.h("div", { 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 && (index.h("header", { part: "header", class: "drawer__header" }, index.h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, index.h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { exportparts: "base:close-button", class: "drawer__close", name: "x", onClick: this.handleCloseClick }))), index.h("div", { part: "body", class: "drawer__body" }, index.h("slot", null)), index.h("footer", { part: "footer", class: "drawer__footer" }, index.h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
+SixDrawer.style = sixDrawerCss;
+
+exports.six_drawer = SixDrawer;