@aurodesignsystem/auro-dialog 1.0.0

package/src/componentBase.js

@@ -0,0 +1,278 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence */
+
+import { LitElement, html } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+
+import styleCss from "./style-css.js";
+import styleCssFixed from './style-fixed-css.js';
+import styleUnformattedCss from './style-unformatted-css.js';
+import styleUnformattedCssFixed from './style-unformatted-fixed-css.js';
+import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg_es6.js';
+
+/* eslint-disable one-var, prefer-destructuring */
+
+const ESCAPE_KEYCODE = 27,
+  FOCUS_TIMEOUT = 50;
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-dialog appear above the page and require the user's attention.
+ *
+ * @attr {Boolean} modal - Modal dialog restricts the user to take an action (no default close actions)
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {Boolean} unformatted - Unformatted dialog window, edge-to-edge fill for content
+ * @attr {Boolean} sm - Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+ * @attr {Boolean} md - Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+ * @attr {Boolean} onDark - Sets close icon to white for dark backgrounds
+ * @attr {Boolean} open - Sets state of dialog to open
+ * @prop {HTMLElement} triggerElement - The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
+ * @slot header - Text to display as the header of the modal
+ * @slot content - Injects content into the body of the modal
+ * @slot footer - Used for action options, e.g. buttons
+ * @function toggleViewable - toggles the 'open' property on the element
+ * @event toggle - Event fires when the element is closed
+ * @csspart close-button - adjust position of the close X icon in the dialog window
+ * @csspart dialog-overlay - apply CSS on the overlay of the dialog
+ * @csspart dialog - apply CSS to the entire dialog
+ * @csspart dialog-header - apply CSS to the header of the dialog
+ * @csspart dialog-content - apply CSS to the content of the dialog
+ * @csspart dialog-footer - apply CSS to the footer of the dialog
+ */
+
+export default class ComponentBase extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.dom = new DOMParser().parseFromString(closeIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.svg = this.dom.body.firstChild;
+
+    this.modal = false;
+    this.unformatted = false;
+  }
+
+  static get properties() {
+    return {
+      modal: { type: Boolean },
+      unformatted: {
+        type: Boolean,
+        reflect: true
+      },
+      open: {
+        type: Boolean,
+        reflect: true
+      },
+      triggerElement: {
+        attribute: false
+      }
+    };
+  }
+
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector("#footer"),
+      slotWrapper = this.shadowRoot.querySelector("#footerWrapper");
+
+    this.dialog = this.shadowRoot.getElementById('dialog');
+
+    if (!this.unformatted && slot.assignedNodes().length === 0) {
+      slotWrapper.classList.remove("dialog-footer");
+    }
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.openDialog();
+      } else {
+        this.closeDialog();
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.keydownEventHandler = this.handleKeydown.bind(this);
+    window.addEventListener('keydown', this.keydownEventHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('keydown', this.keydownEventHandler);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  openDialog() {
+    this.defaultTrigger = document.activeElement;
+
+    setTimeout(() => {
+      this.focus();
+
+      this.handleFocusLoss();
+    }, FOCUS_TIMEOUT);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeDialog() {
+    this.dispatchToggleEvent();
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  dispatchToggleEvent() {
+    // replace with Event constructor once IE support dropped
+    const toggleEvent = document.createEvent("HTMLEvents");
+
+    toggleEvent.initEvent("toggle", true, false);
+    this.dispatchEvent(toggleEvent);
+  }
+
+  /**
+   * @private
+   * @returns {void} Determines if dropdown bib should be closed on focus change.
+   */
+  handleFocusLoss() {
+    const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
+
+    const firstFocusableElement = focusable[0];
+    const lastFocusableElement = focusable[focusable.length - 1];
+
+    const closeButton = this.shadowRoot.getElementById('dialog-close');
+
+    lastFocusableElement.addEventListener('focusout', () => {
+      if (closeButton !== null) { // eslint-disable-line no-negated-condition
+        closeButton.focus();
+      } else {
+        firstFocusableElement.focus();
+      }
+    });
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleOverlayClick() {
+    if (this.open && !this.modal) {
+      this.handleCloseButtonClick();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleCloseButtonClick() {
+    this.open = false;
+  }
+
+  /**
+   * @private
+   * @param {KeyboardEvent} event - The keyboard event containing the key and keyCode.
+   * @returns {void}
+   */
+  handleKeydown({ key, keyCode }) {
+    if (this.open && !this.modal && (key === 'Escape' || keyCode === ESCAPE_KEYCODE)) {
+      this.open = false;
+    }
+  }
+
+  /**
+   * Focus the dialog.
+   * @private
+   * @returns {void}
+   */
+  focus() {
+    if (this.open) {
+      this.dialog.focus();
+    }
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      styleCssFixed,
+      styleUnformattedCss,
+      styleUnformattedCssFixed
+    ];
+  }
+
+  /**
+   * @private
+   * @returns {TemplateResult} - The close button template.
+   */
+  getCloseButton() {
+    return this.modal
+      ? html``
+      : html`
+        <button class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
+          <span>${this.svg}</span>
+          <span class="util_displayHiddenVisually">Close</span>
+        </button>
+      `;
+  }
+
+  render() {
+    const classes = {
+        'dialogOverlay': true,
+        'dialogOverlay--modal': this.modal && this.open,
+        'dialogOverlay--open': this.open,
+        'util_displayHidden': !this.open
+      },
+
+      contentClasses = {
+        'dialog': true,
+        'dialog--open': this.open
+      };
+
+    return html`
+      <div class="${classMap(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
+
+      <div role="dialog" id="dialog" class="${classMap(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
+        ${this.unformatted
+        ? html`
+          <slot name="content"></slot>
+          ${this.getCloseButton()}
+        `
+        : html`
+          <div class="dialog-header" part="dialog-header">
+            <h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
+              <slot name="header">Default header ...</slot>
+            </h1>
+            ${this.getCloseButton()}
+          </div>
+          <div class="dialog-content" part="dialog-content">
+            <slot name="content"></slot>
+          </div>
+          <div class="dialog-footer" id="footerWrapper" part="dialog-footer">
+            <slot name="footer" id="footer"></slot>
+          </div>
+        `
+      }
+      </div>
+    `;
+  }
+}

package/src/style-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:block;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header svg{fill:var(--ds-color-text-secondary-default, #626b79)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}.dialog-header--action:hover{cursor:pointer}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;

package/src/style-fixed-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`:host([fixed]) *,:host([fixed]) *:before,:host([fixed]) *:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){:host([fixed]) *,:host([fixed]) *:before,:host([fixed]) *:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}:host([fixed]) *:focus-visible{outline:0}:host([fixed]) *:focus-visible{outline:0}:host([fixed]) :focus:not(:focus-visible){outline:3px solid transparent}:host([fixed]) .heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}:host([fixed]) .heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}:host([fixed]) .heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}:host([fixed]) .heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}:host([fixed]) .heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}:host([fixed]) .heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([fixed]) .util_displayInline{display:inline}:host([fixed]) .util_displayInlineBlock{display:inline-block}:host([fixed]) .util_displayBlock{display:block}:host([fixed]) .util_displayFlex{display:flex}:host([fixed]) .util_displayHidden{display:none}:host([fixed]) .util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([fixed]) .util_inlinePaddingNone--left{padding-left:0}:host([fixed]) .util_inlinePaddingNone--right{padding-right:0}:host([fixed]) .util_inlineMarginNone--left{margin-left:0}:host([fixed]) .util_inlineMarginNone--right{margin-right:0}:host([fixed]) .util_inlinePadding25--left{padding-left:.125rem}:host([fixed]) .util_inlinePadding25--right{padding-right:.125rem}:host([fixed]) .util_inlineMargin25--left{margin-left:.125rem}:host([fixed]) .util_inlineMargin25--right{margin-right:.125rem}:host([fixed]) .util_inlinePadding50--left{padding-left:.25rem}:host([fixed]) .util_inlinePadding50--right{padding-right:.25rem}:host([fixed]) .util_inlineMargin50--left{margin-left:.25rem}:host([fixed]) .util_inlineMargin50--right{margin-right:.25rem}:host([fixed]) .util_inlinePadding100--left{padding-left:.5rem}:host([fixed]) .util_inlinePadding100--right{padding-right:.5rem}:host([fixed]) .util_inlineMargin100--left{margin-left:.5rem}:host([fixed]) .util_inlineMargin100--right{margin-right:.5rem}:host([fixed]) .util_inlinePadding200--left{padding-left:1rem}:host([fixed]) .util_inlinePadding200--right{padding-right:1rem}:host([fixed]) .util_inlineMargin200--left{margin-left:1rem}:host([fixed]) .util_inlineMargin200--right{margin-right:1rem}:host([fixed]) .util_inlinePadding300--left{padding-left:1.5rem}:host([fixed]) .util_inlinePadding300--right{padding-right:1.5rem}:host([fixed]) .util_inlineMargin300--left{margin-left:1.5rem}:host([fixed]) .util_inlineMargin300--right{margin-right:1.5rem}:host([fixed]) .util_inlinePadding400--left{padding-left:2rem}:host([fixed]) .util_inlinePadding400--right{padding-right:2rem}:host([fixed]) .util_inlineMargin400--left{margin-left:2rem}:host([fixed]) .util_inlineMargin400--right{margin-right:2rem}:host([fixed]) .util_inlinePadding500--left{padding-left:2.5rem}:host([fixed]) .util_inlinePadding500--right{padding-right:2.5rem}:host([fixed]) .util_inlineMargin500--left{margin-left:2.5rem}:host([fixed]) .util_inlineMargin500--right{margin-right:2.5rem}:host([fixed]) .util_inlinePadding600--left{padding-left:3rem}:host([fixed]) .util_inlinePadding600--right{padding-right:3rem}:host([fixed]) .util_inlineMargin600--left{margin-left:3rem}:host([fixed]) .util_inlineMargin600--right{margin-right:3rem}:host([fixed]) .util_inlinePadding700--left{padding-left:3.5rem}:host([fixed]) .util_inlinePadding700--right{padding-right:3.5rem}:host([fixed]) .util_inlineMargin700--left{margin-left:3.5rem}:host([fixed]) .util_inlineMargin700--right{margin-right:3.5rem}:host([fixed]) .util_inlinePadding800--left{padding-left:4rem}:host([fixed]) .util_inlinePadding800--right{padding-right:4rem}:host([fixed]) .util_inlineMargin800--left{margin-left:4rem}:host([fixed]) .util_inlineMargin800--right{margin-right:4rem}:host([fixed]) .util_inlinePadding900--left{padding-left:4.5rem}:host([fixed]) .util_inlinePadding900--right{padding-right:4.5rem}:host([fixed]) .util_inlineMargin900--left{margin-left:4.5rem}:host([fixed]) .util_inlineMargin900--right{margin-right:4.5rem}:host([fixed]) .util_inlinePadding1000--left{padding-left:5rem}:host([fixed]) .util_inlinePadding1000--right{padding-right:5rem}:host([fixed]) .util_inlineMargin1000--left{margin-left:5rem}:host([fixed]) .util_inlineMargin1000--right{margin-right:5rem}:host([fixed]) .util_stackPaddingNone--top{padding-top:0}:host([fixed]) .util_stackPaddingNone--bottom{padding-bottom:0}:host([fixed]) .util_stackMarginNone--top{margin-top:0}:host([fixed]) .util_stackMarginNone--bottom{margin-bottom:0}:host([fixed]) .util_stackPadding25--top{padding-top:.125rem}:host([fixed]) .util_stackPadding25--bottom{padding-bottom:.125rem}:host([fixed]) .util_stackMargin25--top{margin-top:.125rem}:host([fixed]) .util_stackMargin25--bottom{margin-bottom:.125rem}:host([fixed]) .util_stackPadding50--top{padding-top:.25rem}:host([fixed]) .util_stackPadding50--bottom{padding-bottom:.25rem}:host([fixed]) .util_stackMargin50--top{margin-top:.25rem}:host([fixed]) .util_stackMargin50--bottom{margin-bottom:.25rem}:host([fixed]) .util_stackPadding100--top{padding-top:.5rem}:host([fixed]) .util_stackPadding100--bottom{padding-bottom:.5rem}:host([fixed]) .util_stackMargin100--top{margin-top:.5rem}:host([fixed]) .util_stackMargin100--bottom{margin-bottom:.5rem}:host([fixed]) .util_stackPadding200--top{padding-top:1rem}:host([fixed]) .util_stackPadding200--bottom{padding-bottom:1rem}:host([fixed]) .util_stackMargin200--top{margin-top:1rem}:host([fixed]) .util_stackMargin200--bottom{margin-bottom:1rem}:host([fixed]) .util_stackPadding300--top{padding-top:1.5rem}:host([fixed]) .util_stackPadding300--bottom{padding-bottom:1.5rem}:host([fixed]) .util_stackMargin300--top{margin-top:1.5rem}:host([fixed]) .util_stackMargin300--bottom{margin-bottom:1.5rem}:host([fixed]) .util_stackPadding400--top{padding-top:2rem}:host([fixed]) .util_stackPadding400--bottom{padding-bottom:2rem}:host([fixed]) .util_stackMargin400--top{margin-top:2rem}:host([fixed]) .util_stackMargin400--bottom{margin-bottom:2rem}:host([fixed]) .util_stackPadding500--top{padding-top:2.5rem}:host([fixed]) .util_stackPadding500--bottom{padding-bottom:2.5rem}:host([fixed]) .util_stackMargin500--top{margin-top:2.5rem}:host([fixed]) .util_stackMargin500--bottom{margin-bottom:2.5rem}:host([fixed]) .util_stackPadding600--top{padding-top:3rem}:host([fixed]) .util_stackPadding600--bottom{padding-bottom:3rem}:host([fixed]) .util_stackMargin600--top{margin-top:3rem}:host([fixed]) .util_stackMargin600--bottom{margin-bottom:3rem}:host([fixed]) .util_stackPadding700--top{padding-top:3.5rem}:host([fixed]) .util_stackPadding700--bottom{padding-bottom:3.5rem}:host([fixed]) .util_stackMargin700--top{margin-top:3.5rem}:host([fixed]) .util_stackMargin700--bottom{margin-bottom:3.5rem}:host([fixed]) .util_stackPadding800--top{padding-top:4rem}:host([fixed]) .util_stackPadding800--bottom{padding-bottom:4rem}:host([fixed]) .util_stackMargin800--top{margin-top:4rem}:host([fixed]) .util_stackMargin800--bottom{margin-bottom:4rem}:host([fixed]) .util_stackPadding900--top{padding-top:4.5rem}:host([fixed]) .util_stackPadding900--bottom{padding-bottom:4.5rem}:host([fixed]) .util_stackMargin900--top{margin-top:4.5rem}:host([fixed]) .util_stackMargin900--bottom{margin-bottom:4.5rem}:host([fixed]) .util_stackPadding1000--top{padding-top:5rem}:host([fixed]) .util_stackPadding1000--bottom{padding-bottom:5rem}:host([fixed]) .util_stackMargin1000--top{margin-top:5rem}:host([fixed]) .util_stackMargin1000--bottom{margin-bottom:5rem}:host([fixed]) :host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}:host([fixed]) .dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}:host([fixed]) .dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}:host([fixed]) .dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}:host([fixed]) .dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:block;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){:host([fixed]) .dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}:host([fixed]) .dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){:host([fixed]) .dialog{max-width:986px}}:host([fixed]) .dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}:host([fixed]) .dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) .dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}:host([fixed]) .dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}:host([fixed]) .dialog-header svg{fill:var(--ds-color-text-secondary-default, #626b79)}:host([fixed]) .dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}:host([fixed]) .dialog-header--action:hover{cursor:pointer}:host([fixed]) ::slotted([slot=content]){position:relative}:host([fixed]) :host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) :host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([fixed]) :host([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}:host([fixed]) :host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([fixed]) :host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([fixed]) :host([sm]) .dialog{max-width:740px}}:host([fixed]) :host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([fixed]) :host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([fixed]) :host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([fixed]) :host([sm][lg]) .dialog,:host([fixed]) :host([md][lg]) .dialog{max-height:80%}}:host([fixed]) :host([sm][lg]) .dialog,:host([fixed]) :host([md][lg]) .dialog{max-height:90%}:host([fixed]) :host([unformatted]) .dialog{padding:0}`;

package/src/style-unformatted-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;

package/src/style-unformatted-fixed-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`:host([fixed]) [unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) [unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;