@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

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

@@ -1,146 +1,146 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { f as focusVisible } from './focus-visible-4b7946aa.js';
+import { f as focusVisible } from './focus-visible-97933ea9.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) {
-    registerInstance(this, hostRef);
-    this.sixShow = createEvent(this, "six-details-show", 7);
-    this.sixAfterShow = createEvent(this, "six-details-after-show", 7);
-    this.sixHide = createEvent(this, "six-details-hide", 7);
-    this.sixAfterHide = 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.observe(this.details);
-    this.body.hidden = !this.open;
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    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 (h("div", { ref: (el) => (this.details = el), part: "base", class: {
-        details: true,
-        'details--open': this.open,
-        'details--disabled': this.disabled,
-        inline: this.inline,
-      } }, 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 }, h("div", { part: "summary", class: "details__summary" }, h("slot", { name: "summary" }, this.summary)), h("span", { part: "summary-icon", class: {
-        'details__summary-icon': true,
-        'details__summary-icon--animate': this.animateSummaryIcon,
-      } }, h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))), h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", null)))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-};
+let id = 0;
+let SixDetails = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixShow = createEvent(this, "six-details-show", 7);
+    this.sixAfterShow = createEvent(this, "six-details-after-show", 7);
+    this.sixHide = createEvent(this, "six-details-hide", 7);
+    this.sixAfterHide = 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.observe(this.details);
+    this.body.hidden = !this.open;
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    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 (h("div", { ref: (el) => (this.details = el), part: "base", class: {
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        inline: this.inline,
+      } }, 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 }, h("div", { part: "summary", class: "details__summary" }, h("slot", { name: "summary" }, this.summary)), h("span", { part: "summary-icon", class: {
+        'details__summary-icon': true,
+        'details__summary-icon--animate': this.animateSummaryIcon,
+      } }, h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))), h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", null)))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
 SixDetails.style = sixDetailsCss;
 
 export { SixDetails as six_details };

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

@@ -1,159 +1,159 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-99b214c2.js';
-import { h as hasSlot } from './slot-5253e199.js';
-import { i as isPreventScrollSupported, M as Modal } from './modal-e5709f6b.js';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-180b53fd.js';
+import { h as hasSlot } from './slot-6f3984c7.js';
+import { i as isPreventScrollSupported, M as Modal } from './modal-5ebdc320.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 = isPreventScrollSupported();
-let id = 0;
-let SixDialog = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixShow = createEvent(this, "six-dialog-show", 7);
-    this.sixAfterShow = createEvent(this, "six-dialog-after-show", 7);
-    this.sixHide = createEvent(this, "six-dialog-hide", 7);
-    this.sixAfterHide = createEvent(this, "six-dialog-after-hide", 7);
-    this.sixInitialFocus = createEvent(this, "six-dialog-initial-focus", 7);
-    this.sixOverlayDismiss = 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(this.host, {
-      onFocusOut: () => this.panel.focus(),
-    });
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    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();
-    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();
-    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 = 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 (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 }, h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), 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 && (h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-};
+const hasPreventScroll = isPreventScrollSupported();
+let id = 0;
+let SixDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixShow = createEvent(this, "six-dialog-show", 7);
+    this.sixAfterShow = createEvent(this, "six-dialog-after-show", 7);
+    this.sixHide = createEvent(this, "six-dialog-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-dialog-after-hide", 7);
+    this.sixInitialFocus = createEvent(this, "six-dialog-initial-focus", 7);
+    this.sixOverlayDismiss = 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(this.host, {
+      onFocusOut: () => this.panel.focus(),
+    });
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    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();
+    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();
+    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 = 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 (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 }, h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), 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 && (h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
 SixDialog.style = sixDialogCss;
 
 export { SixDialog as six_dialog };