@six-group/ui-library 0.0.0-insider.24fcc9e

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

@@ -0,0 +1,434 @@
+import { h } from '@stencil/core';
+import { focusVisible } from '../../utils/focus-visible';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The details' content.
+ * @slot summary - The details' summary. Alternatively, you can use the summary prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part header - The summary header.
+ * @part summary - The details summary.
+ * @part summary-icon - The expand/collapse summary icon.
+ * @part content - The details content.
+ */
+export class SixDetails {
+  constructor() {
+    this.componentId = `details-${++id}`;
+    this.isVisible = false;
+    this.animateSummaryIcon = true;
+    this.open = false;
+    this.summary = '';
+    this.summaryIcon = undefined;
+    this.summaryIconSize = 'inherit';
+    this.disabled = false;
+    this.inline = false;
+    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(() => {
+      // tslint:disable-next-line: no-unused-expression
+      this.body.clientWidth; // force a reflow
+      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)))));
+  }
+  static get is() { return "six-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-details.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-details.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether or not the details is open. You can use this in lieu of the show/hide methods."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "summary": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
+        },
+        "attribute": "summary",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "summaryIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
+        },
+        "attribute": "summary-icon",
+        "reflect": false
+      },
+      "summaryIconSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+          "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon's size."
+        },
+        "attribute": "summary-icon-size",
+        "reflect": true,
+        "defaultValue": "'inherit'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to prevent the user from toggling the details."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selectableEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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"
+        },
+        "attribute": "selectable-empty",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hasContent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-content",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "animateSummaryIcon": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixShow",
+        "name": "six-details-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "sixAfterShow",
+        "name": "six-details-after-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted after the details opens and all transitions are complete."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "sixHide",
+        "name": "six-details-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "sixAfterHide",
+        "name": "six-details-after-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted after the details closes and all transitions are complete."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the detail body",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the detail body",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "handleOpenChange"
+      }];
+  }
+}
+//# sourceMappingURL=six-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-details.js","sourceRoot":"","sources":["../../../src/components/six-details/six-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  body: HTMLElement;\n  componentId = `details-${++id}`;\n  details: HTMLElement;\n  header: HTMLElement;\n  isVisible = false;\n\n  /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** 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  */\n  @Prop() selectableEmpty = false;\n\n  @Prop() readonly hasContent: boolean = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);\n    this.handleSummaryClick = this.handleSummaryClick.bind(this);\n    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.details);\n\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.details);\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // intiially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    this.body.style.height = `${this.body.scrollHeight}px`;\n    this.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      this.body.clientWidth; // force a reflow\n      this.body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  handleBodyTransitionEnd(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 === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  }\n\n  handleSummaryClick() {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header.focus();\n    }\n  }\n\n  handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,123 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ */
+: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;
+}