@cds/core 5.7.1 → 6.0.0-beta.3

package/accordion/accordion-content.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var o=a`:host{--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-font-size-3, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:inherit;--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));width:100%;contain:inherit}.private-host{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);background:var(--background);padding:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem)) var(--cds-global-space-11,calc(36 / var(--cds-global-base,20) * 1rem))}`;export{o as default};
+import{css as o}from"lit";var r=o`:host{--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--font-weight:inherit;--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));width:100%;contain:inherit}.private-host{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);background:var(--background);padding:var(--cds-global-space-6,.75rem) var(--cds-global-space-11,2.25rem)}`;export{r as default};
 //# sourceMappingURL=accordion-content.element.scss.js.map

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

@@ -32,6 +32,8 @@ import { LitElement } from 'lit';
  * @cssprop --icon-transform
  */
 export declare class CdsAccordionHeader extends LitElement {
+    /** @private */
+    expanded: boolean;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];

package/accordion/accordion-header.element.js

@@ -1,2 +1,2 @@
-import{createId as e,baseStyles as t}from"@cds/core/internal";import{LitElement as s,html as r}from"lit";import c from"./accordion-header.element.scss.js";class i extends s{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","accordion-header"),this.id||(this.id=e())}render(){return r`<div class="private-host" cds-layout="horizontal gap:md align:vertical-center wrap:none"><cds-icon class="accordion-angle" shape="angle" size="9" inner-offset="2"></cds-icon><div cds-layout="align:stretch"><slot></slot></div></div>`}static get styles(){return[t,c]}}export{i as CdsAccordionHeader};
+import{__decorate as t}from"tslib";import{createId as e,baseStyles as r,state as o}from"@cds/core/internal";import{LitElement as s,html as d}from"lit";import a from"./accordion-header.element.scss.js";class n extends s{constructor(){super(...arguments);this.expanded=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("slot","accordion-header"),this.id||(this.id=e())}render(){return d`<div class="private-host" cds-layout="horizontal gap:sm align:vertical-center wrap:none"><cds-button-expand .expanded="${this.expanded}" readonly="readonly" action="vertical"></cds-button-expand><div cds-layout="align:stretch"><slot></slot></div></div>`}static get styles(){return[r,a]}}t([o()],n.prototype,"expanded",void 0);export{n as CdsAccordionHeader};
 //# sourceMappingURL=accordion-header.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-header.element.js","sources":["../../../src/accordion/accordion-header.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { baseStyles, createId } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport styles from './accordion-header.element.scss';\n/**\n * Web component accordion to be used inside an accordion\n *\n * ```typescript\n * import '@cds/core/accordion/register.js';\n * ```\n *\n * ```html\n * <cds-accordion>\n *   <cds-accordion-panel expanded>\n *     <cds-accordion-header>Item 1</cds-accordion-header>\n *     <cds-accordion-content>Content 1</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel>\n *     <cds-accordion-header>Item 2</cds-accordion-header>\n *     <cds-accordion-content>Content 2</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel disabled>\n *     <cds-accordion-header>Item 3</cds-accordion-header>\n *     <cds-accordion-content>Content 3</cds-accordion-content>\n *   </cds-accordion-panel>\n * </cds-accordion>\n * ```\n *\n * @element cds-accordion-header\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --background\n * @cssprop --icon-color\n * @cssprop --icon-transform\n */\nexport class CdsAccordionHeader extends LitElement {\n    connectedCallback() {\n        super.connectedCallback();\n        this.setAttribute('slot', 'accordion-header');\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal gap:md align:vertical-center wrap:none\">\n      <cds-icon class=\"accordion-angle\" shape=\"angle\" size=\"9\" inner-offset=\"2\"></cds-icon>\n      <div cds-layout=\"align:stretch\"><slot></slot></div>\n    </div>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n"],"names":["CdsAccordionHeader","LitElement","connectedCallback","super","this","setAttribute","id","createId","render","html","styles","baseStyles"],"mappings":"2JAwCO,MAAMA,UAA2BC,EACpCC,oBACIC,MAAMD,oBACNE,KAAKC,aAAa,OAAQ,oBACrBD,KAAKE,KACNF,KAAKE,GAAKC,KAGlBC,SACI,OAAOC,CAAK,0OAKLC,oBACP,MAAO,CAACC,EAAYD"}
+{"version":3,"file":"accordion-header.element.js","sources":["../../../src/accordion/accordion-header.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { baseStyles, createId, state } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport styles from './accordion-header.element.scss';\n/**\n * Web component accordion to be used inside an accordion\n *\n * ```typescript\n * import '@cds/core/accordion/register.js';\n * ```\n *\n * ```html\n * <cds-accordion>\n *   <cds-accordion-panel expanded>\n *     <cds-accordion-header>Item 1</cds-accordion-header>\n *     <cds-accordion-content>Content 1</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel>\n *     <cds-accordion-header>Item 2</cds-accordion-header>\n *     <cds-accordion-content>Content 2</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel disabled>\n *     <cds-accordion-header>Item 3</cds-accordion-header>\n *     <cds-accordion-content>Content 3</cds-accordion-content>\n *   </cds-accordion-panel>\n * </cds-accordion>\n * ```\n *\n * @element cds-accordion-header\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --background\n * @cssprop --icon-color\n * @cssprop --icon-transform\n */\nexport class CdsAccordionHeader extends LitElement {\n    constructor() {\n        super(...arguments);\n        /** @private */\n        this.expanded = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.setAttribute('slot', 'accordion-header');\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal gap:sm align:vertical-center wrap:none\">\n      <cds-button-expand .expanded=${this.expanded} readonly action=\"vertical\"></cds-button-expand>\n      <div cds-layout=\"align:stretch\"><slot></slot></div>\n    </div>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    state()\n], CdsAccordionHeader.prototype, \"expanded\", void 0);\n"],"names":["CdsAccordionHeader","LitElement","constructor","super","this","expanded","connectedCallback","setAttribute","id","createId","render","html","styles","baseStyles","__decorate","state","prototype"],"mappings":"yMAyCO,MAAMA,UAA2BC,EACpCC,cACIC,oBAEAC,KAAKC,UAAW,EAEpBC,oBACIH,MAAMG,oBACNF,KAAKG,aAAa,OAAQ,oBACrBH,KAAKI,KACNJ,KAAKI,GAAKC,KAGlBC,SACI,OAAOC,CAAK,0HACiBP,KAAKC,gIAI3BO,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,KACDf,EAAmBgB,UAAW,gBAAY"}

package/accordion/accordion-header.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var r=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--icon-color:var(--color);--icon-transform:rotate(90deg);cursor:pointer;width:100%;contain:inherit}.private-host{background:var(--background);padding:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem));cursor:inherit;border:0;font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color)}:host([_nfg]){overflow:hidden}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff))}cds-icon{--color:var(--icon-color);cursor:inherit;transform:var(--icon-transform);transition:transform var(--animation-duration)}`;export{r as default};
+import{css as o}from"lit";var r=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--padding:calc(var(--cds-global-space-5, 0.5rem) + var(--cds-global-space-2, 0.125rem));cursor:pointer;width:100%;contain:inherit}.private-host{background:var(--background);padding:var(--padding);cursor:inherit;border:0;font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color)}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff))}`;export{r as default};
 //# sourceMappingURL=accordion-header.element.scss.js.map

package/accordion/accordion-panel.element.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { Animatable, EventEmitter } from '@cds/core/internal';
+import { EventEmitter } from '@cds/core/internal';
 /**
  * Web component accordion panel to be used inside an accordion
  *
@@ -32,7 +32,7 @@ import { Animatable, EventEmitter } from '@cds/core/internal';
  * @cssprop --animation-duration
  * @cssprop --animation-easing
  */
-export declare class CdsAccordionPanel extends LitElement implements Animatable {
+export declare class CdsAccordionPanel extends LitElement {
     cdsMotion: string;
     cdsMotionChange: EventEmitter<string>;
     disabled: boolean;

package/accordion/accordion-panel.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as d,property as i,event as a,querySlot as n,animate as s,AnimationAccordionPanelOpenName as r,reverseAnimation as c}from"@cds/core/internal";import p from"./accordion-panel.element.scss.js";let l=class extends e{constructor(){super(...arguments);this.cdsMotion="on",this.disabled=!1,this.expanded=!1}toggle(){this.expandedChange.emit(!this.expanded)}updated(t){super.updated(t),this.content&&this.header&&(this.content.setAttribute("aria-labelledby",this.header.id),this.header.setAttribute("aria-controls",this.content.id))}render(){return o`<div class="private-host" role="group"><button class="accordion-header-button" cds-layout="horizontal align:vertical-center gap:md" type="button" @click="${()=>this.toggle()}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-expanded="${this.expanded}" focusable><slot name="accordion-header"></slot></button><div aria-hidden="${!this.expanded}" class="accordion-content"><slot name="accordion-content"></slot></div></div>`}static get styles(){return[d,p]}};t([i({type:String})],l.prototype,"cdsMotion",void 0),t([a()],l.prototype,"cdsMotionChange",void 0),t([i({type:Boolean})],l.prototype,"disabled",void 0),t([i({type:Boolean})],l.prototype,"expanded",void 0),t([n("cds-accordion-header")],l.prototype,"header",void 0),t([n("cds-accordion-content")],l.prototype,"content",void 0),t([a()],l.prototype,"expandedChange",void 0),l=t([s({expanded:{true:r,false:c(r)}})],l);export{l as CdsAccordionPanel};
+import{__decorate as e}from"tslib";import{LitElement as t,html as o}from"lit";import{baseStyles as d,property as i,event as a,querySlot as n,animate as s,AnimationAccordionPanelOpenName as r,reverseAnimation as c}from"@cds/core/internal";import p from"./accordion-panel.element.scss.js";let l=class extends t{constructor(){super(...arguments);this.cdsMotion="on",this.disabled=!1,this.expanded=!1}toggle(){this.expandedChange.emit(!this.expanded)}updated(e){super.updated(e),this.content&&this.header&&(this.content.setAttribute("aria-labelledby",this.header.id),this.header.setAttribute("aria-controls",this.content.id),this.header.expanded=this.expanded)}render(){return o`<div class="private-host" role="group"><button class="accordion-header-button" cds-layout="horizontal align:vertical-center gap:sm" type="button" @click="${()=>this.toggle()}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-expanded="${this.expanded}" focusable><slot name="accordion-header"></slot></button><div aria-hidden="${!this.expanded}" class="accordion-content"><slot name="accordion-content"></slot></div></div>`}static get styles(){return[d,p]}};e([i({type:String})],l.prototype,"cdsMotion",void 0),e([a()],l.prototype,"cdsMotionChange",void 0),e([i({type:Boolean})],l.prototype,"disabled",void 0),e([i({type:Boolean})],l.prototype,"expanded",void 0),e([n("cds-accordion-header")],l.prototype,"header",void 0),e([n("cds-accordion-content")],l.prototype,"content",void 0),e([a()],l.prototype,"expandedChange",void 0),l=e([s({expanded:{true:r,false:c(r)}})],l);export{l as CdsAccordionPanel};
 //# sourceMappingURL=accordion-panel.element.js.map

package/accordion/accordion-panel.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-panel.element.js","sources":["../../../src/accordion/accordion-panel.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { AnimationAccordionPanelOpenName, reverseAnimation, animate, baseStyles, event, property, querySlot, } from '@cds/core/internal';\nimport styles from './accordion-panel.element.scss';\n/**\n * Web component accordion panel to be used inside an accordion\n *\n * ```typescript\n * import '@cds/core/accordion/register.js';\n * ```\n *\n * ```html\n * <cds-accordion>\n *   <cds-accordion-panel expanded>\n *     <cds-accordion-header>Item 1</cds-accordion-header>\n *     <cds-accordion-content>Content 1</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel>\n *     <cds-accordion-header>Item 2</cds-accordion-header>\n *     <cds-accordion-content>Content 2</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel disabled>\n *     <cds-accordion-header>Item 3</cds-accordion-header>\n *     <cds-accordion-content>Content 3</cds-accordion-content>\n *   </cds-accordion-panel>\n * </cds-accordion>\n * ```\n *\n * @element cds-accordion-panel\n * @slot\n * @slot cds-accordion-header\n * @slot cds-accordion-content\n * @event expandedChange - notify when the user has clicked the panel header\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n */\nlet CdsAccordionPanel = class CdsAccordionPanel extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.disabled = false;\n        this.expanded = false;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    updated(props) {\n        super.updated(props);\n        if (this.content && this.header) {\n            this.content.setAttribute('aria-labelledby', this.header.id);\n            this.header.setAttribute('aria-controls', this.content.id);\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" role=\"group\">\n      <button\n        class=\"accordion-header-button\"\n        cds-layout=\"horizontal align:vertical-center gap:md\"\n        type=\"button\"\n        @click=\"${() => this.toggle()}\"\n        ?disabled=\"${this.disabled}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-expanded=\"${this.expanded}\"\n        focusable\n      >\n        <slot name=\"accordion-header\"></slot>\n      </button>\n      <div aria-hidden=\"${!this.expanded}\" class=\"accordion-content\">\n        <slot name=\"accordion-content\"></slot>\n      </div>\n    </div>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsAccordionPanel.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsAccordionPanel.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAccordionPanel.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAccordionPanel.prototype, \"expanded\", void 0);\n__decorate([\n    querySlot('cds-accordion-header')\n], CdsAccordionPanel.prototype, \"header\", void 0);\n__decorate([\n    querySlot('cds-accordion-content')\n], CdsAccordionPanel.prototype, \"content\", void 0);\n__decorate([\n    event()\n], CdsAccordionPanel.prototype, \"expandedChange\", void 0);\nCdsAccordionPanel = __decorate([\n    animate({\n        expanded: {\n            true: AnimationAccordionPanelOpenName,\n            false: reverseAnimation(AnimationAccordionPanelOpenName),\n        },\n    })\n], CdsAccordionPanel);\nexport { CdsAccordionPanel };\n"],"names":["CdsAccordionPanel","LitElement","constructor","super","this","cdsMotion","disabled","expanded","toggle","expandedChange","emit","updated","props","content","header","setAttribute","id","render","html","styles","baseStyles","__decorate","property","type","String","prototype","event","Boolean","querySlot","animate","true","AnimationAccordionPanelOpenName","false","reverseAnimation"],"mappings":"+RAyCG,IAACA,EAAoB,cAAgCC,EACpDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,UAAW,EAChBF,KAAKG,UAAW,EAEpBC,SACIJ,KAAKK,eAAeC,MAAMN,KAAKG,UAEnCI,QAAQC,GACJT,MAAMQ,QAAQC,GACVR,KAAKS,SAAWT,KAAKU,SACrBV,KAAKS,QAAQE,aAAa,kBAAmBX,KAAKU,OAAOE,IACzDZ,KAAKU,OAAOC,aAAa,gBAAiBX,KAAKS,QAAQG,KAG/DC,SACI,OAAOC,CAAK,6JAKF,IAAMd,KAAKI,wBACRJ,KAAKE,4BACDF,KAAKE,4BACLF,KAAKG,wFAKHH,KAAKG,yFAKjBY,oBACP,MAAO,CAACC,EAAYD,KAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxB,EAAkByB,UAAW,iBAAa,GAC7CJ,EAAW,CACPK,KACD1B,EAAkByB,UAAW,uBAAmB,GACnDJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,WAClB3B,EAAkByB,UAAW,gBAAY,GAC5CJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,WAClB3B,EAAkByB,UAAW,gBAAY,GAC5CJ,EAAW,CACPO,EAAU,yBACX5B,EAAkByB,UAAW,cAAU,GAC1CJ,EAAW,CACPO,EAAU,0BACX5B,EAAkByB,UAAW,eAAW,GAC3CJ,EAAW,CACPK,KACD1B,EAAkByB,UAAW,sBAAkB,GAClDzB,EAAoBqB,EAAW,CAC3BQ,EAAQ,CACJtB,SAAU,CACNuB,KAAMC,EACNC,MAAOC,EAAiBF,OAGjC/B"}
+{"version":3,"file":"accordion-panel.element.js","sources":["../../../src/accordion/accordion-panel.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { AnimationAccordionPanelOpenName, reverseAnimation, animate, baseStyles, event, property, querySlot, } from '@cds/core/internal';\nimport styles from './accordion-panel.element.scss';\n/**\n * Web component accordion panel to be used inside an accordion\n *\n * ```typescript\n * import '@cds/core/accordion/register.js';\n * ```\n *\n * ```html\n * <cds-accordion>\n *   <cds-accordion-panel expanded>\n *     <cds-accordion-header>Item 1</cds-accordion-header>\n *     <cds-accordion-content>Content 1</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel>\n *     <cds-accordion-header>Item 2</cds-accordion-header>\n *     <cds-accordion-content>Content 2</cds-accordion-content>\n *   </cds-accordion-panel>\n *   <cds-accordion-panel disabled>\n *     <cds-accordion-header>Item 3</cds-accordion-header>\n *     <cds-accordion-content>Content 3</cds-accordion-content>\n *   </cds-accordion-panel>\n * </cds-accordion>\n * ```\n *\n * @element cds-accordion-panel\n * @slot\n * @slot cds-accordion-header\n * @slot cds-accordion-content\n * @event expandedChange - notify when the user has clicked the panel header\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n */\nlet CdsAccordionPanel = class CdsAccordionPanel extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.disabled = false;\n        this.expanded = false;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    updated(props) {\n        super.updated(props);\n        if (this.content && this.header) {\n            this.content.setAttribute('aria-labelledby', this.header.id);\n            this.header.setAttribute('aria-controls', this.content.id);\n            this.header.expanded = this.expanded;\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" role=\"group\">\n      <button\n        class=\"accordion-header-button\"\n        cds-layout=\"horizontal align:vertical-center gap:sm\"\n        type=\"button\"\n        @click=\"${() => this.toggle()}\"\n        ?disabled=\"${this.disabled}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-expanded=\"${this.expanded}\"\n        focusable\n      >\n        <slot name=\"accordion-header\"></slot>\n      </button>\n      <div aria-hidden=\"${!this.expanded}\" class=\"accordion-content\">\n        <slot name=\"accordion-content\"></slot>\n      </div>\n    </div>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsAccordionPanel.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsAccordionPanel.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAccordionPanel.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAccordionPanel.prototype, \"expanded\", void 0);\n__decorate([\n    querySlot('cds-accordion-header')\n], CdsAccordionPanel.prototype, \"header\", void 0);\n__decorate([\n    querySlot('cds-accordion-content')\n], CdsAccordionPanel.prototype, \"content\", void 0);\n__decorate([\n    event()\n], CdsAccordionPanel.prototype, \"expandedChange\", void 0);\nCdsAccordionPanel = __decorate([\n    animate({\n        expanded: {\n            true: AnimationAccordionPanelOpenName,\n            false: reverseAnimation(AnimationAccordionPanelOpenName),\n        },\n    })\n], CdsAccordionPanel);\nexport { CdsAccordionPanel };\n"],"names":["CdsAccordionPanel","LitElement","constructor","super","this","cdsMotion","disabled","expanded","toggle","expandedChange","emit","updated","props","content","header","setAttribute","id","render","html","styles","baseStyles","__decorate","property","type","String","prototype","event","Boolean","querySlot","animate","true","AnimationAccordionPanelOpenName","false","reverseAnimation"],"mappings":"+RAyCG,IAACA,EAAoB,cAAgCC,EACpDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,UAAW,EAChBF,KAAKG,UAAW,EAEpBC,SACIJ,KAAKK,eAAeC,MAAMN,KAAKG,UAEnCI,QAAQC,GACJT,MAAMQ,QAAQC,GACVR,KAAKS,SAAWT,KAAKU,SACrBV,KAAKS,QAAQE,aAAa,kBAAmBX,KAAKU,OAAOE,IACzDZ,KAAKU,OAAOC,aAAa,gBAAiBX,KAAKS,QAAQG,IACvDZ,KAAKU,OAAOP,SAAWH,KAAKG,UAGpCU,SACI,OAAOC,CAAK,6JAKF,IAAMd,KAAKI,wBACRJ,KAAKE,4BACDF,KAAKE,4BACLF,KAAKG,wFAKHH,KAAKG,yFAKjBY,oBACP,MAAO,CAACC,EAAYD,KAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxB,EAAkByB,UAAW,iBAAa,GAC7CJ,EAAW,CACPK,KACD1B,EAAkByB,UAAW,uBAAmB,GACnDJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,WAClB3B,EAAkByB,UAAW,gBAAY,GAC5CJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,WAClB3B,EAAkByB,UAAW,gBAAY,GAC5CJ,EAAW,CACPO,EAAU,yBACX5B,EAAkByB,UAAW,cAAU,GAC1CJ,EAAW,CACPO,EAAU,0BACX5B,EAAkByB,UAAW,eAAW,GAC3CJ,EAAW,CACPK,KACD1B,EAAkByB,UAAW,sBAAkB,GAClDzB,EAAoBqB,EAAW,CAC3BQ,EAAQ,CACJtB,SAAU,CACNuB,KAAMC,EACNC,MAAOC,EAAiBF,OAGjC/B"}

package/accordion/accordion-panel.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));contain:inherit}.accordion-header-button{background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0));border:0;padding:0;width:100%}.accordion-content{overflow-y:hidden}:host([cds-motion=off]) .accordion-content{height:0}:host([cds-motion=off][expanded]) .accordion-content{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:auto!important;transform:none}:host([expanded]) .accordion-content{box-shadow:0 calc(-1*var(--border-width)) 0 0 var(--border-color);margin-top:var(--border-width)}:host([expanded]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff));--icon-transform:rotate(180deg)}:host([disabled]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));cursor:not-allowed}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));contain:inherit}.accordion-header-button{background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0));border:0;padding:0;width:100%}.accordion-content{overflow-y:hidden}:host([cds-motion=off]) .accordion-content{height:0}:host([cds-motion=off][expanded]) .accordion-content{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:auto!important;transform:none}:host([expanded]) .accordion-content{box-shadow:0 calc(-1*var(--border-width)) 0 0 var(--border-color);margin-top:var(--border-width)}:host([expanded]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));cursor:not-allowed}`;export{a as default};
 //# sourceMappingURL=accordion-panel.element.scss.js.map

package/accordion/accordion.element.scss.js

@@ -1,2 +1,2 @@
-import{css as r}from"lit";var o=r`:host{--border-color:var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 / var(--cds-global-base, 20) * 1rem));width:100%}::slotted(cds-accordion-panel){border:var(--border-width) solid var(--border-color);border-bottom:none}::slotted(cds-accordion-panel:first-child){border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}::slotted(cds-accordion-panel:last-child){border-bottom:var(--border-width) solid var(--border-color);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}`;export{o as default};
+import{css as r}from"lit";var o=r`:host{--border-color:var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);width:100%}::slotted(cds-accordion-panel){border:var(--border-width) solid var(--border-color);border-bottom:none}::slotted(cds-accordion-panel:first-child){border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}::slotted(cds-accordion-panel:last-child){border-bottom:var(--border-width) solid var(--border-color);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}`;export{o as default};
 //# sourceMappingURL=accordion.element.scss.js.map

package/accordion/register.d.ts

@@ -3,6 +3,7 @@ import { CdsAccordionPanel } from './accordion-panel.element.js';
 import { CdsAccordionContent } from './accordion-content.element.js';
 import { CdsAccordionHeader } from './accordion-header.element.js';
 import '@cds/core/icon/register.js';
+import '@cds/core/button-expand/register.js';
 declare global {
     interface HTMLElementTagNameMap {
         'cds-accordion': CdsAccordion;

package/accordion/register.js

@@ -1,2 +1,2 @@
-import{registerElementSafely as o,ClarityMotion as c,AnimationAccordionPanelOpenName as r,AnimationAccordionPanelOpenConfig as e}from"@cds/core/internal";import{CdsAccordion as n}from"./accordion.element.js";import{CdsAccordionPanel as i}from"./accordion-panel.element.js";import{CdsAccordionContent as d}from"./accordion-content.element.js";import{CdsAccordionHeader as s}from"./accordion-header.element.js";import{ClarityIcons as m}from"@cds/core/icon/icon.service.js";import{angleIcon as t}from"@cds/core/icon/shapes/angle.js";import"@cds/core/icon/register.js";o("cds-accordion",n),o("cds-accordion-panel",i),o("cds-accordion-content",d),o("cds-accordion-header",s),m.addIcons(t),c.add(r,e);
+import{registerElementSafely as o,ClarityMotion as r,AnimationAccordionPanelOpenName as c,AnimationAccordionPanelOpenConfig as e}from"@cds/core/internal";import{CdsAccordion as n}from"./accordion.element.js";import{CdsAccordionPanel as d}from"./accordion-panel.element.js";import{CdsAccordionContent as t}from"./accordion-content.element.js";import{CdsAccordionHeader as i}from"./accordion-header.element.js";import"@cds/core/icon/register.js";import"@cds/core/button-expand/register.js";o("cds-accordion",n),o("cds-accordion-panel",d),o("cds-accordion-content",t),o("cds-accordion-header",i),r.add(c,e);
 //# sourceMappingURL=register.js.map

package/accordion/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/accordion/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { ClarityMotion, AnimationAccordionPanelOpenName, AnimationAccordionPanelOpenConfig, registerElementSafely, } from '@cds/core/internal';\nimport { CdsAccordion } from './accordion.element.js';\nimport { CdsAccordionPanel } from './accordion-panel.element.js';\nimport { CdsAccordionContent } from './accordion-content.element.js';\nimport { CdsAccordionHeader } from './accordion-header.element.js';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { angleIcon } from '@cds/core/icon/shapes/angle.js';\nimport '@cds/core/icon/register.js';\nregisterElementSafely('cds-accordion', CdsAccordion);\nregisterElementSafely('cds-accordion-panel', CdsAccordionPanel);\nregisterElementSafely('cds-accordion-content', CdsAccordionContent);\nregisterElementSafely('cds-accordion-header', CdsAccordionHeader);\nClarityIcons.addIcons(angleIcon);\nClarityMotion.add(AnimationAccordionPanelOpenName, AnimationAccordionPanelOpenConfig);\n"],"names":["registerElementSafely","CdsAccordion","CdsAccordionPanel","CdsAccordionContent","CdsAccordionHeader","ClarityIcons","addIcons","angleIcon","ClarityMotion","add","AnimationAccordionPanelOpenName","AnimationAccordionPanelOpenConfig"],"mappings":"qjBAaAA,EAAsB,gBAAiBC,GACvCD,EAAsB,sBAAuBE,GAC7CF,EAAsB,wBAAyBG,GAC/CH,EAAsB,uBAAwBI,GAC9CC,EAAaC,SAASC,GACtBC,EAAcC,IAAIC,EAAiCC"}
+{"version":3,"file":"register.js","sources":["../../../src/accordion/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { ClarityMotion, AnimationAccordionPanelOpenName, AnimationAccordionPanelOpenConfig, registerElementSafely, } from '@cds/core/internal';\nimport { CdsAccordion } from './accordion.element.js';\nimport { CdsAccordionPanel } from './accordion-panel.element.js';\nimport { CdsAccordionContent } from './accordion-content.element.js';\nimport { CdsAccordionHeader } from './accordion-header.element.js';\nimport '@cds/core/icon/register.js';\nimport '@cds/core/button-expand/register.js';\nregisterElementSafely('cds-accordion', CdsAccordion);\nregisterElementSafely('cds-accordion-panel', CdsAccordionPanel);\nregisterElementSafely('cds-accordion-content', CdsAccordionContent);\nregisterElementSafely('cds-accordion-header', CdsAccordionHeader);\nClarityMotion.add(AnimationAccordionPanelOpenName, AnimationAccordionPanelOpenConfig);\n"],"names":["registerElementSafely","CdsAccordion","CdsAccordionPanel","CdsAccordionContent","CdsAccordionHeader","ClarityMotion","add","AnimationAccordionPanelOpenName","AnimationAccordionPanelOpenConfig"],"mappings":"weAYAA,EAAsB,gBAAiBC,GACvCD,EAAsB,sBAAuBE,GAC7CF,EAAsB,wBAAyBG,GAC/CH,EAAsB,uBAAwBI,GAC9CC,EAAcC,IAAIC,EAAiCC"}

package/alert/alert-actions.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{assignSlotNames as s,baseStyles as o,state as i,querySlotAll as n}from"@cds/core/internal";import a from"./alert-actions.element.scss.js";class p extends e{constructor(){super(...arguments);this.type="light"}render(){return r`<div class="private-host" cds-layout="horizontal wrap:none gap:sm align:vertical-center"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),s([this,"actions"])}updated(t){super.updated(t),this.buttons.forEach((t=>{t.status="banner"===this.type?"inverse":"primary",t.size="banner"===this.type?"sm":"md",t.style.setProperty("--color","inherit")}))}static get styles(){return[o,a]}}t([i({type:String,reflect:!0})],p.prototype,"type",void 0),t([n("cds-button")],p.prototype,"buttons",void 0);export{p as CdsAlertActions};
+import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{assignSlotNames as s,baseStyles as o,state as i,querySlotAll as n}from"@cds/core/internal";import a from"./alert-actions.element.scss.js";class p extends e{constructor(){super(...arguments);this.type="light"}render(){return r`<div class="private-host" cds-layout="horizontal wrap:none gap:xs align:vertical-center"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),s([this,"actions"])}updated(t){super.updated(t),this.buttons.forEach((t=>{t.status="banner"===this.type?"inverse":"primary",t.size="banner"===this.type?"sm":"md",t.style.setProperty("--color","inherit")}))}static get styles(){return[o,a]}}t([i({type:String,reflect:!0})],p.prototype,"type",void 0),t([n("cds-button")],p.prototype,"buttons",void 0);export{p as CdsAlertActions};
 //# sourceMappingURL=alert-actions.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-actions.element.js","sources":["../../../src/alert/alert-actions.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { assignSlotNames, baseStyles, querySlotAll, state } from '@cds/core/internal';\nimport styles from './alert-actions.element.scss';\n/**\n * Web component alert actions to be used inside default and banner alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n * <cds-alert>\n *   Lorem ipsum dolor sit amet\n *   <cds-alert-actions>\n *     <cds-button>Fix</cds-button>\n *   </cds-alert-actions>\n * </cds-alert>\n * ```\n *\n * @element cds-alert-actions\n * @slot\n * @cssprop --action-text-color\n * @cssprop --action-hover-text-color\n * @cssprop --action-font-size\n */\nexport class CdsAlertActions extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * @type {default | banner | light}\n         * @private\n         */\n        this.type = 'light';\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal wrap:none gap:sm align:vertical-center\">\n      <slot></slot>\n    </div>`;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        assignSlotNames([this, 'actions']);\n    }\n    updated(props) {\n        super.updated(props);\n        this.buttons.forEach(b => {\n            b.status = this.type === 'banner' ? 'inverse' : 'primary';\n            b.size = this.type === 'banner' ? 'sm' : 'md';\n            b.style.setProperty('--color', 'inherit');\n        });\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlertActions.prototype, \"type\", void 0);\n__decorate([\n    querySlotAll('cds-button')\n], CdsAlertActions.prototype, \"buttons\", void 0);\n"],"names":["CdsAlertActions","LitElement","constructor","super","this","type","render","html","connectedCallback","assignSlotNames","updated","props","buttons","forEach","b","status","size","style","setProperty","styles","baseStyles","__decorate","state","String","reflect","prototype","querySlotAll"],"mappings":"+NA+BO,MAAMA,UAAwBC,EACjCC,cACIC,oBAKAC,KAAKC,KAAO,QAEhBC,SACI,OAAOC,CAAK,+GAIhBC,oBACIL,MAAMK,oBACNC,EAAgB,CAACL,KAAM,YAE3BM,QAAQC,GACJR,MAAMO,QAAQC,GACdP,KAAKQ,QAAQC,SAAQC,IACjBA,EAAEC,OAAuB,WAAdX,KAAKC,KAAoB,UAAY,UAChDS,EAAEE,KAAqB,WAAdZ,KAAKC,KAAoB,KAAO,KACzCS,EAAEG,MAAMC,YAAY,UAAW,cAG5BC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAM,CAAEjB,KAAMkB,OAAQC,SAAS,KAChCxB,EAAgByB,UAAW,YAAQ,GACtCJ,EAAW,CACPK,EAAa,eACd1B,EAAgByB,UAAW,eAAW"}
+{"version":3,"file":"alert-actions.element.js","sources":["../../../src/alert/alert-actions.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { assignSlotNames, baseStyles, querySlotAll, state } from '@cds/core/internal';\nimport styles from './alert-actions.element.scss';\n/**\n * Web component alert actions to be used inside default and banner alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n * <cds-alert>\n *   Lorem ipsum dolor sit amet\n *   <cds-alert-actions>\n *     <cds-button>Fix</cds-button>\n *   </cds-alert-actions>\n * </cds-alert>\n * ```\n *\n * @element cds-alert-actions\n * @slot\n * @cssprop --action-text-color\n * @cssprop --action-hover-text-color\n * @cssprop --action-font-size\n */\nexport class CdsAlertActions extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * @type {default | banner | light}\n         * @private\n         */\n        this.type = 'light';\n    }\n    render() {\n        return html `<div class=\"private-host\" cds-layout=\"horizontal wrap:none gap:xs align:vertical-center\">\n      <slot></slot>\n    </div>`;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        assignSlotNames([this, 'actions']);\n    }\n    updated(props) {\n        super.updated(props);\n        this.buttons.forEach(b => {\n            b.status = this.type === 'banner' ? 'inverse' : 'primary';\n            b.size = this.type === 'banner' ? 'sm' : 'md';\n            b.style.setProperty('--color', 'inherit');\n        });\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlertActions.prototype, \"type\", void 0);\n__decorate([\n    querySlotAll('cds-button')\n], CdsAlertActions.prototype, \"buttons\", void 0);\n"],"names":["CdsAlertActions","LitElement","constructor","super","this","type","render","html","connectedCallback","assignSlotNames","updated","props","buttons","forEach","b","status","size","style","setProperty","styles","baseStyles","__decorate","state","String","reflect","prototype","querySlotAll"],"mappings":"+NA+BO,MAAMA,UAAwBC,EACjCC,cACIC,oBAKAC,KAAKC,KAAO,QAEhBC,SACI,OAAOC,CAAK,+GAIhBC,oBACIL,MAAMK,oBACNC,EAAgB,CAACL,KAAM,YAE3BM,QAAQC,GACJR,MAAMO,QAAQC,GACdP,KAAKQ,QAAQC,SAAQC,IACjBA,EAAEC,OAAuB,WAAdX,KAAKC,KAAoB,UAAY,UAChDS,EAAEE,KAAqB,WAAdZ,KAAKC,KAAoB,KAAO,KACzCS,EAAEG,MAAMC,YAAY,UAAW,cAG5BC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAM,CAAEjB,KAAMkB,OAAQC,SAAS,KAChCxB,EAAgByB,UAAW,YAAQ,GACtCJ,EAAW,CACPK,EAAa,eACd1B,EAAgByB,UAAW,eAAW"}

package/alert/alert-actions.element.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var o=t`:host{--action-hover-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-font-size:var(--cds-global-typography-font-size-3, calc(13 / var(--cds-global-base, 20) * 1rem));white-space:nowrap}:host([_type=light]){display:none!important}:host([_type=default]) ::slotted(cds-button),:host([_type=light]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color);--background:none;--padding:none;--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--text-transform:none;--text-decoration:underline;--border-width:0;--height:var(--action-size, auto);--min-width:initial;display:inline-block}:host([_type=default]) ::slotted(cds-button:hover),:host([_type=light]) ::slotted(cds-button:hover){--color:var(--action-hover-text-color);--border-color:var(--action-hover-text-color)}:host([_type=default]) ::slotted([cds-text~=link]),:host([_type=light]) ::slotted([cds-text~=link]){color:var(--action-text-color)!important;font-size:var(--action-font-size)!important;font-weight:var(--cds-global-typography-font-weight-medium,500)}:host([_type=default]) ::slotted([cds-text~=link]:hover),:host([_type=light]) ::slotted([cds-text~=link]:hover){color:var(--action-hover-text-color)!important}:host([_type=default]){--action-size:calc(var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem)) - var(--cds-global-space-3, calc(4 / var(--cds-global-base, 20) * 1rem)))}:host([_type=banner]){--action-size:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}:host([_type=banner]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color)}:host([_type=banner])::slotted(a),:host([_type=default])::slotted(a){color:var(--action-text-color)}:host([_type=default]) .private-host{height:calc(var(--action-size) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)))}:host([_type=default]) ::slotted(cds-button){--font-size:var(--action-font-size);--letter-spacing:normal;--height:var(--action-size);line-height:1em}`;export{o as default};
+import{css as t}from"lit";var o=t`:host{--action-hover-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-text-color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--action-font-size:var(--cds-global-typography-font-size-3, 0.8125rem);white-space:nowrap}:host([_type=light]){display:none!important}:host([_type=default]) ::slotted(cds-button),:host([_type=light]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color);--background:none;--padding:none;--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--text-transform:none;--text-decoration:underline;--border-width:0;--height:var(--action-size, auto);--min-width:initial;display:inline-block}:host([_type=default]) ::slotted(cds-button:hover),:host([_type=light]) ::slotted(cds-button:hover){--color:var(--action-hover-text-color);--border-color:var(--action-hover-text-color)}:host([_type=default]) ::slotted([cds-text~=link]),:host([_type=light]) ::slotted([cds-text~=link]){color:var(--action-text-color)!important;font-size:var(--action-font-size)!important;font-weight:var(--cds-global-typography-font-weight-medium,500)}:host([_type=default]) ::slotted([cds-text~=link]:hover),:host([_type=light]) ::slotted([cds-text~=link]:hover){color:var(--action-hover-text-color)!important}:host([_type=default]){--action-size:calc(var(--cds-global-space-9, 1.5rem) - var(--cds-global-space-3, 0.25rem))}:host([_type=banner]){--action-size:var(--cds-global-space-9, 1.5rem)}:host([_type=banner]) ::slotted(cds-button){--color:var(--action-text-color);--border-color:var(--action-text-color)}:host([_type=banner])::slotted(a),:host([_type=default])::slotted(a){color:var(--action-text-color)}:host([_type=default]) .private-host{height:calc(var(--action-size) + var(--cds-global-space-2,.125rem))}:host([_type=default]) ::slotted(cds-button){--font-size:var(--action-font-size);--letter-spacing:normal;--height:var(--action-size);line-height:1em}`;export{o as default};
 //# sourceMappingURL=alert-actions.element.scss.js.map

package/alert/alert-group.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as s,html as e}from"lit";import{query as r}from"lit/decorators/query.js";import{syncProps as a,baseStyles as o,property as i,querySlotAll as p,querySlot as l}from"@cds/core/internal";import d from"./alert-group.element.scss.js";class n extends s{constructor(){super(...arguments);this.size="default",this.type="default",this.status="neutral"}render(){return e`<div cds-layout="${this.pager?"horizontal wrap:none":"horizontal"}" class="${this.pager?"private-host":"private-host no-pager"}"><div class="pager-wrapper" cds-layout="p-x:lg"><slot name="pager"></slot></div><div class="alert-group-wrapper"><div class="alerts" cds-layout="vertical wrap:none align:horizontal-stretch fill ${"sm"===this.size?"gap:none":"gap:sm"}"><slot></slot></div></div></div>`}connectedCallback(){super.connectedCallback(),this.role="region"}firstUpdated(t){super.firstUpdated(t),this.setupAlertsUpdate()}setupAlertsUpdate(){var t;const s={status:!0,type:!0,size:!0};null===(t=this.alertSlot)||void 0===t||t.addEventListener("slotchange",(()=>this.syncAlerts(s)))}async syncAlerts(t){await Promise.all(Array.from(this.alerts).map((t=>t.updateComplete))),this.alerts.forEach((s=>a(s,this,{status:t.status&&"light"!==this.type&&"loading"!==s.status,type:t.type,size:t.size})))}updated(t){super.updated(t),this.syncAlerts({status:t.has("status"),type:t.has("type"),size:t.has("size")})}static get styles(){return[o,d]}}t([i({type:String})],n.prototype,"size",void 0),t([i({type:String})],n.prototype,"type",void 0),t([i({type:String})],n.prototype,"status",void 0),t([p("cds-alert")],n.prototype,"alerts",void 0),t([l(".pager",{assign:"pager"})],n.prototype,"pager",void 0),t([r(".alerts")],n.prototype,"alertSlot",void 0);export{n as CdsAlertGroup};
+import{__decorate as t}from"tslib";import{LitElement as s,html as e}from"lit";import{query as r}from"lit/decorators/query.js";import{syncProps as a,baseStyles as o,property as i,querySlotAll as p,querySlot as l}from"@cds/core/internal";import d from"./alert-group.element.scss.js";class n extends s{constructor(){super(...arguments);this.size="default",this.type="default",this.status="neutral"}render(){return e`<div cds-layout="${this.pager?"horizontal wrap:none":"horizontal"}" class="${this.pager?"private-host":"private-host no-pager"}"><div class="pager-wrapper" cds-layout="p-x:lg"><slot name="pager"></slot></div><div class="alert-group-wrapper"><div class="alerts" cds-layout="vertical wrap:none align:horizontal-stretch fill ${"sm"===this.size?"gap:none":"gap:xs"}"><slot></slot></div></div></div>`}connectedCallback(){super.connectedCallback(),this.role="region"}firstUpdated(t){super.firstUpdated(t),this.setupAlertsUpdate()}setupAlertsUpdate(){const t={status:!0,type:!0,size:!0};this.alertSlot?.addEventListener("slotchange",(()=>this.syncAlerts(t)))}async syncAlerts(t){await Promise.all(Array.from(this.alerts).map((t=>t.updateComplete))),this.alerts.forEach((s=>a(s,this,{status:t.status&&"light"!==this.type&&"loading"!==s.status,type:t.type,size:t.size})))}updated(t){super.updated(t),this.syncAlerts({status:t.has("status"),type:t.has("type"),size:t.has("size")})}static get styles(){return[o,d]}}t([i({type:String})],n.prototype,"size",void 0),t([i({type:String})],n.prototype,"type",void 0),t([i({type:String})],n.prototype,"status",void 0),t([p("cds-alert")],n.prototype,"alerts",void 0),t([l(".pager",{assign:"pager"})],n.prototype,"pager",void 0),t([r(".alerts")],n.prototype,"alertSlot",void 0);export{n as CdsAlertGroup};
 //# sourceMappingURL=alert-group.element.js.map

package/alert/alert-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-group.element.js","sources":["../../../src/alert/alert-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';\nimport styles from './alert-group.element.scss';\n/**\n * Alert groups are containers for a set of alerts. Alert groups can hold one or many alerts\n * inside of them with the expectation that all alerts will be of the same type. The exception\n * to this rule is the `loading` alert type, which will be displayed regardless of the type\n * of alert group containing it.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert-group type=\"danger\">\n *     <cds-alert closable=\"true\">\n *       Single alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *     <cds-alert type=\"loading\">\n *       Single Alert\n *     </cds-alert>\n *     <cds-alert closable=\"true\">\n *       Another alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *   </cds-alert-group>\n * ```\n *\n * @element cds-alert-group\n * @slot - Content slot for the alerts\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n */\nexport class CdsAlertGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Sets the overall height and width of the alerts inside the alert group\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Passed down into the alerts inside the alert-group\n         * @type {default | banner | light}\n         */\n        this.type = 'default';\n        /**\n         * Sets the status of the alerts inside the alert group\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n    }\n    render() {\n        return html `\n      <div\n        cds-layout=\"${this.pager ? 'horizontal wrap:none' : 'horizontal'}\"\n        class=\"${this.pager ? 'private-host' : 'private-host no-pager'}\"\n      >\n        <div class=\"pager-wrapper\" cds-layout=\"p-x:lg\">\n          <slot name=\"pager\"></slot>\n        </div>\n        <div class=\"alert-group-wrapper\">\n          <div\n            class=\"alerts\"\n            cds-layout=\"vertical wrap:none align:horizontal-stretch fill ${this.size === 'sm' ? 'gap:none' : 'gap:sm'}\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'region';\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setupAlertsUpdate();\n    }\n    setupAlertsUpdate() {\n        var _a;\n        const propsToSync = { status: true, type: true, size: true };\n        (_a = this.alertSlot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', () => this.syncAlerts(propsToSync));\n    }\n    async syncAlerts(propsToSync) {\n        await Promise.all(Array.from(this.alerts).map(a => a.updateComplete));\n        this.alerts.forEach(alert => syncProps(alert, this, {\n            status: propsToSync.status && this.type !== 'light' && alert.status !== 'loading',\n            type: propsToSync.type,\n            size: propsToSync.size,\n        }));\n    }\n    updated(props) {\n        super.updated(props);\n        this.syncAlerts({\n            status: props.has('status'),\n            type: props.has('type'),\n            size: props.has('size'),\n        });\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"size\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"type\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"status\", void 0);\n__decorate([\n    querySlotAll('cds-alert')\n], CdsAlertGroup.prototype, \"alerts\", void 0);\n__decorate([\n    querySlot('.pager', { assign: 'pager' })\n], CdsAlertGroup.prototype, \"pager\", void 0);\n__decorate([\n    query('.alerts')\n], CdsAlertGroup.prototype, \"alertSlot\", void 0);\n"],"names":["CdsAlertGroup","LitElement","constructor","super","this","size","type","status","render","html","pager","connectedCallback","role","firstUpdated","props","setupAlertsUpdate","_a","propsToSync","alertSlot","addEventListener","syncAlerts","async","Promise","all","Array","from","alerts","map","a","updateComplete","forEach","alert","syncProps","updated","has","styles","baseStyles","__decorate","property","String","prototype","querySlotAll","querySlot","assign","query"],"mappings":"yRAsDO,MAAMA,UAAsBC,EAC/BC,cACIC,oBAKAC,KAAKC,KAAO,UAKZD,KAAKE,KAAO,UAKZF,KAAKG,OAAS,UAElBC,SACI,OAAOC,CAAK,oBAEEL,KAAKM,MAAQ,uBAAyB,wBAC3CN,KAAKM,MAAQ,eAAiB,6NAQ0C,OAAdN,KAAKC,KAAgB,WAAa,4CAQzGM,oBACIR,MAAMQ,oBACNP,KAAKQ,KAAO,SAEhBC,aAAaC,GACTX,MAAMU,aAAaC,GACnBV,KAAKW,oBAETA,oBACI,IAAIC,EACJ,MAAMC,EAAc,CAAEV,QAAQ,EAAMD,MAAM,EAAMD,MAAM,GAC5B,QAAzBW,EAAKZ,KAAKc,iBAA8B,IAAPF,GAAyBA,EAAGG,iBAAiB,cAAc,IAAMf,KAAKgB,WAAWH,KAEvHI,iBAAiBJ,SACPK,QAAQC,IAAIC,MAAMC,KAAKrB,KAAKsB,QAAQC,KAAIC,GAAKA,EAAEC,kBACrDzB,KAAKsB,OAAOI,SAAQC,GAASC,EAAUD,EAAO3B,KAAM,CAChDG,OAAQU,EAAYV,QAAwB,UAAdH,KAAKE,MAAqC,YAAjByB,EAAMxB,OAC7DD,KAAMW,EAAYX,KAClBD,KAAMY,EAAYZ,SAG1B4B,QAAQnB,GACJX,MAAM8B,QAAQnB,GACdV,KAAKgB,WAAW,CACZb,OAAQO,EAAMoB,IAAI,UAClB5B,KAAMQ,EAAMoB,IAAI,QAChB7B,KAAMS,EAAMoB,IAAI,UAGbC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAEhC,KAAMiC,UAClBvC,EAAcwC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAEhC,KAAMiC,UAClBvC,EAAcwC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAEhC,KAAMiC,UAClBvC,EAAcwC,UAAW,cAAU,GACtCH,EAAW,CACPI,EAAa,cACdzC,EAAcwC,UAAW,cAAU,GACtCH,EAAW,CACPK,EAAU,SAAU,CAAEC,OAAQ,WAC/B3C,EAAcwC,UAAW,aAAS,GACrCH,EAAW,CACPO,EAAM,YACP5C,EAAcwC,UAAW,iBAAa"}
+{"version":3,"file":"alert-group.element.js","sources":["../../../src/alert/alert-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { baseStyles, property, querySlot, querySlotAll, syncProps } from '@cds/core/internal';\nimport styles from './alert-group.element.scss';\n/**\n * Alert groups are containers for a set of alerts. Alert groups can hold one or many alerts\n * inside of them with the expectation that all alerts will be of the same type. The exception\n * to this rule is the `loading` alert type, which will be displayed regardless of the type\n * of alert group containing it.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert-group type=\"danger\">\n *     <cds-alert closable=\"true\">\n *       Single alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *     <cds-alert type=\"loading\">\n *       Single Alert\n *     </cds-alert>\n *     <cds-alert closable=\"true\">\n *       Another alert\n *       <cds-alert-actions>\n *         buttons, links\n *       </cds-alert-actions>\n *     </cds-alert>\n *   </cds-alert-group>\n * ```\n *\n * @element cds-alert-group\n * @slot - Content slot for the alerts\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n */\nexport class CdsAlertGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        /**\n         * Sets the overall height and width of the alerts inside the alert group\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Passed down into the alerts inside the alert-group\n         * @type {default | banner | light}\n         */\n        this.type = 'default';\n        /**\n         * Sets the status of the alerts inside the alert group\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n    }\n    render() {\n        return html `\n      <div\n        cds-layout=\"${this.pager ? 'horizontal wrap:none' : 'horizontal'}\"\n        class=\"${this.pager ? 'private-host' : 'private-host no-pager'}\"\n      >\n        <div class=\"pager-wrapper\" cds-layout=\"p-x:lg\">\n          <slot name=\"pager\"></slot>\n        </div>\n        <div class=\"alert-group-wrapper\">\n          <div\n            class=\"alerts\"\n            cds-layout=\"vertical wrap:none align:horizontal-stretch fill ${this.size === 'sm' ? 'gap:none' : 'gap:xs'}\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'region';\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setupAlertsUpdate();\n    }\n    setupAlertsUpdate() {\n        const propsToSync = { status: true, type: true, size: true };\n        this.alertSlot?.addEventListener('slotchange', () => this.syncAlerts(propsToSync));\n    }\n    async syncAlerts(propsToSync) {\n        await Promise.all(Array.from(this.alerts).map(a => a.updateComplete));\n        this.alerts.forEach(alert => syncProps(alert, this, {\n            status: propsToSync.status && this.type !== 'light' && alert.status !== 'loading',\n            type: propsToSync.type,\n            size: propsToSync.size,\n        }));\n    }\n    updated(props) {\n        super.updated(props);\n        this.syncAlerts({\n            status: props.has('status'),\n            type: props.has('type'),\n            size: props.has('size'),\n        });\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"size\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"type\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlertGroup.prototype, \"status\", void 0);\n__decorate([\n    querySlotAll('cds-alert')\n], CdsAlertGroup.prototype, \"alerts\", void 0);\n__decorate([\n    querySlot('.pager', { assign: 'pager' })\n], CdsAlertGroup.prototype, \"pager\", void 0);\n__decorate([\n    query('.alerts')\n], CdsAlertGroup.prototype, \"alertSlot\", void 0);\n"],"names":["CdsAlertGroup","LitElement","constructor","super","this","size","type","status","render","html","pager","connectedCallback","role","firstUpdated","props","setupAlertsUpdate","propsToSync","alertSlot","addEventListener","syncAlerts","async","Promise","all","Array","from","alerts","map","a","updateComplete","forEach","alert","syncProps","updated","has","styles","baseStyles","__decorate","property","String","prototype","querySlotAll","querySlot","assign","query"],"mappings":"yRAsDO,MAAMA,UAAsBC,EAC/BC,cACIC,oBAKAC,KAAKC,KAAO,UAKZD,KAAKE,KAAO,UAKZF,KAAKG,OAAS,UAElBC,SACI,OAAOC,CAAK,oBAEEL,KAAKM,MAAQ,uBAAyB,wBAC3CN,KAAKM,MAAQ,eAAiB,6NAQ0C,OAAdN,KAAKC,KAAgB,WAAa,4CAQzGM,oBACIR,MAAMQ,oBACNP,KAAKQ,KAAO,SAEhBC,aAAaC,GACTX,MAAMU,aAAaC,GACnBV,KAAKW,oBAETA,oBACI,MAAMC,EAAc,CAAET,QAAQ,EAAMD,MAAM,EAAMD,MAAM,GACtDD,KAAKa,WAAWC,iBAAiB,cAAc,IAAMd,KAAKe,WAAWH,KAEzEI,iBAAiBJ,SACPK,QAAQC,IAAIC,MAAMC,KAAKpB,KAAKqB,QAAQC,KAAIC,GAAKA,EAAEC,kBACrDxB,KAAKqB,OAAOI,SAAQC,GAASC,EAAUD,EAAO1B,KAAM,CAChDG,OAAQS,EAAYT,QAAwB,UAAdH,KAAKE,MAAqC,YAAjBwB,EAAMvB,OAC7DD,KAAMU,EAAYV,KAClBD,KAAMW,EAAYX,SAG1B2B,QAAQlB,GACJX,MAAM6B,QAAQlB,GACdV,KAAKe,WAAW,CACZZ,OAAQO,EAAMmB,IAAI,UAClB3B,KAAMQ,EAAMmB,IAAI,QAChB5B,KAAMS,EAAMmB,IAAI,UAGbC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,YAAQ,GACpCH,EAAW,CACPC,EAAS,CAAE/B,KAAMgC,UAClBtC,EAAcuC,UAAW,cAAU,GACtCH,EAAW,CACPI,EAAa,cACdxC,EAAcuC,UAAW,cAAU,GACtCH,EAAW,CACPK,EAAU,SAAU,CAAEC,OAAQ,WAC/B1C,EAAcuC,UAAW,aAAS,GACrCH,EAAW,CACPO,EAAM,YACP3C,EAAcuC,UAAW,iBAAa"}

package/alert/alert-group.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--icon-color:var(--color);--icon-size:var(--cds-global-space-8, calc(18 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--padding:var(--cds-global-space-5, calc(8 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-5, calc(8 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem));--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-width:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 / var(--cds-global-base, 20) * 1rem));--pager-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));width:100%}.private-host{background:var(--background);border-width:var(--border-width);border-color:var(--border-color);border-style:solid;border-radius:var(--border-radius)}.alert-group-wrapper{width:100%;padding:var(--padding)}:host([status=info]){--background:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--background:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--background:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--background:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([type=default][size=sm]){--padding:var(--cds-global-space-3, calc(4 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-3, calc(4 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem))}:host([type=light]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:0;--padding:0}:host([type=light]) .private-host{border:0}:host([type=banner]){--border-color:var(--background);--padding:var(--cds-global-space-1, calc(1 / var(--cds-global-base, 20) * 1rem)) var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem));--border-width:0;--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-radius:0}:host([type=banner][status=info]){--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--pager-background:var(--cds-alias-status-info-shade, var(--cds-global-color-blue-800, #00608a))}:host([type=banner][status=warning]){--background:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--pager-background:var(--cds-alias-status-warning-shade, var(--cds-global-color-ochre-600, #ffa600))}:host([type=banner][status=danger]){--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--pager-background:var(--cds-alias-status-danger-shade, var(--cds-global-color-red-800, #c21d00))}:host([type=banner][status=success]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--pager-background:var(--cds-alias-status-success-shade, var(--cds-global-color-green-800, #366a0c))}:host([type=banner][status=neutral]){--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--pager-background:var(--cds-alias-status-neutral-shade, var(--cds-global-color-construction-700, #3a4d55))}:host([type=banner][status=alt]){--background:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5));--pager-background:var(--cds-alias-status-alt-shade, var(--cds-global-color-violet-900, #440061))}.no-pager .pager-wrapper{display:none}.pager-wrapper{background-color:var(--pager-background);padding-top:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem));padding-bottom:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))}:host([type=banner]) .alert-group-wrapper{padding-top:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem));padding-bottom:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))}::slotted(.pager){color:var(--cds-global-typography-color-100,var(--cds-global-color-white,#fff));width:calc(2*var(--cds-global-space-12,calc(48 / var(--cds-global-base,20) * 1rem)));height:100%;display:inline-flex;justify-content:center;align-items:center}`;export{r as default};
+import{css as a}from"lit";var r=a`:host{--icon-color:var(--color);--icon-size:var(--cds-global-space-8, 1.125rem);--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--padding:var(--cds-global-space-5, 0.5rem) var(--cds-global-space-5, 0.5rem) var(--cds-global-space-4, 0.375rem) var(--cds-global-space-6, 0.75rem);--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--pager-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));width:100%}.private-host{background:var(--background);border-width:var(--border-width);border-color:var(--border-color);border-style:solid;border-radius:var(--border-radius)}.alert-group-wrapper{width:100%;padding:var(--padding)}:host([status=info]){--background:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--background:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--background:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--background:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([type=default][size=sm]){--padding:var(--cds-global-space-3, 0.25rem) var(--cds-global-space-3, 0.25rem) var(--cds-global-space-2, 0.125rem) var(--cds-global-space-4, 0.375rem)}:host([type=light]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:0;--padding:0}:host([type=light]) .private-host{border:0}:host([type=banner]){--border-color:var(--background);--padding:var(--cds-global-space-1, 0.0625rem) var(--cds-global-space-6, 0.75rem);--border-width:0;--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border-radius:0}:host([type=banner][status=info]){--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--pager-background:var(--cds-alias-status-info-shade, var(--cds-global-color-blue-800, #00608a))}:host([type=banner][status=warning]){--background:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--pager-background:var(--cds-alias-status-warning-shade, var(--cds-global-color-ochre-600, #ffa600))}:host([type=banner][status=danger]){--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--pager-background:var(--cds-alias-status-danger-shade, var(--cds-global-color-red-800, #c21d00))}:host([type=banner][status=success]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--pager-background:var(--cds-alias-status-success-shade, var(--cds-global-color-green-800, #366a0c))}:host([type=banner][status=neutral]){--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--pager-background:var(--cds-alias-status-neutral-shade, var(--cds-global-color-construction-700, #3a4d55))}:host([type=banner][status=alt]){--background:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5));--pager-background:var(--cds-alias-status-alt-shade, var(--cds-global-color-violet-900, #440061))}.no-pager .pager-wrapper{display:none}.pager-wrapper{background-color:var(--pager-background);padding-top:var(--cds-global-space-2,.125rem);padding-bottom:var(--cds-global-space-2,.125rem)}:host([type=banner]) .alert-group-wrapper{padding-top:var(--cds-global-space-2,.125rem);padding-bottom:var(--cds-global-space-2,.125rem)}::slotted(.pager){color:var(--cds-global-typography-color-100,var(--cds-global-color-white,#fff));width:calc(2*var(--cds-global-space-12,3rem));height:100%;display:inline-flex;justify-content:center;align-items:center}`;export{r as default};
 //# sourceMappingURL=alert-group.element.scss.js.map

package/alert/alert.element.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { EventEmitter } from '@cds/core/internal';
+import { ClosableController } from '@cds/core/internal';
 import { CdsIcon } from '@cds/core/icon/icon.element.js';
 import { AlertGroupTypes, AlertStatusTypes, AlertSizes } from './alert.interfaces.js';
 export declare function getIconStatusTuple(status: string): [string, string];
@@ -46,7 +46,6 @@ export declare function getAlertContentLayout(containerType: 'wrapper' | 'conten
  * @cssprop --close-icon-color-hover
  */
 export declare class CdsAlert extends LitElement {
-    closeChange: EventEmitter<boolean>;
     /**
      * Sets the overall height and width of the alert and icon based on value
      * @type {default | sm}
@@ -81,11 +80,11 @@ export declare class CdsAlert extends LitElement {
     private alertActions;
     protected alertIcons: NodeListOf<CdsIcon>;
     protected closeButton: HTMLElement;
+    protected closableController: ClosableController<this>;
     connectedCallback(): void;
     updated(props: PropertyValues<this>): void;
     private get parentGroupHasPager();
     render(): import("lit-html").TemplateResult<1>;
     constructor();
-    private closeAlert;
     static get styles(): import("lit").CSSResultGroup[];
 }

package/alert/alert.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{I18nService as a,setAttributes as r,syncDefinedProps as n,baseStyles as o,event as i,property as c,state as l,id as p,i18n as d,querySlot as h,querySlotAll as u}from"@cds/core/internal";import{ClarityIcons as g}from"@cds/core/icon/icon.service.js";import{infoStandardIcon as y}from"@cds/core/icon/shapes/info-standard.js";import{successStandardIcon as m}from"@cds/core/icon/shapes/success-standard.js";import{warningStandardIcon as f}from"@cds/core/icon/shapes/warning-standard.js";import{errorStandardIcon as b}from"@cds/core/icon/shapes/error-standard.js";import{helpIcon as w}from"@cds/core/icon/shapes/help.js";import $ from"./alert.element.scss.js";function v(t){const e={info:[g.getIconNameFromShape(y),a.keys.alert.info],success:[g.getIconNameFromShape(m),a.keys.alert.success],warning:[g.getIconNameFromShape(f),a.keys.alert.warning],danger:[g.getIconNameFromShape(b),a.keys.alert.danger],unknown:[g.getIconNameFromShape(w),a.keys.alert.info],loading:["loading",a.keys.alert.loading]};return e[t]?e[t]:e.info}function k(t){return["info","success","warning","danger","unknown"].map((t=>A(t))).indexOf(t)>-1}function z(t){return v(t)[1]}function A(t){return v(t)[0]}function F(t,e,s){const a="align:stretch";switch(e){case"light":return"";case"banner":switch(t){case"wrapper":case"actions":return s?a:"";case"content":return"align:shrink";default:return""}default:switch(t){case"wrapper":case"content":return a;case"actions":return"align:shrink";default:return""}}}class S extends e{constructor(){super();this.size="default",this.type="light",this.closable=!1,this.status="neutral",this.i18n=a.keys.alert,g.addIcons(y,b,m,f,w)}connectedCallback(){super.connectedCallback(),r(this,["aria-describedby",this.idForAriaDescriber],["role","region"])}updated(t){super.updated(t),n(t,this,[this.alertActions])}get parentGroupHasPager(){return"banner"===this.type&&!!this.parentElement.pager}render(){return s`<div class="private-host" cds-layout="${"banner"===this.type?"horizontal wrap:none gap:sm align:vertical-center align:horizontal-center":"horizontal wrap:none gap:sm"}">${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} <span class="alert-icon-wrapper" cds-layout="horizontal">${"loading"===this.status?s`<cds-progress-circle class="alert-spinner" status="info" size="${"banner"===this.type?"20":"18"}" aria-label="${z(this.status)}" role="img" cds-layout="align:horizontal-center"></cds-progress-circle>`:s`<slot name="alert-icon"><cds-icon class="alert-status-icon" shape="${A(this.status)}" role="img" aria-label="${z(this.status)}" cds-layout="align:horizontal-center"></cds-icon></slot>`} </span><span class="alert-content-wrapper" cds-layout="horizontal wrap:none ${F("wrapper",this.type,this.parentGroupHasPager)}"><span id="${this.idForAriaDescriber}" role="status" class="alert-content" cds-layout="${F("content",this.type,this.parentGroupHasPager)}"><slot></slot>${"light"===this.type?s`<slot name="actions"></slot>`:s``} </span>${"light"===this.type?s``:s`<span class="alert-actions-wrapper" cds-layout="${this.alertActions?"p-l:md":""} ${F("actions",this.type,this.parentGroupHasPager)}"><slot name="actions"></slot></span>`} </span>${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} ${"light"!==this.type&&this.closable?s`<span class="alert-close-wrapper"><slot name="close-button"><cds-internal-close-button icon-size="${"banner"===this.type?"20":"16"}" @click="${()=>this.closeAlert()}" aria-label="${this.i18n.closeButtonAriaLabel}"></cds-internal-close-button></slot></span>`:s``}</div>`}closeAlert(){this.closeChange.emit(!0)}static get styles(){return[o,$]}}t([i()],S.prototype,"closeChange",void 0),t([c({type:String})],S.prototype,"size",void 0),t([l({type:String,reflect:!0})],S.prototype,"type",void 0),t([p()],S.prototype,"idForAriaDescriber",void 0),t([c({type:Boolean})],S.prototype,"closable",void 0),t([c({type:String})],S.prototype,"status",void 0),t([d()],S.prototype,"i18n",void 0),t([h("cds-alert-actions")],S.prototype,"alertActions",void 0),t([u("cds-icon",{assign:"alert-icon"})],S.prototype,"alertIcons",void 0),t([h("cds-internal-close-button",{assign:"close-button"})],S.prototype,"closeButton",void 0);export{S as CdsAlert,F as getAlertContentLayout,z as getIconStatusLabel,A as getIconStatusShape,v as getIconStatusTuple,k as iconShapeIsAlertStatusType};
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{I18nService as r,setAttributes as a,syncDefinedProps as n,baseStyles as o,property as i,state as c,id as l,i18n as p,querySlot as d,querySlotAll as h,closable as u}from"@cds/core/internal";import{ClarityIcons as g}from"@cds/core/icon/icon.service.js";import{infoStandardIcon as y}from"@cds/core/icon/shapes/info-standard.js";import{successStandardIcon as m}from"@cds/core/icon/shapes/success-standard.js";import{warningStandardIcon as b}from"@cds/core/icon/shapes/warning-standard.js";import{errorStandardIcon as f}from"@cds/core/icon/shapes/error-standard.js";import{helpIcon as $}from"@cds/core/icon/shapes/help.js";import w from"./alert.element.scss.js";function k(t){const e={info:[g.getIconNameFromShape(y),r.keys.alert.info],success:[g.getIconNameFromShape(m),r.keys.alert.success],warning:[g.getIconNameFromShape(b),r.keys.alert.warning],danger:[g.getIconNameFromShape(f),r.keys.alert.danger],unknown:[g.getIconNameFromShape($),r.keys.alert.info],loading:["loading",r.keys.alert.loading]};return e[t]?e[t]:e.info}function v(t){return["info","success","warning","danger","unknown"].map((t=>F(t))).indexOf(t)>-1}function z(t){return k(t)[1]}function F(t){return k(t)[0]}function S(t,e,s){const r="align:stretch";switch(e){case"light":return"";case"banner":switch(t){case"wrapper":case"actions":return s?r:"";case"content":return"align:shrink";default:return""}default:switch(t){case"wrapper":case"content":return r;case"actions":return"align:shrink";default:return""}}}let j=class extends e{constructor(){super();this.size="default",this.type="light",this.closable=!1,this.status="neutral",this.i18n=r.keys.alert,g.addIcons(y,f,m,b,$)}connectedCallback(){super.connectedCallback(),a(this,["aria-describedby",this.idForAriaDescriber],["role","region"])}updated(t){super.updated(t),n(t,this,[this.alertActions])}get parentGroupHasPager(){return"banner"===this.type&&!!this.parentElement.pager}render(){return s`<div class="private-host" cds-layout="${"banner"===this.type?"horizontal wrap:none gap:xs align:vertical-center align:horizontal-center":"horizontal wrap:none gap:xs"}">${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} <span class="alert-icon-wrapper" cds-layout="horizontal">${"loading"===this.status?s`<cds-progress-circle class="alert-spinner" status="info" size="${"banner"===this.type?"20":"18"}" aria-label="${z(this.status)}" role="img" cds-layout="align:horizontal-center"></cds-progress-circle>`:s`<slot name="alert-icon"><cds-icon class="alert-status-icon" shape="${F(this.status)}" role="img" aria-label="${z(this.status)}" cds-layout="align:horizontal-center"></cds-icon></slot>`} </span><span class="alert-content-wrapper" cds-layout="horizontal wrap:none ${S("wrapper",this.type,this.parentGroupHasPager)}"><span id="${this.idForAriaDescriber}" role="status" class="alert-content" cds-layout="${S("content",this.type,this.parentGroupHasPager)}"><slot></slot>${"light"===this.type?s`<slot name="actions"></slot>`:s``} </span>${"light"===this.type?s``:s`<span class="alert-actions-wrapper" cds-layout="${this.alertActions?"p-l:md":""} ${S("actions",this.type,this.parentGroupHasPager)}"><slot name="actions"></slot></span>`} </span>${"banner"!==this.type||this.parentGroupHasPager?s``:s`<span class="alert-spacer" cds-layout="align:stretch"> </span>`} ${"light"!==this.type&&this.closable?s`<slot name="close-button"><cds-internal-close-button icon-size="${"banner"===this.type?"20":"16"}" @click="${()=>this.closableController.close(!0)}" aria-label="${this.i18n.closeButtonAriaLabel}"></cds-internal-close-button></slot>`:s``}</div>`}static get styles(){return[o,w]}};t([i({type:String})],j.prototype,"size",void 0),t([c({type:String,reflect:!0})],j.prototype,"type",void 0),t([l()],j.prototype,"idForAriaDescriber",void 0),t([i({type:Boolean})],j.prototype,"closable",void 0),t([i({type:String})],j.prototype,"status",void 0),t([p()],j.prototype,"i18n",void 0),t([d("cds-alert-actions")],j.prototype,"alertActions",void 0),t([h("cds-icon",{assign:"alert-icon"})],j.prototype,"alertIcons",void 0),t([d("cds-internal-close-button",{assign:"close-button"})],j.prototype,"closeButton",void 0),j=t([u({escape:!1})],j);export{j as CdsAlert,S as getAlertContentLayout,z as getIconStatusLabel,F as getIconStatusShape,k as getIconStatusTuple,v as iconShapeIsAlertStatusType};
 //# sourceMappingURL=alert.element.js.map

package/alert/alert.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.element.js","sources":["../../../src/alert/alert.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, event, property, querySlot, querySlotAll, setAttributes, syncDefinedProps, state, id, I18nService, i18n, } from '@cds/core/internal';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';\nimport { successStandardIcon } from '@cds/core/icon/shapes/success-standard.js';\nimport { warningStandardIcon } from '@cds/core/icon/shapes/warning-standard.js';\nimport { errorStandardIcon } from '@cds/core/icon/shapes/error-standard.js';\nimport { helpIcon } from '@cds/core/icon/shapes/help.js';\nimport styles from './alert.element.scss';\nexport function getIconStatusTuple(status) {\n    const statusIcons = {\n        info: [ClarityIcons.getIconNameFromShape(infoStandardIcon), I18nService.keys.alert.info],\n        success: [ClarityIcons.getIconNameFromShape(successStandardIcon), I18nService.keys.alert.success],\n        warning: [ClarityIcons.getIconNameFromShape(warningStandardIcon), I18nService.keys.alert.warning],\n        danger: [ClarityIcons.getIconNameFromShape(errorStandardIcon), I18nService.keys.alert.danger],\n        unknown: [ClarityIcons.getIconNameFromShape(helpIcon), I18nService.keys.alert.info],\n        loading: ['loading', I18nService.keys.alert.loading],\n    };\n    return statusIcons[status] ? statusIcons[status] : statusIcons.info;\n}\nexport function iconShapeIsAlertStatusType(shape) {\n    const statusShapes = ['info', 'success', 'warning', 'danger', 'unknown'].map(s => {\n        return getIconStatusShape(s);\n    });\n    return statusShapes.indexOf(shape) > -1;\n}\nexport function getIconStatusLabel(status) {\n    return getIconStatusTuple(status)[1];\n}\nexport function getIconStatusShape(status) {\n    return getIconStatusTuple(status)[0];\n}\nexport function getAlertContentLayout(containerType, alertGroupType, alertGroupHasPager) {\n    const fillLayoutValue = 'align:stretch';\n    switch (alertGroupType) {\n        case 'light':\n            return '';\n        case 'banner':\n            switch (containerType) {\n                case 'wrapper':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                case 'content':\n                    return 'align:shrink';\n                case 'actions':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                default:\n                    return '';\n            }\n        default:\n            switch (containerType) {\n                case 'wrapper':\n                    return fillLayoutValue;\n                case 'content':\n                    return fillLayoutValue;\n                case 'actions':\n                    return 'align:shrink';\n                default:\n                    return '';\n            }\n    }\n}\n/**\n * Alerts are banners that communicate a message with a severity attached to it.\n * They grab the user’s attention to provide critical information needed in context.\n *\n * Alerts outside of a cds-alert-group or cds-app-alert-group component will be\n * displayed as a \"lightweight alert\". Lightweight alerts, by default, provide no\n * close button component and they inherit no status (a.k.a. success, danger, etc.).\n *\n * Alerts inside a cds-alert-group component inherit their status from the containing\n * alert group.\n *\n * Alerts inside a cds-app-alert-group component inherit their status as a default from\n * the containing app-alert group, although it can be overridden on individual alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert>\n *     Single Alert\n *     <cds-alert-actions>\n *       buttons, links\n *     </cds-alert-actions>\n *   </cds-alert>\n * ```\n *\n * @element cds-alert\n * @slot - Content slot for inside the alert\n * @event closeChange - notify when the user has clicked the dismiss button\n * @cssprop --color\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --icon-color\n * @cssprop --close-icon-color\n * @cssprop --close-icon-color-hover\n */\nexport class CdsAlert extends LitElement {\n    constructor() {\n        super();\n        /**\n         * Sets the overall height and width of the alert and icon based on value\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Sets up the buttons, layouts, close-button and other properties based on the alert group container\n         * Internal Use Only\n         * @private\n         */\n        this.type = 'light';\n        /**\n         * If false, the alert will not render the close button.\n         *\n         * Lightweight alerts do not display close buttons\n         */\n        this.closable = false;\n        /**\n         * Sets the color of the alert from a predefined list of statuses\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n        this.i18n = I18nService.keys.alert;\n        ClarityIcons.addIcons(infoStandardIcon, errorStandardIcon, successStandardIcon, warningStandardIcon, helpIcon);\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        setAttributes(this, ['aria-describedby', this.idForAriaDescriber], ['role', 'region']);\n    }\n    updated(props) {\n        super.updated(props);\n        syncDefinedProps(props, this, [this.alertActions]);\n    }\n    get parentGroupHasPager() {\n        return this.type === 'banner' && !!this.parentElement.pager;\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host\"\n        cds-layout=\"${this.type === 'banner'\n            ? 'horizontal wrap:none gap:sm align:vertical-center align:horizontal-center'\n            : 'horizontal wrap:none gap:sm'}\"\n      >\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        <span class=\"alert-icon-wrapper\" cds-layout=\"horizontal\">\n          ${this.status === 'loading'\n            ? html `<cds-progress-circle\n                class=\"alert-spinner\"\n                status=\"info\"\n                size=\"${this.type === 'banner' ? '20' : '18'}\"\n                aria-label=\"${getIconStatusLabel(this.status)}\"\n                role=\"img\"\n                cds-layout=\"align:horizontal-center\"\n              ></cds-progress-circle>`\n            : html `<slot name=\"alert-icon\"\n                ><cds-icon\n                  class=\"alert-status-icon\"\n                  shape=\"${getIconStatusShape(this.status)}\"\n                  role=\"img\"\n                  aria-label=\"${getIconStatusLabel(this.status)}\"\n                  cds-layout=\"align:horizontal-center\"\n                ></cds-icon\n              ></slot>`}\n        </span>\n        <span\n          class=\"alert-content-wrapper\"\n          cds-layout=\"horizontal wrap:none ${getAlertContentLayout('wrapper', this.type, this.parentGroupHasPager)}\"\n        >\n          <span\n            id=\"${this.idForAriaDescriber}\"\n            role=\"status\"\n            class=\"alert-content\"\n            cds-layout=\"${getAlertContentLayout('content', this.type, this.parentGroupHasPager)}\"\n          >\n            <slot></slot>\n            ${this.type === 'light' ? html `<slot name=\"actions\"></slot>` : html ``}\n          </span>\n          ${this.type === 'light'\n            ? html ``\n            : html `<span\n                class=\"alert-actions-wrapper\"\n                cds-layout=\"${this.alertActions ? 'p-l:md' : ''} ${getAlertContentLayout('actions', this.type, this.parentGroupHasPager)}\"\n                ><slot name=\"actions\"></slot\n              ></span>`}\n        </span>\n\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        ${this.type !== 'light' && this.closable\n            ? html `<span class=\"alert-close-wrapper\"\n              ><slot name=\"close-button\"\n                ><cds-internal-close-button\n                  icon-size=\"${this.type === 'banner' ? '20' : '16'}\"\n                  @click=\"${() => this.closeAlert()}\"\n                  aria-label=\"${this.i18n.closeButtonAriaLabel}\"\n                ></cds-internal-close-button></slot\n            ></span>`\n            : html ``}\n      </div>\n    `;\n    }\n    closeAlert() {\n        this.closeChange.emit(true);\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    event()\n], CdsAlert.prototype, \"closeChange\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"size\", void 0);\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlert.prototype, \"type\", void 0);\n__decorate([\n    id()\n], CdsAlert.prototype, \"idForAriaDescriber\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAlert.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"status\", void 0);\n__decorate([\n    i18n()\n], CdsAlert.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('cds-alert-actions')\n], CdsAlert.prototype, \"alertActions\", void 0);\n__decorate([\n    querySlotAll('cds-icon', { assign: 'alert-icon' })\n], CdsAlert.prototype, \"alertIcons\", void 0);\n__decorate([\n    querySlot('cds-internal-close-button', { assign: 'close-button' })\n], CdsAlert.prototype, \"closeButton\", void 0);\n"],"names":["getIconStatusTuple","status","statusIcons","info","ClarityIcons","getIconNameFromShape","infoStandardIcon","I18nService","keys","alert","success","successStandardIcon","warning","warningStandardIcon","danger","errorStandardIcon","unknown","helpIcon","loading","iconShapeIsAlertStatusType","shape","map","s","getIconStatusShape","indexOf","getIconStatusLabel","getAlertContentLayout","containerType","alertGroupType","alertGroupHasPager","fillLayoutValue","CdsAlert","LitElement","constructor","super","this","size","type","closable","i18n","addIcons","connectedCallback","setAttributes","idForAriaDescriber","updated","props","syncDefinedProps","alertActions","parentGroupHasPager","parentElement","pager","render","html","closeAlert","closeButtonAriaLabel","closeChange","emit","styles","baseStyles","__decorate","event","prototype","property","String","state","reflect","id","Boolean","querySlot","querySlotAll","assign"],"mappings":"muBAeO,SAASA,EAAmBC,GAC/B,MAAMC,EAAc,CAChBC,KAAM,CAACC,EAAaC,qBAAqBC,GAAmBC,EAAYC,KAAKC,MAAMN,MACnFO,QAAS,CAACN,EAAaC,qBAAqBM,GAAsBJ,EAAYC,KAAKC,MAAMC,SACzFE,QAAS,CAACR,EAAaC,qBAAqBQ,GAAsBN,EAAYC,KAAKC,MAAMG,SACzFE,OAAQ,CAACV,EAAaC,qBAAqBU,GAAoBR,EAAYC,KAAKC,MAAMK,QACtFE,QAAS,CAACZ,EAAaC,qBAAqBY,GAAWV,EAAYC,KAAKC,MAAMN,MAC9Ee,QAAS,CAAC,UAAWX,EAAYC,KAAKC,MAAMS,UAEhD,OAAOhB,EAAYD,GAAUC,EAAYD,GAAUC,EAAYC,KAE5D,SAASgB,EAA2BC,GAIvC,MAHqB,CAAC,OAAQ,UAAW,UAAW,SAAU,WAAWC,KAAIC,GAClEC,EAAmBD,KAEVE,QAAQJ,IAAU,EAEnC,SAASK,EAAmBxB,GAC/B,OAAOD,EAAmBC,GAAQ,GAE/B,SAASsB,EAAmBtB,GAC/B,OAAOD,EAAmBC,GAAQ,GAE/B,SAASyB,EAAsBC,EAAeC,EAAgBC,GACjE,MAAMC,EAAkB,gBACxB,OAAQF,GACJ,IAAK,QACD,MAAO,GACX,IAAK,SACD,OAAQD,GACJ,IAAK,UAIL,IAAK,UACD,OAAOE,EAAqBC,EAAkB,GAHlD,IAAK,UACD,MAAO,eAGX,QACI,MAAO,GAEnB,QACI,OAAQH,GACJ,IAAK,UAEL,IAAK,UACD,OAAOG,EACX,IAAK,UACD,MAAO,eACX,QACI,MAAO,KA0CpB,MAAMC,UAAiBC,EAC1BC,cACIC,QAKAC,KAAKC,KAAO,UAMZD,KAAKE,KAAO,QAMZF,KAAKG,UAAW,EAKhBH,KAAKlC,OAAS,UACdkC,KAAKI,KAAOhC,EAAYC,KAAKC,MAC7BL,EAAaoC,SAASlC,EAAkBS,EAAmBJ,EAAqBE,EAAqBI,GAEzGwB,oBACIP,MAAMO,oBACNC,EAAcP,KAAM,CAAC,mBAAoBA,KAAKQ,oBAAqB,CAAC,OAAQ,WAEhFC,QAAQC,GACJX,MAAMU,QAAQC,GACdC,EAAiBD,EAAOV,KAAM,CAACA,KAAKY,eAEpCC,0BACA,MAAqB,WAAdb,KAAKE,QAAuBF,KAAKc,cAAcC,MAE1DC,SACI,OAAOC,CAAK,yCAGgB,WAAdjB,KAAKE,KACb,4EACA,kCAEU,WAAdF,KAAKE,MAAsBF,KAAKa,oBAE5BI,CAAK,GADLA,CAAK,6HAGS,YAAhBjB,KAAKlC,OACHmD,CAAK,kEAGmB,WAAdjB,KAAKE,KAAoB,KAAO,qBAC1BZ,EAAmBU,KAAKlC,kFAIxCmD,CAAK,sEAGQ7B,EAAmBY,KAAKlC,mCAEnBwB,EAAmBU,KAAKlC,kJAOXyB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,mCAG5Eb,KAAKQ,uEAGGjB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,sCAG/C,UAAdb,KAAKE,KAAmBe,CAAK,+BAAiCA,CAAK,aAEvD,UAAdjB,KAAKE,KACHe,CAAK,GACLA,CAAK,mDAEWjB,KAAKY,aAAe,SAAW,MAAMrB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,sEAK5F,WAAdb,KAAKE,MAAsBF,KAAKa,oBAE5BI,CAAK,GADLA,CAAK,oEAEK,UAAdjB,KAAKE,MAAoBF,KAAKG,SAC1Bc,CAAK,qGAG0B,WAAdjB,KAAKE,KAAoB,KAAO,iBACnC,IAAMF,KAAKkB,6BACPlB,KAAKI,KAAKe,mEAG5BF,CAAK,WAIfC,aACIlB,KAAKoB,YAAYC,MAAK,GAEfC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,KACD7B,EAAS8B,UAAW,mBAAe,GACtCF,EAAW,CACPG,EAAS,CAAEzB,KAAM0B,UAClBhC,EAAS8B,UAAW,YAAQ,GAC/BF,EAAW,CACPK,EAAM,CAAE3B,KAAM0B,OAAQE,SAAS,KAChClC,EAAS8B,UAAW,YAAQ,GAC/BF,EAAW,CACPO,KACDnC,EAAS8B,UAAW,0BAAsB,GAC7CF,EAAW,CACPG,EAAS,CAAEzB,KAAM8B,WAClBpC,EAAS8B,UAAW,gBAAY,GACnCF,EAAW,CACPG,EAAS,CAAEzB,KAAM0B,UAClBhC,EAAS8B,UAAW,cAAU,GACjCF,EAAW,CACPpB,KACDR,EAAS8B,UAAW,YAAQ,GAC/BF,EAAW,CACPS,EAAU,sBACXrC,EAAS8B,UAAW,oBAAgB,GACvCF,EAAW,CACPU,EAAa,WAAY,CAAEC,OAAQ,gBACpCvC,EAAS8B,UAAW,kBAAc,GACrCF,EAAW,CACPS,EAAU,4BAA6B,CAAEE,OAAQ,kBAClDvC,EAAS8B,UAAW,mBAAe"}
+{"version":3,"file":"alert.element.js","sources":["../../../src/alert/alert.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, property, querySlot, querySlotAll, setAttributes, syncDefinedProps, state, id, I18nService, i18n, closable, } from '@cds/core/internal';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';\nimport { successStandardIcon } from '@cds/core/icon/shapes/success-standard.js';\nimport { warningStandardIcon } from '@cds/core/icon/shapes/warning-standard.js';\nimport { errorStandardIcon } from '@cds/core/icon/shapes/error-standard.js';\nimport { helpIcon } from '@cds/core/icon/shapes/help.js';\nimport styles from './alert.element.scss';\nexport function getIconStatusTuple(status) {\n    const statusIcons = {\n        info: [ClarityIcons.getIconNameFromShape(infoStandardIcon), I18nService.keys.alert.info],\n        success: [ClarityIcons.getIconNameFromShape(successStandardIcon), I18nService.keys.alert.success],\n        warning: [ClarityIcons.getIconNameFromShape(warningStandardIcon), I18nService.keys.alert.warning],\n        danger: [ClarityIcons.getIconNameFromShape(errorStandardIcon), I18nService.keys.alert.danger],\n        unknown: [ClarityIcons.getIconNameFromShape(helpIcon), I18nService.keys.alert.info],\n        loading: ['loading', I18nService.keys.alert.loading],\n    };\n    return statusIcons[status] ? statusIcons[status] : statusIcons.info;\n}\nexport function iconShapeIsAlertStatusType(shape) {\n    const statusShapes = ['info', 'success', 'warning', 'danger', 'unknown'].map(s => {\n        return getIconStatusShape(s);\n    });\n    return statusShapes.indexOf(shape) > -1;\n}\nexport function getIconStatusLabel(status) {\n    return getIconStatusTuple(status)[1];\n}\nexport function getIconStatusShape(status) {\n    return getIconStatusTuple(status)[0];\n}\nexport function getAlertContentLayout(containerType, alertGroupType, alertGroupHasPager) {\n    const fillLayoutValue = 'align:stretch';\n    switch (alertGroupType) {\n        case 'light':\n            return '';\n        case 'banner':\n            switch (containerType) {\n                case 'wrapper':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                case 'content':\n                    return 'align:shrink';\n                case 'actions':\n                    return alertGroupHasPager ? fillLayoutValue : '';\n                default:\n                    return '';\n            }\n        default:\n            switch (containerType) {\n                case 'wrapper':\n                    return fillLayoutValue;\n                case 'content':\n                    return fillLayoutValue;\n                case 'actions':\n                    return 'align:shrink';\n                default:\n                    return '';\n            }\n    }\n}\n/**\n * Alerts are banners that communicate a message with a severity attached to it.\n * They grab the user’s attention to provide critical information needed in context.\n *\n * Alerts outside of a cds-alert-group or cds-app-alert-group component will be\n * displayed as a \"lightweight alert\". Lightweight alerts, by default, provide no\n * close button component and they inherit no status (a.k.a. success, danger, etc.).\n *\n * Alerts inside a cds-alert-group component inherit their status from the containing\n * alert group.\n *\n * Alerts inside a cds-app-alert-group component inherit their status as a default from\n * the containing app-alert group, although it can be overridden on individual alerts.\n *\n * ```typescript\n * import '@cds/core/alert/register.js';\n * ```\n *\n * ```html\n *   <cds-alert>\n *     Single Alert\n *     <cds-alert-actions>\n *       buttons, links\n *     </cds-alert-actions>\n *   </cds-alert>\n * ```\n *\n * @element cds-alert\n * @slot - Content slot for inside the alert\n * @event closeChange - notify when the user has clicked the dismiss button\n * @cssprop --color\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --icon-color\n * @cssprop --close-icon-color\n * @cssprop --close-icon-color-hover\n */\nlet CdsAlert = class CdsAlert extends LitElement {\n    constructor() {\n        super();\n        /**\n         * Sets the overall height and width of the alert and icon based on value\n         * @type {default | sm}\n         */\n        this.size = 'default';\n        /**\n         * Sets up the buttons, layouts, close-button and other properties based on the alert group container\n         * Internal Use Only\n         * @private\n         */\n        this.type = 'light';\n        /**\n         * If false, the alert will not render the close button.\n         *\n         * Lightweight alerts do not display close buttons\n         */\n        this.closable = false;\n        /**\n         * Sets the color of the alert from a predefined list of statuses\n         * @type {neutral | info | success | warning | danger | alt | loading}\n         */\n        this.status = 'neutral';\n        this.i18n = I18nService.keys.alert;\n        ClarityIcons.addIcons(infoStandardIcon, errorStandardIcon, successStandardIcon, warningStandardIcon, helpIcon);\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        setAttributes(this, ['aria-describedby', this.idForAriaDescriber], ['role', 'region']);\n    }\n    updated(props) {\n        super.updated(props);\n        syncDefinedProps(props, this, [this.alertActions]);\n    }\n    get parentGroupHasPager() {\n        return this.type === 'banner' && !!this.parentElement.pager;\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host\"\n        cds-layout=\"${this.type === 'banner'\n            ? 'horizontal wrap:none gap:xs align:vertical-center align:horizontal-center'\n            : 'horizontal wrap:none gap:xs'}\"\n      >\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        <span class=\"alert-icon-wrapper\" cds-layout=\"horizontal\">\n          ${this.status === 'loading'\n            ? html `<cds-progress-circle\n                class=\"alert-spinner\"\n                status=\"info\"\n                size=\"${this.type === 'banner' ? '20' : '18'}\"\n                aria-label=\"${getIconStatusLabel(this.status)}\"\n                role=\"img\"\n                cds-layout=\"align:horizontal-center\"\n              ></cds-progress-circle>`\n            : html `<slot name=\"alert-icon\"\n                ><cds-icon\n                  class=\"alert-status-icon\"\n                  shape=\"${getIconStatusShape(this.status)}\"\n                  role=\"img\"\n                  aria-label=\"${getIconStatusLabel(this.status)}\"\n                  cds-layout=\"align:horizontal-center\"\n                ></cds-icon\n              ></slot>`}\n        </span>\n        <span\n          class=\"alert-content-wrapper\"\n          cds-layout=\"horizontal wrap:none ${getAlertContentLayout('wrapper', this.type, this.parentGroupHasPager)}\"\n        >\n          <span\n            id=\"${this.idForAriaDescriber}\"\n            role=\"status\"\n            class=\"alert-content\"\n            cds-layout=\"${getAlertContentLayout('content', this.type, this.parentGroupHasPager)}\"\n          >\n            <slot></slot>\n            ${this.type === 'light' ? html `<slot name=\"actions\"></slot>` : html ``}\n          </span>\n          ${this.type === 'light'\n            ? html ``\n            : html `<span\n                class=\"alert-actions-wrapper\"\n                cds-layout=\"${this.alertActions ? 'p-l:md' : ''} ${getAlertContentLayout('actions', this.type, this.parentGroupHasPager)}\"\n                ><slot name=\"actions\"></slot\n              ></span>`}\n        </span>\n\n        ${this.type === 'banner' && !this.parentGroupHasPager\n            ? html `<span class=\"alert-spacer\" cds-layout=\"align:stretch\">&nbsp;</span>`\n            : html ``}\n        ${this.type !== 'light' && this.closable\n            ? html `<slot name=\"close-button\">\n              <cds-internal-close-button\n                icon-size=\"${this.type === 'banner' ? '20' : '16'}\"\n                @click=\"${() => this.closableController.close(true)}\"\n                aria-label=\"${this.i18n.closeButtonAriaLabel}\"\n              ></cds-internal-close-button\n            ></slot>`\n            : html ``}\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"size\", void 0);\n__decorate([\n    state({ type: String, reflect: true })\n], CdsAlert.prototype, \"type\", void 0);\n__decorate([\n    id()\n], CdsAlert.prototype, \"idForAriaDescriber\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsAlert.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsAlert.prototype, \"status\", void 0);\n__decorate([\n    i18n()\n], CdsAlert.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('cds-alert-actions')\n], CdsAlert.prototype, \"alertActions\", void 0);\n__decorate([\n    querySlotAll('cds-icon', { assign: 'alert-icon' })\n], CdsAlert.prototype, \"alertIcons\", void 0);\n__decorate([\n    querySlot('cds-internal-close-button', { assign: 'close-button' })\n], CdsAlert.prototype, \"closeButton\", void 0);\nCdsAlert = __decorate([\n    closable({ escape: false })\n], CdsAlert);\nexport { CdsAlert };\n"],"names":["getIconStatusTuple","status","statusIcons","info","ClarityIcons","getIconNameFromShape","infoStandardIcon","I18nService","keys","alert","success","successStandardIcon","warning","warningStandardIcon","danger","errorStandardIcon","unknown","helpIcon","loading","iconShapeIsAlertStatusType","shape","map","s","getIconStatusShape","indexOf","getIconStatusLabel","getAlertContentLayout","containerType","alertGroupType","alertGroupHasPager","fillLayoutValue","CdsAlert","LitElement","constructor","super","this","size","type","closable","i18n","addIcons","connectedCallback","setAttributes","idForAriaDescriber","updated","props","syncDefinedProps","alertActions","parentGroupHasPager","parentElement","pager","render","html","closableController","close","closeButtonAriaLabel","styles","baseStyles","__decorate","property","String","prototype","state","reflect","id","Boolean","querySlot","querySlotAll","assign","escape"],"mappings":"suBAeO,SAASA,EAAmBC,GAC/B,MAAMC,EAAc,CAChBC,KAAM,CAACC,EAAaC,qBAAqBC,GAAmBC,EAAYC,KAAKC,MAAMN,MACnFO,QAAS,CAACN,EAAaC,qBAAqBM,GAAsBJ,EAAYC,KAAKC,MAAMC,SACzFE,QAAS,CAACR,EAAaC,qBAAqBQ,GAAsBN,EAAYC,KAAKC,MAAMG,SACzFE,OAAQ,CAACV,EAAaC,qBAAqBU,GAAoBR,EAAYC,KAAKC,MAAMK,QACtFE,QAAS,CAACZ,EAAaC,qBAAqBY,GAAWV,EAAYC,KAAKC,MAAMN,MAC9Ee,QAAS,CAAC,UAAWX,EAAYC,KAAKC,MAAMS,UAEhD,OAAOhB,EAAYD,GAAUC,EAAYD,GAAUC,EAAYC,KAE5D,SAASgB,EAA2BC,GAIvC,MAHqB,CAAC,OAAQ,UAAW,UAAW,SAAU,WAAWC,KAAIC,GAClEC,EAAmBD,KAEVE,QAAQJ,IAAU,EAEnC,SAASK,EAAmBxB,GAC/B,OAAOD,EAAmBC,GAAQ,GAE/B,SAASsB,EAAmBtB,GAC/B,OAAOD,EAAmBC,GAAQ,GAE/B,SAASyB,EAAsBC,EAAeC,EAAgBC,GACjE,MAAMC,EAAkB,gBACxB,OAAQF,GACJ,IAAK,QACD,MAAO,GACX,IAAK,SACD,OAAQD,GACJ,IAAK,UAIL,IAAK,UACD,OAAOE,EAAqBC,EAAkB,GAHlD,IAAK,UACD,MAAO,eAGX,QACI,MAAO,GAEnB,QACI,OAAQH,GACJ,IAAK,UAEL,IAAK,UACD,OAAOG,EACX,IAAK,UACD,MAAO,eACX,QACI,MAAO,KA0CxB,IAACC,EAAW,cAAuBC,EAClCC,cACIC,QAKAC,KAAKC,KAAO,UAMZD,KAAKE,KAAO,QAMZF,KAAKG,UAAW,EAKhBH,KAAKlC,OAAS,UACdkC,KAAKI,KAAOhC,EAAYC,KAAKC,MAC7BL,EAAaoC,SAASlC,EAAkBS,EAAmBJ,EAAqBE,EAAqBI,GAEzGwB,oBACIP,MAAMO,oBACNC,EAAcP,KAAM,CAAC,mBAAoBA,KAAKQ,oBAAqB,CAAC,OAAQ,WAEhFC,QAAQC,GACJX,MAAMU,QAAQC,GACdC,EAAiBD,EAAOV,KAAM,CAACA,KAAKY,eAEpCC,0BACA,MAAqB,WAAdb,KAAKE,QAAuBF,KAAKc,cAAcC,MAE1DC,SACI,OAAOC,CAAK,yCAGgB,WAAdjB,KAAKE,KACb,4EACA,kCAEU,WAAdF,KAAKE,MAAsBF,KAAKa,oBAE5BI,CAAK,GADLA,CAAK,6HAGS,YAAhBjB,KAAKlC,OACHmD,CAAK,kEAGmB,WAAdjB,KAAKE,KAAoB,KAAO,qBAC1BZ,EAAmBU,KAAKlC,kFAIxCmD,CAAK,sEAGQ7B,EAAmBY,KAAKlC,mCAEnBwB,EAAmBU,KAAKlC,kJAOXyB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,mCAG5Eb,KAAKQ,uEAGGjB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,sCAG/C,UAAdb,KAAKE,KAAmBe,CAAK,+BAAiCA,CAAK,aAEvD,UAAdjB,KAAKE,KACHe,CAAK,GACLA,CAAK,mDAEWjB,KAAKY,aAAe,SAAW,MAAMrB,EAAsB,UAAWS,KAAKE,KAAMF,KAAKa,sEAK5F,WAAdb,KAAKE,MAAsBF,KAAKa,oBAE5BI,CAAK,GADLA,CAAK,oEAEK,UAAdjB,KAAKE,MAAoBF,KAAKG,SAC1Bc,CAAK,mEAEwB,WAAdjB,KAAKE,KAAoB,KAAO,iBACnC,IAAMF,KAAKkB,mBAAmBC,OAAM,mBAChCnB,KAAKI,KAAKgB,4DAG1BH,CAAK,WAIJI,oBACP,MAAO,CAACC,EAAYD,KAG5BE,EAAW,CACPC,EAAS,CAAEtB,KAAMuB,UAClB7B,EAAS8B,UAAW,YAAQ,GAC/BH,EAAW,CACPI,EAAM,CAAEzB,KAAMuB,OAAQG,SAAS,KAChChC,EAAS8B,UAAW,YAAQ,GAC/BH,EAAW,CACPM,KACDjC,EAAS8B,UAAW,0BAAsB,GAC7CH,EAAW,CACPC,EAAS,CAAEtB,KAAM4B,WAClBlC,EAAS8B,UAAW,gBAAY,GACnCH,EAAW,CACPC,EAAS,CAAEtB,KAAMuB,UAClB7B,EAAS8B,UAAW,cAAU,GACjCH,EAAW,CACPnB,KACDR,EAAS8B,UAAW,YAAQ,GAC/BH,EAAW,CACPQ,EAAU,sBACXnC,EAAS8B,UAAW,oBAAgB,GACvCH,EAAW,CACPS,EAAa,WAAY,CAAEC,OAAQ,gBACpCrC,EAAS8B,UAAW,kBAAc,GACrCH,EAAW,CACPQ,EAAU,4BAA6B,CAAEE,OAAQ,kBAClDrC,EAAS8B,UAAW,mBAAe,GACtC9B,EAAW2B,EAAW,CAClBpB,EAAS,CAAE+B,QAAQ,KACpBtC"}

package/alert/alert.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var l=a`:host{--container-padding:var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)) 0;--min-height:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, calc(18 / var(--cds-global-base, 20) * 1rem));--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem)));white-space:nowrap;display:block}:host([_type=banner]){--icon-size:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem));padding:var(--container-padding)}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)));color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--cds-global-typography-body-line-height,1.42857em)}::slotted(cds-alert-actions){--action-text-color:var(--color);--action-size:var(--cds-global-typography-body-line-height, 1.42857em);display:none}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem))}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, calc(11 / var(--cds-global-base, 20) * 1rem));--letter-spacing:normal}:host([_type=banner]) .alert-content-wrapper{transform:none;min-height:var(--cds-global-space-10,calc(32 / var(--cds-global-base,20) * 1rem))}:host([_type=banner]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([_type=banner][status=warning]),:host([_type=default][status=warning]){--color:var(--cds-global-color-black, black)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-height:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));min-width:calc(var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));margin-top:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem));margin-top:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem))))}}`;export{l as default};
+import{css as a}from"lit";var t=a`:host{--container-padding:var(--cds-global-space-2, 0.125rem) 0;--min-height:var(--cds-global-space-9, 1.5rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--font-size:var(--cds-global-typography-secondary-font-size, 0.8125rem);--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--icon-size:var(--cds-global-space-8, 1.125rem);--icon-color:var(--color);width:100%}.private-host{min-height:var(--min-height);color:var(--color)}:host([_type=banner]){--icon-size:var(--cds-global-space-9, 1.5rem)}.alert-status-icon,::slotted(cds-icon){height:var(--icon-size);width:var(--icon-size);--color:var(--icon-color)}cds-internal-close-button{--color:inherit}.alert-content-wrapper,.alert-icon-wrapper{display:flex;min-height:var(--cds-global-space-6,.75rem);padding:var(--container-padding)}.alert-icon-wrapper{min-width:var(--icon-size)}.alert-content-wrapper{display:inline-flex;align-items:center;transform:translateY(var(--cds-global-space-1,.0625rem));color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--cds-global-typography-body-line-height,1.42857em)}::slotted(cds-alert-actions){--action-text-color:var(--color);--action-size:var(--cds-global-typography-body-line-height, 1.42857em);display:none}:host([_type=banner]) ::slotted(cds-alert-actions),:host([_type=default]) ::slotted(cds-alert-actions){--action-size:calc(var(--min-height) - var(--cds-global-space-4, 0.375rem));white-space:nowrap;display:block}:host([_type=default]) cds-internal-close-button{height:var(--cds-global-space-8,1.125rem)}:host([_type=default]) .alert-content-wrapper{align-items:self-start}:host([_type=light][status=info]){--icon-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_type=light][status=success]){--icon-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_type=light][status=warning]){--icon-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([_type=light][status=danger]){--icon-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=loading][_type=banner]) .alert-spinner,:host([status=loading][_type=default]) .alert-spinner{--ring-color:var(--cds-alias-object-opacity-200, rgba(0, 0, 0, 0.4))}:host([status=loading][_type=banner]) .alert-spinner{--fill-color:var(--icon-color)}:host([size=sm]:not([_type=banner])){--font-size:var(--cds-global-typography-font-size-1, 0.6875rem);--letter-spacing:normal}:host([_type=banner]) .alert-content-wrapper{transform:none;min-height:var(--cds-global-space-10,2rem)}:host([_type=banner]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([_type=banner][status=warning]),:host([_type=default][status=warning]){--color:var(--cds-global-color-construction-900, #21333b)}:host([_type=banner][status=warning]) cds-alert-actions,:host([_type=default][status=warning]) cds-alert-actions{--action-hover-text-color:var(--color);--action-text-color:var(--color)}:host([_type=banner]) .spinner{height:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));width:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));min-height:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));min-width:calc(var(--cds-global-space-8,1.125rem) + var(--cds-global-space-2,.125rem));margin-top:var(--cds-global-space-2,.125rem)}:host([_type=banner]) cds-internal-close-button{height:var(--cds-global-space-9,1.5rem);margin-top:var(--cds-global-space-3,.25rem)}@supports (-moz-appearance:none) and (text-emphasis:none){:host(:not([_type=banner]):not([size=sm])) .alert-content{transform:translateY(calc(-1*var(--cds-global-space-2,.125rem)))}}`;export{t as default};
 //# sourceMappingURL=alert.element.scss.js.map

package/badge/badge.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-neutral-shade, var(--cds-global-color-construction-700, #3a4d55));--border-width:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-font-size-1, calc(11 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-font-weight-regular, 400);--size:var(--cds-global-space-7, calc(16 / var(--cds-global-base, 20) * 1rem));--padding:0 var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-200, calc(12 / var(--cds-global-base, 20) * 1rem));--border-color:var(--background);--color:var(--cds-global-color-white, white);display:inline-block}.private-host{min-width:var(--size);min-height:var(--size);justify-content:center;border-radius:var(--border-radius);border:var(--border-width) solid var(--border-color);font-weight:var(--font-weight);letter-spacing:var(--cds-global-typography-body-letter-spacing,-.014286em);white-space:nowrap;background:var(--background);color:var(--color);padding:var(--padding);text-align:center;font-size:var(--font-size);display:flex;align-items:center}:host(:visited){color:var(--color)}:host([status=info]){--background:var(--cds-alias-status-info-shade, var(--cds-global-color-blue-800, #00608a))}:host([status=success]){--background:var(--cds-alias-status-success-shade, var(--cds-global-color-green-800, #366a0c))}:host([status=warning]){--background:var(--cds-alias-status-warning-shade, var(--cds-global-color-ochre-600, #ffa600));--color:var(--cds-global-color-black, black)}:host([status=danger]){--background:var(--cds-alias-status-danger-shade, var(--cds-global-color-red-800, #c21d00))}:host([color=blue]){--background:var(--cds-global-color-blue-800, #00608a)}:host([color=purple]){--background:var(--cds-global-color-violet-500, #ac50d3)}:host([color=orange]){--background:var(--cds-global-color-tangerine-400, #ff8e3d);--color:var(--cds-global-color-black, black)}:host([color=light-blue]){--background:var(--cds-global-color-blue-300, #66d1ff);--color:var(--cds-global-color-black, black)}`;export{o as default};
+import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-neutral-shade, var(--cds-global-color-construction-700, #3a4d55));--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--font-size:var(--cds-global-typography-font-size-1, 0.6875rem);--font-weight:var(--cds-global-typography-font-weight-regular, 400);--size:var(--cds-global-space-7, 1rem);--padding:0 var(--cds-global-space-2, 0.125rem);--border-radius:var(--cds-alias-object-border-radius-200, 0.75rem);--border-color:var(--background);--color:var(--cds-global-color-white, white);display:inline-block}.private-host{min-width:var(--size);min-height:var(--size);justify-content:center;border-radius:var(--border-radius);border:var(--border-width) solid var(--border-color);font-weight:var(--font-weight);letter-spacing:var(--cds-global-typography-body-letter-spacing,-.014286em);white-space:nowrap;background:var(--background);color:var(--color);padding:var(--padding);text-align:center;font-size:var(--font-size);display:flex;align-items:center}:host(:visited){color:var(--color)}:host([status=info]){--background:var(--cds-alias-status-info-shade, var(--cds-global-color-blue-800, #00608a))}:host([status=success]){--background:var(--cds-alias-status-success-shade, var(--cds-global-color-green-800, #366a0c))}:host([status=warning]){--background:var(--cds-alias-status-warning-shade, var(--cds-global-color-ochre-600, #ffa600));--color:var(--cds-global-color-construction-900, #21333b)}:host([status=danger]){--background:var(--cds-alias-status-danger-shade, var(--cds-global-color-red-800, #c21d00))}:host([color=blue]){--background:var(--cds-global-color-blue-800, #00608a)}:host([color=purple]){--background:var(--cds-global-color-violet-500, #ac50d3)}:host([color=orange]){--background:var(--cds-global-color-tangerine-400, #ff8e3d);--color:var(--cds-global-color-black, black)}:host([color=light-blue]){--background:var(--cds-global-color-blue-300, #66d1ff);--color:var(--cds-global-color-black, black)}`;export{o as default};
 //# sourceMappingURL=badge.element.scss.js.map

package/breadcrumb/breadcrumb.element.d.ts

@@ -12,7 +12,6 @@ import { LitElement } from 'lit';
  * </cds-breadcrumb>
  * ```
  *
- * @beta
  * @element cds-breadcrumb
  * @cssprop --font-size
  * @cssprop --font-weight

package/breadcrumb/breadcrumb.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as s,html as r}from"lit";import{createId as e,baseStyles as o,state as a,querySlot as i}from"@cds/core/internal";import l from"./breadcrumb.element.scss.js";class n extends s{constructor(){super(...arguments);this.navItems=[]}render(){return r`<div class="private-host"><ol cds-layout="horizontal gap:sm align:vertical-center">${this.slotNames.map((t=>r`<li cds-layout="horizontal gap:sm align:vertical-center"><slot name="${t}"></slot><span part="separator" aria-hidden="true">${this.separator}</span></li>`))}</ol></div><slot @slotchange="${this.assignSlots}"></slot>`}connectedCallback(){super.connectedCallback(),this.role="navigation"}get separator(){if(this.customSeparator){const t=this.customSeparator.cloneNode(!0);return t.removeAttribute("slot"),t}return r`/`}assignSlots(){this.navItems=Array.from(this.children).filter((t=>"cds-separator"!==t.getAttribute("slot"))).map((t=>(t.setAttribute("slot",e()),t)))}get slotNames(){return this.navItems.map((t=>t.slot))}static get styles(){return[o,l]}}t([a({type:Array})],n.prototype,"navItems",void 0),t([i('[slot="cds-separator"]')],n.prototype,"customSeparator",void 0);export{n as CdsBreadcrumb};
+import{__decorate as t}from"tslib";import{LitElement as s,html as r}from"lit";import{createId as e,baseStyles as o,state as a,querySlot as i}from"@cds/core/internal";import l from"./breadcrumb.element.scss.js";class n extends s{constructor(){super(...arguments);this.navItems=[]}render(){return r`<div class="private-host"><ol cds-layout="horizontal gap:xs align:vertical-center">${this.slotNames.map((t=>r`<li cds-layout="horizontal gap:xs align:vertical-center"><slot name="${t}"></slot><span part="separator" aria-hidden="true">${this.separator}</span></li>`))}</ol></div><slot @slotchange="${this.assignSlots}"></slot>`}connectedCallback(){super.connectedCallback(),this.role="navigation"}get separator(){if(this.customSeparator){const t=this.customSeparator.cloneNode(!0);return t.removeAttribute("slot"),t}return r`/`}assignSlots(){this.navItems=Array.from(this.children).filter((t=>"cds-separator"!==t.getAttribute("slot"))).map((t=>(t.setAttribute("slot",e()),t)))}get slotNames(){return this.navItems.map((t=>t.slot))}static get styles(){return[o,l]}}t([a({type:Array})],n.prototype,"navItems",void 0),t([i('[slot="cds-separator"]')],n.prototype,"customSeparator",void 0);export{n as CdsBreadcrumb};
 //# sourceMappingURL=breadcrumb.element.js.map

package/breadcrumb/breadcrumb.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.element.js","sources":["../../../src/breadcrumb/breadcrumb.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, state, querySlot } from '@cds/core/internal';\nimport styles from './breadcrumb.element.scss';\n/**\n * ```typescript\n * import '@cds/core/breadcrumb/register.js';\n * ```\n *\n * ```html\n * <cds-breadcrumb aria-label=\"breadcrumb\">\n *   <a href=\"/home\" cds-text=\"link\">Home</a>\n *   <a href=\"/parent\" cds-text=\"link\">Parent page</a>\n *   <span aria-current=\"page\">Current page</span>\n * </cds-breadcrumb>\n * ```\n *\n * @beta\n * @element cds-breadcrumb\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --color\n */\nexport class CdsBreadcrumb extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.navItems = [];\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <ol cds-layout=\"horizontal gap:sm align:vertical-center\">\n          ${this.slotNames.map(slotName => html `\n              <li cds-layout=\"horizontal gap:sm align:vertical-center\">\n                <slot name=\"${slotName}\"></slot>\n                <span part=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n              </li>\n            `)}\n        </ol>\n      </div>\n      <slot @slotchange=${this.assignSlots}></slot>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'navigation';\n    }\n    get separator() {\n        if (this.customSeparator) {\n            const separatorClone = this.customSeparator.cloneNode(true);\n            separatorClone.removeAttribute('slot');\n            return separatorClone;\n        }\n        else {\n            return html `/`;\n        }\n    }\n    assignSlots() {\n        this.navItems = Array.from(this.children)\n            .filter(c => c.getAttribute('slot') !== 'cds-separator')\n            .map(element => {\n            element.setAttribute('slot', createId());\n            return element;\n        });\n    }\n    get slotNames() {\n        return this.navItems.map(element => element.slot);\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    state({ type: Array })\n], CdsBreadcrumb.prototype, \"navItems\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-separator\"]')\n], CdsBreadcrumb.prototype, \"customSeparator\", void 0);\n"],"names":["CdsBreadcrumb","LitElement","constructor","super","this","navItems","render","html","slotNames","map","slotName","separator","assignSlots","connectedCallback","role","customSeparator","separatorClone","cloneNode","removeAttribute","Array","from","children","filter","c","getAttribute","element","setAttribute","createId","slot","styles","baseStyles","__decorate","state","type","prototype","querySlot"],"mappings":"kNA6BO,MAAMA,UAAsBC,EAC/BC,cACIC,oBACAC,KAAKC,SAAW,GAEpBC,SACI,OAAOC,CAAK,sFAGRH,KAAKI,UAAUC,KAAIC,GAAYH,CAAK,wEAElBG,uDAC8BN,KAAKO,0DAKvCP,KAAKQ,uBAG3BC,oBACIV,MAAMU,oBACNT,KAAKU,KAAO,aAEZH,gBACA,GAAIP,KAAKW,gBAAiB,CACtB,MAAMC,EAAiBZ,KAAKW,gBAAgBE,WAAU,GAEtD,OADAD,EAAeE,gBAAgB,QACxBF,EAGP,OAAOT,CAAK,IAGpBK,cACIR,KAAKC,SAAWc,MAAMC,KAAKhB,KAAKiB,UAC3BC,QAAOC,GAAgC,kBAA3BA,EAAEC,aAAa,UAC3Bf,KAAIgB,IACLA,EAAQC,aAAa,OAAQC,KACtBF,KAGXjB,gBACA,OAAOJ,KAAKC,SAASI,KAAIgB,GAAWA,EAAQG,OAErCC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAM,CAAEC,KAAMd,SACfnB,EAAckC,UAAW,gBAAY,GACxCH,EAAW,CACPI,EAAU,2BACXnC,EAAckC,UAAW,uBAAmB"}
+{"version":3,"file":"breadcrumb.element.js","sources":["../../../src/breadcrumb/breadcrumb.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 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 */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, state, querySlot } from '@cds/core/internal';\nimport styles from './breadcrumb.element.scss';\n/**\n * ```typescript\n * import '@cds/core/breadcrumb/register.js';\n * ```\n *\n * ```html\n * <cds-breadcrumb aria-label=\"breadcrumb\">\n *   <a href=\"/home\" cds-text=\"link\">Home</a>\n *   <a href=\"/parent\" cds-text=\"link\">Parent page</a>\n *   <span aria-current=\"page\">Current page</span>\n * </cds-breadcrumb>\n * ```\n *\n * @element cds-breadcrumb\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --color\n */\nexport class CdsBreadcrumb extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.navItems = [];\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <ol cds-layout=\"horizontal gap:xs align:vertical-center\">\n          ${this.slotNames.map(slotName => html `\n              <li cds-layout=\"horizontal gap:xs align:vertical-center\">\n                <slot name=\"${slotName}\"></slot>\n                <span part=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n              </li>\n            `)}\n        </ol>\n      </div>\n      <slot @slotchange=${this.assignSlots}></slot>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'navigation';\n    }\n    get separator() {\n        if (this.customSeparator) {\n            const separatorClone = this.customSeparator.cloneNode(true);\n            separatorClone.removeAttribute('slot');\n            return separatorClone;\n        }\n        else {\n            return html `/`;\n        }\n    }\n    assignSlots() {\n        this.navItems = Array.from(this.children)\n            .filter(c => c.getAttribute('slot') !== 'cds-separator')\n            .map(element => {\n            element.setAttribute('slot', createId());\n            return element;\n        });\n    }\n    get slotNames() {\n        return this.navItems.map(element => element.slot);\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    state({ type: Array })\n], CdsBreadcrumb.prototype, \"navItems\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-separator\"]')\n], CdsBreadcrumb.prototype, \"customSeparator\", void 0);\n"],"names":["CdsBreadcrumb","LitElement","constructor","super","this","navItems","render","html","slotNames","map","slotName","separator","assignSlots","connectedCallback","role","customSeparator","separatorClone","cloneNode","removeAttribute","Array","from","children","filter","c","getAttribute","element","setAttribute","createId","slot","styles","baseStyles","__decorate","state","type","prototype","querySlot"],"mappings":"kNA4BO,MAAMA,UAAsBC,EAC/BC,cACIC,oBACAC,KAAKC,SAAW,GAEpBC,SACI,OAAOC,CAAK,sFAGRH,KAAKI,UAAUC,KAAIC,GAAYH,CAAK,wEAElBG,uDAC8BN,KAAKO,0DAKvCP,KAAKQ,uBAG3BC,oBACIV,MAAMU,oBACNT,KAAKU,KAAO,aAEZH,gBACA,GAAIP,KAAKW,gBAAiB,CACtB,MAAMC,EAAiBZ,KAAKW,gBAAgBE,WAAU,GAEtD,OADAD,EAAeE,gBAAgB,QACxBF,EAGP,OAAOT,CAAK,IAGpBK,cACIR,KAAKC,SAAWc,MAAMC,KAAKhB,KAAKiB,UAC3BC,QAAOC,GAAgC,kBAA3BA,EAAEC,aAAa,UAC3Bf,KAAIgB,IACLA,EAAQC,aAAa,OAAQC,KACtBF,KAGXjB,gBACA,OAAOJ,KAAKC,SAASI,KAAIgB,GAAWA,EAAQG,OAErCC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAM,CAAEC,KAAMd,SACfnB,EAAckC,UAAW,gBAAY,GACxCH,EAAW,CACPI,EAAU,2BACXnC,EAAckC,UAAW,uBAAmB"}

package/breadcrumb/breadcrumb.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var t=o`:host{--font-size:var(--cds-global-typography-caption-font-size, calc(11 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-caption-font-weight, 400);--letter-spacing:var(--cds-global-typography-caption-letter-spacing, 0.018182em);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));display:inline-block}.private-host{font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);white-space:nowrap;color:var(--color);font-size:var(--font-size)}ol{list-style-type:none;padding:0}li:last-child [part=separator]{display:none}`;export{t as default};
+import{css as o}from"lit";var t=o`:host{--font-size:var(--cds-global-typography-caption-font-size, 0.6875rem);--font-weight:var(--cds-global-typography-caption-font-weight, 400);--letter-spacing:var(--cds-global-typography-caption-letter-spacing, 0.018182em);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));display:inline-block}.private-host{font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);white-space:nowrap;color:var(--color);font-size:var(--font-size)}ol{list-style-type:none;padding:0}li:last-child [part=separator]{display:none}`;export{t as default};
 //# sourceMappingURL=breadcrumb.element.scss.js.map

package/button/button.element.d.ts

@@ -51,7 +51,7 @@ export declare class CdsButton extends CdsBaseButton {
     /**
      * Sets the overall height and width of the button based on the following string values:
      */
-    size: 'sm' | 'md';
+    size: 'icon' | 'sm' | 'md';
     /** Sets if the button should be full width with display block */
     block: boolean;
     /**

package/button/button.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as i,getElementWidth as e,baseStyles as a,property as o}from"@cds/core/internal";import d from"./button.element.scss.js";var r;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(r||(r={}));class l extends i{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=r.default,this._disabled=!1}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(this.disabled=!0)}update(t){t.has("loadingState")&&(this.isDefaultLoadingState(t.get("loadingState"))&&(this._disabled=this.disabled),void 0!==t.get("loadingState")&&(this.isDefaultLoadingState(this.loadingState)?this.enableButton():this.disableButton())),super.update(t)}render(){return s`<div class="private-host" cds-layout="horizontal gap:sm wrap:none align:center">${this.loadingState===r.success?s`<cds-icon shape="check" status="success" size="18"></cds-icon>`:""} ${this.loadingState===r.error?s`<cds-icon shape="error-standard" status="danger" size="18"></cds-icon>`:""} ${this.loadingState===r.loading?s`<cds-progress-circle .size="${"sm"===this.size?"12":"18"}" status="info"></cds-progress-circle>`:""} ${this.loadingState===r.default?s`<slot></slot>`:""}</div>`}isDefaultLoadingState(t){return t===r.default}disableButton(){this.style.width=e(this),this.disabled=!0}enableButton(){this.style.removeProperty("width"),this.disabled=this._disabled}}l.styles=[a,d],t([o({type:String})],l.prototype,"action",void 0),t([o({type:String})],l.prototype,"status",void 0),t([o({type:String})],l.prototype,"size",void 0),t([o({type:Boolean})],l.prototype,"block",void 0),t([o({type:String})],l.prototype,"loadingState",void 0);export{l as CdsButton,r as ClrLoadingState};
+import{__decorate as t}from"tslib";import{html as s}from"lit";import{CdsBaseButton as i,getElementWidth as e,baseStyles as a,property as o}from"@cds/core/internal";import d from"./button.element.scss.js";var r;!function(t){t.default="default",t.loading="loading",t.success="success",t.error="error"}(r||(r={}));class l extends i{constructor(){super(...arguments);this.action="solid",this.status="primary",this.size="md",this.block=!1,this.loadingState=r.default,this._disabled=!1}firstUpdated(t){super.firstUpdated(t),this.isDefaultLoadingState(this.loadingState)||(this.disabled=!0)}update(t){t.has("loadingState")&&(this.isDefaultLoadingState(t.get("loadingState"))&&(this._disabled=this.disabled),void 0!==t.get("loadingState")&&(this.isDefaultLoadingState(this.loadingState)?this.enableButton():this.disableButton())),super.update(t)}render(){return s`<div class="private-host" cds-layout="horizontal gap:xs wrap:none align:center">${this.loadingState===r.success?s`<cds-icon shape="check" status="success" size="18"></cds-icon>`:""} ${this.loadingState===r.error?s`<cds-icon shape="error-standard" status="danger" size="18"></cds-icon>`:""} ${this.loadingState===r.loading?s`<cds-progress-circle .size="${"sm"===this.size?"12":"18"}" status="info"></cds-progress-circle>`:""} ${this.loadingState===r.default?s`<slot></slot>`:""}</div>`}isDefaultLoadingState(t){return t===r.default}disableButton(){this.style.width=e(this),this.disabled=!0}enableButton(){this.style.removeProperty("width"),this.disabled=this._disabled}}l.styles=[a,d],t([o({type:String})],l.prototype,"action",void 0),t([o({type:String})],l.prototype,"status",void 0),t([o({type:String})],l.prototype,"size",void 0),t([o({type:Boolean})],l.prototype,"block",void 0),t([o({type:String})],l.prototype,"loadingState",void 0);export{l as CdsButton,r as ClrLoadingState};
 //# sourceMappingURL=button.element.js.map