@cds/core 5.2.1 → 5.4.1

package/internal-components/panel/panel.element.js

@@ -1,44 +1,2 @@
-import { LitElement, html } from 'lit-element';
-import { baseStyles } from '@cds/core/internal';
-import { styles } from './panel.element.css.js';
-export const CdsInternalPanelTagName = 'cds-internal-panel';
-/**
- *
- * ```typescript
- * import '@cds/core/internal-components/panel/register.js';
- * ```
- *
- * ```html
- * <cds-internal-panel>
- *  // content
- * </cds-internal-panel>
- * ```
- *
- * @beta
- * @element cds-internal-panel
- * @slot - Content slot for the content inside the panel
- * @cssprop --width
- * @cssprop --height
- * @cssprop --color
- * @cssprop --overflow
- * @cssprop --overflow-x
- * @cssprop --overflow-y
- * @cssprop --background
- * @cssprop --border
- * @cssprop --border-radius
- * @cssprop --padding
- * @cssprop --box-shadow
- */
-export class CdsInternalPanel extends LitElement {
-    static get styles() {
-        return [baseStyles, styles];
-    }
-    render() {
-        return html `
-      <div class="private-host">
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-//# sourceMappingURL=panel.element.js.map
+import{LitElement as t,html as e}from"lit";import{baseStyles as s}from"@cds/core/internal";import r from"./panel.element.scss.js";const n="cds-internal-panel";class o extends t{static get styles(){return[s,r]}render(){return e`<div class="private-host"><slot></slot></div>`}}export{o as CdsInternalPanel,n as CdsInternalPanelTagName};
+//# sourceMappingURL=panel.element.js.map

package/internal-components/panel/panel.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.element.js","sourceRoot":"","sources":["../../../../src/internal-components/panel/panel.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { LitElement, html } from 'lit-element';\nimport { baseStyles } from '@cds/core/internal';\nimport { styles } from './panel.element.css.js';\n\nexport const CdsInternalPanelTagName = 'cds-internal-panel';\n\n/**\n *\n * ```typescript\n * import '@cds/core/internal-components/panel/register.js';\n * ```\n *\n * ```html\n * <cds-internal-panel>\n *  // content\n * </cds-internal-panel>\n * ```\n *\n * @beta\n * @element cds-internal-panel\n * @slot - Content slot for the content inside the panel\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @cssprop --overflow\n * @cssprop --overflow-x\n * @cssprop --overflow-y\n * @cssprop --background\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --box-shadow\n */\nexport class CdsInternalPanel extends LitElement {\n  static get styles() {\n    return [baseStyles, styles];\n  }\n\n  render() {\n    return html`\n      <div class=\"private-host\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"panel.element.js","sources":["../../../../src/internal-components/panel/panel.element.ts"],"sourcesContent":null,"names":["CdsInternalPanelTagName","CdsInternalPanel","LitElement","styles","baseStyles","[object Object]","html"],"mappings":"kIAGY,MAACA,EAA0B,qBA2BhC,MAAMC,UAAyBC,EAClCC,oBACI,MAAO,CAACC,EAAYD,GAExBE,SACI,OAAOC,CAAK"}

package/internal-components/panel/panel.element.scss.js

@@ -0,0 +1,2 @@
+import{css as r}from"lit";var o=r`:host{--width:100%;--height:100%;--color:initial;--overflow:visible;--overflow-x:visible;--overflow-y:visible;--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid initial;--border-radius:var(--cds-alias-object-border-radius-100, calc((4 / var(--cds-global-base, 20)) * 1rem));--padding:var(--cds-global-space-0, calc((0 / var(--cds-global-base, 20)) * 1rem));--box-shadow:none;width:var(--width);height:var(--height)}.private-host{overflow:var(--overflow);overflow-x:var(--overflow-x);overflow-y:var(--overflow-y);width:var(--width);height:var(--height);background:var(--background);border:var(--border);border-radius:var(--border-radius);padding:var(--padding);box-shadow:var(--box-shadow);color:var(--color)}`;export default o;
+//# sourceMappingURL=panel.element.scss.js.map

package/internal-components/panel/panel.element.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/internal-components/panel/register.js

@@ -1,9 +1,2 @@
-/*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { registerElementSafely } from '@cds/core/internal';
-import { CdsInternalPanelTagName, CdsInternalPanel } from './panel.element.js';
-registerElementSafely(CdsInternalPanelTagName, CdsInternalPanel);
-//# sourceMappingURL=register.js.map
+import{registerElementSafely as e}from"@cds/core/internal";import{CdsInternalPanelTagName as r,CdsInternalPanel as m}from"./panel.element.js";e(r,m);
+//# sourceMappingURL=register.js.map

package/internal-components/panel/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../../src/internal-components/panel/register.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE/E,qBAAqB,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["/*\n * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsInternalPanelTagName, CdsInternalPanel } from './panel.element.js';\n\nregisterElementSafely(CdsInternalPanelTagName, CdsInternalPanel);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cds-internal-panel': CdsInternalPanel;\n  }\n}\n"]}
+{"version":3,"file":"register.js","sources":["../../../../src/internal-components/panel/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsInternalPanelTagName","CdsInternalPanel"],"mappings":"8IAOAA,EAAsBC,EAAyBC"}

package/list/list.css

@@ -93,3 +93,13 @@ ul[cds-layout~=horizontal] li,
 ol[cds-layout~=horizontal] li {
   list-style-position: inside;
 }
+
+dl[cds-list] {
+  margin: 0;
+}
+dl[cds-list] dt {
+  font-weight: bold;
+}
+dl[cds-list] dd {
+  margin-left: 0;
+}

package/list/list.min.css

@@ -1 +1 @@
-@charset "UTF-8";ul[cds-list=unstyled]{padding-left:0!important;margin:0!important;list-style:"​"!important;list-style-position:inside!important}[cds-list]{color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048))}ol[cds-list]{list-style-type:decimal;list-style-position:outside;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem));margin:0}ul[cds-list]:not([cds-list=unstyled]){list-style-type:disc;list-style-position:outside;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem));margin:0}ul[cds-list=disc]{list-style-type:disc}ul[cds-list=circle]{list-style-type:circle}ul[cds-list=square]{list-style-type:square}ol[cds-list=decimal]{list-style-type:decimal}ol[cds-list=decimal-leading-zero]{list-style-type:decimal-leading-zero}ol[cds-list=lower-alpha]{list-style-type:lower-alpha}ol[cds-list=lower-latin]{list-style-type:lower-latin}ol[cds-list=lower-roman]{list-style-type:lower-roman}ol[cds-list=upper-alpha]{list-style-type:upper-alpha}ol[cds-list=upper-latin]{list-style-type:upper-latin}ol[cds-list=upper-roman]{list-style-type:upper-roman}ul[cds-list=unstyled]>li ol,ul[cds-list=unstyled]>li>ul:not([cds-list=unstyled]){margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))}ul[cds-list=unstyled]>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))!important}ol[cds-list]>li>ul[cds-list=unstyled],ul:not([cds-list=unstyled])>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))!important}ol[cds-list]>li>ol[cds-list]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))}ol[cds-layout~=horizontal] li,ul[cds-layout~=horizontal] li{list-style-position:inside}
+@charset "UTF-8";ul[cds-list=unstyled]{padding-left:0!important;margin:0!important;list-style:"​"!important;list-style-position:inside!important}[cds-list]{color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048))}ol[cds-list]{list-style-type:decimal;list-style-position:outside;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem));margin:0}ul[cds-list]:not([cds-list=unstyled]){list-style-type:disc;list-style-position:outside;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem));margin:0}ul[cds-list=disc]{list-style-type:disc}ul[cds-list=circle]{list-style-type:circle}ul[cds-list=square]{list-style-type:square}ol[cds-list=decimal]{list-style-type:decimal}ol[cds-list=decimal-leading-zero]{list-style-type:decimal-leading-zero}ol[cds-list=lower-alpha]{list-style-type:lower-alpha}ol[cds-list=lower-latin]{list-style-type:lower-latin}ol[cds-list=lower-roman]{list-style-type:lower-roman}ol[cds-list=upper-alpha]{list-style-type:upper-alpha}ol[cds-list=upper-latin]{list-style-type:upper-latin}ol[cds-list=upper-roman]{list-style-type:upper-roman}ul[cds-list=unstyled]>li ol,ul[cds-list=unstyled]>li>ul:not([cds-list=unstyled]){margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))}ul[cds-list=unstyled]>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))!important}ol[cds-list]>li>ul[cds-list=unstyled],ul:not([cds-list=unstyled])>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))!important}ol[cds-list]>li>ol[cds-list]{margin-left:0;padding-left:var(--cds-global-space-9, calc((24 / var(--cds-global-base, 20)) * 1rem))}ol[cds-layout~=horizontal] li,ul[cds-layout~=horizontal] li{list-style-position:inside}dl[cds-list]{margin:0}dl[cds-list] dt{font-weight:700}dl[cds-list] dd{margin-left:0}

package/modal/index.js

@@ -1,11 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-export * from './modal-header.element.js';
-export * from './modal-header-actions.element.js';
-export * from './modal-content.element.js';
-export * from './modal-actions.element.js';
-export * from './modal.element.js';
-//# sourceMappingURL=index.js.map
+export{CdsModalHeader}from"./modal-header.element.js";export{CdsModalHeaderActions}from"./modal-header-actions.element.js";export{CdsModalContent}from"./modal-content.element.js";export{CdsModalActions}from"./modal-actions.element.js";export{CdsModal}from"./modal.element.js";import"@cds/core/internal";import"lit";
+//# sourceMappingURL=index.js.map

package/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC","sourcesContent":["/*\n * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nexport * from './modal-header.element.js';\nexport * from './modal-header-actions.element.js';\nexport * from './modal-content.element.js';\nexport * from './modal-actions.element.js';\nexport * from './modal.element.js';\n"]}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/modal/modal-actions.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Web component modal actions to be used inside modal.
  *
@@ -24,6 +24,6 @@ import { LitElement } from 'lit-element';
  */
 export declare class CdsModalActions extends LitElement {
     connectedCallback(): void;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/modal/modal-actions.element.js

@@ -1,45 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { baseStyles } from '@cds/core/internal';
-import { html, LitElement } from 'lit-element';
-/**
- * Web component modal actions to be used inside modal.
- *
- * ```typescript
- * import '@cds/core/modal/register.js';
- * ```
- *
- * ```html
- * <cds-modal>
- *   <cds-modal-header>
- *      <h3 cds-text="title">My Modal</h3>
- *   </cds-modal-header>
- *   <cds-modal-content>
- *     <p>Lorem Ipsum</p>
- *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
- * </cds-modal>
- * ```
- *
- * @element cds-modal-actions
- */
-export class CdsModalActions extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('slot', 'modal-actions');
-    }
-    render() {
-        return this.hasAttribute('cds-layout')
-            ? html `<slot></slot>`
-            : html `<div cds-layout="horizontal gap:sm align:right"><slot></slot></div>`;
-    }
-    static get styles() {
-        return [baseStyles];
-    }
-}
-//# sourceMappingURL=modal-actions.element.js.map
+import{baseStyles as t}from"@cds/core/internal";import{LitElement as s,html as e}from"lit";class o extends s{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","modal-actions")}render(){return this.hasAttribute("cds-layout")?e`<slot></slot>`:e`<div cds-layout="horizontal gap:sm align:right"><slot></slot></div>`}static get styles(){return[t]}}export{o as CdsModalActions};
+//# sourceMappingURL=modal-actions.element.js.map

package/modal/modal-actions.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-actions.element.js","sourceRoot":"","sources":["../../../src/modal/modal-actions.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAC7C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA,eAAe;YACrB,CAAC,CAAC,IAAI,CAAA,qEAAqE,CAAC;IAChF,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACF","sourcesContent":["/*\n * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit-element';\n\n/**\n * Web component modal actions to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-actions\n */\nexport class CdsModalActions extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('slot', 'modal-actions');\n  }\n\n  render() {\n    return this.hasAttribute('cds-layout')\n      ? html`<slot></slot>`\n      : html`<div cds-layout=\"horizontal gap:sm align:right\"><slot></slot></div>`;\n  }\n\n  static get styles() {\n    return [baseStyles];\n  }\n}\n"]}
+{"version":3,"file":"modal-actions.element.js","sources":["../../../src/modal/modal-actions.element.ts"],"sourcesContent":null,"names":["CdsModalActions","LitElement","[object Object]","super","connectedCallback","this","setAttribute","hasAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAwBC,EACjCC,oBACIC,MAAMC,oBACNC,KAAKC,aAAa,OAAQ,iBAE9BJ,SACI,OAAOG,KAAKE,aAAa,cACnBC,CAAK,gBACLA,CAAK,sEAEfC,oBACI,MAAO,CAACC"}

package/modal/modal-content.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Web component modal content to be used inside modal.
  *
@@ -23,8 +23,11 @@ import { LitElement } from 'lit-element';
  * @element cds-modal-content
  */
 export declare class CdsModalContent extends LitElement {
-    protected createRenderRoot(): Element | ShadowRoot;
+    static get shadowRootOptions(): {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+    };
     protected tabIndexAttr: number;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/modal/modal-content.element.js

@@ -1,55 +1,2 @@
-/*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { __decorate } from "tslib";
-import { baseStyles, internalProperty } from '@cds/core/internal';
-import { html, LitElement } from 'lit-element';
-/**
- * Web component modal content to be used inside modal.
- *
- * ```typescript
- * import '@cds/core/modal/register.js';
- * ```
- *
- * ```html
- * <cds-modal size='lg'>
- *   <cds-modal-header>
- *      <h3 cds-text="title">My Modal</h3>
- *   </cds-modal-header>
- *   <cds-modal-content>
- *      <p>Lorem Ipsum</p>
- *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
- * </cds-modal>
- * ```
- *
- * @element cds-modal-content
- */
-export class CdsModalContent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.tabIndexAttr = 0; // don't override native prop as it stops native focus behavior
-    }
-    // renderRoot needs delegatesFocus so that focus can cross the shadowDOM
-    // inside modal-content with a tabindex of -1. we need the tabindex so a
-    // modal's content can scroll if it needs to.
-    createRenderRoot() {
-        return this.attachShadow({ mode: 'open', delegatesFocus: true });
-    }
-    render() {
-        return this.hasAttribute('cds-layout')
-            ? html `<slot></slot>`
-            : html `<div cds-layout="vertical gap:lg p-y:xs"><slot></slot></div>`;
-    }
-    static get styles() {
-        return [baseStyles];
-    }
-}
-__decorate([
-    internalProperty({ type: Number, attribute: 'tabindex', reflect: true })
-], CdsModalContent.prototype, "tabIndexAttr", void 0);
-//# sourceMappingURL=modal-content.element.js.map
+import{__decorate as t}from"tslib";import{baseStyles as e,state as r}from"@cds/core/internal";import{LitElement as o,html as s}from"lit";class i extends o{constructor(){super(...arguments),this.tabIndexAttr=0}static get shadowRootOptions(){return{...super.shadowRootOptions,delegatesFocus:!0}}render(){return this.hasAttribute("cds-layout")?s`<slot></slot>`:s`<div cds-layout="vertical gap:lg p-y:xs"><slot></slot></div>`}static get styles(){return[e]}}t([r({type:Number,attribute:"tabindex",reflect:!0})],i.prototype,"tabIndexAttr",void 0);export{i as CdsModalContent};
+//# sourceMappingURL=modal-content.element.js.map

package/modal/modal-content.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.element.js","sourceRoot":"","sources":["../../../src/modal/modal-content.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QAQsF,iBAAY,GAAG,CAAC,CAAC,CAAC,+DAA+D;IAWvK,CAAC;IAlBC,wEAAwE;IACxE,wEAAwE;IACxE,6CAA6C;IACnC,gBAAgB;QACxB,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IACnE,CAAC;IAID,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA,eAAe;YACrB,CAAC,CAAC,IAAI,CAAA,8DAA8D,CAAC;IACzE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACF;AAX2E;IAAzE,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAA4B","sourcesContent":["/*\n * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { baseStyles, internalProperty } from '@cds/core/internal';\nimport { html, LitElement } from 'lit-element';\n\n/**\n * Web component modal content to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal size='lg'>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *      <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-content\n */\nexport class CdsModalContent extends LitElement {\n  // renderRoot needs delegatesFocus so that focus can cross the shadowDOM\n  // inside modal-content with a tabindex of -1. we need the tabindex so a\n  // modal's content can scroll if it needs to.\n  protected createRenderRoot(): Element | ShadowRoot {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  @internalProperty({ type: Number, attribute: 'tabindex', reflect: true }) protected tabIndexAttr = 0; // don't override native prop as it stops native focus behavior\n\n  render() {\n    return this.hasAttribute('cds-layout')\n      ? html`<slot></slot>`\n      : html`<div cds-layout=\"vertical gap:lg p-y:xs\"><slot></slot></div>`;\n  }\n\n  static get styles() {\n    return [baseStyles];\n  }\n}\n"]}
+{"version":3,"file":"modal-content.element.js","sources":["../../../src/modal/modal-content.element.ts"],"sourcesContent":null,"names":["CdsModalContent","LitElement","[object Object]","super","arguments","this","tabIndexAttr","shadowRootOptions","delegatesFocus","hasAttribute","html","styles","baseStyles","__decorate","state","type","Number","attribute","reflect","prototype"],"mappings":"yIA+BO,MAAMA,UAAwBC,EACjCC,cACIC,SAASC,WACTC,KAAKC,aAAe,EAKxBC,+BACI,MAAO,IAAKJ,MAAMI,kBAAmBC,gBAAgB,GAEzDN,SACI,OAAOG,KAAKI,aAAa,cACnBC,CAAK,gBACLA,CAAK,+DAEfC,oBACI,MAAO,CAACC,IAGhBC,EAAW,CACPC,EAAM,CAAEC,KAAMC,OAAQC,UAAW,WAAYC,SAAS,KACvDlB,EAAgBmB,UAAW,oBAAgB"}

package/modal/modal-header-actions.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Web component modal header actions to be used inside modal.
  *
@@ -24,6 +24,6 @@ import { LitElement } from 'lit-element';
  */
 export declare class CdsModalHeaderActions extends LitElement {
     connectedCallback(): void;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/modal/modal-header-actions.element.js

@@ -1,43 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { baseStyles } from '@cds/core/internal';
-import { html, LitElement } from 'lit-element';
-/**
- * Web component modal header actions to be used inside modal.
- *
- * ```typescript
- * import '@cds/core/modal/register.js';
- * ```
- *
- * ```html
- * <cds-modal>
- *   <cds-modal-header>
- *      <h3 cds-text="title">My Modal</h3>
- *   </cds-modal-header>
- *   <cds-modal-content>
- *     <p>Lorem Ipsum</p>
- *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
- * </cds-modal>
- * ```
- *
- * @element cds-modal-header-actions
- */
-export class CdsModalHeaderActions extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('slot', 'modal-header-actions');
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    static get styles() {
-        return [baseStyles];
-    }
-}
-//# sourceMappingURL=modal-header-actions.element.js.map
+import{baseStyles as t}from"@cds/core/internal";import{LitElement as e,html as r}from"lit";class s extends e{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","modal-header-actions")}render(){return r`<slot></slot>`}static get styles(){return[t]}}export{s as CdsModalHeaderActions};
+//# sourceMappingURL=modal-header-actions.element.js.map

package/modal/modal-header-actions.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header-actions.element.js","sourceRoot":"","sources":["../../../src/modal/modal-header-actions.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IACnD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACF","sourcesContent":["/*\n * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit-element';\n\n/**\n * Web component modal header actions to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-header-actions\n */\nexport class CdsModalHeaderActions extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('slot', 'modal-header-actions');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static get styles() {\n    return [baseStyles];\n  }\n}\n"]}
+{"version":3,"file":"modal-header-actions.element.js","sources":["../../../src/modal/modal-header-actions.element.ts"],"sourcesContent":null,"names":["CdsModalHeaderActions","LitElement","[object Object]","super","connectedCallback","this","setAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAA8BC,EACvCC,oBACIC,MAAMC,oBACNC,KAAKC,aAAa,OAAQ,wBAE9BJ,SACI,OAAOK,CAAK,gBAEhBC,oBACI,MAAO,CAACC"}

package/modal/modal-header.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 /**
  * Web component modal header to be used inside modal.
  *
@@ -24,6 +24,6 @@ import { LitElement } from 'lit-element';
  */
 export declare class CdsModalHeader extends LitElement {
     connectedCallback(): void;
-    render(): import("lit-element").TemplateResult;
-    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResultGroup[];
 }

package/modal/modal-header.element.js

@@ -1,43 +1,2 @@
-/*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { baseStyles } from '@cds/core/internal';
-import { html, LitElement } from 'lit-element';
-/**
- * Web component modal header to be used inside modal.
- *
- * ```typescript
- * import '@cds/core/modal/register.js';
- * ```
- *
- * ```html
- * <cds-modal>
- *   <cds-modal-header>
- *      <h3 cds-text="title">My Modal</h3>
- *   </cds-modal-header>
- *   <cds-modal-content>
- *     <p>Lorem Ipsum</p>
- *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
- * </cds-modal>
- * ```
- *
- * @element cds-modal-header
- */
-export class CdsModalHeader extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('slot', 'modal-header');
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    static get styles() {
-        return [baseStyles];
-    }
-}
-//# sourceMappingURL=modal-header.element.js.map
+import{baseStyles as t}from"@cds/core/internal";import{LitElement as e,html as r}from"lit";class s extends e{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","modal-header")}render(){return r`<slot></slot>`}static get styles(){return[t]}}export{s as CdsModalHeader};
+//# sourceMappingURL=modal-header.element.js.map

package/modal/modal-header.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.element.js","sourceRoot":"","sources":["../../../src/modal/modal-header.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAC5C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACF","sourcesContent":["/*\n * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit-element';\n\n/**\n * Web component modal header to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-header\n */\nexport class CdsModalHeader extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('slot', 'modal-header');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static get styles() {\n    return [baseStyles];\n  }\n}\n"]}
+{"version":3,"file":"modal-header.element.js","sources":["../../../src/modal/modal-header.element.ts"],"sourcesContent":null,"names":["CdsModalHeader","LitElement","[object Object]","super","connectedCallback","this","setAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAuBC,EAChCC,oBACIC,MAAMC,oBACNC,KAAKC,aAAa,OAAQ,gBAE9BJ,SACI,OAAOK,CAAK,gBAEhBC,oBACI,MAAO,CAACC"}

package/modal/modal.element.d.ts

@@ -35,9 +35,12 @@ import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
  * @cssprop --background
  * @cssprop --box-shadow
  * @cssprop --width
+ * @cssprop --content-overflow - set as { x, y }. take care when customizing because overflow settings can have unintended side effects.
+ * @cssprop --max-height - sets hard limit on height of modal
+ * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode
  */
 export declare class CdsModal extends CdsInternalOverlay implements Animatable {
-    static get styles(): import("lit-element").CSSResult[];
+    static get styles(): import("lit").CSSResultGroup[];
     i18n: {
         closeButtonAriaLabel: string;
         contentStart: string;
@@ -50,5 +53,5 @@ export declare class CdsModal extends CdsInternalOverlay implements Animatable {
     size: 'default' | 'sm' | 'lg' | 'xl';
     toggleCloseButton(): void;
     updated(props: Map<string, any>): void;
-    render(): import("lit-element").TemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/modal/modal.element.js

@@ -1,126 +1,2 @@
-/*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-import { __decorate } from "tslib";
-import { html } from 'lit-element';
-import { animate, AnimationModalEnterName, i18n, I18nService, property, reverseAnimation, } from '@cds/core/internal';
-import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
-import { appendCloseButton, removeCloseButton } from '@cds/core/internal-components/close-button';
-import { styles } from './modal.element.css.js';
-/**
- * Web component modal.
- *
- * ```typescript
- * import '@cds/core/modal/register.js';
- * ```
- *
- * ```html
- * <cds-modal>
- *   <cds-modal-header>
- *      <h3 cds-text="title">My Modal</h3>
- *   </cds-modal-header>
- *   <cds-modal-content>
- *     <p>Lorem Ipsum</p>
- *   </cds-modal-content>
- *   <cds-modal-actions>
- *       <cds-button>Ok</cds-button>
- *   </cds-modal-actions>
- * </cds-modal>
- * ```
- *
- * @element cds-modal
- * @slot
- * @slot cds-modal-content
- * @slot cds-modal-header
- * @slot cds-modal-actions
- * @event closeChange - notify when the user has clicked the close button
- * @cssprop --backdrop-background - inherited from the internal overlay component
- * @cssprop --layered-backdrop-background - inherited from the internal overlay component
- * @cssprop --border-color
- * @cssprop --border-width
- * @cssprop --border-radius
- * @cssprop --background
- * @cssprop --box-shadow
- * @cssprop --width
- */
-let CdsModal = class CdsModal extends CdsInternalOverlay {
-    constructor() {
-        super(...arguments);
-        this.i18n = I18nService.keys.modal;
-        /** If false, the modal will not render the close button.  */
-        this.closable = true;
-    }
-    static get styles() {
-        return [...super.styles, styles];
-    }
-    toggleCloseButton() {
-        const closeButtonAttrs = [
-            ['cds-layout', 'align:top'],
-            ['slot', 'close-button'],
-            ['aria-label', this.i18n.closeButtonAriaLabel],
-            ['icon-size', '24'],
-        ];
-        if (this.closable) {
-            appendCloseButton(this, closeButtonAttrs, () => this.closeOverlay('close-button-click'));
-        }
-        else {
-            removeCloseButton(this);
-        }
-    }
-    // TODO: Document what's going on here with the role dialog and aria modal true
-    // Also document why we have to keep everything in the light Dom
-    updated(props) {
-        if (props.has('closable')) {
-            this.toggleCloseButton();
-        }
-        super.update(props);
-    }
-    // modal-body requires a tab index so it can be scrolled
-    render() {
-        return html `
-      ${this.backdropTemplate}
-      <div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl">
-        <div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div>
-        <div class="modal-content" cds-layout="vertical gap:md gap@md:lg align:stretch">
-          <div cds-layout="horizontal gap:md wrap:none align:vertical-center p-x:lg p-t:lg">
-            <div>
-              <slot name="modal-header"></slot>
-            </div>
-            <div cds-layout="align:right">
-              <slot name="modal-header-actions"></slot>
-            </div>
-            <slot name="close-button"></slot>
-          </div>
-          <div class="modal-body" tabindex="0" aria-label="${this.i18n.contentBox}" cds-layout="p-x:lg">
-            <slot></slot>
-          </div>
-          <div cds-layout="align-stretch p-x:lg p-b:lg">
-            <slot name="modal-actions"></slot>
-          </div>
-        </div>
-        <div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div>
-      </div>
-    `;
-    }
-};
-__decorate([
-    i18n()
-], CdsModal.prototype, "i18n", void 0);
-__decorate([
-    property({ type: Boolean })
-], CdsModal.prototype, "closable", void 0);
-__decorate([
-    property({ type: String })
-], CdsModal.prototype, "size", void 0);
-CdsModal = __decorate([
-    animate({
-        hidden: {
-            true: reverseAnimation(AnimationModalEnterName),
-            false: AnimationModalEnterName,
-        },
-    })
-], CdsModal);
-export { CdsModal };
-//# sourceMappingURL=modal.element.js.map
+import{__decorate as t}from"tslib";import{html as o}from"lit";import{I18nService as e,i18n as l,property as s,animate as i,reverseAnimation as a,AnimationModalEnterName as d}from"@cds/core/internal";import{CdsInternalOverlay as n}from"@cds/core/internal-components/overlay";import{appendCloseButton as r,removeCloseButton as c}from"@cds/core/internal-components/close-button";import p from"./modal.element.scss.js";let m=class extends n{constructor(){super(...arguments),this.i18n=e.keys.modal,this.closable=!0}static get styles(){return[...super.styles,p]}toggleCloseButton(){const t=[["cds-layout","align:top"],["slot","close-button"],["aria-label",this.i18n.closeButtonAriaLabel],["icon-size","24"]];this.closable?r(this,t,(()=>this.closeOverlay("close-button-click"))):c(this)}updated(t){t.has("closable")&&this.toggleCloseButton(),super.update(t)}render(){return o`${this.backdropTemplate}<div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl"><div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div><div class="modal-content" cds-layout="vertical gap:md gap@md:lg align:stretch"><div cds-layout="horizontal gap:md wrap:none align:vertical-center p-x:lg p-t:lg"><div><slot name="modal-header"></slot></div><div cds-layout="align:right"><slot name="modal-header-actions"></slot></div><slot name="close-button"></slot></div><div class="modal-body" tabindex="0" aria-label="${this.i18n.contentBox}" cds-layout="p-x:lg"><slot></slot></div><div cds-layout="align-stretch p-x:lg p-b:lg"><slot name="modal-actions"></slot></div></div><div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div></div>`}};t([l()],m.prototype,"i18n",void 0),t([s({type:Boolean})],m.prototype,"closable",void 0),t([s({type:String})],m.prototype,"size",void 0),m=t([i({hidden:{true:a(d),false:d}})],m);export{m as CdsModal};
+//# sourceMappingURL=modal.element.js.map

package/modal/modal.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.element.js","sourceRoot":"","sources":["../../../src/modal/modal.element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EACL,OAAO,EAEP,uBAAuB,EACvB,IAAI,EACJ,WAAW,EAEX,QAAQ,EACR,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAOH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,kBAAkB;IAAhD;;QAKU,SAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;QAEtC,6DAA6D;QAE7D,aAAQ,GAAG,IAAI,CAAC;IAwDlB,CAAC;IAhEC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,CAAC;IAYD,iBAAiB;QACf,MAAM,gBAAgB,GAAyB;YAC7C,CAAC,YAAY,EAAE,WAAW,CAAC;YAC3B,CAAC,MAAM,EAAE,cAAc,CAAC;YACxB,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC;YAC9C,CAAC,WAAW,EAAE,IAAI,CAAC;SACpB,CAAC;QACF,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC;SAC1F;aAAM;YACL,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,+EAA+E;IAC/E,gEAAgE;IAChE,OAAO,CAAC,KAAuB;QAC7B,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,wDAAwD;IACxD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,gBAAgB;;uDAE0B,IAAI,CAAC,IAAI,CAAC,YAAY;;;;;;;;;;;6DAWhB,IAAI,CAAC,IAAI,CAAC,UAAU;;;;;;;uDAO1B,IAAI,CAAC,IAAI,CAAC,UAAU;;KAEtE,CAAC;IACJ,CAAC;CACF,CAAA;AA5DS;IAAP,IAAI,EAAE;sCAA+B;AAItC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACZ;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACU;AAb1B,QAAQ;IANpB,OAAO,CAAC;QACP,MAAM,EAAE;YACN,IAAI,EAAE,gBAAgB,CAAC,uBAAuB,CAAC;YAC/C,KAAK,EAAE,uBAAuB;SAC/B;KACF,CAAC;GACW,QAAQ,CAiEpB;SAjEY,QAAQ","sourcesContent":["/*\n * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { html } from 'lit-element';\nimport {\n  animate,\n  Animatable,\n  AnimationModalEnterName,\n  i18n,\n  I18nService,\n  HTMLAttributeTuple,\n  property,\n  reverseAnimation,\n} from '@cds/core/internal';\nimport { CdsInternalOverlay } from '@cds/core/internal-components/overlay';\nimport { appendCloseButton, removeCloseButton } from '@cds/core/internal-components/close-button';\nimport { styles } from './modal.element.css.js';\n\n/**\n * Web component modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal\n * @slot\n * @slot cds-modal-content\n * @slot cds-modal-header\n * @slot cds-modal-actions\n * @event closeChange - notify when the user has clicked the close button\n * @cssprop --backdrop-background - inherited from the internal overlay component\n * @cssprop --layered-backdrop-background - inherited from the internal overlay component\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --box-shadow\n * @cssprop --width\n */\n@animate({\n  hidden: {\n    true: reverseAnimation(AnimationModalEnterName),\n    false: AnimationModalEnterName,\n  },\n})\nexport class CdsModal extends CdsInternalOverlay implements Animatable {\n  static get styles() {\n    return [...super.styles, styles];\n  }\n\n  @i18n() i18n = I18nService.keys.modal;\n\n  /** If false, the modal will not render the close button.  */\n  @property({ type: Boolean })\n  closable = true;\n\n  /** Sets the overall height and width of the modal and icon based on value */\n  @property({ type: String })\n  size: 'default' | 'sm' | 'lg' | 'xl';\n\n  toggleCloseButton() {\n    const closeButtonAttrs: HTMLAttributeTuple[] = [\n      ['cds-layout', 'align:top'],\n      ['slot', 'close-button'],\n      ['aria-label', this.i18n.closeButtonAriaLabel],\n      ['icon-size', '24'],\n    ];\n    if (this.closable) {\n      appendCloseButton(this, closeButtonAttrs, () => this.closeOverlay('close-button-click'));\n    } else {\n      removeCloseButton(this);\n    }\n  }\n\n  // TODO: Document what's going on here with the role dialog and aria modal true\n  // Also document why we have to keep everything in the light Dom\n  updated(props: Map<string, any>) {\n    if (props.has('closable')) {\n      this.toggleCloseButton();\n    }\n    super.update(props);\n  }\n\n  // modal-body requires a tab index so it can be scrolled\n  render() {\n    return html`\n      ${this.backdropTemplate}\n      <div class=\"modal-dialog private-host\" tabindex=\"-1\" cds-layout=\"m:md m@md:xl\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"modal-content\" cds-layout=\"vertical gap:md gap@md:lg align:stretch\">\n          <div cds-layout=\"horizontal gap:md wrap:none align:vertical-center p-x:lg p-t:lg\">\n            <div>\n              <slot name=\"modal-header\"></slot>\n            </div>\n            <div cds-layout=\"align:right\">\n              <slot name=\"modal-header-actions\"></slot>\n            </div>\n            <slot name=\"close-button\"></slot>\n          </div>\n          <div class=\"modal-body\" tabindex=\"0\" aria-label=\"${this.i18n.contentBox}\" cds-layout=\"p-x:lg\">\n            <slot></slot>\n          </div>\n          <div cds-layout=\"align-stretch p-x:lg p-b:lg\">\n            <slot name=\"modal-actions\"></slot>\n          </div>\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.element.ts"],"sourcesContent":null,"names":["CdsModal","CdsInternalOverlay","[object Object]","super","arguments","this","i18n","I18nService","keys","modal","closable","styles","closeButtonAttrs","closeButtonAriaLabel","appendCloseButton","closeOverlay","removeCloseButton","props","has","toggleCloseButton","update","html","backdropTemplate","contentStart","contentBox","contentEnd","__decorate","prototype","property","type","Boolean","String","animate","hidden","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"+ZAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,SAASC,WACTC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAEpBC,oBACI,MAAO,IAAIR,MAAMQ,OAAQA,GAE7BT,oBACI,MAAMU,EAAmB,CACrB,CAAC,aAAc,aACf,CAAC,OAAQ,gBACT,CAAC,aAAcP,KAAKC,KAAKO,sBACzB,CAAC,YAAa,OAEdR,KAAKK,SACLI,EAAkBT,KAAMO,GAAkB,IAAMP,KAAKU,aAAa,wBAGlEC,EAAkBX,MAK1BH,QAAQe,GACAA,EAAMC,IAAI,aACVb,KAAKc,oBAEThB,MAAMiB,OAAOH,GAGjBf,SACI,OAAOmB,CAAK,GACZhB,KAAKiB,+IAE0CjB,KAAKC,KAAKiB,wYAWJlB,KAAKC,KAAKkB,+LAOhBnB,KAAKC,KAAKmB,2BAKjEC,EAAW,CACPpB,KACDN,EAAS2B,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB9B,EAAS2B,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClB/B,EAAS2B,UAAW,YAAQ,GAC/B3B,EAAW0B,EAAW,CAClBM,EAAQ,CACJC,OAAQ,CACJC,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBpC"}