@cds/core 5.6.1 → 6.0.0-next.0

package/dropdown/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sources":["../../../src/dropdown/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsDropdown"],"mappings":"+GAOAA,EAAsB,eAAgBC"}

package/forms/control/control.element.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{query as i}from"lit/decorators/query.js";import{getElementLanguageDirection as o,baseStyles as a,hasAriaLabelTypeAttr as l,syncProps as r,describeElementByElements as n,getElementUpdates as d,childrenUpdateComplete as u,pxToRem as p,updateComponentLayout as h,property as c,state as y,querySlot as f,querySlotAll as v,event as g}from"@cds/core/internal";import m from"./control.element.scss.js";import{syncHTML5Validation as b}from"../utils/validate.js";import{defaultControlWidth as L,defaultFormLayout as x,getStatusIcon as C,associateInputAndLabel as A,associateInputToDatalist as T,getCurrentMessageStatus as $,controlIsWrapped as S,formLayouts as I}from"../utils/index.js";var k;!function(t){t.default="default",t.ariaLabel="aria-label",t.inputGroup="input-group",t.hiddenLabel="hidden-label"}(k||(k={}));class w extends e{constructor(){super(...arguments),this.status="neutral",this.controlWidth=L,this.validate=!1,this.responsive=!0,this._layout=x,this.focused=!1,this.disabled=!1,this.readonly=!1,this.fixedControlWidth=!1,this.supportsPrefixSuffixActions=!0,this.labelLayout=k.default,this.observers=[]}get layout(){return this._layout}set layout(t){const e=this._layout;this._layout=t?t.replace("-inline",""):x,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[a,m]}get hasAriaLabelTypeAttr(){return l(this.inputControl)}get hasStatusIcon(){return this.labelLayout!==k.inputGroup&&("error"===this.status||"success"===this.status)}render(){var t;return s`${this.labelLayout===k.hiddenLabel||this.labelLayout===k.inputGroup?s`<span cds-layout="display:screen-reader-only"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></span>`:""}<div cds-layout="${"vertical"===this.layout?"vertical gap:sm":"horizontal gap:lg"} align:stretch" class="private-host ${this.isRTL?"rtl":""}">${this.primaryLabelTemplate}<div class="input-message-container" cds-layout="
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{query as i}from"lit/decorators/query.js";import{getElementLanguageDirection as o,baseStyles as a,hasAriaLabelTypeAttr as l,syncProps as r,describeElementByElements as n,getElementUpdates as d,childrenUpdateComplete as u,pxToRem as p,updateComponentLayout as h,property as c,state as y,querySlot as f,querySlotAll as v,event as g}from"@cds/core/internal";import m from"./control.element.scss.js";import{syncHTML5Validation as b}from"../utils/validate.js";import{defaultControlWidth as L,defaultFormLayout as x,getStatusIcon as C,associateInputAndLabel as A,associateInputToDatalist as T,getCurrentMessageStatus as $,controlIsWrapped as S,formLayouts as I}from"../utils/utils.js";var k;!function(t){t.default="default",t.ariaLabel="aria-label",t.inputGroup="input-group",t.hiddenLabel="hidden-label"}(k||(k={}));class w extends e{constructor(){super(...arguments),this.status="neutral",this.controlWidth=L,this.validate=!1,this.responsive=!0,this._layout=x,this.focused=!1,this.disabled=!1,this.readonly=!1,this.fixedControlWidth=!1,this.supportsPrefixSuffixActions=!0,this.labelLayout=k.default,this.observers=[]}get layout(){return this._layout}set layout(t){const e=this._layout;this._layout=t?t.replace("-inline",""):x,this.requestUpdate("layout",e)}get isRTL(){return"rtl"===o(this)}static get styles(){return[a,m]}get hasAriaLabelTypeAttr(){return l(this.inputControl)}get hasStatusIcon(){return this.labelLayout!==k.inputGroup&&("error"===this.status||"success"===this.status)}render(){var t;return s`${this.labelLayout===k.hiddenLabel||this.labelLayout===k.inputGroup?s`<span cds-layout="display:screen-reader-only"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></span>`:""}<div cds-layout="${"vertical"===this.layout?"vertical gap:sm":"horizontal gap:lg"} align:stretch" class="private-host ${this.isRTL?"rtl":""}">${this.primaryLabelTemplate}<div class="input-message-container" cds-layout="
           wrap:none
           ${"compact"===this.layout?"horizontal":"vertical"}
           ${"stretch"!==this.controlWidth||this.fixedControlWidth?"":"align:horizontal-stretch"}

package/forms/control/control.element.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var a=t`:host{contain:inherit;display:block;width:100%;--control-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}:host([layout=compact]:not([control-width=shrink])) .input-container{min-width:var(--control-width)}:host(:not([layout*=vertical]):not([control-width=shrink])) .input-message-container{flex-basis:calc(var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))*2)}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}.input-container{line-height:0;max-width:100%}.input-container.with-status-icon{max-width:calc(100% - 1.2rem)}:host([_disabled]) ::slotted([slot=input]){cursor:not-allowed}:host([control-width=shrink]){width:auto}::slotted([cds-control]){width:100%}::slotted(input){margin:0!important;width:100%}::slotted(input[readonly]){cursor:default}cds-control-action.status{height:var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem));padding-top:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host(:not([layout*=vertical])) cds-internal-control-label[action=primary],:host([layout=compact]) .messages,:host([layout=compact][status=error]) .messages,:host([layout=compact][status=success]) .messages{padding-top:var(--cds-global-space-5,calc((8 / var(--cds-global-base,20)) * 1rem))}`;export default a;
+import{css as a}from"lit";var t=a`:host{contain:inherit;display:block;width:100%;--control-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}:host([layout=compact]:not([control-width=shrink])) .input-container{min-width:var(--control-width)}:host(:not([layout*=vertical]):not([control-width=shrink])) .input-message-container{-ms-flex-preferred-size:calc(var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))*2);flex-basis:calc(var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))*2)}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}.input-container{line-height:0;max-width:100%}.input-container.with-status-icon{max-width:calc(100% - 1.2rem)}:host([_disabled]) ::slotted([slot=input]){cursor:not-allowed}:host([control-width=shrink]){width:auto}::slotted([cds-control]){width:100%}::slotted(input){margin:0!important;width:100%}::slotted(input[readonly]){cursor:default}cds-control-action.status{height:var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem));padding-top:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host(:not([layout*=vertical])) cds-internal-control-label[action=primary],:host([layout=compact]) .messages,:host([layout=compact][status=error]) .messages,:host([layout=compact][status=success]) .messages{padding-top:var(--cds-global-space-5,calc((8 / var(--cds-global-base,20)) * 1rem))}`;export default t;
 //# sourceMappingURL=control.element.scss.js.map

package/forms/control-action/control-action.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var c=a`:host{pointer-events:none;display:inline-block}:host([role=button]){cursor:pointer;min-width:var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem));pointer-events:initial}.private-host{color:var(--cds-global-typography-color-300,var(--cds-global-color-construction-800,#2d4048));font-size:var(--cds-global-typography-font-size-3,calc((13 / var(--cds-global-base,20)) * 1rem));display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;line-height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)))}::slotted(cds-icon){width:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));margin-bottom:var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem));pointer-events:none}::slotted(cds-icon[shape=angle]){height:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));width:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));margin-right:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host(:hover) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host([_disabled]) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default c;
+import{css as a}from"lit";var c=a`:host{pointer-events:none;display:inline-block}:host([role=button]){cursor:pointer;min-width:var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem));pointer-events:initial}.private-host{color:var(--cds-global-typography-color-300,var(--cds-global-color-construction-800,#2d4048));font-size:var(--cds-global-typography-font-size-3,calc((13 / var(--cds-global-base,20)) * 1rem));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)))}::slotted(cds-icon){width:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));height:calc(var(--cds-global-space-9,calc((24 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-2,calc((2 / var(--cds-global-base,20)) * 1rem)));margin-bottom:var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem));pointer-events:none}::slotted(cds-icon[shape=angle]){height:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));width:var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem));margin-right:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host(:hover) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host([_disabled]) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default c;
 //# sourceMappingURL=control-action.element.scss.js.map

package/forms/control-group/control-group.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{query as e}from"lit/decorators/query.js";import{setAttributes as i,syncProps as r,syncDefinedProps as a,describeElementByElements as l,updateComponentLayout as n,baseStyles as c,property as d,querySlot as p,querySlotAll as u,id as h,event as y}from"@cds/core/internal";import g from"./control-group.element.scss.js";import{defaultFormLayout as m,defaultControlWidth as v,getStatusIcon as b,inlineControlListIsWrapped as f,controlIsWrapped as C,getCurrentMessageStatus as L,formLayouts as $}from"../utils/index.js";class A extends o{constructor(){super(...arguments),this.status="neutral",this.layout=m,this.controlAlign="left",this.disabled=!1,this.controlWidth=v,this.responsive=!0,this.isInlineControlGroup=!1,this.isControlGroup=!0,this.observers=[]}get messagesTemplate(){return s`<div ?hidden="${0===this.messages.length}" cds-layout="horizontal align:shrink gap:sm wrap:none" class="messages-container">${this.isInlineControlGroup?"":b(this.status)}<div class="messages"><slot name="message" @slotchange="${this.updateControlMessages}"></slot></div></div>`}get controlsTemplate(){return this.isInlineControlGroup?s`<div cds-layout="horizontal gap:sm align:horizontal-stretch" class="input-container"><div class="controls" cds-layout="horizontal align:horizontal-stretch wrap:none"><slot name="controls"></slot></div>${b(this.status)}</div>`:s`<div cds-layout="horizontal align:shrink" class="input-container"><div class="controls" cds-layout="${this.inlineControlLayout}"><slot name="controls"></slot></div></div>`}get inlineControlLayout(){return`${this.layout.includes("inline")||"compact"===this.layout?"horizontal gap:md":"vertical gap:sm"} ${this.layout.includes("vertical")?"":"wrap:none"}`}get primaryLabelLayout(){return this.layout.includes("vertical")?"vertical gap:sm":"horizontal gap:lg"}get controlMessageLayout(){return("compact"===this.layout?"horizontal":"vertical")+" gap:sm wrap:none align:stretch"}render(){return s`<div class="private-host" cds-layout="${this.primaryLabelLayout}"><cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:top" action="primary"><slot name="label"></slot></cds-internal-control-label><div class="control-message-container" cds-layout="${this.controlMessageLayout}">${this.controlsTemplate} ${this.messagesTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),i(this,["role","group"],["cds-control-group",""])}firstUpdated(t){super.firstUpdated(t),this.associateLabelAndGroup(),this.setupResponsive()}updated(t){super.updated(t),t.set("isControlGroup",!0),this.controls.forEach((t=>t.isControlGroup=!0)),this.messages.forEach((o=>r(o,this,{disabled:t.has("disabled")}))),a(t,this,Array.from(this.controls))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}get layoutStable(){return!f(Array.from(this.controls),this.layout)&&!C(this.controlSlot,this.controlLabel,this.layout)}associateLabelAndGroup(){this.setAttribute("aria-labelledby",this.groupLabelId),this.label.setAttribute("id",this.groupLabelId)}async updateControlMessages(){l(this,Array.from(this.messages)),this.status=await L(Array.from(this.messages))}setupResponsive(){if(this.responsive){const t={layouts:$,initialLayout:this.layout};this.observers.push(n(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0}))))}}}A.styles=[c,g],t([d({type:String})],A.prototype,"status",void 0),t([d({type:String})],A.prototype,"layout",void 0),t([d({type:String})],A.prototype,"controlAlign",void 0),t([d({type:Boolean})],A.prototype,"disabled",void 0),t([d({type:String})],A.prototype,"controlWidth",void 0),t([d({type:Boolean})],A.prototype,"responsive",void 0),t([p("label",{assign:"label",required:"warning",requiredMessage:"To meet a11y standards a <label> should be provided"})],A.prototype,"label",void 0),t([u("cds-control, [cds-control]")],A.prototype,"controls",void 0),t([u("cds-control-message")],A.prototype,"messages",void 0),t([e("cds-internal-control-label[action=primary]",!0)],A.prototype,"controlLabel",void 0),t([e(".controls",!0)],A.prototype,"controlSlot",void 0),t([h()],A.prototype,"groupLabelId",void 0),t([y()],A.prototype,"layoutChange",void 0);export{A as CdsInternalControlGroup};
+import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{query as e}from"lit/decorators/query.js";import{setAttributes as i,syncProps as r,syncDefinedProps as a,describeElementByElements as l,updateComponentLayout as n,baseStyles as c,property as d,querySlot as p,querySlotAll as u,id as h,event as y}from"@cds/core/internal";import g from"./control-group.element.scss.js";import{defaultFormLayout as m,defaultControlWidth as v,getStatusIcon as b,inlineControlListIsWrapped as f,controlIsWrapped as C,getCurrentMessageStatus as L,formLayouts as $}from"../utils/utils.js";class A extends o{constructor(){super(...arguments),this.status="neutral",this.layout=m,this.controlAlign="left",this.disabled=!1,this.controlWidth=v,this.responsive=!0,this.isInlineControlGroup=!1,this.isControlGroup=!0,this.observers=[]}get messagesTemplate(){return s`<div ?hidden="${0===this.messages.length}" cds-layout="horizontal align:shrink gap:sm wrap:none" class="messages-container">${this.isInlineControlGroup?"":b(this.status)}<div class="messages"><slot name="message" @slotchange="${this.updateControlMessages}"></slot></div></div>`}get controlsTemplate(){return this.isInlineControlGroup?s`<div cds-layout="horizontal gap:sm align:horizontal-stretch" class="input-container"><div class="controls" cds-layout="horizontal align:horizontal-stretch wrap:none"><slot name="controls"></slot></div>${b(this.status)}</div>`:s`<div cds-layout="horizontal align:shrink" class="input-container"><div class="controls" cds-layout="${this.inlineControlLayout}"><slot name="controls"></slot></div></div>`}get inlineControlLayout(){return`${this.layout.includes("inline")||"compact"===this.layout?"horizontal gap:md":"vertical gap:sm"} ${this.layout.includes("vertical")?"":"wrap:none"}`}get primaryLabelLayout(){return this.layout.includes("vertical")?"vertical gap:sm":"horizontal gap:lg"}get controlMessageLayout(){return("compact"===this.layout?"horizontal":"vertical")+" gap:sm wrap:none align:stretch"}render(){return s`<div class="private-host" cds-layout="${this.primaryLabelLayout}"><cds-internal-control-label .disabled="${this.disabled}" cds-layout="align:top" action="primary"><slot name="label"></slot></cds-internal-control-label><div class="control-message-container" cds-layout="${this.controlMessageLayout}">${this.controlsTemplate} ${this.messagesTemplate}</div></div>`}connectedCallback(){super.connectedCallback(),i(this,["role","group"],["cds-control-group",""])}firstUpdated(t){super.firstUpdated(t),this.associateLabelAndGroup(),this.setupResponsive()}updated(t){super.updated(t),t.set("isControlGroup",!0),this.controls.forEach((t=>t.isControlGroup=!0)),this.messages.forEach((o=>r(o,this,{disabled:t.has("disabled")}))),a(t,this,Array.from(this.controls))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}get layoutStable(){return!f(Array.from(this.controls),this.layout)&&!C(this.controlSlot,this.controlLabel,this.layout)}associateLabelAndGroup(){this.setAttribute("aria-labelledby",this.groupLabelId),this.label.setAttribute("id",this.groupLabelId)}async updateControlMessages(){l(this,Array.from(this.messages)),this.status=await L(Array.from(this.messages))}setupResponsive(){if(this.responsive){const t={layouts:$,initialLayout:this.layout};this.observers.push(n(this,t,(()=>this.layoutChange.emit(this.layout,{bubbles:!0}))))}}}A.styles=[c,g],t([d({type:String})],A.prototype,"status",void 0),t([d({type:String})],A.prototype,"layout",void 0),t([d({type:String})],A.prototype,"controlAlign",void 0),t([d({type:Boolean})],A.prototype,"disabled",void 0),t([d({type:String})],A.prototype,"controlWidth",void 0),t([d({type:Boolean})],A.prototype,"responsive",void 0),t([p("label",{assign:"label",required:"warning",requiredMessage:"To meet a11y standards a <label> should be provided"})],A.prototype,"label",void 0),t([u("cds-control, [cds-control]")],A.prototype,"controls",void 0),t([u("cds-control-message")],A.prototype,"messages",void 0),t([e("cds-internal-control-label[action=primary]",!0)],A.prototype,"controlLabel",void 0),t([e(".controls",!0)],A.prototype,"controlSlot",void 0),t([h()],A.prototype,"groupLabelId",void 0),t([y()],A.prototype,"layoutChange",void 0);export{A as CdsInternalControlGroup};
 //# sourceMappingURL=control-group.element.js.map

package/forms/control-group/control-group.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var t=a`:host{width:100%}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}.control-message-container{flex-basis:0}cds-control-action.status{height:var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem))}:host([layout=compact]) .messages,:host([layout=compact]) cds-internal-control-label[action=primary],:host([layout=horizontal-inline]) cds-internal-control-label[action=primary],:host([layout=horizontal]) cds-internal-control-label[action=primary],:host([status=error]) .messages,:host([status=success]) .messages{padding-top:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}`;export default t;
+import{css as a}from"lit";var t=a`:host{width:100%}:host([layout=compact]:not([control-width=shrink])) ::slotted(cds-control-message){--max-width:calc(var(--cds-global-layout-space-xxl, calc((96 / var(--cds-global-base, 20)) * 1rem)) * 2)}.control-message-container{-ms-flex-preferred-size:0;flex-basis:0}cds-control-action.status{height:var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem))}:host([layout=compact]) .messages,:host([layout=compact]) cds-internal-control-label[action=primary],:host([layout=horizontal-inline]) cds-internal-control-label[action=primary],:host([layout=horizontal]) cds-internal-control-label[action=primary],:host([status=error]) .messages,:host([status=success]) .messages{padding-top:var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}:host([layout*=vertical]) cds-internal-control-label{--label-width:100%}`;export default t;
 //# sourceMappingURL=control-group.element.scss.js.map

package/forms/control-inline/control-inline.element.js

@@ -1,2 +1,2 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{getElementUpdates as i,property as s,state as n,event as o}from"@cds/core/internal";import r from"./control-inline.element.scss.js";import{CdsControl as l}from"../control/control.element.js";import{getStatusIcon as a}from"../utils/index.js";class c extends l{constructor(){super(...arguments),this.controlAlign="left",this.checked=!1,this.indeterminate=!1,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,r]}get internalLabelTemplate(){return t`<cds-internal-control-label action="secondary" .disabled="${this.disabled}" cds-layout="align:vertical-center"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`}render(){var e,i;return t`<div class="private-host" cds-layout="${this.isControlGroup?"horizontal align:vertical-center":"vertical"} gap:sm"><div cds-layout="horizontal gap:sm wrap:none align:vertical-center ${"right"===this.controlAlign?"order:reverse":""}"><div role="presentation" class="input" @click="${this.selectInput}"></div><div role="presentation" focusable @click="${this.selectInput}"></div>${this.internalLabelTemplate}</div>${(null===(e=this.messages)||void 0===e?void 0:e.length)?t`<div cds-layout="horizontal wrap:none ${(null===(i=this.messages)||void 0===i?void 0:i.length)?"gap:sm":""}">${a(this.status)}<div cds-layout="align:vertical-center" class="messages"><slot name="message"></slot></div></div>`:""}</div><div cds-layout="display:screen-reader-only"><slot name="input"></slot></div>`}firstUpdated(e){super.firstUpdated(e),this.inputControl.addEventListener("change",(()=>this.checked=this.inputControl.checked)),this.observers.push(i(this.inputControl,"checked",(e=>this.checked=""===e||e)),i(this.inputControl,"indeterminate",(e=>this.indeterminate=""===e||e)))}updated(e){super.updated(e),e.has("indeterminate")&&e.get("indeterminate")!==this.indeterminate&&this.indeterminate&&(this.checked=!1),e.has("checked")&&e.get("checked")!==this.checked&&this.checked&&(this.indeterminate=!1,this.checkedChange.emit(this.checked,{bubbles:!this.isControlGroup}))}selectInput(e){this.inputControl.click(),e.preventDefault()}}e([s({type:String})],c.prototype,"controlAlign",void 0),e([n()],c.prototype,"isControlGroup",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"checked",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"indeterminate",void 0),e([o()],c.prototype,"checkedChange",void 0);export{c as CdsInternalControlInline};
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{getElementUpdates as i,property as s,state as n,event as o}from"@cds/core/internal";import r from"./control-inline.element.scss.js";import{CdsControl as l}from"../control/control.element.js";import{getStatusIcon as a}from"../utils/utils.js";class c extends l{constructor(){super(...arguments),this.controlAlign="left",this.checked=!1,this.indeterminate=!1,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,r]}get internalLabelTemplate(){return t`<cds-internal-control-label action="secondary" .disabled="${this.disabled}" cds-layout="align:vertical-center"><slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot></cds-internal-control-label>`}render(){var e,i;return t`<div class="private-host" cds-layout="${this.isControlGroup?"horizontal align:vertical-center":"vertical"} gap:sm"><div cds-layout="horizontal gap:sm wrap:none align:vertical-center ${"right"===this.controlAlign?"order:reverse":""}"><div role="presentation" class="input" @click="${this.selectInput}"></div><div role="presentation" focusable @click="${this.selectInput}"></div>${this.internalLabelTemplate}</div>${(null===(e=this.messages)||void 0===e?void 0:e.length)?t`<div cds-layout="horizontal wrap:none ${(null===(i=this.messages)||void 0===i?void 0:i.length)?"gap:sm":""}">${a(this.status)}<div cds-layout="align:vertical-center" class="messages"><slot name="message"></slot></div></div>`:""}</div><div cds-layout="display:screen-reader-only"><slot name="input"></slot></div>`}firstUpdated(e){super.firstUpdated(e),this.inputControl.addEventListener("change",(()=>this.checked=this.inputControl.checked)),this.observers.push(i(this.inputControl,"checked",(e=>this.checked=""===e||e)),i(this.inputControl,"indeterminate",(e=>this.indeterminate=""===e||e)))}updated(e){super.updated(e),e.has("indeterminate")&&e.get("indeterminate")!==this.indeterminate&&this.indeterminate&&(this.checked=!1),e.has("checked")&&e.get("checked")!==this.checked&&this.checked&&(this.indeterminate=!1,this.checkedChange.emit(this.checked,{bubbles:!this.isControlGroup}))}selectInput(e){this.inputControl.click(),e.preventDefault()}}e([s({type:String})],c.prototype,"controlAlign",void 0),e([n()],c.prototype,"isControlGroup",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"checked",void 0),e([n({type:Boolean,reflect:!0})],c.prototype,"indeterminate",void 0),e([o()],c.prototype,"checkedChange",void 0);export{c as CdsInternalControlInline};
 //# sourceMappingURL=control-inline.element.js.map

package/forms/form-group/form-group.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as e}from"lit";import{baseStyles as s,elementVisible as r,syncDefinedProps as i,childrenUpdateComplete as l,elementResize as n,pxToRem as a,property as p,querySlotAll as d}from"@cds/core/internal";import{defaultFormLayout as h,getLargestPrimaryLabelWidth as c,isVerticalLayout as u}from"../utils/index.js";import y from"./form-group.element.scss.js";class m extends o{constructor(){super(...arguments),this.layout=h,this.responsive=!0,this.validate=!1,this.observers=[]}get controlsAndGroups(){return[...Array.from(this.groups),...Array.from(this.controls)]}static get styles(){return[s,y]}render(){return e`<div class="private-host" cds-layout="vertical gap:${"compact"===this.layout?"md":"lg"}"><slot></slot></div>`}firstUpdated(t){super.firstUpdated(t),this.syncLayouts(),this.setControlLabelWidths(),this.observers.push(r(this,(()=>this.setControlLabelWidths())))}updated(t){super.updated(t),i(t,this,this.controlsAndGroups)}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}async setControlLabelWidths(){"horizontal"!==this.layout&&"horizontal-inline"!==this.layout&&"compact"!==this.layout||(await l(this.controlsAndGroups),this.style.setProperty("--internal-label-min-width",await c(this.controlsAndGroups)),n(this,(()=>this.style.setProperty("--internal-label-max-width",a(this.getBoundingClientRect().width)))))}syncLayouts(){this.addEventListener("layoutChange",(t=>{t.preventDefault(),!this.overflowElement&&u(t.detail)&&this.collapseForm(t.target),t.target!==this.overflowElement||u(t.detail)||this.expandForm(t.detail)}))}collapseForm(t){this.overflowElement=t,this.responsive=!1,this.layout="vertical",t.updateComplete.then((()=>t.responsive=!0))}expandForm(t){this.responsive=!0,this.overflowElement=null,this.layout=t}}t([p({type:String})],m.prototype,"layout",void 0),t([p({type:String})],m.prototype,"controlWidth",void 0),t([p({type:Boolean})],m.prototype,"responsive",void 0),t([p({type:Boolean})],m.prototype,"validate",void 0),t([d("[cds-control]")],m.prototype,"controls",void 0),t([d("[cds-control-group]")],m.prototype,"groups",void 0);export{m as CdsFormGroup};
+import{__decorate as t}from"tslib";import{LitElement as o,html as s}from"lit";import{baseStyles as e,elementVisible as r,syncDefinedProps as i,childrenUpdateComplete as l,elementResize as a,pxToRem as n,property as p,querySlotAll as d}from"@cds/core/internal";import{defaultFormLayout as h,getLargestPrimaryLabelWidth as c,isVerticalLayout as u}from"../utils/utils.js";import y from"./form-group.element.scss.js";class m extends o{constructor(){super(...arguments),this.layout=h,this.responsive=!0,this.validate=!1,this.observers=[]}get controlsAndGroups(){return[...Array.from(this.groups),...Array.from(this.controls)]}static get styles(){return[e,y]}render(){return s`<div class="private-host" cds-layout="vertical gap:${"compact"===this.layout?"md":"lg"}"><slot></slot></div>`}firstUpdated(t){super.firstUpdated(t),this.syncLayouts(),this.setControlLabelWidths(),this.observers.push(r(this,(()=>this.setControlLabelWidths())))}updated(t){super.updated(t),i(t,this,this.controlsAndGroups)}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t.disconnect()))}async setControlLabelWidths(){"horizontal"!==this.layout&&"horizontal-inline"!==this.layout&&"compact"!==this.layout||(await l(this.controlsAndGroups),this.style.setProperty("--internal-label-min-width",await c(this.controlsAndGroups)),a(this,(()=>this.style.setProperty("--internal-label-max-width",n(this.getBoundingClientRect().width)))))}syncLayouts(){this.addEventListener("layoutChange",(t=>{t.preventDefault(),!this.overflowElement&&u(t.detail)&&this.collapseForm(t.target),t.target!==this.overflowElement||u(t.detail)||this.expandForm(t.detail)}))}collapseForm(t){this.overflowElement=t,this.responsive=!1,this.layout="vertical",t.updateComplete.then((()=>t.responsive=!0))}expandForm(t){this.responsive=!0,this.overflowElement=null,this.layout=t}}t([p({type:String})],m.prototype,"layout",void 0),t([p({type:String})],m.prototype,"controlWidth",void 0),t([p({type:Boolean})],m.prototype,"responsive",void 0),t([p({type:Boolean})],m.prototype,"validate",void 0),t([d("[cds-control]")],m.prototype,"controls",void 0),t([d("[cds-control-group]")],m.prototype,"groups",void 0);export{m as CdsFormGroup};
 //# sourceMappingURL=form-group.element.js.map

package/forms/utils/{index.js → utils.js}

@@ -1,2 +1,2 @@
 import{html as t}from"lit";import{createId as n,pxToRem as i}from"@cds/core/internal";const e=["vertical","vertical-inline","horizontal","horizontal-inline","compact"],o="horizontal",r="stretch";function l(t,n){t&&n&&(a(t),n.setAttribute("for",t.id))}function c(t,n){n&&(a(t),n.id=t.id+"-datalist",t.setAttribute("list",n.id))}function a(t){t.id.length||(t.id=n())}const u={"horizontal-inline":"horizontal","vertical-inline":"vertical",horizontal:"horizontal",vertical:"vertical",compact:"compact"};function s(n){return t`${"neutral"!==n?t`<cds-control-action readonly="readonly" class="status" cds-layout="align:shrink"><cds-icon status="${"error"===n?"danger":"success"}" shape="${"error"===n?"exclamation-circle":"check-circle"}" size="16" inner-offset="${4}"></cds-icon></cds-control-action>`:""}`}async function d(t){return Promise.all(t.map((t=>t.updateComplete))).then((()=>{const n=t.filter((t=>{var n;return"primary"===(null===(n=t.controlLabel)||void 0===n?void 0:n.action)}));return i(Math.max(...n.map((t=>t.controlLabel.getBoundingClientRect().width))))}))}function h(t,n,i){return"vertical"!==i&&"vertical-inline"!==i&&t.getBoundingClientRect().top>(null==n?void 0:n.getBoundingClientRect().top)+12}function p(t,n){const i=t[0],e=t[t.length-1];return("vertical-inline"===n||"horizontal-inline"===n)&&e.getBoundingClientRect().top>i.getBoundingClientRect().top}function f(t){return"vertical"===t||"vertical-inline"===t}async function v(t){const n=t.find((t=>"neutral"!==t.status));return await(null==n?void 0:n.updateComplete),n&&!n.hidden?n.status:"neutral"}export{a as assignInputId,l as associateInputAndLabel,c as associateInputToDatalist,h as controlIsWrapped,r as defaultControlWidth,o as defaultFormLayout,e as formLayouts,v as getCurrentMessageStatus,d as getLargestPrimaryLabelWidth,s as getStatusIcon,p as inlineControlListIsWrapped,f as isVerticalLayout,u as layoutGroupToControlMapper};
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=utils.js.map

package/forms/utils/{index.js.map → utils.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/forms/utils/index.ts"],"sourcesContent":null,"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","assignInputId","setAttribute","id","associateInputToDatalist","datalist","length","createId","layoutGroupToControlMapper","horizontal-inline","vertical-inline","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","_a","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","hidden"],"mappings":"sFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,GACtCD,GAASC,IACTC,EAAcF,GACdC,EAAME,aAAa,MAAOH,EAAMI,KAGjC,SAASC,EAAyBL,EAAOM,GACxCA,IACAJ,EAAcF,GACdM,EAASF,GAAQJ,EAAMI,GAAT,YACdJ,EAAMG,aAAa,OAAQG,EAASF,KAGrC,SAASF,EAAcF,GACrBA,EAAMI,GAAGG,SACVP,EAAMI,GAAKI,KAGP,MAACC,EAA6B,CACtCC,oBAAqB,aACrBC,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,sGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,sCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,IAAO,IAAIK,EAAI,MAAkF,aAAhD,QAAzBA,EAAKL,EAAEM,oBAAiC,IAAPD,OAAgB,EAASA,EAAGE,WAC3H,OAAOC,EAAQC,KAAKC,OAAOP,EAAcJ,KAAIC,GAAKA,EAAEM,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBrC,EAAOC,EAAOqC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACAtC,EAAMmC,wBAAwBI,KAAOtC,MAAAA,OAAqC,EAASA,EAAMkC,wBAAwBI,KAAO,GAGzH,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAelC,OAAS,GAEpD,OADkC,oBAAX+B,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASK,EAAiBN,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAK7BpB,eAAe2B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAEjC,SAErC,aADO+B,MAAAA,OAAyC,EAASA,EAAQtB,gBAC1DsB,IAAYA,EAAQG,OAASH,EAAQ/B,OAAS"}
+{"version":3,"file":"utils.js","sources":["../../../../src/forms/utils/utils.ts"],"sourcesContent":null,"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","assignInputId","setAttribute","id","associateInputToDatalist","datalist","length","createId","layoutGroupToControlMapper","horizontal-inline","vertical-inline","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","_a","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","hidden"],"mappings":"sFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,GACtCD,GAASC,IACTC,EAAcF,GACdC,EAAME,aAAa,MAAOH,EAAMI,KAGjC,SAASC,EAAyBL,EAAOM,GACxCA,IACAJ,EAAcF,GACdM,EAASF,GAAQJ,EAAMI,GAAT,YACdJ,EAAMG,aAAa,OAAQG,EAASF,KAGrC,SAASF,EAAcF,GACrBA,EAAMI,GAAGG,SACVP,EAAMI,GAAKI,KAGP,MAACC,EAA6B,CACtCC,oBAAqB,aACrBC,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,sGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,sCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,IAAO,IAAIK,EAAI,MAAkF,aAAhD,QAAzBA,EAAKL,EAAEM,oBAAiC,IAAPD,OAAgB,EAASA,EAAGE,WAC3H,OAAOC,EAAQC,KAAKC,OAAOP,EAAcJ,KAAIC,GAAKA,EAAEM,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBrC,EAAOC,EAAOqC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACAtC,EAAMmC,wBAAwBI,KAAOtC,MAAAA,OAAqC,EAASA,EAAMkC,wBAAwBI,KAAO,GAGzH,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAelC,OAAS,GAEpD,OADkC,oBAAX+B,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASK,EAAiBN,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAK7BpB,eAAe2B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAEjC,SAErC,aADO+B,MAAAA,OAAyC,EAASA,EAAQtB,gBAC1DsB,IAAYA,EAAQG,OAASH,EAAQ/B,OAAS"}

package/global.css

@@ -346,9 +346,9 @@
   --cds-alias-object-border-color:var(--cds-global-color-construction-200);
   --cds-alias-object-border-color-tint:var(--cds-global-color-construction-100);
   --cds-alias-object-border-color-shade:var(--cds-global-color-construction-300);
-  --cds-alias-object-shadow-100: 0 1px 3px 0 hsla(198, 30%, 15%, 0.5);
-  --cds-alias-object-shadow-200: 0 1px 3px 0 hsla(198, 30%, 15%, 0.3);
-  --cds-alias-object-shadow-300: 0 1px 3px 0 hsla(198, 30%, 15%, 0.2);
+  --cds-alias-object-shadow-100: 0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5);
+  --cds-alias-object-shadow-200: 0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3);
+  --cds-alias-object-shadow-300: 0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2);
   --cds-alias-object-opacity-0:hsla(0, 0%, 0%, 0);
   --cds-alias-object-opacity-100:hsla(0, 0%, 0%, 0.2);
   --cds-alias-object-opacity-200:hsla(0, 0%, 0%, 0.4);